概念

CSS之前学习过程中给我的感觉是非常的美，样式可以做的非常酷，但是总体难度相对于HTML要难上许多，但是学习起来非常有意思

首先 CSS 是描述 HTML 文档样式的语言

1. Cascading Style Sheets 层叠样式表/级联样式表
2. 描述如何在屏幕、纸张或其他媒体上显示 HTML 元素（针对不同设备和屏幕尺寸的设计和布局）
3. 节省大量工作，可以同时控制多张网页的布局
4. 外部样式表存储在 CSS 文件中

---

语法 syntax

CSS 规则集（rule-set）由选择器和声明块组成 选择器指向需要设置样式的 HTML 元素 声明块包含一条或多条用分号分隔的声明 每条声明都包含一个 CSS 属性名和一个属性值，以冒号分隔 多条 CSS 声明用分号分隔，声明块用花括号括起来

---

CSS选择器

CSS 选择器大致分为5类

1. 简单选择器：名称，id，类
2. 组合选择器：特定关系
3. 伪类选择器：特定状态
4. 伪元素选择器：选取元素部分并设置样式
5. 属性选择器：属性or属性值

CSS 元素选择器 在 W3C 标准中，元素选择器又称为类型选择器 type selector p { text-align: center; color: red; }

CSS id 选择器 元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素 注意 id 名称不能以数字开头 #para1 { text-align: center; color: red; }

CSS 类选择器 类选择器选择有特定 class 属性的 HTML 元素 .class { text-align: center; color: red; } 注意类名不能以数字开头

组合 p.center { text-align: center; color }

引用多个类

p.center { text-align: center; color: red; } p.large { font-size: 300%; }

此标题不受影响

红色并居中对齐

红色并居中对齐并放大字体

.important {font-weight:bold;} .warning {font-style:italic;} .important.warning {background: silver;} 通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限，再包含其他类名也可）

通用选择器 universal selector

• { text-align: center; color:blue; }

分组选择器 h1, h2, p { text-align: center; color: red; } 通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表

声明分组 h1 {font: 28px Verdana; color: white; background: black;}

与选择器分组一样，声明分组也是一种便利的方法，可以缩短样式表，使之更清晰，也更易维护

提示：在规则的最后一个声明后也加上分号是一个好习惯 在向规则增加另一个声明时，就不必担心忘记再插入一个分号

结合选择器分组和声明分组 利用很少的语句即可定义复杂的样式 h1, h2, h3, h4, h5, h6 { color:gray; background: white; padding: 10px; border: 1px solid black; font-family: Verdana; }

属性选择器 属性选择器可以根据元素的属性及属性值来选择元素 [title] {color:red;} a[href] {color:red;}

还可以根据多个属性进行选择，只需将属性选择器链接在一起即可 将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色 a[href][title] {color: red;}

可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像 img[alt] {border: 5px solid red;} 上面这个特例更适合用来诊断而不是设计，即用来确定图像是否确实有效

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素 a[href="www.w3school.com.cn/about_us.as…"] {color: red;} a[href="www.w3school.com.cn/"][title="W…"] {color: red;}

p[class="important warning"] {color: red;} p[class~="important"] {color: red;} 如果忽略了波浪号，则说明需要完成完全值匹配

p.important 和 p[class="important"] 应用到 HTML 文档时是等价的

子串匹配属性选择器 [abc^="def"] 选择abc属性值以"def"开头的所有元素 [abc$="def"] 选择abc属性值以"def"结尾的所有元素 [abc*="def"] 选择abc属性值中包含子串"def"的所有元素 如: a[*href="w3school.com.cn"] {color: red;}

后代选择器 descendant selector 又称为包含选择器 后代选择器可以选择作为某元素后代的元素

可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用 若希望只对 h1 元素中的 em 元素应用样式 h1 em {color: red;}

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器 选择器之间的空格是一种结合符（combinator）

后代选择器的功能极其强大 可以使 HTML 中不可能实现的任务成为可能

div.sidebar {background: blue;} div.maincontent {background: white;} div.sidebar a:link {color: white;} div.maincontent a:link {color: blue;}

a含有四种状态:

1. link: a对象在未被访问前的样式
2. visited: a对象访问过后的样式
3. hover: a对象当有鼠标悬停其上的样式
4. active: a对象点击时的样式 a:hover一定要定义在a:link，a:visited的后面

后代选择器中两个元素之间的层次间隔可以是无限的

子元素选择器 Child selectors只能选择子元素 h1 > strong {color: red;}

相邻兄弟选择器 Adjacent sibling selector 可以选择紧接在另一元素后的元素，且二者具有相同父元素 例如增加紧接在h1元素后出现的段落的上边距 h1 + p {margin-top: 50px;} 选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素

• 是 相邻兄弟结合符 Adjacent sibling combinator

相邻兄弟结合符还可以结合其他结合符 html > body table + ul {margin-top: 20px} 选择紧接在table元素后面出现的所有兄弟ul元素，table元素包含在body元素中，body元素本身是html元素的子元素