CSS (层叠 样式 表) _ 百度 百科

(层叠样式表)

编辑 锁定
层叠 样式 表 (英文 全称: Cascading Style Sheets) 表现 一种 用来 表现 HTML (标准 通用 标记 的 的 一个 应用) 或 XML (标准 通用 标记 语言 的 一个 子 集) 等 文件 样式 的 计算机 语言 .CSS 不仅 可以 静态地 修饰 网页, 还 可以 配合 各种 脚本 语言 动态 地 对 网页 各 元素 进行 格式化. [1]
CSS CSS 对 网页 中 元素 位置 的 排版 进行 像素 级 级 控制, 支持 几乎 所有 的 字体 字号 样式, 拥有 对 网页 对象 和 模型 样式 编辑 的 能力. [2]
中文名
层叠样式表
外文名
Fogli di stile
外语缩写
CSS (也 作 文件 扩展 名)
其他称呼
级联样式表
1990 年, Tim Berners-Lee 和 Robert Cailliau 共同 发明 了 Web. 1994 年, Web 真正 走出 实验室. [3]

从 HTML 被 发明 开始, 样式 就 以 各种 形式 存在. 不同 的 浏览 器 结合 它们 各自 的 样式 语言 为 用户 提供 页面 效果 的 控制. 最初 的 HTML 只 包含 很少 的 显示 属性.

随着 HTML 的 成长, 为了 满足 页面 设计者 的 要求, HTML 添加 了 很多 显示 功能. 但是 随着 这些 功能 的 增加, HTML 变 的 越来越 杂乱, 而且 HTML 页面 也 越来越 臃肿. 于是 CSS 便 诞生了.

1994 年 哈 坤 · 利 提出 了 CSS 的 最初 建议. 而 当时 伯特 · 波斯 (Bert Bos) 正在 设计 一个 名为 Argo 的 浏览 器, 于是 他们 决定 一起 设计 CSS.

其实 当时 在 互联网 界 已经 有 过 一些 统一 样式 表 语言 的 建议 了, 但 CSS 是 第 一个 含有 “层叠” 丰 意 的 样式 表 语言. 在 中 CSS, 一个 文件 的 样式 可以 从 其他 的 样式 表 中 继承. 读者 在 有些 地方 可以 使用 他 自己 更 喜欢 的 样式, 在 其他 地方 则 继承 或 “层叠” 作者 的 样式. 这种 层叠 的 方式 使 作者 和 读者 都 可以 灵活 地 加入 自己 的 设计, 混合 每个 人 的 爱好.

哈 坤 于 1994 年 在 芝加哥 的 一次 会议 上第 一次 提出 了 CSS 的 建议 1995 年 的 www 网络 会议 上 CSS 又一次 被 提出, 博斯 演示 了 Argo 浏览 器 支持 CSS 的 例子, 哈肯 也 展示 了支持 CSS 的 Arena 浏览 器.

同年, W3C 组织 (World Wide Web Consortium) 成立, CSS 的 创作 成员 全部 成为 了 W3C 的 工作 小组 并且 全力以赴 负责 研发 CSS 标准, 层叠 样式 表 的 开发 终于 走上正轨. 有 越来越 多 的 成员 参与 其中, 例如 微软公司 的 托马斯 · 莱尔顿 (Thomas Reaxdon), 他 的 努力 最终 令 InternetExplorer 浏览 器 支持 CSS 标准. 哈 坤, 波斯 和 其他 一些 人 是 这个 项目 的 主要 技术 负责 人. 1996 年底, CSS 初稿 已经 完成, 同年 12 月, 层叠 样式 表 的 第 一份 正式 标准 (Fogli di stile a cascata di livello 1) 完成, 成为 w3c 的 推荐 标准.

1997 年初, W3C 组织 负责 CSS 的 工作 组 开始 讨论 第一版 中 没有 涉及 到 的 问题. 其 讨论 结果 组成 了 1998 年 5 月 出版 的 CSS 规范 第二 版. [4-5]

编程工具

记事 本: 使用 di Windows 系统 自带 的 记事 本 可以 编辑 网页 只 需要 在 保存 文档 时, 以 .html 为 后缀 名 进行 保存 即可.. [6]
Dreamweaver: 它 与 Flash, Fireworks 并称 网页 三剑客 .Dreamweaver 是 集 网页 制作 和 管理 网站 于 一身 的 所见即所得 网页 编辑 器, 它 是 第 一套 针对 专业 网页 设计师 特别 开发 的 视觉 化 网页 开发 工具, 利用 它 可以 轻而易举 地 制作 出 充满 动感 的 网页. [7]

CSS 为 HTML 标记 语言 提供 了 一种 样式 描述, 定义 了 其中 元素 的 显示 方式 .CSS 在 Web 设计 领域 是 一个 突破. 利用 它 可以 实现 修改 一个 小 的 样式 更新 与之 相关 的 所有 页面 元素.

总体 来说, CSS 具有 以下 特点:

丰富的样式定义

CSS 提供 了 丰富 的 文档 样式 外观, 以及 设置 文本 和 背景 属性 的 能力; 允许 为 任何 元素 创建 边框, 以及 元素 边框 与 其他 元素 间 的 距离, 以及 元素 边框 与 元素 内容 间 的 距离; 允许 随意 改变 文本 的大小写 方式, 修饰 方式 以及 其他 页面 效果.

易于使用和修改

CSS 可以 将 样式 定义 在 HTML 元素 的 stile 属性 中, 也 可以 将 其 定义 在 HTML 文档 的 intestazione 部分, 也 可以 将 样式 声明 在 一个 专门 的 CSS 文件 中, 以 供 HTML 页面 引用. 总之, CSS 样式 表 可以将 所有 的 样式 声明 统一 存放, 进行 统一 管理.

另外, 可以 将 相同 样式 的 元素 进行 归类, 使用 同 一个 样式 进行 定义, 也 可以 将 某个 样式 应用 到 所有 同名 的 HTML 标签 中, 也 可以 将 一个 CSS 样式 指定 到 某个 页面 元素 中. 如果 要修改 样式, 我们 只 需要 在 样式 列表 中 找到 相应 的 样式 声明 进行 修改.

多页面应用

CSS 样式 表 可以 单独 存放 在 一个 CSS 文件 中, 这样 我们 就 可以 在 多个 页面 中 使用 同 一个 CSS 样式 表 .CSS 样式 表 理论上 不 属于 任何 页面 文件, 在 任何 页面 文件 中 都 可以 将 其 引用.这样 就 可以 实现 多个 页面 风格 的 统一.

层叠

简单 的 说, 层叠 就是 对 一个 元素 多次 设置 同 一个 样式, 这 将 使用 最后 一次 设置 的 属性 值. 例如 对 一个 站点 中 的 多个 页面 使用 了 同 一套 CSS 样式 表, 而 某些 页面 中 的 某些 元素 想 使用 其他 样式, 就 可以 针对 这些 样式 单独 定义 一个 样式 表 应用 到 页面 中. 这些 后来 定义 的 样式 将对 前面 的 样式 设置 进行 重写, 在 浏览 器 中 看到 的 将 是 最后 面 设置 的样式 效果.

页面压缩

在 使用 HTML 定义 页面 效果 的 网站 中, 往往 需要 大量 或 重复 的 表格 和 carattere 元素 形成 各种 规格 的 文字 样式, 这样 做 的 后果 就是 会 产生 大量 的 HTML 标签, 从而 使 页面 文件 的 大小 增加. 而 将样式 的 声明 单独 放到 CSS 样式 表 中, 可以 大大 的 减小 页面 的 体积, 这样 在 加载 页面 时 使用 的 时间 也会 大大 的 减少. 另外, CSS 样式 表 的 复 用 更大 程序 的 缩减 了 页面 的体积, 减少 下载 的 时间. [8]

CSS 是 一种 定义 样式 结构 如 字体, 颜色, 位置 等 的 语言, 被 用于 描述 网页 上 的 信息 格式化 和 现实 的 方式 .CSS 样式 可以 直接 存储 于 HTML 网页 或者 单独 的 样式 单 文件. 无论 哪一种 方式, 样式 单 包含 将 样式 应用 到 指定 类型 的 元素 的 规则. 外部 使用 时, 样式 单 规则 被 放置 在 一个 带有 文件 扩展 名 _css 的 外部 样式 单 文档 中.

样式规则是可应用于网页中元素,如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中,外部样式单保存在独立的文档中,网页通过一个特殊标签链接外部样式单。

名称 CSS 中 的 “层叠 (a cascata)” 表示 样式 单 规则 应用于 HTML 文档 元素 的 方式. 具体地说, CSS 样式 单 中 的 样式 形成 一个 层次 结构, 更 具体 的 样式 覆盖 通用 样式. 样式 规则 的 优先 级由 CSS 根据 这个 层次 结构 决定, 从而 实现 级联 效果. [9]

CSS 属性 和 属性 值

属性

属性 的 名字 是 一个 合法 的 标识符, 它们 是 CSS 语法 中 的 关键字 一种 属性 规定 了 格式 修饰 的 一个 方面 例如:.. Colore 是 文本 的 颜色 属性, 而 text-trattino 则 规定 了 段落 的 缩进.

要掌握一个属性的用法,有六个方面需要了解。具体叙述如下:

①该属性的合法属性值(valore legale). 显然 段落 缩进 属性 text-trattino 只能 赋给 一个 表示 长度 的 值, 而 表示 背景 图案 的 background.image 属性 则 应该 取 一个 表示 图片 位置 链接 的 值 或者 是 关键字 nessuno 表示 不用 背景 图案.

②该属性的默认值(valore iniziale)。当在样式表单中没有规定该属性,而且该属性不能从它的父级元素那儿继承的时候,则浏览器将认为该属性取它的默认值。

③该属性所适用的元素(Si applica a). 有的 属性 只 适用 于 某些 个别 的 元素, 比如 white-space 属性 就 只 适用 于 块 级 元素 .white-spazio 属性 可以 取 normale, pre 和 nowrap 三个 值. 当 取 normale 时候 的, 浏览 器将 忽略 掉 连续 的 空白 字符, 而 只 显示 一个 空白 字符. 当 取 pre 的 时候, 则 保留 连续 的 空白 字符. 而 取 nowrap 的 时候, 连续 的 空白 字符 被 忽略, 而且 不 自动 换 行.

④该属性的值是否被下一级继承(ereditato)。

⑤如果该属性能取百分值(percentuale), 那么 该 百 分值 将 如何 解释. 也 就是 百 分值 所 相对 的 标准 是 什么. 如 margine 属性 可以 取 百 分值, 它 是 相 对于 margine 所 存 元素 的 容器 的 宽度.

⑥该属性所属的媒介类型组(gruppi di media)。

属性值

①整数和实数

这 和 普通 意义 上 的 整数 和 实 数 没有 多大 区别. 在 CSS 中 只能 使用 浮点 小数, 而 不能 像 其他 编程 语言 那样 使用 科学 记 数 法 表示 实 数, 即 1.2E3 在 CSS 中将 是 不 合法 的.下面 是 几个 正确 的 例子, 整数: 128, -313, 实 数: 12.20,1415, -12,03.

②长度量

一个长度量由整数或实数加上相应的长度单位组成。长度量常用来对元素定位。而定位分为绝对定位和相对定位,因而长度单位也分为相对长度单位和绝对长度单位。

相对 长度 单位 有: em-- 当前 字体 的 高度, 也 就是 Font.Size 属性 的 值; ex-- 当前 字体 中小 写 字母 x 的 高度; Dx-- 一个 像素 的 长度, 其 实际 的 长度 由 显示器 的 设置决定, 比如 在 800 木 600 的 设置 下, 一个 像素 的 长度 就 等于 屏幕 的 宽度 除以 800.

另一一点值得注意的是,子级元素不继承父级元素的相对长度值,只继承它们的实际计算值。

③百分数量(percentuali

百分数量就是数字加上百分号。显然,百分数量总是相对的,所以和相对长度量一样,百分数量不被子级元素继承。 [10]

CSS 选择 器

类型选择器

CSS 中 的 一种 选择 器 是 元素 类型 的 名称. 使用 这种 选择 器 (称为 类型 选择 器), 可以 向 这种 元素 类型 的 每个 实例 上 应用 声明. 例如, 以下 简单 规则 的 选择 器 是 H1 , 因此 规则 作用 于 文档 中 所有 的 H1 元素:

H1 {color: rosso}

简单属性选择器

CLASS 属性

CLASSE 属性 允许 向 一 组 在 CLASSE 属性 上 具有 相同 值 的 元素 应用 声明 .BODY 内 的 所有 元素 都有 CLASSE 属性. 从 本质 上讲, 可以 使用 CLASSE 属性 来 分类 元素, 在 样式 表 中 创建 规则 来 引用 CLASS属性 的 值, 然后 浏览 器 自动 将 这些 属性 应用 到 该 组 元素.

类选择器以标志符(句点)开头,用于指示后面是哪种类型的选择器。对于类选择器,之所以选择句点是因为在很多编程语言中它与术语“类”相关联。翻译成英语,标志符表示“带有类名的元素”。

ID 属性

ID 属性 的 操作 类似于 CLASSE 属性, 但 有 一点 重要 的 不同 之 处:.. ID 属性 的 值 在 整篇 文档 中 必须 是 唯一 的 这 使得 ID 属性 可 用于 设置 单个 元素 的 样式 规则 包含 ID 属性 的 选择器 称为 ID 选择 器.

需要 注意 的 是, ID 选择 器 的 标志 符 是 散列 符号 (#). 标志 符 用来 提醒 浏览 器 接下来 出现 的 是 ID 值.

STILE 属性

尽管 在 选择 器 中 可以 使用 ID CLASSE 和 属性 值, STILE 属性 实际上 可以 替代 整个 选择 器 机制. 不是 只 具有 一个 能够 在 选择 器 中 引用 的 值 (这 正是 ID 和 CLASSE 具有 的 值), STILE 属性的 值 实际上 是 一个 或 多个 CSS 声明.

通常 情况 下, 使用 CSS, 设计者 将把 所有 的 样式 规则 置于 一个 样式 表 中, 该 样式 表 位于 文档 顶部 的 STILE 元素 内 (或在外部进行链接). 但是, 使用 STILE 属性 能够 绕过 样式 表 将 声明 直接 放置 到 文档 的 开始 标记 中.

组合选择器类型

可以 将 类型 选择 器, ID 选择 器 和 类 选择 器 组合 成 不同 的 选择 器 类型 来 构成 更 复杂 的 选择 器. 通过 组合 选择 器, 可以 更加 精确 地 处理 希望 赋予 某种 表示 的 元素. 例如, 要 组合类型 选择 器 和 类 选择 器, 一个 元素 必须 满足 两个 要求: 它 必须 是 正确 的 类型 和 正确 的 类 以便 使 样式 规则 可以 作用 于 它.

外部信息:伪类和伪元素

在 中 CSS1, 样式 通常 是 基于 在 HTML 源 代码 中 出现 的 标记 和 属性. 对于 很多 设计 情景 而言 这种 做法 完全 可行, 但是 它 无法 实现 设计者 希望 获得 的 一些 常见 的 设计 效果.

设计 伪 类 和 伪 元素 可以 实现 其中 的 一些 效果. 这 两种 机制 扩充 了 CSS 的 表现 能力. 在 中 CSS1, 使用 伪 类 可以 根据 一些 情况 改变 文档 中 链接 的 样式, 如 根据 链接 是否 被 访问, 何时 被 访问 以及 用户 和 文档 的 交互 方式 来 应用 改变. 借助于 伪 元素, 可以 更改 元素 的 第 一个 字母 和 第一 行 的 样式, 或者 添加 源 文档 中 没有 出现 过 的 元素.

伪 类 和 伪 元素 都不 存在 于 HTML; 也就是说, 它们 在 HTML 代码 中 是 不 可见 的 这 两种 机制 都 得到 了 精心 设计 以便 能够 在 CSS 以后 的 版本 中 做 进一步 地 扩充;. 也就是说实现 更多 的 效果. [11]

在 CSS 2.1 规范 中, 识别 符 (包括 选择 符 中 的 元素 名, 类, ID) 只能 包含 A ~ Z, a ~ z, 0 ~ 9 等 字符, 加上 连 字符 "-", 下划线 "_" . 识别 符 不能 以 数字 开头, 以 连 字符 和 下划线 开头 也是 不允许 的 只有 属性, 属性 值, 单位, 伪 类, 伪 元素 和 “@” 规则 可以 由 连 字符. “-”. 开头 同时, 其他 元素名称, 类 和 ID 标识符 也 不允许 用 连 字符 开头.

CSS 的 识别 符 也 需要 用 反斜杠 “\” 规避 特殊 字符, 这些 规避 字符 遵循 IS010646 规范 特殊 字符 的 规避 方法 有 两种:. 第 一种 方法 是 遇到 特殊 字符 则 在 这些 字符 前 直接 添加 反斜杠, 例如, “AT & T” 变为 “AT \ & T”; 另 一种 方法 为 用 反斜杠 和 Unicode 或 IS010646 等值 的 十六 进制 数值 一起, 规避 特殊 字符, 例如, “AT & T” 变为“AT \ 26T”. [12]

网站

在 HTML 文件 里加 一个 超级 链接, 引入 外部 的 CSS 文档. 这个 方法 最 方便 管理 的 的 的 网页 风格, 它 让 网页 的 文字 内容 与 版面 版面 只要. 只要 在 一个 CSS 文档 内 (扩展 名为 CSS) 定义 好 网页 的 风格, 然后 在 网页 中 加 一个 超级 连接 档 档档, 那么 网页 就会 按照 在 CSS 文档 内 定义 好的 风格 显示 出来. [13]
层叠样式表(Foglio di stile CSS, CSS) 有助于 实现 负责任 的 设计 Web .CSS 对 开发 者 构建 Web 站点 的 影响 很大, 并且 这种 影响 可能 是 无止境 的. 将 网页 的 大部分 甚至 是 全部 的 表示 信息 从 (X) HTML 文件 中 移出, 并将 它们 保留 在 一个 样式 表 中 有 诸多 优点, 如 降低 文件 大小, 节省 网络 带宽 以及 易于 维护 等. 此外, 站点 的 表现 信息 和 核心 内容 相 分离, 使得 站点 的 设计 人员 能够在 短暂 的 时间 内 对 整个 网站 进行 各种各样 的 修改. [14]
CSS 简化 了 网页 的 格式 代码, 外部 的 样式 表 还会 被 浏览 器 保存 在 缓存 里, 加快 了 下载 显示 的 速度, 也 减少 了 需要 上传 的 代码 数量 (因为重复设置的格式将被只保存一次). 只要 修改 保存 着 网站 格式 的 CS 样式 表 文件 就 町 以 改变 整个 站点 的 风格 特色, 在 修改 页面 数量 庞大 的 站点 时, 显得 格外 有用. 这就 避免 了 一个 个 网页 的 修改, 大大 减少 了 工作量. [15]
参考资料
  • 1. 张爱华, 吕京涛 .CSS 快速 入门: 青岛 出版社, 2000 年 09 月: 2
  • 2. 黄雪琴, 耿 强, 陈显军. 基于 CSS + DIV 的 自适应 宽度 网页 布局 方法 [J]. 计算机 与 现代化, 2014 (6).
  • 3. 维姆莱, 波斯 .CSS 权威 教程 (第三版): 清华大学 出版社, 2009.1: 第 3 页
  • 4. 祝红涛, 张钦 .CSS 网络 大 讲堂: 清华大学 出版社, 2013.05: 2
  • 5. 黄斯伟 .CSS 完全 使用 详解: 人民 邮电 出版社, 2007 年 07 月 第 1 版: 2
  • 6. 祝红涛, 张钦 .CSS 网络 大 讲堂: 清华大学 出版社, 2013.05: 4
  • 7. 祝红涛, 张钦 .CSS 网络 大 讲堂: 清华大学 出版社, 2013.05: 6
  • 8. 祝红涛, 张钦 .CSS 网络 大 讲堂: 清华大学 出版社, 2013.05: 2-3
  • 9. 梅洛尼, 莫里森 .HTML 与 CSS 入门 经典 (第八 版): 人民 ​​邮电 出版社, 2011.08: 34
  • 10. 张爱华, 吕京涛 .CSS 快速 入门: 青岛 出版社, 2000 年 09 月 第 1 版: 19-20
  • 11. 维姆莱, 波斯 .CSS 权威 教程 (第三版): 清华大学 出版社, 2009.1: 53
  • 12. 黄斯伟 .CSS 完全 使用 详解: 人民 邮电 出版社, 2007 年 07 月 第 1 版: 8
  • 13. 杜 涛 .CSS 技术 在 网页 设计 中 的 应用 与 优化 [J]. 长治 学院 学报, 2007 (10)
  • 14. 柯林森 .CSS 基础 教程: 人民 邮电 出版社, 2007 年 09 月 第 1 版: 3
  • 15. 曹 方 .CSS 从 入门 到 精通: 化学 工业 出版社, 2011.09: 9

词条标签:

软件 , 互联网
4.6
5
13
4
4
3
2
2
2
1
1