[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>标签内，这种方式只对当前页面有效。
<head><style>p{color:red;}</style></head><body><p>这是一段红色的文字。</p></body>2、外联式：
将CSS代码写在一个单独的.css文件中，然后通过HTML的<link>标签引入。这种方式适用于多个页面共享相同样式的情况。
<head><linkrel="stylesheet"href="styles.css"></head>styles.css文件内容：
p{color:red;}3、行内式：
将CSS样式直接写在HTML元素的style属性中。这种方式只对该元素有效，且不推荐大量使用，因为它会增加HTML的复杂度。
<pstyle="color:red;">这是一段红色的文字。</p>4.1.4 CSS的基础选择器
CSS选择器用于选择需要应用样式的HTML元素。基础选择器主要包括以下几种：1、标签选择器（元素选择器）：
根据HTML元素的标签名来选择元素。
p{color:red;}这条规则会将所有
元素的文字颜色设置为红色。2、类选择器：
通过元素的class属性来选择元素。类选择器以点（.）开头，后跟类名。
.highlight{background-color:yellow;}<pclass="highlight">这是高亮显示的文字。</p>3、ID选择器：
通过元素的id属性来选择元素。ID选择器以井号（#）开头，后跟ID名。需要注意的是，ID在HTML文档中必须是唯一的。
#unique{border:1px solid red;}<divid="unique">这是唯一的元素。</div>4、通配符选择器：
使用星号（*）作为选择器，它会匹配文档中的所有元素。
*{margin:0;padding:0;}这条规则会清除所有元素的默认边距和内边距。