Learn-HTML-CSS

Appearance

Return to top
On this page

CSS 基础

CSS 简介

MDN

CSS：层叠样式表 | MDN (mozilla.org)

  • CSS 是层叠样式表（Cascading Style Sheets）的缩写
  • CSS 是一种用于网页设计的样式表语言
  • 使用 CSS 可以控制网页的字体、颜色、布局、大小、位置等方面的样式，从而使网页更具吸引力、易于阅读和导航。

CSS 层叠性

ts
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>basic</title>
    <style>
        body{ 
            padding: 10px;
            font-size: 14px;
            background: #54cfd8;
        }
        body.body{
            font-size: 20px;
            background: #ec6a45;
        }
        #body{
            background: #229443;
        }
    </style>
</head>
<body class="body" id="body"> 
    Hello CSS!
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>basic</title>
    <style>
        body{ 
            padding: 10px;
            font-size: 14px;
            background: #54cfd8;
        }
        body.body{
            font-size: 20px;
            background: #ec6a45;
        }
        #body{
            background: #229443;
        }
    </style>
</head>
<body class="body" id="body"> 
    Hello CSS!
</body>
</html>
Codepen
  • CSS 的层叠性（Cascading）是指多个 CSS 样式规则应用到同一个 HTML 元素时，会按照一定的优先级和规则进行叠加和覆盖。
  • CSS 样式规则可以来自不同的来源，例如内部样式表、外部样式表、行内样式或用户样式表等。
  • 在层叠性的规则下，如果多个样式规则应用到同一个元素上，最终样式的表现会受到这些规则的优先级、特定性和顺序等因素的影响。

CSS 语法规则

图解 CSS 声明

整个结构称为 规则集（通常简称"规则"），各部分释义如下：

  • 选择器（Selector）: HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素。要给不同元素添加样式只需要更改选择器就行了。

  • 声明（Declaration）: 一个单独的规则，如 color: red; 用来指定添加样式元素的属性。

  • 属性（Properties）: 改变 HTML 元素样式的途径。

  • 属性的值（Property value）: 在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值。

注意其他重要的语法：

  • 每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
  • 在每个声明里要用冒号（:）将属性与属性值分隔开。
  • 在每个规则集里要用分号（;）将各个声明分隔开。
css
p {
  font-size: 16px;
  color: red;
}

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

除此之外，CSS 还支持各种不同的单位（如像素、百分比、em 等）和数值（如颜色值、长度值等），以及一些其他语法特性（如伪类、伪元素等）。

INFO

  • 在 CSS 中，无论是属性名还是属性值都是对大小写不敏感的。
  • 属性与值之间以英文冒号 ':' （U+003A COLON）隔开。属性与值前面、后面与两者之间的空白不是必需的，会被自动忽略。
  • 声明块里面的声明之间使用英文分号（';' U+003B SEMICOLON）隔开。声明块可能为空，也就是包含空的声明。

声明块中的分号是属性值的分隔符 separator，而不是语句结束符

  • CSS 中的分号是属性值的分隔符，用于将一个属性值和下一个属性值分开。
  • 声明块里最后一个声明可以不用分号，不过为了代码阅读以及日常维护建议加上最后的分号，以方便扩展声明块。

css syntax - declarations block