《Web前端开发》第4章 CSS语法.pptx

;4.1.1CSS基本概念

CSS——层叠样式表（CascadingStyleSheets），用于定义网页的样式

多重样式有不同的优先级，样式之间可以相互覆盖、层叠，共同决定页面最终样式

不同的CSS样式可以使内容完全相同的页面呈现不同的效果。

;4.1.2CSS语法格式

选择器{

属性名:属性值;

属性名:属性值;

……

}

不区分大小写;【例4-1】应用CSS样式，将网页段落文本设置为统一的12像素、蓝色、粗体，结果如图4-2所示。

;涉及的CSS样式如图4-3所示。其中：

（1）选择器名称为p,则所有p元素内容都被选择出来，文字被设置为相同的样式。

（2）属性值不用加双引号，但如果值为若干单词，则要给属性值加双引号，例如，

font-family:sansserif;;4.2CSS添加方式;4.2.2内嵌样式

内嵌样式是用style标签将样式添加到HTML文件header中，样式只对当前页面起作用，格式如下：

;4.2.3单独文件

如果多个页面需要统一设置公共的样式，则应将样式定义在单独的样式表文件里，并在相关的网页中引用这个文件。

1.创建样式表文件

样式表文件为纯文本文件，文件内容为样式的设置，保存时文件后缀为.css。样式表文件如果定义网站通用样式，则文件名通常为base.css、global.css。格式如下：

;2.引用样式表文件

在需要设置样式的网页中head标签内用link直接引用这个文件，格式如下：;4.3CSS选择器;4.3.2类选择器

1.基本使用方法

类选择器名称以圆点.开头，在元素中用class属性引用。类选择器将筛选出应用了这一类别的元素。类选择器名称可能被JavaScript引用，大小写敏感。

例如，CSS样式定义类选择器big，CSS代码如下。

.big{

font-size:20px;

}

则HTML元素引用该样式，其中两个段落将文字设置为20px，代码如下。

pclass=bigHTML/p

p超文本标记语言/p

pclass=bigCSS/p

p层叠样式表/p;4.3.2类选择器

2.类选择器与元素选择器

类选择器与元素选择器可以配合使用，表示引用了该类的元素所定义的样式。例如，设置段落文本为20px，CSS代码如下。

p.big{

font-size:20px;

}

则引用该样??的p元素字号设置为20像素，div元素中文字未设置该样式，HTML代码如下。

pclass=bigHTML/p

divclass=big超文本标记语言/div;4.3.2类选择器

3.多类选择器

选择器可以是多个类选择器，引用时也可以空格将class属性取值隔开。例如定义样式.big.red表示同时引用这两种样式的元素背景会呈现灰色，CSS代码如下。

.big{

font-size:20px;

}

.red{

color:red;

}

.big.red{

background-color:#ccc;

}

将段落文字设置为20像素、红色、背景灰色则可以添加如下HTML代码实现。

pclass=bigredHTML/p;4.3.3ID选择器

ID选择器名称以#开头，在元素中用id属性引用。ID选择器名称可能被JavaScript引用，大小写敏感。

例如，CSS样式定义ID选择器center，使div区域内容居中显示，CSS代码如下。

#center{

text-align:center;

}

则HTML元素引用该样式，将div内所有段落居中显示，代码如下。

divid=center

p“前端技术构成/pp”前端开发工具/p

/div

注意，类选择器可以多次使用，ID选择器在当前页面具有唯一性。尽管ID选择器定义的样式被多次使用浏览器也可以正确解析，但结合JavaScript定位某个元素时，会有歧义。;【例4-4】应用元素选择器、类选择器、ID选择器完成如图4-7所示的页面效果。

;4.3.4选择器分组

可以用逗号隔开选择器名称，进行选择器分组，这些选择器就可以具有相同的样式。例如下面的代码可以使h1与p元素的文本都蓝色显示。

;4.3.5后代选择器

后代选择器用空格隔开选择器的名称，表示“……内的……”被设置为特定样式。例如可以设置p元素内的strong元素文字为蓝色，CSS代码如下。

pstrong{

color:blue;

}

则如下HTML代码中的“投资”会变为蓝色显示。

pem天使strong投资/strong/em是投资方式的一种/p;4.3.6子元素选择器

子元素