1. css定义
层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表、级联样式表、串接样式表、层叠样式表、阶层式樣式表，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。目前最新版本是CSS2.1，为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。
2. css的工作原理
当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档：
- （1）浏览器将 HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
-
（2）浏览器显示 DOM 的内容。
css工作原理.png
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 被称为简写属性 —— 这是由于它们允许你在一行设置多个属性，从而节省时间并使代码更整洁。
网友评论