一、CSS概念
CSS——cascading style sheets（层叠样式表）
作用：规定HTML元素如何在网页中显示
特点：实现了结构与表现相分离，提高了网页的可维护性
二、CSS语法
CSS是由选择器和声明两大部分组成，声明又是由属性和属性值组成，即：
选择器｛属性：属性值;｝
eg:
h1{color:red;}
三、样式表的创建
1.内联样式（行间或行内样式）
语法：
<标签 style=“color:red;”>hello</标签>
eg：
<h1 style="color:blue">花间一壶酒，独酌无相亲。</h1>
2.内部样式（嵌入式样式）
语法：
<style>
h1{
color: cornflowerblue;
}
</style>
注：建议将style放入body
3.外部样式表
步骤：首先创建一个后缀名为.css的外部文件，然后在HTML页面的head部分通过link标签引入
语法：
<link rel="stylesheet" href="demo.css">
注：rel用来设置引入文件和当前文件之间的关系
★★样式表的优先级
当在同一个HTML页面中出现多种样式表时，我们采取就近原则，即离被设置的元素越近，优先级越高
注：当在样式中出现 “!important”关键词时，不再遵循就近原则，优先级最高
★★link和@inport的区别
-
本质区别
link是HTML标签，除了可以引入css文件外，还能引入其他文件，@import属于css范畴的写法，只能引入css文件
-
加载顺序不同
link引入的css文件和页面同时加载，@import引入的css文件在页面加载完成后载入
-
是否有兼容性问题
link无任何兼容性问题，所有浏览器都支持，@import在IE5以下浏览器不支持
-
是否支持js改变样式
link支持js控制dom改变样式，@import不支持
四、CSS选择器
1.id选择器
语法： <标记 id=“id名”>你好</标记>
eg：
<h1 id="city">相逢何必曾相识</h1>
样式中：
#city｛color:red;}
注：a）id命名要语义化，不能是汉字、纯数字，或以数字开头，或者关键词
常用命名方法：驼峰命名法（myFavCity）
下划线连接命名法（my_fav_city）
b) id名是唯一的，不能出现同名的id
2.class选择器
语法：<标记 class=“类名”></标记>
eg:
<h1 class="myFavCity">我最喜欢的城市是北京</h1>
样式中：
.myFavCity{
color: aqua;
}
注：a）class名也要语义化，常用命名方法同id
b）我们可以给具有相同样式的元素添加相同的class名
c）当一些元素即具有相同的样式，又有某些样式不相同时，就需要用到类名词列表的用法
eg
<div class="box box1">小A</div>
样式中：
.box{
color: royalblue;
}
.box1 {
background-color: #999493;
}
3.标签选择器
语法：标记名称{属性:属性值;}
eg:
p{color:red;}
4.后代选择器（包含选择器）
语法：选择符1 选择符2{属性:属性值;}
eg:
.ul-one li {color: bisque;}
注：选择符1和选择符2必须是包含与被包含的关系，才可使用后代选择器
5.群组选择器
语法：选择符1,选择符2,选择符3{属性:属性值;}
eg：
h1,h2,h3,h4,h5,h6,strong,b{
/* 去掉加粗 */
font-weight: normal;
}
6.通配符选择器
语法： *{margin:0;padding:0;}
注：*匹配所有HTML元素
7.伪类选择器
语法：选择器:hover{属性:属性值;}
注：超链接的四个状态，按照顺序依次为
/* 超链接的四个状态 */
a:link{ /*链接的初始状态，链接没有被访问过的状态*/
color: greenyellow;
}
a:visited{ /*链接访问过后的状态 */
color: gray;
}
a:hover{ /*鼠标划过时的状态*/
color: yellow;
}
a:active{ /*鼠标按下（链接被激活时的状态）*/
color: darkred;
}
记忆方法：爱恨原则
注：实际应用中，会简写a的四个状态，如下：
a {
color: black;
/* 去掉下划线 */
text-decoration: none;
}
a:hover {
color: rgb(47, 36, 207);
}
注：可以给任意元素添加:hover的划过效果（IE6只识别a的划过）