CSS语法的基本规则和工作流程

terry 2年前 (2023-09-27) 阅读数 65 #数据结构与算法

CSSyntax

#1。基本规则

CSS规则主要由两部分组成：selector（选择器）和声明（声明）.

selector 是 . HTML 开发人员想要更改其样式的元素。

声明是开发人员希望HTML 更改的元素规则。可以是一个，也可以是多个。

每个语句由一个属性（属性）和一个值（值）属性

组成是的属性样式 . ，开发者希望设置的。

Value（值）是属性的具体内容。

属性和值由点

分隔，声明直接由分号分隔。 CSS 中的注释以 /* 开头，以 */ 结尾。 
/* selector {property: value} */
h1 {color:red; font-size:14px;}
上面这行代码的作用是定义h1元素内部的文字颜色为红色，并将字体大小设置为14像素。 
这是基本规则。具体规则请参见基本 CSS 语法。 
#2。编写样式表的规则
每个 HTML 元素都有一个初始样式，但样式规则可以由开发人员更改。编辑
HTML元素的样式具有以下书写规则。 
 #内部样式表（写在内部） 
<!DOCTYPE html>
<html>
  <head>
    <style>
        h1 {color:red; font-size:14px;}
    </style>
  </head>
  <body>
  </body>
</html>

 #内联样式（写在HTML标签内部） 
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  	<h1 style="color:red; font-size:14px;"></h1>
  </body>
</html>
 #外部样式文件（嵌入在HTML中的CSS文件w中） 
<!-- style.css -->
h1 {color:red; font-size:14px;}

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
      <link rel="stylesheet" href="style.css">
  </head>
  <body>
  	<h1></h1>
  </body>
</html>
#3。 @Rule（about 规则）
 about 规则是一个 CSS 命令，以 @ 开头，后跟标识符  ，最后以  结束。 
#@charset
@charset 用于定义样式表中使用的字符编码。必须写在样式表中的开头，并且之前不能有其他字符。 
/* @charset "<charset>"; */
@charset "UTF-8";
#@import
@import 用于导入外部 CSS 样式表 文件。
/* @import url; */
/* @import url list-of-media-queries; */
@import 'custom.css';
@import url("fineprint.css") print;
#@namespace
@namespace 用于定义 XML 命名空间的 @ 规则，用于 ‼️。 
/* @namespace <namespace-prefix>? [ <string> | <url> ]; */
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
#@media
@媒体 用于定义一种或多种  设备类型的具体特征 ,, ❙, 
  环境的媒体查询 使用样式。 
/* @media */
@media screen and (min-width: 900px) {
    h1 {
        color:red;
        font-size:14px;
    }
}

#@page
@page 用于在打印文档时修改某些 CSS 属性。 @stranka 规则只能编辑 margin、 孤儿❙、♝、
    文档分页符，对于其他编辑属性是无效的。 
/*
 *  @page <page-selector-list> {
 *    <page-body>
 *  }
 */
@page {
    size: 10in 20in;
    margin: 10% 20%;
}

#@keyframes
@keyframes 通过定义关键点♝❙⓶❀❀❀ 动画序列来控制CSS 动画 的各个步骤的状态。 
/* @keyframes */
@keyframes slidein {
    from {
        margin-left: 100%;
        width: 300%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}
#@supports
@supports用于检查规则规则组的有效性。类似于@media
/*
 *  @supports <supports_condition> {
 *    <specific rules>
 *  }
 */
@supports (display: flex) {
    div {
        display: flex;
    }
}
#@viewport
@viewport的规则用于设置视图的属性。 (viewport) U#@Counter-Style
@Counter-Style 用于自定义 Counter 
/*
 * @counter-style <counter-style-name> {
 *   <group-rule-body>
 * }
 */
@counter-style circled-alpha {
    system: fixed;
    symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
    suffix: " ";
}

.items {
    list-style: circled-alpha;
}
❙❙❙❙#@font-face‼ 指定互联网文本字体页。 /*
 * @font-face {
 *    <group-rule-body>
 * } 
 */
@font-face {
    font-family: "Bitstream Vera Serif Bold";
    src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

body { font-family: "Bitstream Vera Serif Bold", serif }
#@doucment
@Documentif 条件条件组满足，则规则生效（遵循CSS level 4规范）
/*
 * @document name(guide) {
 *    <group-rule-body>
 * }
 */
@document url(http://www.w3.org/),
               url-prefix(http://www.w3.org/Style/),
               domain(mozilla.org),
               regexp("https:.*") {
  /* 该条CSS规则会应用在下面的网页:
     + URL为"http://www.w3.org/"的页面.
     + 任何URL以"http://www.w3.org/Style/"开头的网页
     + 任何主机名为"mozilla.org"或者主机名以".mozilla.org"结尾的网页     
     + 任何URL以"https:"开头的网页 */

  /* make the above-mentioned pages really ugly */
	body {
        color: purple;
        background: yellow;
    }
}
注：以上@rule属性不完整，还有一些相关的没有列出。如果需要详细列表，可以查看MDN
#CSS 是如何工作的？ 
#页面渲染机制
在讲CSS的工作流程之前，我们先简单了解一下页面渲染机制。
页面渲染可以分为以下5个步骤： 
处理HTML创建树DOM；
处理CSS 创建CSSOM 树； 
 将 通过 DOM 与 CSSOM  合并到布局中 
 绘制 绘制树。 
以上就是页面渲染过程。 
#workflow CSS
 从上面的页面渲染流程我们知道，浏览器解析完HTML和‼S后就会开始合并渲染。简而言之，它正在用样式绘制HTML规则。 
CSS的工作流程是定义规则CSS到 DOM树。具体解析规则
HTML和CSS属于编译原理，这里不再详述。不过，在使用CSS的过程中，有两个词值得注意，那就是重新格式化和重绘。 
 重新排列 ：重建  渲染树  称为  重新排列  这意味着当页面布局或几何属性时，会发生浏览器重新格式化DOM 元素发生变化。以下5种情况会触发浏览器重新格式化：  页面渲染初始化； 
DOM添加和删除元素； 
DOM元素的位置和大小以及导致大小变化的内容变化；  当事件调整大小发生时。 
Redraw：更改渲染树中仅影响外观而不影响样式的属性称为ⓝRedraw♿。例如，更改颜色和背景颜色。 
注：后续文章将详细讲解重新格式化和重绘，以及相关的性能问题和优化