CSS
1. 介绍
层叠样式表:CSS(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。
层叠
多个样式修饰一个结构
子元素从父元素那里继承样式
优先级
样式表
相关样式在一起定义(封装)
2. 语法
1) 如何在html中应用css
-
定义style属性中
缺点:样式与结构冗余
优点:优先级较高
-
定义在head标签中的style标签中
缺点:样式的复用率较低
优点:样式与结构分离<head> <meta> <title></title> <link rel="stylesheet" href=""> <script></script> <style> //css样式 div { color:#fff; background:#333 } </style> </head> <body> <div></div> </body>
-
将样式定义在css文件中
优点:样式的复用率高(框架:例如bs),样式与结构分离
生成style.css文件div { color:#fff; background:#333 } b.html <head> <link rel="stylesheet" href="./style.css"> </head>
2) 规则
-
style属性:
属性名:属性值;属性名:属性值;
style标签/.css
选择器 {
属性值:属性值;
属性名:属性值;
}
3) 注释
/*注释内容*/
4) 选择器
1.核心选择器
-
标签选择器
h2 { } div {规则 }
-
id选择器
#two {} <div id="one"></div> <div id="two"></div>
-
类选择器
.second{} <div class="second"></div> <div class="second"></div>
-
逗号选择器
h1,h2,h3 {}
-
组合选择器
div#two {} 选择id为div的元素 div,#two {} 选择div元素和id为two的元素
-
普遍选择器
*{}
2. 层次选择器
-
子元素选择器
.header > a 选中class为header的元素的直接孩子元素a标签 <div class="header"> <a href=""></a> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> <div class="content"> <a href=""></a> <a href=""></a> </div>
-
后代元素选择器
.header a 选中class为header的元素的后代元素a标签