CSS
层叠样式
扩展 |
.css |
---|---|
互联网 |
text/css |
统一类型标识 | public.css |
开发 | 哈肯·维姆·莱、 |
1996 | |
样式 | |
标准 |
CSS
概 述
编辑
CSS
CSS
h2
标志这一个二级标题,它在级别h1
h3
一般来说级别越高的标题其字体也越大,h1
h2
h3
h1
h2
标题font
h2
h2
<h2><font color="red" bgcolor="white"><i>
使用 CSS</i></font></h2>
这些显示
h2
<h2>
使用 CSS</h2>
h2
h2 { color: red; background: white; font-style: italic; }
这样显示
CSS样式
包含 CSS的 XHTML文 件 示 例
编辑
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head>
<style type="text/css">
body{
background:#fff;
color:#777;
}
h1{
font-weight:bold;
font-style:italic;
font-family:sans-serif;
color:green;
}
</style>
</head>
<body>
<h1>這個句 子 用 綠色 、粗 體 和 斜體 字 顯示 </h1>
<p>普通 字 。</p>
<h1 style="color:red; background:green;">
這個句 子 用 大 的 、紅色 斜體 字 在 綠色 背景 上 顯示 ,通用 的 h1樣式 在 這裡被 取 代 了 。
</h1>
<h1 style="color: green;"><strong><em>這個句 子 用 綠色 、粗 體 和 斜體 字 顯示 </em></strong></h1>
</body>
</html>
主要 内容
编辑
CSS
- 选择
器 (Selector):多 个选择器可 以半角 逗号,
隔 开。 属性 (property):CSS1、CSS2、CSS3规定了 许多的 属性 ,目的 在 控 制 选择器 的 样式。- 值(value):
指 属性 接受 的 设置值,多 个关键字时大都 以空格 隔 开。
:
;
{ }
选择器
编辑
<div>
<span>
标签
CSS
基本 选择器
编辑
- 标签选择
器 (h1、p等 )——elementname
- 类别选择
器 (class)——.elementname
- ID选择
器 (ID)——#elementname
万 用 选择器 ——* ns|* *|*
属性 选择器 (也翻译为“通 配 符 选择器 ”)——[attribute]
属性 选择器
编辑
说明 | |
---|---|
[attribute]
|
attribute |
[attribute="value"]
|
attribute value
|
[attribute~="value"]
|
attribute value
|
[attribute|="value"]
|
attribute value value- 开头 |
[attribute^="value"]
|
attribute value
|
[attribute$="value"]
|
attribute value
|
[attribute*="value"]
|
attribute value |
组合选择器
编辑
CSS
说明 | |
---|---|
A > B |
|
A ~ B |
|
A + B |
|
A B |
选择器 使用 示 例
编辑
p{
font-size: 110%;
font-family: garamond, sans-serif;
}
h2{
color: red;
background: white;
}
.highlight{
color: red;
background: yellow;
font-weight: bold;
}
p
、h2
.highlight
,color: red
color
red
color
P
(H2
(2级标题)获得Garamond
,Garamond
sans-serif
class
class
class
,
<P class="highlight">這個段落 將 被 顯示 為 黃 底 紅 字 粗 體 。</P>
显示为
这个
<style>
style="/*CSS
︰
<p style="color:red; background:yellow; font-weight:bold;">
這個段落 同樣 會 被 顯示 為 黃 底 紅 字 粗 體 。
</p>
其它选择器
编辑
CSS
引入CSS规则的 多 种方式 及其层叠性
编辑
CSS
作者 样式作者 可 以在他 的 HTML文 件 中 确定一 个外来 的 、独立 的 CSS文 件 (外部 样式表 ),其优先 级最低 作者 可 以将CSS信 息 包含 在 HTML文 件 内 (内部 样式表 )作者 可 以在一 个HTML指令 内 结合CSS指令 (内 联样式 ),其优先 级最高 。一般这样做是为了在特殊情况下,把 上面 来 源 的 CSS抵消掉
客 户端自 定 义样式 (client-side style sheet)- 浏览网页
的 用 户可以自己 在 本地 计算机上 自己 写 1个CSS文 件 ,然 后 就可以在浏览器 内通 过设置 好 特定 选项,来 加 载自己 的 CSS文 件 。这个CSS文 件 可 以用在 所有 的 HTML文 件 上 。当 网页作者 没 有 设定某 项规则,但 存在 对应的 用 户自定 义规则时,用 户的规则就会起 作用 。假 如作者 的 CSS文 件 与 读者的 相 冲突,浏览器 会 采 用 作者 的 规则。如果读者有 特殊 要求 ,可 以通过在自 定 义规则末尾 添加 !important
提 升 自 定 义规则的显示优先权。(网页作者 也可以使用 !important
给规则提升 权限,但 是 优先级别比 不 过由用 户写的 !important
声明 ,!important
对于网页作者 的 意 义仅在 于网页开发阶段 的 规则冲突测试)
- 浏览网页
- 浏览
器 样式假 如外部 没 有 特 别指定 一个样式的话,一般浏览器自己有一个内在的样式。由 于不同 浏览器 的 默 认样式 并不一致 ,所以 讲究美 观的网页的 设计者 一般喜欢去掉这个默认的样式。
其次还需
行内 样式- ID选择
器 - class选择
器 - 标签选择
器 通用 选择器 (也就是 通 配 符 选择器 ,用 得 少 )
特殊 性 优先原 则
编辑
不同 来 源 的 规则优先性
编辑
如果
行内 样式内部 样式在 HTML中通 过<link>
标签直接 引入的 外部 样式表 在 CSS中通 过@import
语句间接引入的 外部 样式表 - 浏览网页
的 用 户自己 定 义的样式表 (需要 手 动加载) - 浏览
器 默 认的样式(如标题有默 认大小 、段落 之 间有默 认间距等,不同 浏览器 的 默 认样式 不完全 一 样)
CSS!important
用 户从本地 加 载的重要 自 定 义样式 - 网页设计
者 设定的 重要 样式
设计
权重分数 比 较机制
编辑
- 1个行
内 样式占 1000分 - 1个id选择
器 占 100分 - 1个class选择
器 占 10分 - 1个标签选择器
占 1分
组合
举例:
.type1 #id3{color: green; font-size: 20px;}
div p #id3{color: blue; background-color: grey;}
靠 后 者 优先原 则
编辑
行 级元素 与 块级元素
编辑
方 盒模型
编辑
浮动与定位
编辑
包含 块、定位
编辑
层次与 层叠上下 文
编辑
层叠
格式 化 上下 文
编辑
- 避免
垂直 方向 不同 元素 的 相 邻外边距自 动合并 清 除 因 为为子 元素 设置了 浮动而可能 造成 的 父 元素 高度 塌陷- 实现
一 列 宽度固定 、一列宽度不固定的双列宽度自适应布局
其它
编辑CSS档内也可以/*
*/
//
)开头
历史
编辑发展历史
编辑早期 样式表 的 历史
编辑
HTML规范虽然规定
1993
<link>
标签
CSS的 诞生与 发展
编辑
1994
1997
从2006<h1>
<h2>
<div>
标签
CSS3引入
版本 历史
编辑
CSS1
编辑于1994
支持 字体 的 大小 、字形 、强 调支持 字 的 颜色、背景 的 颜色和 其他元素 支持 文章 特 征 如字母 、词和行 之 间的距离支持 文字 的 排列 、图像、表 格和 其他元素 支持 边缘、围框和 其他关于排 版 的 元素 支持 id和 class
CSS2-2.1
编辑1998
- 绝对
的 、相 对的和 固定 的 定 比 特 素 、媒体 型 的 概念 、 双 向 文 件 和 一 个新的 字体 。
CSS2.1
CSS3
编辑CSS3标准
CSS3
CSS3
CSS4
编辑W3C于2011
CSS4
采 纳的困 难
编辑
浏览
其次,
另外还有
特 点
编辑
优势
编辑网页
文 件 的 可 读性加 强 文 件 的 结构更 加 灵活作者 和 读者可 以自己 决定文 件 的 显示文 件 的 结构简化了
另外,
一 个整个网站或其中一部分网页的显示信息被集中在一个地方,要 改 变它们很方便 不同 的 读者可 以有不同 的 样式,比 如有的 读者需要 字体 比 较大- HTML
文 件 本身 的 范围变小了 ,它的结构简单了 ,它不需要 包含 显示的 信 息
CSS还可以控
缺点
编辑
CSS
- 浏览
器 不同 的 支持 - 浏览
器 对CSS的 支持 没 有 统一,造成 不同 的 浏览器 显示效果 不同 。例 如在微 软Internet Explorer的 旧 版本 6.0,有 许多独 有 的 CSS 2.0属性 ,但 错误显示很多重要 的 属性 ,例 如:width
,height
,和 float
[24]。许多CSS编写人 员为了 尽 可能 在 常用 的 各 个浏览器中 达到一致 的 版 面 编排,要 写 很多针对各 个浏览器的 不同 的 CSS代 码。当 版 面 编排很复杂时,要 在 各 个浏览器里 获取相 同 效果 是 不可能 的 。
- 浏览
- CSS
没 有 父 选择器
不能 明 确地指定 继承性 - 样式
的 继承性 ,建立 在 浏览器 中 DOM元素 的 层级和 具体 的 规则上 ,引用 CSS2说明中 的 章 节6.4.1。[25]
- 样式
垂直 控 制 的 局限 元素 的 水平 放置 普遍 地 易 于控制 ,垂直 控 制 则不然 。简单来 说,垂直 地 围绕一 个元素 、页脚的 放置 不能 高 于可见视窗 (viewport,视窗或 屏 幕 的 可 见范围[26])的 底部 范围。这需要 复杂的 样式规则,或 是 规则简单,但 不 被 广泛支持 。
没 有 算 术功能 直 至 CSS 2.1的 CSS没 有 办法明 确简单地进行计算(例 如:margin-left: 10% - 3em + 4px;
)。计算功 能 在 很多情 况下都 是非 常 有用 的 ,例 如:总字段中 计算字 段 的 尺寸 限 制 。无论如何 ,CSS WG[27]发表了 CSS局限 性 的 草案 。IE 5至 IE 7提供 expression()
函数 (即 所 谓的CSS表 达式)来 执行计算功 能 ,例 如left: expression(document.body.offsetWidth - 110 + "px");
。为了与 CSS标准看 齐,并且该函数 性能 差 ,微 软从IE 8开始停止 支持 此函数 。- CSS 3
中 具有 calc()
表 达式以执行 计算功 能 [28][29]。
p {
margin: calc (1rem - 2px) calc (1rem - 1px)
}
缺乏 唯一 性 同 样的效果 可 以用不同 的 属性 来 完成 ,这对不 少 的 CSS编写人 员造成 困 扰。例 如position
、display
与 float
定 义了不同 的 配置 方式 ,而且不能 有效 的 交替 使用 。一 个display: table-cell
元素 不能 指定 float
或 是 position: relative
,因 为指定 float: left
的 元素 不 应该受到display
效果 的 影 响。再 者 ,没 有 考 虑到新 建立 属性 所 造成 的 影 响,例 如在表 格 中 你应该使用 border-spacing
而不是 margin-*
来 指定 表 格 元素 。这是因 为依照 CSS准 则,表 格 内部 元素 是 没 有 边界(margin)的 。
CSS的 性能 优化
编辑
使用 语法缩写
编辑
无障碍 设计
编辑
参 见
编辑
参考 资料
编辑
文 内 引用
编辑
- ^ Carey Wodehouse. What is CSS? Cascading Style Sheets - Hiring Headquarters. Upwork Global Inc. 2005
年 6月 [2018年 4月 21日 ]. (原始 内容 存 档于2018年 4月 22日 ) (英 语). - ^ 2.0 2.1 CSS Reference. Mozilla Developer Network. [2011-11-23]. (
原始 内容 存 档于2011-10-14) (英 语). - ^ 莫振杰 2016,
第 191页,第 12章 “性能 优化” - ^ Attribute selectors. Mozilla Developer Network. [2011-11-23]. (
原始 内容 存 档于2011-11-12). - ^ Hyphen [-=] Attribute Selector. msdn.microsoft.com. [2012-03-17]. (
原始 内容 存 档于2015-09-30). - ^ What is cascading style sheet (CSS)?. WhatIs.com. 2005
年 6月 [2018年 4月 21日 ]. (原始 内容 存 档于2018年 4月 21日 ) (英 语). - ^ 莫振杰 2016,
第 223页 - ^ Glen Stansberry. 10 Biggest Milestones in Web Development [Web发展
史上 的 十 大 里程 碑 ]. "被 遗忘" (译者). 2008年 11月29日 [2018年 4月 21日 ]. (原始 内容 存 档于2018年 4月 21日 ) (中 文 (中国 大 陆)). - ^ David Gourley & Brian Totty & Marjorie Sayer & Sailu Reddy & Anshu Aggarwal.
第 1章 “HTTP概 述 ”第 6节“连接”第 3小 节“使用 Telnet实例”. HTTP权威指南 [HTTP: The Definitive Guide]. 陈涓(翻 译),赵振平 (翻 译),李 盼(责任编辑),丁 晓昀 (执行编辑) 1.人民 邮电出版 社 . 2012: 16–17. ISBN 978-7-115-28148-7 (中 文 (中国 大 陆)). - ^ 10.0 10.1 10.2 10.3 10.4 Mark Norman Francis. 互联网和Web
的 历史以及Web标准的 演 化 . 站长之 家 . W3C标准WEB前 端 DHTML精 英 俱乐部 (翻 译). 2009年 10月 23日 [2018年 4月 21日 ]. (原始 内容 存 档于2018年 4月 21日 ) (中 文 (中国 大 陆)). - ^ Lie, Håkon. Cascading HTML style sheets -- a proposal. W3C. 1994-10-10 [2023-04-02]. (
原始 内容 存 档于2017-06-29) (英 语). - ^ 12.0 12.1 12.2 12.3 Roger Johansson. Web标准发展
建 议与实例. 网易学院 ,网易科技 . "x5studio" (翻 译). [2018年 4月 21日 ]. (原始 内容 存 档于2018年 4月 21日 ) (中 文 (中国 大 陆)). - ^ CSS BBS站长. DIV+CSS
是 WEB标准化 发展的 必经之 路 . A5创业网. 2009年 1月 12日 [2018年 4月 21日 ]. (原始 内容 存 档于2018年 4月 22日 ) (中 文 (中国 大 陆)). - ^ CSS1
要求 . W3C. (原始 内容 存 档于2004-08-20) (英 语). - ^ CSS2
要求 . W3C. (原始 内容 存 档于2004-08-20) (英 语). - ^
要求 候 选者. W3C. (原始 内容 存 档于2004-08-11) (英 语). - ^ CSS3发展过程报告. W3C. (
原始 内容 存 档于2004-08-11) (英 语). - ^ Bert Bos. Descriptions of all CSS specifications. World Wide Web Consortium. 2011-02-18 [2011-08-04]. (
原始 内容 存 档于2011-03-31). - ^ W3C︰http://www.w3.org/2011/05/css-pr.html.en (页面
存 档备份,存 于互联网档案 馆) - ^ Selectors Level 4. www.w3.org. [2011-11-23]. (
原始 内容 存 档于2012-05-30). - ^ Gilbertson, Scott. Discover What’s New in CSS 4. [2011-11-23]. (
原始 内容 存 档于2012-05-30). - ^ pointer-events. Mozilla Developer Network. [2012-04-11]. (
原始 内容 存 档于2012-03-20). - ^ IE6
将 告 别历史 死 后 大 快 人心 的 十 件 事情 . COMSHARP CMS,站长之 家 (转载). 2009年 4月 16日 [2018年 4月 21日 ]. (原始 内容 存 档于2018年 4月 21日 ) (中 文 (中国 大 陆)). - ^ Internet Explorer vs. the Standards, a primer on standards violations in Explorer. [2008-10-13]. (
原始 内容 存 档于2005-08-26). - ^ Assigning property values, Cascading, and Inheritance. [2008-10-13]. (
原始 内容 存 档于2008-10-26). - ^ Visual formatting model. www.w3.org. [2008-10-13]. (
原始 内容 存 档于2009-01-05). - ^ CSS Values and Units Module Level 3. W3C. 2012-08-28 [2008-10-13]. (
原始 内容 存 档于2008-04-23) (英 语). - ^ CSS Values and Units Reference. MSDN (
英 语).[永久 失效 链接] - ^ calc. Mozilla Developer Network. [2012-04-16]. (
原始 内容 存 档于2012-05-05) (英 语). - ^
常用 CSS缩写语法总结互联网档案 馆的 存 档,存 档日期 2011-01-12.
补充来 源
编辑
- 莫振杰. HTML
与 CSS进阶教程 1.中国 北京 :人民 邮电出版 社 . 2016年 . ISBN 978-7-115-43295-7 (中 文 (中国 大 陆)).
外部 链接
编辑
官 方 网站- W3C
的 CSS校 验服务. [2005-09-02]. (原始 内容 存 档于2011-02-14) (英 语). - CSS4
相 容 性 測 試 . (原始 内容 存 档于2012年 12月19日 ) (英 语).