css的工作原理及使用规则

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 被称为简写属性 —— 这是由于它们允许你在一行设置多个属性,从而节省时间并使代码更整洁。

6. 参考链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,527评论 5 470
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,314评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,535评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,006评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,961评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,220评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,664评论 3 392
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,351评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,481评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,397评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,443评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,123评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,713评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,801评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,010评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,494评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,075评论 2 341

推荐阅读更多精彩内容

  • 简介浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工 作原理,我们将看到,从你在地址栏输入google.c...
    听风阁阅读 3,268评论 0 7
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,815评论 0 0
  • 简介网络浏览器很可能是使用最广的软件。在这篇入门文章中,我将会介绍它们的幕后工作原理。我们会了解到,从您在地址栏输...
    wengjq阅读 1,994评论 2 15
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  • 一目标:2017年轻松收入20万的财富,实现脱单,早日找到我心中的善良,贤惠,漂亮,高挑(165cm)和知性的伴侣...
    宝松阅读 227评论 0 2