CSS简介

什么是CSS

CSS（Cascading Style Sheets）即层叠样式表，是一种用于网页样式设计的语言。它通过描述HTML或者XML文档的外观来分离文档的内容和样式。CSS 使得你可以将文档结构和文档样式分开，从而更好地控制文档的渲染方式。

CSS 能够实现动态样式设定，主要作用包括以下几点：

CSS 由一系列的规则构成，每条规则包括一个选择器和一条或多条声明。选择器表明了规则中所适用的 HTML 元素，声明则描述了这些元素应该如何被渲染。如下是一个CSS规则的基本形式：

选择器 {
    声明1;
    声明2;
    ……
    声明n;
}

其中，选择器是用来选择 HTML 元素的，声明则是元素样式的属性/值对。

举例：

p {
    color: red;
    font-size:16px;
}

这个规则中，选择器是 "p"，意思是 "所有的 p 元素"，声明确定了段落元素的文字颜色和字体大小。

CSS可分为三种：内联样式表、内部样式表和外部样式表。

CSS选择器是一种模式，用于匹配HTML元素并将样式应用于这些元素。CSS选择器基于元素的ID、类、类型、属性、伪类等选择元素。在此，我们介绍一些常用的选择器类型。

类型	示例	描述
标签	`p`	选择所有 `<p>` 标记
类型	`.class`	选择所有 `class="class"` 的元素，一个元素可以有多个class
ID	`#id`	选择 `id="id"` 的元素
后代选择器	`A B`	选择所有 `A` 元素内的 `B` 元素（包括嵌套的）
子选择器	`A > B`	选择所有 `A` 元素直接子元素 `B` （不包括子元素内的元素）
相邻兄弟选择器	`A + B`	选择紧接在 `A` 元素之后的 `B` 元素
通用选择器	`*`	选择所有元素

在HTML标记的style属性中定义样式，如：

<p style="color:red;">这是红色字体</p>

可在HTML文件的头部<head>标签添加一个<style>标签，再在其中定义任意样式，如：

<head>
  <style>
    p{
      color: red;
      font-size: 16px;
    }
  </style>
</head>

将样式定义在独立的CSS文件中，然后在HTML文件中引用该文件，如：

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

本文介绍了CSS的定义、作用、基本语法、分类、选择器和样式引用的三种方式。在实际开发中，应当根据需要选择不同的方法来引用CSS样式，从而保证网页显得美观、清晰、易于维护。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：css简介_动力节点Java学院整理 - Python技术站