CSS 简介及基础用法

学思创

2023-12-17

162

CSS是层叠样式表(Cascading Style Sheets)，也称为级联样式表。一种用于描述HTML或XML（包括如SVG、MathML等衍生技术）文档样式的计算机语言。CSS描述了文档在各种设备（显示器、纸张、语音合成器、盲文设备等）上的展示形式。CSS是一种静态的语言，可以用来装饰网页元素，创建布局和动画，增加网页的可访问性，并帮助网页设计师和开发者创建更加吸引人的网页。CSS的主要目的是将文档的布局和样式分离。HTML文档负责定义页面的结构和内容，而CSS则负责定义页面的外观和布局，这种分离使得网页设计更加灵活和可维护。CSS可以通过多种方式应用到网页中，包括内联样式、内部样式表和外部样式表。

CSS的使用方法有多种，以下是一些CSS的基本用法：

内联样式：可以在HTML元素的style属性中直接添加CSS样式。例如：

<p style="color: red; font-size: 16px;">这是一个红色的段落，字体大小为16像素。</p>

其语法如下：

<element style="property1: value1; property2: value2;">

内部样式表：可以在HTML文档中使用<style>标签定义CSS样式。例如：
```
<style>
    p {
        color: red;
        font-size: 16px;
    }
</style>
```
其语法如下：
```
<style>
    selector {
        property1: value1;
        property2: value2;
        /* 更多样式规则 */
    }
</style>
```
CSS样式语法规则由选择器和声明块组成。每个规则定义了要应用于选定元素的样式。
选择器（Selector）：选择器是用于定位要应用样式的HTML元素的模式。
声明块（Declaration Block）：在选择器后面使用一对大括号 {} 来定义声明块。声明块中包含一条或多条属性-值对，用分号 ; 分隔它们。
- 属性（Property）：属性是要设置的样式特性的名称。例如，color表示文字颜色，font-size表示字体大小。
- 值（Value）：值是要为属性设置的具体样式值。例如，red表示红色，16px表示16像素。
链接外部样式表：可以将CSS样式写在一个独立的CSS文件中，然后通过<link>标签将其链接到HTML文档。例如：
```
<link rel="stylesheet" href="index.css">
```
导入外部样式表：使用CSS的@import命令将一个外部样式文件输入到另外一个样式文件中，使之成为被输入到的样式文件的一部分。例如：
```
@import url("index.css");
```
或者
```
<style>
@import url("index.css");
</style>
```
完整的@import语法包括一些可选的参数，用于定义导入的外部样式表的属性。
以下是完整的@import语法：
```
@import url("styles.css") [media] [important];
```
其中，方括号表示可选项。
- url("styles.css")：指定要导入的外部样式表文件的路径。可以使用相对路径或绝对路径。
- media（可选）：指定应用导入的样式表的媒体查询条件。它用于根据设备或媒体类型选择应用哪些样式表。例如，@import url("styles.css") screen;将只在屏幕媒体类型下应用样式表。
- important（可选）：指定导入的样式表为important，意味着它具有更高的优先级。可以在导入语句末尾添加!important来声明。

内联样式、内部样式表和外部样式表的优先级顺序是：内联样式 > 内部样式表 > 外部样式表。

当一个HTML元素被多个样式定义时，浏览器会按照优先级来确定最终的样式。优先级由多个因素决定，包括选择器的特异性、样式的来源和样式的顺序。

内联样式：内联样式的优先级最高，因为它们直接应用于HTML元素，具有最高的特异性。
内部样式表：内部样式表定义在HTML文档的<head>部分，优先级次之。
外部样式表：外部样式表定义在单独的.css文件中，通过<link>标签引入，优先级最低。