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