Html/CSS2_了解CSS
1.div与span
简单示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div与span</title> </head> <body> 12123 <div style="border-color:#F00; border-width:1px; border-style:solid; display:block">dfjdlkjds<br/>fjkdjkf </div> 1212 <br/> <br/> abc<span style="border-color:#00F; border-width:2px; border-style:solid">你好对<br/>方减肥</span>efg </body> </html>
<div></div>
将内容放到层中,就以将这些内容当成一个整体进行处理,比如整体隐藏,整体移动等.div非常强大和常用<span></span>
div是将内容放到一个矩形的区块中,会影响布局,而span只是把一段内容定义成一个整体进行操作,但不影响布局、显示style属性中的display:
元素是否显示,可选值none(不显示),block(显示为块级元素,此元素前后会带有换行符)inline(显示为内联元素,元素前后没有换行符)等
2.样式选择器:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>样式选择器</title> <style type="text/css"> .highlight{background-color:#FF0;} .warning{font-size:50px;} input.accountno{text-align:right; color:#F00;} label.accountno{font-style:italic;} #username{background-color:#F00;} p strong{color:#F00;} h1,h2{color:#00F;} </style> <link rel="stylesheet" type="text/css" href="css3.css" /> </head> <body> <!--class选择器--> <p class="highlight">你好吗</p> <div class="warning">还行</div> <p class="highlight warning">真的吗?</p> <!--标签+class选择器--> <input type="text" class="accountno" /> <label class="accountno">33333</label> <!--id选择器--> <br/> <br/> <input type="text" id="username"/> <!--关联选择器--> <br/> <br/> <strong>关联选择器没有效果</strong> <p><strong>关联选择器会有效果</strong></p> <!--组合选择器--> <br/> <br/> <h1>标题一</h1> <h2>标题二</h2> <a href="#">超链接</a> </body> </html>css3.css
@charset "utf-8"; /* CSS Document */ @import url("css4.css");css4.css
@charset "utf-8"; /* CSS Document */ a:visited{TEXT-DECORATION:NONE} a:active{TEXT-DECORATION:NONE} a:link{TEXT-DECORATION:NONE} a:hover{TEXT-DECORATION:underline}
样式选择器:
1.标签选择器
p{...}
2.class选择器:
.开始命名,引用时标签class属性指名,标签中的style属相会覆盖class3.标签+class选择器:
针对不同的标签,实现同样的样式名对于不同的标签有不同的样式,只要在样式名前加标签名即可.4.id选择器
未指定id的元素设定样式,id前加#其实就是每一个标签中的ID属性.但是要保证ID唯一性.
ID不仅可以被css使用,还可以被JS使用.id名称在一个文档中只能被使用一次、用于一个元素
选择器的优先级:
ID>class>标签,以及就近原则
5.关联选择器
看例子
6.组合选择器
同时为多个标签设定一个样式
7.伪选择器
为标签的不同状态设定不同的样式
例如:超链接状态.
A:visited{TEXT-DECORATION:NONE} 超链接点击后状态
A:active{TEXT-DECORATION:NONE} 点击超链接时
A:link{TEXT-DECORATION:NONE} 超链接被点前状态
A:hover{TEXT-DECORATION:underline} 悬停在超链接上
在定义这些状态时有一个顺序:L V H A
