第 3 章 CSS 基础 CSS(CascadingStyleSheets,层叠样式表)是一种用来定义HTML 或者 XML等结构化文档样式的计算机语言,它不仅可以静态地修饰网页,也能与各种 脚本语言协同工作,实现对网页元素的动态设置。基于CSS技术,可以将页面的 内容与表现形式分离。若要进行全局样式更新,只需简单地修改样式,即可实现 网站中对应元素样式的自动更新。 .. 3.1 CSS简介 3.1.1 基本语法 样式表由一系列CSS规则组成,规则主要由选择器和声明(一条或者多条)构 成。样式表示例如下。 selector{declaration l ; declaration 2; … ; declaration N} 选择器通常是需要改变样式的HTML元素,每条声明由一个属性和一个属 性值组成。属性是希望设置的样式属性,每个属性有一个值,属性和值之间用冒 号分隔,如下所示。 selector{property:value} 【示例3-1】 声明示例。 声明示例代码如图3-1所示,其作用是将

元素内的文字颜色定义为蓝 色,同时将字体大小设置为12像素,注意: 图3-1 声明示例 (1)值可以有不同写法和单位。 52 Web前端开发基础———HTML+CSS+JavaScript+前端框架 (2)如果值为若干单词,则需要将值放入引号内。 (3)如果不止一个声明,则需要使用分号将每个声明分隔。 (4)是否包含空格不会影响CSS在浏览器的工作效果。 (5)CSS一般对大小写不敏感。 (6)选择器可以进行分组,用逗号将需要分组的选择器分开。 【示例3-2】 用CSS定义段落颜色为蓝色。 p{color: blue;} p{color: #0000ff;} p{color: #00f;} p{color: rgb(0,0,255);} p{color: rgb(0%,0%,100%);} 被分组的选择器可共享相同的声明。示例3-3中对所有的标题元素进行了分组,设置 所有的标题元素颜色为绿色。 【示例3-3】 用CSS设置标题颜色为绿色。 h1,h2,h3,h4,h5,h6{ color: green; } 3.1.2 引入方式 当读到一个样式表时,浏览器会根据它来格式化HTML文档。CSS样式按其所在位 置可以分为行内样式、内部样式和外部样式三类。 1.行内样式 将CSS样式直接书写在HTML标签内部,称为行内样式或者内联样式,是CSS样式的 一种基本形式,如示例3-4所示。 【示例3-4】 行内样式。

行内样式

行内样式需要书写在标签的style属性中,样式属性和值之间用冒号分隔,多个样式之 间用分号分隔。 行内样式存在不足:如果一个页面中有大量标签,其中还包含很多重复标签,仍需要给 每个标签都编写行内样式,这是一件非常麻烦的事情。此外,将HTML标签与CSS样式混 杂、耦合在一起,也不利于代码的调试和修改,所以行内样式仅作为CSS样式的一种基本形 式,并不提倡在实际项目中使用。 2.内部样式 内部样式将CSS样式添加在与标签之间,并用 标签进行声明。内部样式将CSS样式与HTML标签分离,使页面更加整洁。 第3章 CSS基础 53 【示例3-5】 内部样式。 内部样式

内部样式

内部样式优于行内样式,可以实现CSS样式与HTML标签的分离。但是,内部样式只 对当前页面有效,如果多个页面中有很多相同的样式,CSS代码冗余度较大,因此内部样式 也并不提倡使用。 3.外部样式 外部样式是存储在一个单独的外部CSS文件中的CSS规则。利用网页文件头部中的 标签,该文件被链接到Web站点中的一个或多个页面上。 使用外部样式表,可通过改变一个CSS文件来改变整个站点的外观。外部样式表可以 在任何文本编辑器中被编辑,但是不能包含任何HTML标签,以“.css”扩展名进行保存。 当样式需要应用于很多页面时,外部样式表将是最理想的选择。 【示例3-6】 外部样式。 外部样式

外部样式

在这段代码中,使用元素引入外部样式,rel属性用于设置链接的关系,这里设 54 Web前端开发基础———HTML+CSS+JavaScript+前端框架 置为样式表,href属性用于设置外部样式的文件路径。 .. 3.2 CSS选择器 CSS选择器是一种模式,用于选择需要设置样式的HTML元素。使用CSS选择器可 以对HTML页面中的标签实现一对一、一对多或者多对一的控制。 CSS选择器有标签选择器、ID选择器、类选择器、复合选择器、伪元素选择器以及伪类 选择器等。 3.2.1 标签选择器 标签选择器用于控制标签的样式,是指用HTML标签名称作为选择器,然后按标签名 称为页面中某一类标签指定统一的CSS样式,创建或更改标签的CSS规则后,所有标签名 对应的元素的样式都会立即更新,语法格式如下所示。 标签名{属性1:属性值1; 属性2:属性值2; …; 属性n:属性值n;} 标签选择器的优点是能快速地为页面中同类型的标签统一样式;但同时,这也是它的缺 点:不够灵活,不能提供差异化样式。 3.2.2 ID 选择器 ID选择器通过HTML元素的ID属性对它进行唯一性标识,ID 选择器定义时名称前 加“#”,且名称必须是字母或下画线开头,不能是数字,其语法格式如下所示。 #ID 名{属性1:属性值1; 属性2:属性值2; …; 属性n:属性值n;} 【示例3-7】 CSS中ID选择器的应用。 #red {color: red;} #green {color: green;} 在上述HTML代码中,ID为red的

元素内容显示为红色,而ID为green的

元 素内容显示为绿色。 【示例3-8】 HTML中ID选择器的应用。

这个段落是红色。

这个段落是绿色。

在Web页面中,多个HTML标签可以设置相同ID,浏览器可正常解析,但是,当页面中 JavaScript根据document.getElementById("ID")定位标签时,无法准确定位,如示例3-9所示。 【示例3-9】 页面中JavaScript定位元素的示例。 第3章 CSS基础 55 页面中JavaScript 定位元素的示例

第一个ID 选择器

第二个ID 选择器

运行代码后,浏览器控制台只输出第一个ID为red的元素内容,并不能输出所有ID为 red的元素内容。 3.2.3 类选择器 类选择器是用户自定义名称的选择器,使样式作用于被class属性限定的HTML 元 素。类选择器在网页中可以应用任意多次,定义时名称前加“.”,且名称必须是字母和下画 线开头,不能是数字,其语法格式如下所示。 .类名{属性1:属性值1; 属性2:属性值2; …; 属性n:属性值n;} 类选择器可以为元素对象定义单独或相同的样式,使用时需要设置HTML 元素的 class属性,并指定属性值为类选择器的名称,具体使用方法如下所示。

这是类选择器

类选择器的使用不局限于某个元素,而是适用于所有具有class属性的元素。例如,以 上为

元素设置的类选择器同样可以作用于

元素,使用方法如下所示。

这里也可以使用类选择器

【示例3-10】 类选择器的使用方法。 56 Web前端开发基础———HTML+CSS+JavaScript+前端框架 类选择器的使用方法

红色字段

蓝色字段

H3 蓝色字段

运行这段代码后,效果如图3-2所示。 图3-2 类选择器的使用方法 类选择器可为任何具有class属性的元素设置样式。当页面中包含多个相同元素,且大 部分元素使用相同样式,个别元素使用不同样式时,可以先使用标签选择器为所有元素设置 相同样式,再使用类选择器为个别元素设置不同样式。 【示例3-11】 类选择器设置不同样式。 类选择器设置不同样式

默认段落样式

默认段落样式

特殊段落样式

默认段落样式

默认段落样式

运行代码,效果如图3-3所示。 图3-3 类选择器设置不同样式 3.2.4 复合选择器 复合选择器由两个或多个基本选择器,通过不同的方式组合而成,可选择更准确、更精 细的目标元素,包括上下文关系选择器、交集选择器和并集选择器。 1.上下文关系选择器 上下文关系选择器简称关系选择器,也称为派生选择器,常见的关系选择器有后代选择 器、子代选择器和相邻兄弟选择器。 (1)后代选择器。 后代选择器可选择元素的后代元素,语法格式如下所示。 选择器1 选择器2{属性1:属性值1; 属性2:属性值2; …; 属性n:属性值n;} 外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标 签就成为外层标签的后代。 【示例3-12】 后代选择器。 58 Web前端开发基础———HTML+CSS+JavaScript+前端框架 后代选择器

嵌套标记的颜色

没有嵌套标记的颜色 运行代码,效果如图3-4所示。 图3-4 后代选择器 (2)子代选择器。 子代选择器,也称父子选择器,是特殊的后代选择器,用来选择某元素的直接后代,语法 格式如下所示。 选择器1>选择器2{属性1:属性值1; 属性2:属性值2; …; 属性n:属性值n;} 父子选择器之间用大于号“>”分隔,子代选择器一般放在后代选择器之后,否则,后代 选择器的效果会被子代选择器覆盖,如示例3-13所示。 【示例3-13】 子代选择器。 子代选择器 运行代码,效果如图3-5所示。 图3-5 子代选择器 下述代码中,因为所有
  • 都是