1.CSS 简介
1.1 CSS 概述
- CSS
- 层叠样式表
- (Cascading Style Sheets)
- 样式表 语言: 和 HTML 类似,CSS 也不是真正的 编程语言,甚至不是 标记语言。它是一门 样式表语言,这也就是说, 人们可以用它来 选择性地为 HTML 元素添加样式.
- 样式的 作用:
- 定义 如何显示 HTML 元素,html 是一栋房子的话, css 就是对房子的装修.
- ① 文档的呈现: 层叠样式表 (缩写为 CSS),是一种 样式表 语言,用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。
- ② 如何 被渲染: CSS 描述了 在屏幕、纸质、音频等 其它媒体上的元素 应该如何被渲染的问题。
- ③ 添加样式: 层叠样式表(CSS)是一种 向 Web 文档 添加样式 (例如 字体、颜色、间距)的简单机制。
- 样式的 存储位置
- 样式表中,即 一般在
.css
文件中 - 也有在
.html
页面内部写 样式信息的,不过比较少.
- 样式表中,即 一般在
- 内容和表现的 分离: 把样式添加到 HTML 4.0 中,是为了
- 解决 内容与表现 分离的问题
- 外部样式表的 好处
- 可以极大 提高工作效率
- 外部样式表 通常存储在 后缀名为
.css
的 css 文件 中.
- 可层叠: 多个样式定义,可以 层叠为一个.
1.2 CSS 产生的背景
-
html的 作用:
- 定义 文档内容: HTML 标签 原本被设计为, 用于 定义文档内容。
- 表达 内容含义:
- 通过使用
<h1>、<p>、<table>
这样的标签, 表达“这是标题”、“这是段落”、“这是表格”之类的信息。(而不是 用于设计内容的样式,着重点 是 内容.)
- 通过使用
-
内容和表现 分离的问题:
- 问题的产生: 由于两种主要的浏览器(Netscape 和 IE), 添加了新的 标签和属性
- 造成的问题:内容和表现无法分离
- Netscape 和 IE 不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中
- 创建 文档内容 ,清晰地独立于 文档表现层 的站点,就变得越来越困难。
- Netscape 和 IE 不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中
- 问题的解决:
- 万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命
- 并在 HTML 4.0 之外创造出样式 CSS。
- 万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命
-
css 的浏览器支持:
- 所有的主流浏览器 均支持层叠样式表。
1.3 CSS 样式 存在的意义 和 基本介绍
- 样式表的好处
- ① 提高了 工作效率
- ② 一个文件 控制多个页面: 改变一个 css 文件, 能够 同时 控制多个页面的 样式和布局(只要把这个 css 文件,链接 引用到 各个页面即可)
- 样式的存放位置
- ① 内联 样式: 单个的 元素中 (用标签的
style
属性) - ② 内部 样式: 页面的头元素中 (
<head>
的<style>
标签中) - ③ 外部 样式: 外部的 CSS 文件 ( 用
<link>
标签 引入.css
文件)- 多个: 在同一个页面内部, 引用多个 外部样式表
- ① 内联 样式: 单个的 元素中 (用标签的
- 样式 层叠: 多重样式 将层叠为一个.
- 层叠次序
- 当同一个 元素,被多种样式 定义时,样式的选择
- 一般而言,所有的样式,会根据下面的规则 层叠于一个新的虚拟样式表中
- 内联样式 最优先: 内联样式拥有 最高的优先权。
- ① 浏览器 缺省设置
- ② 外部样式表
- ③ 内部样式表(位于
<style>
标签内部) - ④ 内联样式(在 HTML 元素内部)
- 当同一个 元素,被多种样式 定义时,样式的选择
- 样式 优先级
- 内联 >内部 >外部 >浏览器
1.4 CSS 规范
- 规范: 所有的 标准 Web技术(
HTML, CSS, JavaScript
等) 都被定义在一个 巨大的文档中,称作 规 范 specifications (或者简称为 “specs”) - 规范化 组织: 它是由 (像是 W3C, WHATWG, ECMA 或 Khronos) 这些 规范化组织 所发布的,其中还定义了 各种技术是如何工作的。
- css 规范:
- CSS 也不例外 — 它是由 W3C(万维网联盟)中的一个名叫 CSS Working Group 团体 发展起来的。
- 这个团体是由 浏览器厂商和其他公司中 对 CSS 感兴趣的人 作为代表组成的。
- 也有其他的人员,比如 受邀专家(invited experts),他们作为不从属于任何组织的独立声音 加入团体。
2. CSS 基础语法
⑴ CSS 规则构成
- CSS规则:
选择器 { 属性名:属性值; }
- 选择器
- 最常见是 需要改变样式的 元素名。
- 声明:
属性名:属性值;
- 数量: 一条 或 多条.
- 包围声明: 使用 花括号 .
- 选择器
selector {
declaration1;
declaration2;
...
declarationN
}
- 属性和属性值: 冒号 分隔
selector {property: value}
- 示例1: 将
h1
元素内的文字颜色 定义为红色- 同时,将字体大小设置为
14
像素。 - 选择器:
h1
- 属性名:
color
和font-size
- 属性值:
red
和14px
- 同时,将字体大小设置为
- css
h1{
/*文字颜色 color*/
color: red;
/*文字大小 font-size*/
font-size: 14px;
}
- html
<h1>花儿为什么那样红?</h1>
- 语法总结
- 每个规则(除了选择器的部分)都应该包含在 成对的 大括号里(
{}
)。 - 在每个声明里 要用冒号(
:
)将 属性 与 属性值 分隔开。 - 在每个规则里 要用分号(
;
)将 各个 声明 分隔 开。
- 每个规则(除了选择器的部分)都应该包含在 成对的 大括号里(
⑵ 值的 不同写法 和 单位
- Ⅰ. 颜色值的分类
- ① 颜色名称
- ② 十六进制 颜色值
- ③ rgb 颜色值
- 示例1: 十六进制 颜色值, 除了英文单词
red
,还可以使用 十六进制的颜色值#ff0000
:
p { color: #ff0000; }
- 示例2: 十六进制的 缩写法,使用 CSS 的缩写形式,可以 节约字节 :
- 缩写法:
#ff0000
=#f00
p { color: #f00; }
- 示例3: 使用 RGB 值
- 两种方法: 数字 和 百分比
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
- 百分比 不可省略: 当使用 RGB 百分比时,即使当值为 0 时
- 也要写 百分比符号。
- 0 像素,单位可以省略: 比如说,当尺寸为
0
像素时,0 之后 不需要使用px
单位- 因为 0 就是 0,无论单位是什么。
- Ⅱ. 加引号的 属性值
- 属性值中 有空格: 值为几个单词, 单词之间 还有空格,则要给值加引号
p {font-family: "sans serif";}
- Ⅲ. 多重声明
- 定义多个声明,则需要
- 用 分号 将每个声明 分开。
- 属性值后面 都加上分号
;
:- 原则上, 最后一条规则 是不需要加分号的
- 因为分号在英语中是一个 分隔符号,不是结束符号。
- 但是, 最好在每条声明的末尾 都加上分号,这么做的好处是
- 当你 增减声明时,会尽可能地 减少出错的可能性。
- 原则上, 最后一条规则 是不需要加分号的
- 定义多个声明,则需要
p {
text-align:center;
color:red;
}
- 一行 一个属性:
- 提升 可读性: 应该在每行 只描述一个属性,这样可以 提升样式代码的 可读性.
- 示例4: 一个宽度300px的 居中段落。
p{
width: 300px;
/*文字水平对齐 text-align*/
text-align: center;
}
- html
<p>《花儿为什么这样红》是电影《冰山上的来客》中的一首著名插曲,是塔吉克民歌改编而来。影片从真假古兰丹姆 与战士阿米尔的爱情悬念出发,讲述了边疆战士和杨排长 一起与特务假古兰丹姆斗智斗勇,最终胜利的阿米尔和真古兰丹姆 也得以重逢的故事。该片描绘了 边疆地区军民惊险的反特斗争生活。</p>
- Ⅳ. 空格 和 大小写
- ① css 空格 不影响:
- 空格 一般 不会影响 CSS 在浏览器的工作效果
- 不能 用空格的 位置
- 在 属性值 与 单位 之间不要 留有空格.
margin: 15px;
- 这会让一些 浏览器 造成识别问题.
- 在 属性值 与 单位 之间不要 留有空格.
- ② css 大小写 不敏感:
- 与 XHTML 不同,CSS 对大小写不敏感。
- 两个 大小写敏感的 选择器:
class
和id
名称 对大小写是敏感的,因为这两个是 html 中定义的名称.
- ① css 空格 不影响:
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
⑶ CSS 注释
- css 注释
/*
和*/
之间的内容 都是 CSS 注释 - 不解析: 在渲染代码时,它会被 浏览器忽略。
/* px 表示 “像素(pixels)”: 基础字号为 10 像素 */
font-size: 10px;
3. CSS 高级语法
- 主要内容
- 选择器的分组
- 继承及其问题
- 解决 Netscape 4 继承问题
- 不继承父元素的规则
⑴ 选择器的分组
- 选择器 分组
- 有 相同的声明 的 选择器,可以划分为一组。
- 即,这些元素 有相同的样式,所以可以使用相同的规则.
- 有 相同的声明 的 选择器,可以划分为一组。
- 一组 选择器之间的 分隔符号:
- 用 逗号 分隔
- 示例1: 标题 划分成一组
- 所有的标题元素 都是绿色的。
h1,h2,h3,h4,h5,h6 {
color: green;
}
⑵ 继承 及其 相关问题
- 父业子乘:
- 根据 CSS,子元素 有时候,可以 从父元素 继承属性。
- 示例1: 站点的
body
元素将使用Verdana
字体- (假如访问者的系统中 存在该字体的话)。
body {
font-family: Verdana, sans-serif;
}
- 继承属性:
- 子元素 诸如
p, td, ul, ol, ul, li, dl, dt
,和dd
等 ,将继承最高级元素 — 本例中是body
元素 所拥有的属性.
- 子元素 诸如
- 继承
body
元素的字体- 所有
body
的子元素,子元素的子元素, 都应该显示Verdana
字体 - 在大部分的现代浏览器中,都是这样。
- 所有
- 不继承的 解决办法
- 使用组选择器,重新写一遍样式
- 书写多余的代码, 来处理旧式浏览器 (如,Netscape 4) 无法理解继承的问题。
- 使用组选择器,重新写一遍样式
body {
font-family: Verdana, sans-serif;
}
p, td, ul, ol, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
- 不继承 父元素的规则
- 针对 特别元素,重新 写规则
- 如果不希望 字体被所有的子元素继承
- 比方说,你希望段落的字体是
Times
。没问题。 - 创建一个针对
p
的特殊规则,这样它就会 摆脱父元素的规则:
- 比方说,你希望段落的字体是
- 如果不希望 字体被所有的子元素继承
- 针对 特别元素,重新 写规则
body {
font-family: Verdana, sans-serif;
}
td, ul, ol, ul, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
p {
font-family: Times, "Times New Roman", serif;
}
4. CSS 选择器
4.1 派生选择器
-
派生 选择器 = 上下文 选择器
- 根据 元素位置
- 通过依据 元素 在其位置的 上下文关系,来确定某个标签的样式。
- 可以使标记 更加简洁。
- 根据 元素位置
-
示例1: 列表中的
strong
元素变为 斜体字,而不是通常的 粗体字,可以这样定义一个派生选择器:
li strong {
font-style: italic;
font-weight: normal;
}
- html
<p>
<strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong>
</p>
<ol>
<li>
<strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong>
</li>
<li>我是正常的字体。</li>
</ol>
- 只有 li 元素中的 strong 元素的样式为斜体字
- 无需为 strong 元素 定义特别的 class 或 id,代码更加简洁。
4.2 CSS id 选择器
- 主要内容
- id 选择器
- id 选择器和派生选择器
- 兼容老版本浏览器
- ⑴ id 选择器
- 根据 标签的
id
指定样式- 为标有特定
id
的 HTML 元素,指定 特定的样式。
- 为标有特定
- id 选择器的 定义
- 以 “
#
” 来定义:#id属性值
- 以 “
- 两个 id 选择器
- 第一个可以定义 元素的颜色为红色
- 第二个定义 元素的颜色为绿色:
#red {color:red;}
#green {color:green;}
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
-
⑵ 用 id 选择器 建立 派生选择器
-
在现代布局中,id 选择器 常常用于 建立派生选择器。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
- 样式只会应用于
- 出现在
id="sidebar"
的元素内的段落。
- 出现在
- ⑶ 一个选择器,多次使用
- 即使
id="sidebar"
的元素,只能在文档中 出现一次
- 即使
- 次数不限:
- id 选择器 作为 派生选择器也可以 被使用很多次
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}
- ⑷ 兼容 老版本浏览器
- id 选择器 即使不被用来 创建派生选择器,它也可以
- 独立发挥作用:
#sidebar {
border: 1px dotted #000;
padding: 10px;
}
-
根据这条规则
id ="sidebar"
的元素将拥有- 一个像素宽的黑色点状边框
- 其周围会有 10 个像素宽的内边距
- (padding,元素边框和内容 之间的空白)。
-
兼容 老版本浏览器
- 指明选择器 所属的元素
- 老版本的 Windows/IE 浏览器
- 可能会忽略这条规则, 除非你特别地定义,这个 选择器所属的元素:
-
id ="sidebar"
的div
元素- 指明所属标签:
标签名#id属性值
- 指明所属标签:
div#sidebar {
border: 1px dotted #000;
padding: 10px;
}
4.3 CSS 类选择器
- ⑴ 类选择器
- 类选择器的表示
- 以一个点号显示:
.class属性值
- 以一个点号显示:
- 示例1: 所有拥有
class="center"
的 元素 都居中。
.center {text-align: center}
- html
<h1 class="center">
居中显示的标题
</h1>
<p class="center">
居中对齐的 段落
</p>
- 类名的 第一个字符
- 不能使用 数字!
- 因为, 无法在 Mozilla 或 Firefox 中起作用。
- ⑵ 用 类选择器 创建 派生选择器
- 空格 分隔
- 类名为 fancy
class="fancy"
的元素 的内部的 表格单元.- 都以灰色背景 显示橙色文字。
- 类名为 fancy
- 空格 分隔
.fancy td{
color: #f50;
background: #666;
}
- html
<table class="fancy">
<tr>
<td>苹果</td>
<td>香蕉</td>
</tr>
<tr>
<td>葡萄</td>
<td>青枣</td>
</tr>
</table>
- ⑶ 限定 标签和类名
- 同时限定 标签名 和 类名
- 限定于指定的标签和类
- 元素名在前,类在后,中间没间隔
元素名.class属性值
- 类名为 fancy 的表格单元
- 将带有灰色背景的橙色。
- 同时限定 标签名 和 类名
td.fancy {
color: #f60;
background: #666;
}
- html
<td class="fancy">
4.4 CSS 属性选择器
- ⑴ 对 带有 指定属性的元素 设置样式
- 属性选择器
- 可以为 带有指定属性的 元素 设置样式
- 而不仅限于
class
和id
属性。
- 而不仅限于
- 可以为 带有指定属性的 元素 设置样式
- 属性选择器 表示符号
- 方括号
[]
, [属性名]
- 方括号
- 属性选择器
- ⑵ IE 对属性选择器的支持
- IE7 和 IE8: 只有在规定了 文档类型
!DOCTYPE
时- IE7 和 IE8 才支持属性选择器。
- (这个不用担心,文档基本结构,都会指明文档类型的)
- 在 IE6 及更低的版本中
- 不支持 属性选择器。
- ⑶ CSS 属性选择器
- 元素带有 指定属性
- 为带有
title
属性的所有元素设置样式:
[title] {
color:red;
}
- ⑷ 属性 和 值选择器
- 元素带有 指定属性和属性值
[属性名=属性值]
- 为
title="W3School"
的 所有元素设置样式
- 元素带有 指定属性和属性值
[title=W3School]
{
border:5px solid blue;
}
- html
<p><a title="w3school" href="https://www.w3school.com.cn/css/index.asp">W3school css 教程</a></p>
- ⑸ 设置 表单的样式
- 属性选择器 在为不带有
class
或id
的表单 设置样式时 特别有用:
- 属性选择器 在为不带有
input[type=text] {
width: 150px;
background-color: yellow;
}
input[type=button] {
width: 120px;
}
- html
<!-- 属性 选择器 -->
姓名:
<input type="text" />
<br />
<br />
提交:
<input type="button" value="提交信息" />
5. 创建 CSS
- 浏览器解析
- 当读到一个样式表时,浏览器会
- 根据样式表 来格式化 文档。
- 当读到一个样式表时,浏览器会
- 插入样式表的 3 种方法
- ① 外部样式表
- ② 内部样式表
- ③ 内联样式
- 多重 样式: 上面三种 混合使用的.
⑴ 外部样式表 ( link 标签,多个页面)
- 样式 应用于 很多页面
- 当样式需要 应用于很多页面时,外部样式表 最好的选择。
- 改变 整个站点(多个页面)的 外观
- 在使用外部样式表的情况下,你可以通过改变一个文件 来改变整个站点(多个页面)的外观。
- 链接到 外部样式表
- 每个页面使用
<link>
标签 链接到 外部样式表。
- 每个页面使用
<link>
标签位置- 在(文档的)头部
head
标签中:
- 在(文档的)头部
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
-
浏览器 和 样式表
- 浏览器会从 css 文件
mystyle.css
中 读到样式声明,并根据它来 格式文档。 - css 主要是 服务于浏览器的,浏览器也能认识 css .
- 浏览器会从 css 文件
-
不能含 标签:
- 样式表文件 不能包含 任何的 html 标签。
- html 和 css 是两个 不同的语法格式,不要混淆.
-
样式表的 扩展名
- 以
.css
扩展名进行保存。
- 以
-
一个样式表文件的例子:
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
- 不能 用空格的 位置
- 在 属性值 与 单位 之间不要 留有空格.
- 这会让一些 浏览器 造成识别问题.
⑵ 内部样式表 (style 标签,单个页面/文档)
- 单个文档 需要特殊的样式
- 当单个文档 需要特殊的样式时,就应该使用 内部样式表。
- 定义 内部样式表
- 你可以使用
<style>
标签在文档头部 定义内部样式表,就像这样:
- 你可以使用
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
⑶ 内联样式 (style 属性,单个元素)
- 样式仅需要在 一个元素上 应用一次时
- 使用 内联样式
- 由于要将表现和内容混杂在一起,内联样式会损失掉 样式表的许多优势。
- 使用内联样式
- 在相关的标签内 使用样式(
style
)属性。 style
属性可以包含- 任何 CSS 属性。
- 在相关的标签内 使用样式(
- 示例1: 改变 段落的颜色 和左外边距:
<p style="color: sienna; margin-left: 20px">
这是一个段落
</p>
⑷ 多重样式
- 如果属性 在不同的样式表中,被同样的选择器定义
- 那么属性值将
- 从 更具体的 样式表中 被继承过来。
- 那么属性值将
- 例如,外部样式表 拥有针对
h3
选择器的三个属性:
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
- 而内部样式表 拥有针对
h3
选择器的两个属性:
h3 {
text-align: right;
font-size: 20pt;
}
- 假如这个页面 拥有内部样式表,同时与外部样式表链接,那么
h3
得到的样式是:
color: red;
text-align: right;
font-size: 20pt;
- 样式 覆盖: 内部样式表,覆盖 外部样式表的样式
- 即颜色属性 继承于 外部样式表
- 而文字排列(text-alignment)和字体尺寸(font-size)会 被内部样式表中的 规则取代。
6. CSS 工作原理
⑴ 浏览器处理文件的 标准流程
- 浏览器处理文件的 标准流程
- 需要知道的是,下面的步骤 是浏览加载网页的简化版本
- 而且不同的浏览器 在处理文件的时候 会有不同的方式,但是下面的步骤 基本都会出现。
- ① 下载文档: 浏览器载入HTML文件(比如 从网络上获取)。
- ② 文档转化成 DOM: 将HTML文件 转化成一个DOM(Document Object Model)
- DOM: 文件 在计算机内存中 的表现形式
- ③ 拉取 相关资源( 下载 css):
- 接下来,浏览器会拉取 该 HTML 相关的大部分资源,比如 嵌入到页面的图片、视频和 CSS样式。
- JavaScript 则会稍后进行处理,简单起见,同时此节主讲CSS,所以这里对 如何加载JavaScript 不会展开叙述。
- 接下来,浏览器会拉取 该 HTML 相关的大部分资源,比如 嵌入到页面的图片、视频和 CSS样式。
- ④ 解析 css: 浏览器 拉取到 CSS 之后 会进行解析
- 根据 选择器的不同类型(比如
element、class、id
等)把他们分到 不同的“桶”中。 - 给节点 添加样式 (渲染树):浏览器基于 它找到的 不同的选择器,将不同的规则(基于选择器的规则,如元素选择器、类选择器、id选择器等)应用在 对应的 DOM的节点 中, 并添加 节点依赖的样式(这个中间步骤 称为 渲染树)。
- 根据 选择器的不同类型(比如
- ⑤ 结构布局: 上述的规则 应用于渲染树之后,渲染树 会依照 应该出现的结构 进行布局。
- ⑥ 展示(呈现/着色): 网页展示在屏幕上(这一步被称为着色)。
- 需要知道的是,下面的步骤 是浏览加载网页的简化版本
- 过程图
- 当浏览器 展示一个文件时,必须兼顾 文件的内容 和 文件的样式信息
- ① 下载文档 → 解析文档 →创建 DOM树 → 展示给用户
- ② 解析文档 → 下载 css 文件 → 解析 css → 添加样式 到 DOM 节点 → 展示给用户
⑵ DOM
- DOM
- Document Object Model 的缩写,文档对象 模型
- ① DOM 是 文件 (在 计算机 内存中的) 表现形式
- ② CSS 样式 和 文件内容的 结合:
- 对于DOM的理解 会很大程度上帮助你 设计、调试和维护你的 CSS,因为DOM 是你的CSS 样式和 文件内容的结合。
- 当你使用浏览器 F12 调试的时, 需要操作 DOM 以查看使用了哪些规则。
- DOM 的 节点:
- ① 结构树: 一个DOM 有一个 树形结构,标记语言中的 每一个 元素、属性 以及 每一段 文字 都对应着 结构树中的 一个节点(DOM node )。
- ② 节点: 由 节点本身 和 其他 DOM 节点的关系 定义
- 有些节点 有父节点,有些节点 有兄弟节点(同级节点)。
-
HTML 怎么转化成 DOM
- 在这个DOM中
- ①
<p>
元素 对应了 父节点- ②
p
的子节点: 是一个 text 节点 和三个对应了<span>
元素的 节点- ③
span
节点的子节点: 他们中的text
节点。
- ③
- ②
- 注意: 每个标签中的文本,也是 一个单独的 节点,
text
节点.
-
DOM 树
<p>
Let's use:
<span>Cascading</span>
<span>Style</span>
<span>Sheets</span>
</p>
- 添加 css 代码
- 浏览器会解析HTML, 并创造一个 DOM,然后 解析CSS。
- 现在 唯一的选择器就是
span
元素选择器,浏览器处理规则 会非常快! - 把同样的规则 直接使用在 三个
<span>
标签上,然后渲染出图像 到屏幕。
span {
border: 1px solid black;
background-color: lime;
}
-
会被 直接忽略的 css:
- 无法理解的 属性或者属性值,它会忽略 这些并继续解析 下面的CSS。
- 书写了错误的 CSS代码(比如 错误拼写)
- 还没有支持的 CSS代码的时候,
- 都会 直接忽略。
- 代表着 使用最新的 CSS优化 的过程中, 浏览器遇到 无法解析的规则 也不会报错。
-
后面的 覆盖前面的: 位置在后面的 (后设置的) css 优先级 更高.
- 当你为一个元素 指定多个CSS样式的时候,浏览器会加载 样式表中的 最后的CSS代码 进行渲染.
- 想使用一个很新的CSS特性但是不是所有浏览器都支持的时候(浏览器兼容)非常有用
- 示例1: 同时 设置两个宽度 (新属性的 浏览器兼容)
- 一些老的浏览器不接受
calc()
(CSS3 新增属性)作为一个值,则会直接忽略这个声明, 直接识别第一个 作为宽度值. - 新式的浏览器, 支持 第二个新属性,则会解析 并覆盖 第一行指定的宽度.
- 一些老的浏览器不接受
.box {
width: 500px;
width: calc(100% - 50px);
}
♣ 结束语 和 友情链接
- 捐助: 喜欢这篇文章吗? 持续更新中,捐助此文,向团团 表示鼓励和支持吧~❤
- 捐助二维码:
- 感谢:♥♥♥ 如果这篇文章 对您有帮助的话,可以点赞、评论、关注,鼓励下作者哦,感谢阅读 ~
- 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮( ̄▽ ̄)╭
- 转载 请注明出处 ,Thanks♪(・ω・)ノ
- 作者:Hey_Coder
- 来源:CSDN
- 原文:https://blog.csdn.net/VickyTsai/article/details/102902988
- 版权声明:本文为博主原创文章,转载请附上博文链接!