什么是CSS？
CSS（Cascading Style Sheets，层叠样式表）是为 web 内容添加样式的代码。本节将介绍 CSS 的基础知识，并解答像这样的问题：怎样将文本设置为红色？怎样将内容显示在屏幕的特定位置？怎样用背景图片或颜色来装饰网页？和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。CSS 是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。
怎么使用CSS
CSS是如何工作的
CSS（层叠样式表）的工作原理主要涉及浏览器如何解析和应用样式到HTML文档上。以下是对其工作原理的详细介绍：
-
文档解析：当浏览器加载一个HTML页面时，它会从上至下解析HTML文件。这个过程中，浏览器会构建DOM（Document Object Model）树，DOM树是HTML文档在计算机内存中的表示，它使得文档的内容和结构可以被编程访问和操作。
-
CSS加载与解析：在解析HTML的同时，浏览器会加载并解析CSS文档。CSS样式可以直接存储于HTML网页中，也可以通过外部链接的方式引入。当遇到标签时，浏览器会识别出引入的CSS文档链接，并优先加载和解析CSS文件。解析后的CSS样式会被应用到DOM树中的对应元素上。
-
样式应用：CSS样式规则由选择器和一组属性及值组成，选择器用于确定哪些HTML元素会受到这些样式规则的影响。浏览器会遍历DOM树，将CSS样式规则应用到匹配的元素上。这个过程会考虑到样式的层叠性和优先级，即如果有多个样式规则应用到同一个元素上，浏览器会根据一定的规则（如样式的来源、特异性等）来决定最终应用的样式。
-
页面渲染：最后，浏览器会将应用了样式的DOM树渲染成可视化的网页。这个过程中，浏览器会考虑各种因素，如布局、颜色、字体等，来呈现出最终的网页效果。
CSS的工作原理体现了其“层叠”和“样式”两个核心概念。层叠性指的是当多个样式规则应用到同一个元素时，浏览器会根据一定的规则来决定最终应用的样式；而样式性则是指CSS可以用来描述网页元素的布局、颜色、字体等视觉表现。
CSS规则集
和HTML相同，作为一门样式表语言它同样有属于它的编写规则，我们先来看一个简单的例子：
p {
color: red;
}
选择器（Selector）
HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 <p> 元素）。要给不同元素添加样式，只需要更改选择器。
属性（Properties）
改变 HTML 元素样式的途径（本例中 color 就是 <p> 元素的属性）。CSS 中，由编写人员决定修改哪个属性以改变规则。
属性的值（Property value）
在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。
声明（Declaration）
一个单独的规则，由属性和属性的值组成，如 color: red; 用来指定添加样式元素的属性。
注意：
- 除了选择器部分，每个规则集都应该包含在成对的大括号里（{}）。
- 在每个声明里要用冒号（:）将属性与属性值分隔开。
- 在每个规则集里要用分号（;）将各个声明分隔开。
关于如何选择多个选择器和修改多个属性如下所示：
选择多个选择器：
p,
li,
h1 {
color: red;
}
修改多个属性：
p {
color: red;
width: 500px;
border: 1px solid black;
}
不同的选择器
上文仅仅举例了元素选择器，用来选择HTML文档中给定的元素，但是选择操作可以更加具体。下面是一些常用的选择器类型：
| 选择器名称 | 选择的内容 | 示例 |
|---|---|---|
| 元素选择器（也称作标签或类型选择器） | 所有指定类型的 HTML 元素 | p；选择<p> |
| ID 选择器 | 具有特定 ID 的元素。单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID | #my-id;选择 <p id="my-id"> 或 <a id="my-id"> |
| 类选择器 | 具有特定类的元素。单一页面中，一个类可以有多个实例 | .my-class;选择 <p class="my-class"> 和 <a class="my-class"> |
| 属性选择器 | 拥有特定属性的元素 | img[src];选择 <img src="myimage.png"> 但不是 <img> |
| 伪类选择器 | 特定状态下的特定元素（比如鼠标指针悬停于链接之上） | a:hover;选择仅在鼠标指针悬停在链接上时的 <a> 元素 |
如何在网页部署你想要的字体
一、使用在线字体服务
Google Fonts 是最流行的在线字体服务之一。使用它的步骤如下：
- 访问 Google Fonts。
- 选择你想要的字体，并点击“+”添加到选择集。
- 在右侧面板中，选择你需要的字体样式和字符集。
- 点击“使用”按钮，然后复制提供的
<link>标签到你的 HTML 文件的<head>部分。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Your+Font&display=swap" as="style" type="text/css" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Your+Font&display=swap">
- 在你的 CSS 中，使用 font-family 属性来应用字体。
二、本地字体文件嵌入
如果你想要使用自己的字体文件，你可以将它们嵌入到你的网站中。步骤如下：
- 将字体文件（如 .ttf、.woff、.woff2 等）上传到你的网站服务器上。
- 在 CSS 文件中使用 @font-face 规则来定义字体。
@font-face {
font-family: 'MyCustomFont';
src: url('path/to/font.woff2') format('woff2'),
url('path/to/font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
确保你提供了正确的字体文件路径，并且包括了多种格式以支持不同的浏览器。
- 在 CSS 中应用字体。
body {
font-family: 'MyCustomFont', sans-serif;
}
三、字体链接
如果你的字体文件存储在第三方服务上，或者你有一个字体文件的 CDN 链接，你可以直接在你的 CSS 中使用 @font-face 规则并链接到这些文件。
@font-face {
font-family: 'MyCustomFont';
src: url('https://example.com/fonts/myfont.woff2') format('woff2'),
url('https://example.com/fonts/myfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
注意事项
- 字体文件大小：字体文件可能会比较大，特别是当包含多种样式和字符集时。确保优化字体文件以减小大小，并考虑仅包含你真正需要的字符。
- 浏览器兼容性：不同的浏览器对字体格式的支持不同。尽量提供多种格式的字体文件以确保最大的兼容性。
- 字体许可：确保你有权使用你想要在网站上部署的字体。某些字体可能受到版权保护，需要购买或获得许可才能使用。
- 性能优化：字体加载可能会影响页面加载速度。考虑使用字体子集化、按需加载等技术来优化性能。
995
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
