CSS知识小结

1.CSS简介

你需要具备的知识

在继续学习之前，你需要对下⾯的知识有基本的了解：

HTML / XHTML

什么是CSS?

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示控制 HTML 元素,从⽽实现美化HTML⽹⻚。

样式通常存储在样式表中，⽬的也是为了解决内容与表现分离的问题

外部样式表(CSS⽂件)可以极⼤提⾼⼯作效率

多个样式定义可层叠为⼀，后者可以覆盖前者样式

样式层叠次序

当同⼀个 HTML 元素定义了多个样式时，应该使⽤哪个样式？

⼀般⽽⾔，所有的样式会根据下⾯的规则层叠于⼀个新的虚拟样式表中，其中数字 4 拥有最⾼的

优先权。

1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 标签内部）
4. 内联样式（在 HTML 元素内部）
   因此，内联样式（在 HTML 元素内部）拥有最⾼的优先权，这意味着它将优先于以下的样式声
   明： åå标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省
   值）。

2.CSS基础语法

CSS的语法：格式： 选择器{属性:值;属性:值;属性:值;…}

CSS中的注释：格式： /* … */

3.CSS使⽤⽅式

如何插⼊样式表

CSS是负责美化⽹⻚的，在HTML中如何使⽤css样式(HTML中引⼊CSS的⽅式):

插⼊样式表的⽅法有三种:

外部样式表(External style sheet)

内部样式表(Internal style sheet)

内联样式(Inline style)

(1). 内联⽅式（⾏内样式）

就是在HTML的标签中使⽤style属性来设置css样式

格式： 被修饰的内容

<p style="color:blue;font-family:⾪书">在HTML中如何使⽤css样式</p>
<!-- 特点：仅作⽤于本标签。-->

(2). 内部⽅式（内嵌样式）

就是在head标签中使⽤ 标签来设置css样式

<style type="text/css">
 ....css样式代码
</style>
<!-- 特点：作⽤于当前整个⻚⾯ -->

(3). 外部导⼊⽅式（外部链⼊）

3.1(推荐）就是在head标签中使⽤标签导⼊⼀个css⽂件，在作⽤于本⻚⾯，实现css样式设置

<link href="⽂件名.css" type="text/css" rel="stylesheet"/>

3.2 还可以使⽤import在style标签中导⼊css⽂件。

<style type="text/css">
 @import "style.css";
</style>

特点：作⽤于整个⽹站

优先级：当样式冲突时，就是采⽤就近原则，是值css属性离被修饰的内容最近的为主。

若没有样式冲突则采⽤叠加效果。

三种样式表总结：

4. CSS中常⽤选择器

4.1 css2的选择符(重要)

(1). html选择符（标签选择器）

就是把html标签作为选择符使⽤

如 p{…} ⽹⻚中所有p标签采⽤此样式

h2{…} ⽹⻚中所有h2标签采⽤此样式

(2). class类选择符 (使⽤点.将⾃定义名（类名）来定义的选择符)

定义： .类名{样式…} 匿名类

其他选择符名.类名{样式…}

使⽤：…

.mc{color:blue;} /* 凡是class属性值为mc的都采⽤此样式 */

p.ps{color:green;} /只有p标签中class属性值为ps的才采⽤此样式/

注意：类选择符可以在⽹⻚中重复使⽤

(3). Id选择符:

定义： #id名{样式…}

使⽤：…

注意：id选择符只在⽹⻚中使⽤⼀次.

选择符的优先级：从⼤到⼩ [ID选择符]->[class选择符]->[html选择符]->[html属性]

(4). 关联选择符（包含选择符）

格式： 选择符1 选择符2 选择符3 …{样式…}

table a{....} /*table标签⾥的a标签才采⽤此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采⽤此样式*/

(5). 组合选择符（选择符组）

格式： 选择符1,选择符2,选择符3 …{样式…} h3,h4,h5{color:green;} /h3、h4和h5都采⽤此样式/

(6). 伪类选(伪元素)择符：

格式： 标签名:伪类名{样式…}

a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* ⿏标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */