必赢(首页)官方网站是多少(中国)VIP官方认证 - 百度百科

1.5 万字 CSS 基础拾遗(核心知识、常见需求)

来源:掘金
2021-03-23
9831
导语:CSS 的核心功能是将 CSS 属性设定为特定的值。一个属性与值的键值对被称为声明(declaration)。
阅读本文大概需要9分钟

核心概念和知识点

语法

CSS 的核心功能是将 CSS 属性设定为特定的值。一个属性与值的键值对被称为声明(declaration)。

color: red;
复制代码

而如果将一个或者多个声明用 {} 包裹起来后,那就组成了一个声明块(declaration block)。

{
    color: red;
    text-align: center;
}
复制代码

声明块如果需要作用到对应的 HTML 元素,那还需要加上选择器。选择器和声明块组成了CSS 规则集(CSS ruleset),常简称为 CSS 规则。

span {
    color: red;
    text-align: center;
}
复制代码

规则集中最后一条声明可以省略分号,但是并不建议这么做,因为容易出错。

CSS 中的注释

/* 单行注释 */

/*
    多行
    注释
*/
复制代码

在 CSS 文件中,除了注释、CSS 规则集以及 @规则 外,定义的一些别的东西都将被浏览器忽略。

@规则

CSS 规则是样式表的主体,通常样式表会包括大量的规则列表。但有时候也需要在样式表中包括其他的一些信息,比如字符集,导入其它的外部样式表,字体等,这些需要专门的语句表示。

而 @规则 就是这样的语句。CSS 里包含了以下 @规则:

  • @namespace 告诉 CSS 引擎必须考虑XML命名空间。
  • @media, 如果满足媒体查询的条件则条件规则组里的规则生效。
  • @page, 描述打印文档时布局的变化.
  • @font-face, 描述将下载的外部的字体。
  • @keyframes, 描述 CSS 动画的关键帧。
  • @document, 如果文档样式表满足给定条件则条件规则组里的规则生效。 (推延至 CSS Level 4 规范)

除了以上这几个之外,下面还将对几个比较生涩的 @规则 进行介绍。

@charset

@charset 用于定义样式表使用的字符集。它必须是样式表中的第一个元素。如果有多个 @charset 被声明,只有第一个会被使用,而且不能在HTML元素或HTML页面的