网页编程/CSS

目标

使用基本的 CSS 规则来设置 HTML 元素的常用属性
识别 CSS 规则应用的顺序
解决规则冲突
通过跟踪 HTML 和 CSS 源代码来绘制网页

资源

第三章幻灯片
w3schools 上的教程
w3schools 上的 CSS 参考
198.209.19.99/~blu/book_examples/ch03-css-files/index.html

CSS 语法

CSS 代表层叠样式表。CSS 文件是附加到 HTML 文件的外部/附加文件，用于对网页进行样式设置。请注意，CSS 文件的语法不同于 HTML 语法。CSS 文件包含一组规则，应用这些规则将影响它所关联的页面的外观。每个规则都以一个选择器开头，该选择器将在页面上选择多个元素，而规则的主体指定哪个属性应具有什么值。CSS 规则的通用格式如下

selector {
  property: value;
  property: value;
  ...
  property: value;
}

以下示例规则选择所有段落元素，并将文本颜色设置为红色，并将段落中的文本居中对齐。

p {
     color: red;
     text-align: center;
}

您可以在 [1] 中看到运行的示例。

如示例所示，规则的主体可以包含多个以“;”结尾的语句/声明。每个语句都是一个属性名称和值对（以“:”分隔）。

有三种方法可以将样式表附加到文件

外部样式表文件（由 <head> 中的 <link> 元素指向）
内部样式表（作为 <head> 中的 <style> 元素）
内联样式（作为元素的属性）

以下示例显示了如何将外部 CSS 文件链接到 HTML。有关其他示例，请访问 CSS 操作指南。

...
<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
...

常用属性

color

查看此示例中设置字体颜色的不同方法。

font

您可以使用此站点来查找浏览器中所有支持的字体系列。

样式文本

font

position

装饰和转换

CSS3 阴影

text-shadow

浮动图像

float

层叠规则

CSS 规则也可以嵌入到 HTML 代码中，作为标签的“style”属性（内联样式）或作为 head 元素中的脚本元素。如果我们在不同的位置指定了多个规则，但它们都影响页面上的同一个元素，会发生什么？这就是层叠（优先级）规则发挥作用的地方。以下是 CSS 位置按优先级降序排列

标签的 style 属性中的规则
head 中的脚本元素中的规则
外部 CSS 文件中的规则
从父元素继承的规则
浏览器默认知道的规则

例如，内联样式将始终优先于其他样式。如果元素没有设置内联样式，浏览器将尝试使用脚本元素中的 CSS 规则。

当来自同一位置的两个规则将相同的属性设置为不同的值时，就会发生冲突，可以通过让更具体的（紧密匹配的）规则覆盖更通用的（或继承的）规则来解决冲突，如果两个规则匹配程度相同，则最后出现的规则生效。

由 id 选择器设置的规则最具体。
由类选择器、属性选择器或伪类选择器设置的规则不太具体。
由标签选择器或伪元素选择器设置的规则最不具体。

CSS 伪类

伪类允许我们对处于特定状态的元素应用样式，例如，以下规则仅在鼠标悬停在选定元素上时才会生效。查看此参考以获取详细信息。

a:hover {
  background-color: red;
}

CSS 伪元素

CSS 伪元素用于为元素的指定部分设置样式。以下两个示例分别使用 CSS2 和 CSS3 语法。查看此参考以获取详细信息。

p:first-line {
    color: #ff0000;
}

p::first-line {
    color: #ff0000;
}

CSS3

CSS2 添加了新的选择器，例如 nth-child、inline-block、:not、+，以及在页面中嵌入字体的能力。它还提供对多列布局、透明度/不透明度、颜色渐变、阴影、圆角/边框、边框半径、动画/过渡和仿射变换（缩放、旋转、透视）的内置支持。

CSS3 颜色

CSS3 提供了三种新的颜色指定方法。查看此参考以获取详细信息。

rgba(red%, green%, blue%, opacity-value)
hsl(hue-degrees, saturation%, lightness%)
hsla(hue-degrees, saturation%, lightness%, opacity-value)