考核目标：

• 了解CSS样式表的概念及其作用
• 掌握CSS的基本语法及其使用方法
• 掌握CSS的常用属性
• 看i姐使用CSS布局的方法

1.CSS样式表的概念及其作用

CSS(Cascading Style Sheet)：层叠样式表或级联样式表，是一组格式设置规则。

作用：用于控制Web页面的外观。

2.CSS的基本语法和使用方法

CSS的定义是由三个部分构成：选择符(selector)，属性(properties)和属性的取值(values)。

语法：selector {property ： value}，如果属性值有多个单纯组成，必须在指上加引号如： p {font-family：“sans serif”

(1)选择符组

可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开。

h1，h2，h3，h4 {color ：green}

(2)类选择符

类选择符能够把相同的元素分类定义不同的样式。如下面是h1元素归为“center”类

这个标题是居中排列的

然后对其定义：

.center { text-align：center}

(3)id选择符

在HTML页面中，id参数指定了某个单一的元素，id选择符是用来只针对这个单一元素定义单独的样式。id选择符要在id名称前加上一个“#”号

下面这个例子中，id属性只匹配id=“intro”的段落元素：

p#intro{font-size:100%;font-weight:bold;color:#0000ff;background-color:transparent}

(4)包含选择符

可以单独对选择某种元素包含关系定义的样式表。

table a{font-size :10px}

在表格内的链接改变了样式，文字大小为10像素，表格外的链接文字不变

(5)样式表的层叠性

层叠性就是继承性。样式表的继承规则是外部的元素样式会被这个元素所包含的其他元素继承

div {color：red； font-size：9pt}

这个段落的文字为红色9号字，当样式表继承遇到冲突时，总是以最后定义的样式为准：

div {color:red;font-size:9pt}p {color:blue}

此时这个段落的文字为蓝色9号字

不同的选择符定义相同的元素时，要考虑不同的选择符之间的优先级。

id选择符>类选择符>HTML标记选择符

但可以用！important提升样式表的优先级

p{color:#FF0000 !important}.blue {color:#0000FF}#id1 {color:#FFFF00}

最后会依照HTML标记选择符样式为红色文字

(6)注释

/*..........*/

3.CSS的层次及其作用优先级

按照从底层到高层的顺序，样式表分为

1.行内样式表：只能作用于单个标记的内容

2.文档层样式：对文档的整个主体起作用

3.外部样式表：应用到任意数目文档的主体中

优先级：行内样式>文档样式>外部样式

(1)行内样式表：直接在元素处通过style这个属性定义的。

(2)文档层样式表：文档层次样式表说明位于文档的头部区域，能够作用于文档的整个主体。

(3)外部样式表：对多个文档起作用，实现跨页面的样式共享。例如，在default.css文件中有：

.myclass{color:yellow}然后在页面中引用该样式表文件：一般位于文档的头部位置

计算机二级Web(1)：Web技术基础(上)

计算机二级Web(2)：HTTP协议基础 (上)

计算机二级Web(3)：HTML语言基础 (上)