来源:http://www.pdjz.qdedu.net/showarticle.asp?articleid=1959
css 层叠样式表 引入层叠样式表的方法包括: 1,外联式样式表 2,内嵌样式表 3,元素内定 4,导入样式表 外联式样式表 例:<head> <link rel="stylesheet" href="/css/default.css"> </head> <body> .... </body> </html> 属性:rel 用来说明<link>元素在这里要完成的任务是连接一个独立的css文件。而href属性给出了所要连接css文件的url地址 内嵌式样式表: 例:<html> <head> <style type="text/css"> <!-- td{font:9pt;color:red} .font105{font:10.5pt;color:blue} --> </style> </head> <body>....</body> </html> 元素内定 格式:<p style="font-size:10.5pt"> 导入式样式表 〈html> <head> <style type="text/css"> <!-- @import url(css/home.css); --> </style> <body> .... </body> </html> css的优先级 越接近目标的样式定义优先级越高,高优先级样式将继承低优先级样式的未重叠定义但覆盖重叠的定义 如果4种样式表对同一元素定义了不同的样式,那么他们的优先级顺序从高到低是,元素内定,内嵌样式表,导入样式表,外联样式表。 css结构 例:td{font-size:10.5pt;color:#666666} css样式包含两个基础部分, 选择符<td>和声明{font-size:10.5pt;color:#666666} 声明也有两部分组成: 属性font-size,color和值10.5pt,#666666 选择符分为6种 1元素选择符 当页面上多个元素的样式相同时,可以将多个元素放在一起定义,中间以逗号分开 例:td,p,li,input,select{font-size:12px;} 2class(类)选择符 例:〈head> <title>.....</title> <style type="text/css"> <!-- .red{font-size:10.5pt;color:#ff0000} --> </style> </head> <body bgcolor="#ffffff"> <p class="red">士大夫井冈山地方官</p> <p>九连环离开计划</p> </body> 还有一种方法就是限定可以应用它的页面元素 例:〈head> <title>.....</title> <style type="text/css"> <!-- h1.red{color:#ff0000} --> </style> </head> <body bgcolor="#ffffff"> <p class="red">士大夫井冈山地方官</p> <h1 class="red">九连环离开计划</h1> </body> 3 id选择符 与class选择附类似,只是把'.'换成'#' 例:<body> <head> <style type="text/css"> <!-- #select{font-size:18px;color:#0000ff} --> </style> </head> <body> <table width="250" border="1" height="50"> <tr> <td align="center" id="select">id选择符</td> </tr> </table> </body> </html> 我们看到在调用ID选择附时与CLASS选择附类似,只是将class=""换成了id="",方便页面脚本语言的调用 4 关联选择符 <body> <head> <style type="text/css"> <!-- td p{font-size:18px;color:#0000ff} --> </style> </head> <body> <table width="250" border="1" height="50"> <tr> <td align="center"><p>关联选择符</p></td> </tr> </table> <p>关联选择符</p> </body> </html> 我们设定了在元素中<td>的元素<p>所包含文字的样式,只有在两个条件都满足是,样式在会起作用, 5伪类选择符 是只能用在css选择符里,而不能用在html代码中的选择符 例: 〈html> <head> <style type="text/css"> <!-- a:link{color:#000000} a:visited{color:#cccccc} a:hover{color:#ff0000} a:active{color:#ooooff} --> </style> </head> <body> <p><a href="#">关联选择符</a><p> <p><a href="#">关联选择符</a><p> <p><a href="#">关联选择符</a><p> <p><a href="#">关联选择符</a><p> 〈/body> </html> 正确的顺序是a:link\a:visited\a:hover否则会引起页面上连接颜色混乱 6伪元素选择符 与伪类选择符定义类似,目前被大多数浏览器支持的有两个:首行伪元素(first-line)和首字符伪元素(first-letter)是用来实现首行大写和首行下沉效果的 例:首行 <html> <head> <style> <!-- p:first-line{color:red;font-size:20pt} --> </style> </hesd> <body> <p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p> </body> </html> 长度随浏览器窗口大小而改变 首字 <html> <head> <style> <!-- p:first-letter{color:red;font-size:50pt;float:left;} --> </style> </hesd> <body> <p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p> </body> </html> 以上两种都只能应用于块状元素上 css规则 一继承 例:<html> <head> <style type="text/css"> <!-- td{font-size:12pt} p{color:red} --> </style> </hesd> <body> <table width="300" border="1" height="150"> <tr> <td align="center"> <p>css规则</p> </td> </table> </body> </html> <p>为最高级<td>次一级两种css用在一个属性元素上,相同的覆盖,不同的继承, 二组合 例:td{font-size:12pt} p1{font-size:12pt} 组合后 td,.p1{font-size:12pt} 三层叠 在样式里定义过后,在表格属性中又定义一次 <html> <head> <style type="text/css"> <!-- red{color:#ff0000 limportant} --> </style> </hesd> <body> <table width="300" border="1" height="150"> <tr> <td align="center" style="color:#0000ff" class="red">决撒地方官</td> </tr> </table> </body> </html> css单位 分四大类: 1 长度单位 数值可以是整数,小数,正数,负数,0,后加单位(负值不要轻易使用) 换算关系: 1in(英寸)=6pc(派) 1in(英寸)=72pt(磅) 1in(英寸)=2.54(厘米) 1cm(厘米)=10mm(毫米) 1cm(厘米)=0.3937(英寸) 1pt(磅)=1/72in(英寸)=0.2478mm(毫米) 1pc(派)=1/6in(英寸)=我国新四号铅字的尺寸 2 百分比单位 3 颜色单位 4 url单位 |