网页的皮肤——CSS

1. CSS 介绍

CSS（Cascading Style Sheets）是一种样式表语言，用于描述 HTML 或 XML（包括如 SVG、XHTML 等）文档的外观和格式。CSS 允许开发者将文档的内容与其表现分离，使得网页设计更加灵活和可维护。CSS 可以应用于整个文档，也可以应用于文档的一部分。

2. 4种基本选择器

CSS 提供了多种选择器来选择 HTML 元素，以便应用样式。以下是四种基本选择器：

• 元素选择器：选择所有指定元素。

p {
   color: red;
}

• 类选择器：选择所有具有指定类的元素。

.highlight {
   background-color: yellow;
}

• ID 选择器：选择具有指定 ID 的元素。

#unique {
   font-size: 20px;
}

• 通配符选择器：选择所有元素。

* {
   margin: 0;
   padding: 0;
}

3. 5种符号选择器

符号选择器用于选择具有特定符号的元素。

• 属性选择器：选择具有指定属性的元素。

input[type="text"] {
   background-color: lightgrey;
}

• 属性值选择器：选择具有指定属性值的元素。

a[href$=".pdf"] {
   color: red;
}

• 子元素选择器：选择指定元素的直接子元素。

ul > li {
   color: blue;
}

• 后代选择器：选择指定元素的所有后代元素。

div p {
   font-size: 14px;
}

• 相邻兄弟选择器：选择紧接在指定元素后的兄弟元素。

h1 + p {
   font-size: 18px;
}

4. 其他选择器

除了基本和符号选择器外，CSS 还提供了其他选择器，如：

• 伪类选择器：选择具有特定状态的元素。
• 伪元素选择器：选择元素的特定部分。

5. 伪类选择器

伪类选择器用于选择具有特定状态的元素，如：

• :hover：当鼠标悬停在元素上时。
• :active：当元素被激活时（例如，按下按钮）。
• :focus：当元素获得焦点时。
• :first-child：选择元素的第一个子元素。
• :last-child：选择元素的最后一个子元素。

a:hover {
 color: red;
}

6. 字体样式

CSS 提供了多种属性来控制字体样式，如：

• font-family：设置字体。
• font-size：设置字体大小。
• font-weight：设置字体粗细。
• font-style：设置字体样式（如斜体）。
• text-transform：控制文本大小写。

p {
 font-family: Arial, sans-serif;
 font-size: 16px;
 font-weight: bold;
 font-style: italic;
 text-transform: uppercase;
}

7. 文本样式

CSS 提供了多种属性来控制文本样式，如：

• color：设置文本颜色。
• text-align：设置文本对齐方式。
• text-decoration：设置文本装饰（如下划线、删除线）。
• line-height：设置行高。
• letter-spacing：设置字符间距。

p {
 color: blue;
 text-align: center;
 text-decoration: underline;
 line-height: 1.5;
 letter-spacing: 2px;
}

8. 背景样式

CSS 提供了多种属性来控制背景样式，如：

• background-color：设置背景颜色。
• background-image：设置背景图片。
• background-repeat：设置背景图片是否重复。
• background-position：设置背景图片的位置。
• background-size：设置背景图片的大小。

div {
 background-color: lightgrey;
 background-image: url('image.jpg');
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;
}

9. 列表样式

CSS 提供了多种属性来控制列表样式，如：

• list-style-type：设置列表项标记的类型。
• list-style-position：设置列表项标记的位置。
• list-style-image：设置列表项标记的图片。

ul {
 list-style-type: square;
 list-style-position: inside;
}

10. 包围盒

CSS 中的包围盒（Box Model）是一个框，它包围元素的内容、内边距、边框和外边距。

• 内容：元素的实际内容。
• 内边距：内容与边框之间的空间。
• 边框：围绕内边距和内容的边框。
• 外边距：元素外部的空间。

11. display 的使用

display 属性用于设置元素的显示类型，如：

• block：块级元素。
• inline：行内元素。
• inline-block：行内块元素。
• none：不显示元素。

div {
 display: block;
}

12. 绝对定位和相对定位

• 绝对定位：元素相对于最近的定位祖先元素定位。
• 相对定位：元素相对于其正常位置定位。

.absolute {
 position: absolute;
 top: 20px;
 left: 50px;
}

.relative {
 position: relative;
 top: 10px;
 left: 20px;
}

13. 固定定位和粘性定位

• 固定定位：元素相对于浏览器窗口定位。
• 粘性定位：元素在滚动到一定位置时固定。

.fixed {
 position: fixed;
 bottom: 0;
 right: 0;
}

.sticky {
 position: sticky;
 top: 0;
}

14. 浮动

浮动是一种布局技术，它允许元素浮动在其父元素的左侧或右侧。

.float-left {
 float: left;
}

.float-right {
 float: right;
}

想要使自己写的页面按照自己的意愿展示在你的眼前，那需要熟练掌握它们的特性。当然还有很多属性没有介绍，不过大差不差，你可以在编辑器的提示下进行尝试。