一，CSS的概念
Cascading Style Sheet 级联样式表
表现HTML或XHTML文件样式的计算机语言
包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
二，CSS的优势
内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录
三，CSS基本语法结构
选择器 {
声明1;
声明2; ..... }
1）style标签
<style type="text/css">
h1 {
font-size:12px;
color:#F00; }
</style>
四，HTML中引入CSS样式
1）行内样式
使用style属性引入CSS样式
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
2）内部样式表
CSS代码写在<head>的<style>标签中
<style>
h1{color: green; }
</style>
优点 ：方便在同页面中修改样式
缺点 ：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
3）外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，
有两种方式1.链接式
<head>
…… <link href="style.css" rel="stylesheet" type="text/css" />
</head>
2.导入式
<head>
<style type="text/css">
<!-- @import url("style.css"); -->
</style>
</head>
行内样式>内部样式表>外部样式表 就近原则
五，CSS基本选择器
1）标签选择器
HTML标签作为标签选择器的名称 <h1>…<h6>、<p>、<img/>
2）类选择器
<标签名 class= "类名称">标签内容</标签名>
.class { font-size:16px;}
3）ID选择器
<标签名 id= "名称">标签内容</标签名>
#id { font-size:16px;}
标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次
ID选择器>类选择器>标签选择器
六，CSS的高级选择器
1）层次选择器
2）结构伪类选择器
使用E F:nth-child(n)和E F:nth-of-type(n)的关键点
E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置
3）属性选择器
七，css选择器优先级
不同选择器的优先权重不一样，优先使用样式如下：
1，style 内联样式
2，id选择器
3，类和结构伪类选择器
4，标签选择器
5，通配选择器
继承的样式没有优先级
1）当一个元素由多种选择器的时候，需要将选择器的优先级相加之后进行比较。若是选择器的优先级是一样的，使用靠后的样式。
2）<a>的伪类： 1，：link 2，：hover 3，：visited 4，: active
优先级一样
3）其他常用伪类选择器：
:enabled 可用的时候触发
:disabled 不可用的时候触发
:not(s) 匹配不含s选择器的元素
:frist-child 父元素的第一个元素
:last-child 父元素的最后一个元素
:only-child 父元素的唯一一个元素
:checked 选中 :checked+伪元素
292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
