【Hello CSS】第一章-CSS的语法与工作流
- 作者:陈大鱼头
- github: KRISACHAN
在上一篇【Hello CSS】
的序章CSS起源中介绍了CSS
的诞生原因以及发展历史,了解了CSS
的存在意义。从正篇篇开始将会正式开始介绍CSS
这门语言的特点与功能。本篇则主要介绍CSS
的语法与CSS
是如何工作的。
CSS语法
1. 基本规则
CSS
规则主要由两部分组成:选择器(selector)
与声明(declarations)
。
选择器(selector)
是开发者希望改变样式的HTML
元素。
声明(declarations)
则是开发者制定的希望HTML
改变的元素规则,可以是一条或多条。
每条声明(declarations)
由一个属性(property)
和一个值(value)
组成。
属性(property)
是开发者希望设置的样式属性(style attribute)
。
值(value)
为属性的具体内容。
属性与值之间由冒号
隔开,声明与声明直接由分号
隔开。
CSS中的注释以 /*
开始并以 */
结束。
/* selector {property: value} */
h1 {color:red; font-size:14px;}
复制代码
上面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。
这是基本规则,具体规则请看CSS 基础语法。
2. 样式表书写规则
每个HTML元素都有初始的样式,但是也可以经过开发者书写而改变样式规则。
HTML
的元素样式修改有以下的书写规则。
内部样式表(写在<head>
标签内部)
<!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>
复制代码
外部样式表(写在CSS文件中,引入到HTML里)
<!-- 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. @规则(at-rule)
一个at-rule就是一个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
是用来定义使用在CSS样式表
中的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 */
@media screen and (min-width: 900px) {h1 {color:red;font-size:14px;}
}复制代码
@page
@page
用于在打印文档时修改某些CSS属性。@page
规则只能修改margin
、orphans
、widow
和 page breaks of the document
,对其他属性的修改是无效的。
/** @page <page-selector-list> {* <page-body>* }*/
@page {size: 10in 20in;margin: 10% 20%;
}复制代码
@keyframes
@keyframs
通过定义动画序列中的关键帧来控制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)
的特性。
/** @viewport {* <group-rule-body>* }*/
@viewport {min-width: 640px;max-width: 800px;
}@viewport {zoom: 0.75;min-zoom: 0.5;max-zoom: 0.9;
}@viewport {orientation: landscape;
}
复制代码
@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
用于给网页指定文本字体。
/** @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
@document
如果满足条件组的条件,则规则生效(推延至 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;}
}
复制代码
注:上面的@规则属性并非完整,还有少量相关的没有列出,需要详细列表的可以翻阅MDN
CSS是如何工作的?
页面渲染机制
在讲CSS
的工作流程之前,首先来简单看看页面的渲染机制。
页面渲染可分为下面5个步骤:
- 处理
HTML
来创建DOM tree
; - 处理
CSS
来创建CSSOM tree;
- 根据
DOM
跟CSSOM
来合并render tree;
- 根据
render tree
来布局; - 绘制
render tree
。
以上便是页面渲染的过程。
CSS的工作流程
从上面的页面渲染流程可以知道浏览器在解析了HTML
跟CSS
之后便开始合并渲染,简单来说就是绘制带有样式的HTML
规则。
CSS
的工作流程就是把CSS
规则定义到DOM tree
上。
HTML
与CSS
具体解析规则属于编译原理
的内容,在这里就不作展开了。但是有在CSS
工作的过程中有两个词值得注意的就是重排(reflow)跟重绘(repaint)。
- 重排:
render tree
的重新构建叫重排。也就是当页面布局或者DOM
元素的几何属性发生变化时,就会发生浏览器重排。以下5种情况便会引发浏览器回流:- 页面渲染初始化;
DOM
元素的增删;DOM
元素的位置、尺寸以及引起尺寸变化的内容改变;resize
事件发生时。
- 重绘:
render tree
中只影响外观而不影响风格的属性改变就叫重绘。例如color
与background-color
的改变。
注:后面的文章会仔细讲解重排(reflow)跟重绘(repaint)以及相关的性能问题与优化。
参考资料:
浏览器是如何工作的?
CSS是如何工作的?
CSS语法
CSS参考 MDN
层叠样式表
浏览器渲染页面的过程
【Hello CSS】系列
【Hello CSS】
是以CSS
基础概念为主题的系列文章,旨在帮助大家更深刻地了解并且提高CSS
在各位开发者心目中的地位。由于鱼头我水平有限,文笔有限,如果各位在文章中发现有任何不合理,不正确的地方,还烦不吝指出,我会非常感谢的;如果通过文章有任何想法或疑问,也希望各位能积极留言,我们互相探讨;如果通过本系列文章有所收获,这就让鱼头我喜不自胜了!
如果你也喜欢CSS,喜欢探讨技术,或者对本文,本系列有任何的意见或建议,你可以扫描下方二维码,关注微信公众号“鱼头的Web海洋”,随时与鱼头互动。欢迎!衷心希望可以遇见你。
【Hello CSS】第一章-CSS的语法与工作流相关推荐
- css层叠样式表基础学习笔记--第一章 css简介及引入
第一章 css简介及引入 1-01 css简介 1-02 css优缺点 1-03 css书写格式 1-04 css引入格式 行内样式 内部样式 外部样式 导入样式 1-05 css注释 1-01 cs ...
- python语言的语法_Python第一章基本语言语法
第一章:基本语法 1.1.1基本的输入输出函数 Print ( ) 作用:输出字符串 用法1: print('代输出字符串') 用法2:用于输出一个或多个变量 print(变量1,变量2,-) 用法3 ...
- 第一章CSS层叠样式表
CSS层叠样式表 1.初识CSS 概念: CSS(Cascading Style Sheets),通常称为CSS样式表或层叠样式表(级联样式表) 作用: 主要用于设置HTML页面中的文本内容(字体,大 ...
- CSS第一章:1.CSS介绍;如何关联HTML文件和CSS文件
一.CSS介绍 1.CSS 一般指的是 CSS3 2.CSS里面是模块化的 3.所有我们能在网页中看到的,都应该使用CSS来修改 4.CSS中文名称:层叠样式表 5.网页是一个3d的结构,有表面,有深 ...
- CSS第一章:3.交集选择器、并集选择器
总览 1.交集选择器:同时满足多个选择器筛选条件的才能被选中 2.并集选择器:只要满足其中一个筛选条件就能够被选中 一.交集选择器 1.HTML代码: 2.CSS代码:(class值不使用任何东西隔开 ...
- Python程序开发——第一章 基本python语法
目录 前言 一.PyCharm (一)创建工程文件夹 (二)创建 python 文件并运行 二.IDLE 三.Python中的注释用法 四.变量的命名事项 五.基本输入和输出函数 (一)输入和输出 ( ...
- 1.第一章 Java基础语法 第一节(一)初识java
初识java 1.java的发展史 1.1.起源 1.2.演变 2.Java体系与特点 2.1java的体系 2.2java的应用 2.3java的特性 3.JVM,JDK,JRE与GC 3.1jav ...
- java基础语法的书_第一章--Java基础语法
一.Java变量的分类: a.按声明的位置划分: 1.局部变量:方法或语句块内部定义的变量 2.成员变量:方法外部,类的内部定义的变量 3.注意:类外面(与类对应的大括号外面)不能有变量的声明 b.按 ...
- Java 第一章.基本语法
第一章.java基本语法 1.1关键字 1.2保留字 1.3标识符 1.4变量 1.5基本数据类型之间的运算规则 1.6String 1.7进制 1.8运算符 1.9Scanner(从键盘输入数据) ...
最新文章
- ActiveMQ持久化消息的三种方式
- ssh: connect to host 192.168.57.131 port 22: Conne
- 玩转百度地图(二)之画圆,高德地图、搜搜地图、搜狗地图等稍微修改即可...
- 趣学车签约神策数据,数据赋能学车“新体验”
- UVA10601 Cubes - 波利亚定理
- Integer和Int的比较,谈谈拆卸和装箱
- [js] callee和caller的区别和作用是什么?
- 基于Java SSM springboot+VUE+redis实现的前后端分类版网上商城项目
- linux gcc编译器误用-MM导致出现linker input file unused because linking not done
- 因为孤浪的关于爱情...关于婚姻...关于生活... 走进的CTO的第一天
- ZooKeeper学习第七期--ZooKeeper一致性原理(转)
- 北航计算机学硕还是专硕,经验教训-2018二战考研北航计算机
- go编程语言为什么这么流行?
- VS2008安装Mercurial插件
- [ps视频教程][ps6 完全自学教程][iso/pdf/2.7G]
- 使用环绕通知对目标方法进行增强—摘抄笔记
- Beyond 比对工具
- 笔记一:认识微信小程序
- 【软件测试】接口测试笔记4
- 移动安全技术如何未雨绸缪?
热门文章
- mysql======基本的数据查询(1)
- Centos6,7默认启动模式的更改
- (原创)Python文件与文件系统系列(5)——stat模块
- chrom扩展开发-入门
- [K/3Cloud]关于数据库sa密码更改,管理中心登录不上的问题。
- ib_logfile 在数据库中有何作用?
- 利用NetBIOS名称与其他计算机通信
- 2015最流行的Android组件、工具、框架大全
- Java三大主流框架概述
- Context-Based Access Control (CBAC) 基于上下文的访问控制 理论知识