CSS3初学篇章_1
CSS 层叠样式表
不同的浏览器需要不同的前缀,虽然目前最新版本的浏览器的不需要,但为了向下兼容,前缀还是少不了。
前缀 |
浏览器 |
-webkit | chrome和safari |
-moz | firefox |
-ms | IE |
-o | opera |
CSS代码注释:
/*注释内容*/
CSS可支持多种设备,简化程序员的设计过程,加快加载速度,当然最重要的还是实现将表现与结构的分离。
CSS样式可分为3种,分别为行内引用,页内引用,页外引用(外部样式表),它们依照就近原则,优先级:
行内引用,页内引用,页外引用(外部样式表)
1、行内引用(这种引用方式是不需要选择器的)
<body style="bockground:#ccc"> <h1 style="font-size:12px; color:#ff0000;">这是一个标题</h1> </body>
2、页内引用
<head> <style type="text/css"> body { background-color:#cccccc; }
h1{
font-size:12px;
color:#ff0000;
}
</style> </head>
3、页外引用(外部样式表)
style.css : body { background-color:#cccccc; }
h1{
font-size:12px;
color:#ff0000;
}
CSS选择符
1、通配选择符*,*代表所有对象
*{ color:blue; margin:0; padding:0; }
2、元素选择符,其实就是标签作为名称的选择符
body{} h1{}
3群组选择符,对一组标签进行相同的样式定义,标签之间用逗号(,)分隔
h1,h2, h3, p { font-size:12px; font-family:arial; }
4、关系选择符,可分为4种:包含选择符、子选择符、相邻选择符、兄弟选择符,其中包含选择符与子选择符效果类似,以下图为例子解释,包含选择符选中的是被包含的所有F元素,不管嵌套多少层,只要被E包含就有效果。而子选择符选中的是,E元素的子元素F,就算E元素的子元素中存在F也没有效果。
例:
<style> div a{ background-color:#67B374; /*绿色*/ } div>a{ background-color:#E61061;/*紫红色*/ } .n+p{ background-color:#0000FF;/*蓝色*/ } div~p{ background-color:#808080;/*灰色*/ } </style> <body> <div class="n"> <a>背景色是#E61061</a> <span> <a>背景色是#67B374</a> </span> </div> <p>背景色是#0000FF</p> <p>背景色是#808080</p> <p>背景色是#808080</p> </body>
效果图: