了解CSS

1 介绍

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML（包括如SVG、MathML或XHTML等XML文档）的呈现的样式表语言。CSS的主要功能是分离文档内容（由HTML或类似标记语言编写）与文档的显示样式（如字体、颜色、布局等）。这种分离使得网站的设计和维护更加容易，因为可以独立于内容来更新样式。

CSS的基本工作原理是通过选择器（Selectors）选择HTML元素，然后应用样式规则（Rules）到这些元素上。样式规则由属性和值组成，例如：

1
2
3
4
p {
    color: blue;
    font-size: 16px;
}

在这个例子中，p是选择器，选择所有的<p>（段落）元素。color和font-size是属性，blue和16px是这些属性的值。这个规则的意思是：将所有段落元素的文本颜色设置为蓝色，字体大小设置为16像素。

CSS还支持层叠（Cascading）的概念，这意味着多个样式规则可以应用于同一个元素，并且这些规则可以继承和覆盖。层叠机制决定了最终应用到元素上的样式。

此外，CSS还支持各种布局模型，如块布局（Block Layout）、行内布局（Inline Layout）、表格布局（Table Layout）、定位布局（Positioned Layout）和弹性盒布局（Flexbox Layout）以及网格布局（Grid Layout），这些布局模型使得网页设计更加灵活和强大。

总的来说，CSS是网页设计中不可或缺的一部分，它使得网页不仅能够传达信息，还能够以美观和用户友好的方式呈现。

2 语法

CSS的语法非常简单，基本上就是选择器、属性和值三者的组合。

1
2
3
4
selector {
    property: value;        
    property: value;    
}
  • selector：选择器，用于选择HTML元素。
  • property：属性，用于设置元素的样式。
  • value：值，用于设置属性的具体值。

3 选择器

CSS的选择器可以分为四种类型：

  1. 标签选择器（Tag Selector）：通过标签名选择元素，例如div、span、a等。
  2. 类选择器（Class Selector）：通过元素的class属性选择元素，例如.intro、#header等。
  3. ID选择器（ID Selector）：通过元素的id属性选择元素，例如#main等。
  4. 组合选择器（Combinator Selector）：通过元素之间的关系选择元素，例如div p、ul li a等。

4 样式规则

样式规则由属性和值组成，例如：

1
2
3
4
p {
    color: blue;
    font-size: 16px;
}

在这个例子中，p是选择器，选择所有的<p>（段落）元素。color和font-size是属性，blue和16px是这些属性的值。这个规则的意思是：将所有段落元素的文本颜色设置为蓝色，字体大小设置为16像素。

CSS还支持层叠（Cascading）的概念，这意味着多个样式规则可以应用于同一个元素，并且这些规则可以继承和覆盖。层叠机制决定了最终应用到元素上的样式。

5 层叠

CSS的层叠机制决定了最终应用到元素上的样式。CSS的层叠规则如下：

  1. 内联样式（Inline Style）：在HTML元素的style属性中设置的样式，具有最高的优先级。
  2. 内部样式（Internal Style）：在head标签中通过style标签设置的样式，具有次高的优先级。
  3. 外部样式（External Style）：在外部样式表（.css文件）中设置的样式，具有最低的优先级。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
	<title>Inline CSS</title>
	<!-- 外部样式表 -->
	<link rel="stylesheet" type="text/css" href="c:\Users\.PORJECT\CSS\CSS.css">
</head>
<style>
	/* 内联样式 */
	p {
		color: blue;
		text-align: center;
	}
</style>
<body>
	<!-- 内联样式 -->
	<h1 style="color:blue;text-align:center;">This is a heading</h1> 
	<p style="color:rgba(136, 0, 255, 0.797);text-align:center;">This is a paragraph</p>
	<p>This is a paragraph without any style applied.</p>
	<h2>end of the document</h2>
</body>
</html>
1
2
3
4
h2 {
  color: rgba(0, 255, 81, 0.685);
  text-align: center;
}

具体访问 https://www.runoob.com/css/css-tutorial.html