[Web自动化] CSS基础概念和介绍

4.1 CSS基础概念和介绍

4.1.1 CSS的基本概念

CSS，全称Cascading Style Sheets（层叠样式表），是一种用来表现HTML或XML（包括各种XML方言如SVG、XHTML或XML用于已经建立的一些如MathML或RDF的应用）等文件样式的计算机语言。CSS能够对网页进行美化和布局，控制网页的字体、颜色、间距、布局等样式，使得网页的呈现更加丰富多彩和易于阅读。

4.1.2 CSS的特点

样式与内容分离：CSS将网页的样式与结构分离，使得网页的维护更加方便。网页的结构由HTML控制，而样式则由CSS控制。
丰富的样式设置：CSS支持丰富的样式设置，包括字体、颜色、背景、边框、边距、定位等，几乎可以控制网页中的所有视觉元素。
层叠性：CSS的层叠性允许为同一个元素指定多个样式规则，这些规则会根据一定的优先级（也称为权重）进行层叠，最终决定元素的呈现样式。
继承性：CSS的继承性允许子元素继承父元素的某些样式属性，这减少了重复设置样式的需要。

4.1.3 CSS的引入方式

CSS可以通过以下几种方式引入到HTML文档中：
1、内嵌式：

将CSS代码直接写在HTML文档的<style>标签内，这种方式只对当前页面有效。

html 复制代码

<head>
<style>
p { color: red; }
</style>
</head>
<body>
<p>这是一段红色的文字。</p>
</body>

2、外联式：

将CSS代码写在一个单独的.css文件中，然后通过HTML的<link>标签引入。这种方式适用于多个页面共享相同样式的情况。

html 复制代码

<head>
<link rel="stylesheet" href="styles.css">
</head>

styles.css文件内容：

css 复制代码

p { color: red; }

3、行内式：

将CSS样式直接写在HTML元素的style属性中。这种方式只对该元素有效，且不推荐大量使用，因为它会增加HTML的复杂度。

html 复制代码

<p style="color: red;">这是一段红色的文字。</p>

4.1.4 CSS的基础选择器

CSS选择器用于选择需要应用样式的HTML元素。基础选择器主要包括以下几种：
1、标签选择器（元素选择器）：

根据HTML元素的标签名来选择元素。

css 复制代码

p { color: red; }

这条规则会将所有

元素的文字颜色设置为红色。
2、类选择器：

通过元素的class属性来选择元素。类选择器以点（.）开头，后跟类名。

css 复制代码

.highlight { background-color: yellow; }

html 复制代码

<p class="highlight">这是高亮显示的文字。</p>

3、ID选择器：

通过元素的id属性来选择元素。ID选择器以井号（#）开头，后跟ID名。需要注意的是，ID在HTML文档中必须是唯一的。

css 复制代码

#unique { border: 1px solid red; }

html 复制代码

<div id="unique">这是唯一的元素。</div>

4、通配符选择器：

使用星号（*）作为选择器，它会匹配文档中的所有元素。

css 复制代码

* { margin: 0; padding: 0; }

这条规则会清除所有元素的默认边距和内边距。