使用CSS样式表-网页设计与Web前端开发案例教程.pptxVIP

chap03使用CSS样式表-网页设计与Web前端开发案例教程-莫小梅-清华大学出版社

汇报时间：2024-01-20

汇报人：AA

CSS样式表基础

CSS样式表应用

CSS布局与定位

CSS高级特性

实战案例：使用CSS优化网页界面

CSS样式表基础

CSS定义

CSS（CascadingStyleSheets，层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等派生语言）文档样式的计算机语言。

CSS作用

CSS用于分离文档内容（writteninHTMLorasimilarmarkuplanguage）与文档表现（如布局、颜色和字体）。这种分离可以改善内容的可访问性，提供更多的布局和视觉效果控制，同时简化代码和站点维护。

CSS历史

CSS最早由哈肯·瓦伊姆·李（HåkonWiumLie）和伯特·博斯（BertBos）于1994年提出，当时他们都在W3C工作。1996年，CSS1.0成为W3C推荐标准。至今，CSS已经发展到CSS3，并持续更新和完善。

选择器

选择器用于指定应用样式的HTML元素。例如，可以使用元素选择器（如`p`选择所有段落）、类选择器（如`.my-class`选择具有特定类的元素）或ID选择器（如`#my-id`选择具有特定ID的元素）。

声明块

声明块包含一个或多个声明，用于设置元素的样式属性。每个声明由属性和值组成，例如`color:red;`将文本颜色设置为红色。

语法结构

CSS规则的基本语法结构为“选择器{声明块}”。例如，`p{color:red;}`会将所有段落的文本颜色设置为红色。

元素选择器

通过HTML元素名选择元素，例如`p`选择所有段落。

通过类名选择元素，例如`.my-class`选择具有类名“my-class”的所有元素。

通过ID选择元素，例如`#my-id`选择具有ID“my-id”的元素。注意，每个页面中的ID应该是唯一的。

通过元素的属性和值选择元素，例如`[href^=https]`选择所有链接到以“https”开头的URL的元素。

用于选择处于特定状态的元素或元素的特定部分，例如`:hover`选择鼠标悬停上的元素，`:before`和`:after`在元素内容之前和之后插入内容。

类选择器

属性选择器

伪类和伪元素选择器

ID选择器

颜色属性

如`color`用于设置文本颜色，`background-color`用于设置背景颜色。颜色值可以是颜色名（如“red”）、十六进制代码（如“#FF0000”）、RGB值（如“rgb(255,0,0)”）或RGBA值（如“rgba(255,0,0,0.5)”带透明度）。

字体属性

如`font-family`用于设置字体，`font-size`用于设置字体大小，`font-weight`用于设置字体粗细。

布局属性

如`width`和`height`用于设置元素宽度和高度，`margin`和`padding`用于设置元素外边距和内边距，`display`用于设置元素显示类型（如块级元素、行内元素或灵活盒模型）。

其他常用属性

如`text-align`用于设置文本对齐方式，`border`用于设置边框样式，`box-shadow`用于设置盒子阴影等。

CSS样式表应用

定义

将CSS样式直接写在HTML标签的style属性中。

优点

方便快捷，适用于单个元素的样式定义。

缺点

不利于样式复用和维护，当样式需要应用到多个元素时，需要重复编写相同的样式代码。

示例

pstyle=color:red;这是一段红色的文字/p

01

定义

在HTML文档的head部分中，使用style标签定义CSS样式。

02

优点

可以在一个HTML文档中定义多个元素的样式，方便复用和维护。

03

缺点

当样式需要应用到多个页面时，需要在每个页面中重复编写相同的样式代码。

01

示例

02

```html

03

head

·style

p{

color:red;

}

/head

/style

body

p这是一段红色的文字/p

/body

```

01

02

03

04

将CSS样式写在一个单独的.css文件中，然后在HTML文档中通过link标签引入该样式表。

定义

可以实现样式的复用和共享，方便维护和管理。

优点

需要额外创建一个.css文件，并在HTML文档中引入，相对于内联样式和内部样式表来说稍微繁琐一些。

缺点

在style.css文件中定义样式`p{color:red;}`，然后在HTML文档中引入该样式表`linkrel=stylesheethref=style.css`。

示例

定义

在一个CSS文件中使用@import语句导入另一个CS