CSS 概览


css-art.jpg

CSS 简介

层叠样式表(Cascading Style Sheet,CSS)是一种定义指定 HTML 文档视觉表现的标准。

HTML 文档的视觉显示包含了很多变量:字体、颜色、间距等,CSS 标准列举了这些变量,我们称之为样式属性。CSS 定义了这些属性以指定字体、颜色、外边距、边距、背景图片、文本对齐方式、元素尺寸和元素位置:

font-weight: bold

为了全面地描述一个元素的视觉表现,通常需要指定不止一个属性:

margin-left: 10%;
text-indent: .5in;
font-size: 12pt;

有两种方式将一组定义视觉表现的 CSS 属性和对应的 HTML 元素关联在一起,第一种是给每个单独的 HTML 元素设置 style 属性值,称为内联样式:

<p style="margin: 20px; border: solid red 2px;">
  这是一个测试段落
</p>

但是和客户端 JavaScript 一样,我们更推荐将 HTML 元素和 CSS 样式分开,将 CSS 样式定义在一个样式表中,样式表通过选择器将样式属性和使用选择器描述的一组 HTML 元素关联起来。CSS 样式表的基本元素是样式规则,它们由选择器和包裹在一对「{}」中的CSS属性和值所组成:

p {
  text-indent: .5in;
}
.warning {
  background-color: yellow;
  border: solid black 5px;
}

<style></style> 标签把 CSS 样式表包起来放在 <head> 标签里,它就和 HTML 元素关联起来了:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      body {
        margin-left: 30px;
        margin-right: 15px;
        background-color: #ffffff;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <p>测试段落</p>
  </body>
</html>

当一个样式表需要在多个页面中使用时,通常将其保存到单独文件中,比如 mystyle.css,该文件中不包含任何 HTML 标签,要引入这个样式表文件,需要通过 <link> 标签:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="mystyle.css" type="text/css">
</head>

以上就是 CSS 定义和引入的方式。

层叠的含义

层叠样式表中「层叠」的含义:

  • Web 浏览器的默认样式表
  • 文档的样式表
  • 每个独立HTML元素的内联样式

以上样式层叠优先级由低到高,HTML 元素的最终样式是通过这种层层叠加而来。

为了显示文档元素,Web浏览器必须组合元素的 style 属性,包括来自文档样式表中所有匹配的选择器的样式值。计算的结果是一组实际用于显示元素的样式属性和值,这组值就是元素的「计算属性」。

CSS 历史

CSS 是一个相对较老的标准了,CSS 1 在 1996 年 12 月被采纳,定义了具体的颜色、字体、外边距、边框和其他基本样式,CSS 2 在 1998 年 5 月被采纳,它定义了很多高级特性,最著名的就是支持元素的绝对定位。后面还有一个修正版 CSS 2.1,目前最新的标准是 CSS 3,在该版本中,CSS 规范被拆成各种各样的专门化模块分别通过标准化进程。

复合属性

某几个属性可以组合成一个复合属性,比如 font-familyfont-sizefont-weight 可以组合成 font 属性:

font: bold italic 24pt helvetica;

类似的复合属性还有 bordermarginpadding

非标准属性

当浏览器厂商实现非标准 CSS 属性时,会在属性名前加一个厂商前缀,Firefox 使用 -moz-,Chrome 使用 -webkit-,而 IE 使用 -ms-,它们甚至使用这种方式实现将来会标准化的属性,一旦标准化后再将前缀移除:

.radius10 {
  border-radius: 10px;         /* 针对现代浏览器 */
  -moz-border-radius: 10px;       /* 针对 Firefox 3.x */
  -webkit-border-radius: 10px;     /* 针对 Safari 3.2 和 4 */
}

点赞 取消点赞 收藏 取消收藏

<< 上一篇: 其他文档特性

>> 下一篇: 重要的 CSS 属性