1 - CSS样式
CSS 全称为“层叠样式表（Cascading Style Sheets）”。它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等用于设置页面的表现。CSS2.1是应用最广泛的，CSS3并不是一个完整的独立版本而是将不同的功能拆分成独立模块，这有利于不同功能的及时更新与发布也利于浏览器厂商的实际使用。
2 - 为何使用CSS
CSS可以将文档信息的内容和如何展现它的细节相分离。也就是可以将样式（Style标签）从它的内容分离出来避免重复且更容易维护，还可以为不同的目的，使用不同的样式而内容相同。
3 - CSS语法
CSS 规则是由两个主要的部分构成：选择器，以及一条或多条声明：
选择器：指明网页中要应用样式规则的元素
声明： 在英文大括号“{}”中的就是声明，属性和值之间用英文冒号“:”分隔。当有多条声明时，中间可以英文分号“;”分隔
p {
color: red;
text-align:center;
}
CSS注释
注释就是用来解释你的代码，并可以随意编辑它，浏览器会忽略它。
CSS注释以/*开始以*/结束
/*p标签的样式 */
p {
color: red; /* 颜色为红色*/
text-align：/*文本居中*/
}
4 - CSS样式引入
CSS样式都可以写在哪些地方？以CSS样式代码插入的形式来看基本分为三种
- 内联式CSS样式
- 嵌入式CSS样式
- 外联式CSS样式
- 内联式CSS样式
内联式CSS样式表就是把CSS代码直接写在现有的HTML标签中
<p style="color:red">这里内容是红色</p>
如有多条CSS样式代码设置可以写在一起用分号隔开。
<p style="color:red;font-size:12px">这里内容是红色</p> - 嵌入式CSS样式
嵌入式CSS样式，就是可以把CSS样式代码写在<style type="text/css"></style>标签之间
<style type="text/css">
span {
color:red;
}
</style>
- 外联式CSS样式
外联式CSS样式就是把CSS代码写在一个单独的外部文件中，这个样式文件以“.css”为扩展名，在<head>内使用<link>标签将CSS样式文件连接到HTML文件内
<link href="a.css" rel="stylesheet" type="text/css" /> - 三种方法的优先级
内联式 > 嵌入式 > 外联式
嵌入式 > 外联式的前提：嵌入式CSS样式的位置一定在外联式的后面
<link href="style.css" ...>在<style type="text/css">...</style>的前面
5 - CSS选择器
每一条css样式声明（定义）由两部分组成
选择器{
样式;
}
在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
- 标签选择器
标签选择器其实就是html代码中的标签。如<html>、<body>、<h1>、<p>
p{font-size:12px;} /* 字符大小为12像素 */
2.类选择器
.className以 . 开头，名称可包含字母，数字，-，_，但必须以字母开头。它区分大小写并可出现多次。
语法：
.类选器名称{css样式代码;}
注意：
英文圆点开头
其中类选器名称可以任意起名（但不要起中文）
/*类前面要加入一个英文圆点*/
.stress {
color:red;
}
- ID选择器
#idName以 # 开头且只可出现一次，其命名要求于 .className 相同。在很多方面，ID选择器都类似于类选择符，但也有一些区别：
为标签设置id="ID名称"，而不是class="类名称"。
ID选择符的前面是井号（#）号，而不是英文圆点（.）。
ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
<div>
<p id="special">Sample Paragraph</p>
</div>
<style type="text/css">
#special {
color: red;
}
</style>
- 通配符选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
* {color:red;}
5.伪类选择器
更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。
常用伪类选择器：
- :link IE6+
- :visited IE7+
- :hover IE6中仅可用于链接
- :active IE6/7中仅可用于链接
- :enabled IE9+
- :disabled IE9+
- :checked IE9+
- :first-child IE8+
- :last-child IE9+
- :nth-child(even) 可为 odd even 或数字 IE9+
- :nth-last-child(n) n从 0 开始计算 IE9+
- :only-child 仅选择唯一的元素 IE9+
- :only-of-type IE9+
- :first-of-type IE9+
- :last-of-type IE9+
- :nth-of-type(even) IE9+
- :nth-last-of-type(2n) IE9+
不常用伪类选择器：
- :empty 选中页面中无子元素的标签 IE9+
- :root 选择 HTML 根标签 IE9+
- :not() 参数为一般选择器 IE9+
- :target 被锚点选中的目标元素 IE9+
- :lang() 选中语言值为某类特殊值的元素 IE7+
注意：
element:nth-of-type(n) 指父元素下第 n 个 element 元素，element:nth-child(n) 指父元素下第 n 个元素且元素为 element，若不是，选择失败。具体细节请在使用时查找文档。
/* 伪类属性定义有顺序要求！ */
a:link {
color: gray;
}
a:visited {
color:red;
}
a:hover {
color: green;
/* 鼠标悬停 */
}
a:active {
color: orange;
/* 鼠标点击 */
}
- 组合选择器
- 后代选择器 .main h2 {...}，使用空格表示IE6+
- 子选择器 .main>h2 {...}，使用>表示 IE7+
- 兄弟选择器 h2+p {...}，使用+表示 IE7+
- h2~p {...}，使用~表示（此标签无需紧邻）IE7+
- 你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（
，）
/* 下面两组样式声明效果一致 */
h1 {color: red;}
h2 {color: red;}
h3 {color: red;}
h1, h2, h3 {color: red;}
网友评论