1. css定义

层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表、级联样式表、串接样式表、层叠样式表、阶层式樣式表，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。目前最新版本是CSS2.1，为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。

2. css的工作原理

当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档：

（1）浏览器将 HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
（2）浏览器显示 DOM 的内容。

3. css的引用

a. 外部样式表

在HTML的<head>标签中，使用<link>元素中引用

b. 内部样式表

将 CSS 放置在<style>元素中，该元素包含在 HTML head 内。

c. 内联样式

内联样式是仅影响一个元素的CSS声明，被 style 属性包括着。

4. css的语法

a. 最常用的形式

选择器 ｛属性名：属性值；属性名：属性值；……
｝
复制代码

b. 一些概念

css声明：一个属性名就是一个声明
css声明块：每一组声明都用一对大括号包裹,一个{声明组}就是一个css声明块
css选择器：如上所示位置，用来匹配对应元素
css选择器组：多个选择器用逗号隔开
规则（规则集: 选择器加上声明块

c. css语句（CSS statements）

CSS 规则是样式表的主要组成块 —— 是 CSS 中最常见的块。但还有一些其它类型的块 —— CSS 规则只是被称为 CSS 语句中的一种。
其它类型如下：
@-规则 (At-rules): 在CSS中被用来传递元数据、条件信息或其它描述性信息。
它由（@）符号开始，紧跟着一个表明它是哪种规则的描述符，之后是这种规则的语法块，并最终由一个半角分号（;）结束。每种由描述符定义的@-规则，都有其特有的内部语法和语义。一些例子如下：

@charset 和 @import （元数据）
@media 或 @document （条件信息，又被称为嵌套语句，见下方。)
@font-face （描述性信息）
复制代码

具体语法示例： @import 'custom.css'; 该@-规则向当前 CSS 导入其它 CSS 文件
嵌套语句：是@-规则中的一种，它的语法是 CSS 规则的嵌套块，只有在特定条件匹配时才会应用到文档上。特定条件如下：

@media 只有在运行浏览器的设备匹配其表达条件时才会应用该@-规则的内容；
@supports 只有浏览器确实支持被测功能时才会应用该@-规则的内容；
@document 只有当前页面匹配一些条件时才会应用该@-规则的内容。
复制代码

具体语法示例下述的嵌套语句只有在页面宽度超过801像素时才会应用。

@media (min-width: 801px) {body {margin: 0 auto;width: 800px;}
}
复制代码

5. 语法之外：使 CSS 更具可读性

空格：例如，属性和属性值边上的空格，margin: 0 auto;
注释: /* 注释内容 */ ，利用注释是代码更容易理解
简写: 一些属性比如 font，background，padding，border，和 margin 被称为简写属性 —— 这是由于它们允许你在一行设置多个属性，从而节省时间并使代码更整洁。

6. 参考链接

https://zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8
http://www.runoob.com/css/css-syntax.html
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS

转载于:https://juejin.im/post/5ae6d8fa6fb9a07a9c03fe94

css的工作原理及使用规则相关推荐

什么是CSS CSS的工作原理
什么是CSS CSS是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语 ...
linux_makefile文件编写，基本规则、工作原理、模式规则，wildcard函数、patsubst函数
接上一篇:linux_GDB调试学习(调试运行.多文件设置断点)_C/C++程序调试本次来分享linux下的makefile文件的编写,开始上菜: 目录 1.makefile文件的命名规则 2.用途 ...
CSS基础工作原理（一）——css规则与选择符器
css规则为文档添加样式的三种方法:行内样式.嵌入样式.链接样式(此处按优先级排序) <div style="display:block">123</div&g ...
IT：前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略
IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/Node/IDE/中后台/体验管理/ ...
ubuntu 压缩率最高的软件_不用写采集规则也可以轻松采集网站文章，揭秘一款明泽文章采集软件的工作原理...
一直以来,大家都在用各种各样的采集器或网站自带的采集功能,如织梦采集侠.火车头采集器.八爪鱼采集器等,这些采集软件都有一个共同的特点,就是要编写采集规则才能采集到文章,这个技术性的问题,对于新手来说, ...
[css] 请你解释下什么是浮动和它的工作原理是什么？同时浮动会引起什么问题？
[css] 请你解释下什么是浮动和它的工作原理是什么?同时浮动会引起什么问题? 什么是浮动:我们在做布局的时候用到的一种技术,通过浮动可以让元素左右浮动,然后通过margin调整位置工作原理:使元素脱 ...
CSS的历史与工作原理
1. 浏览器的发展与CSS 网页浏览器主要通过HTTP协议连接网页服务器而取得网页,HTTP容许网页浏览器送交资料到网页服务器并且获取网页.目前最常用的 HTTP 是 HTTP/1.1,这个协议在RF ...
Java规则引擎工作原理及其应用
摘要 Java规则引擎是一种嵌入在Java程序中的组件,它的任务是把当前提交给引擎的Java数据对象与加载在引擎中的业务规则进行测试和比对,激活那些符合当前数据状态下的业务规则,根据业务规则中声明的 ...
docker flannel 工作原理／模型 SNAT规则优化 3
flannel 工作原理 [root@k8s3 ~]# route -n Kernel IP routing table Destination Gateway Genmask ...

css的工作原理及使用规则