软件开发培训班 >> 编程开发 >> CSS


CSS 基础语法

CSS 语法

 

CSS 规定由两个重要的 部分组成： 取舍器，以及一条或多条申明 。

selector {declaration1; declaration2; ... declarationN }

取舍器通常是您需求转变 款式的 HTML 元素 。

每条申明由一个属性和一个值组成 。

属性(property)是您 盼望设置的 款式属性(style attribute) 。每个属性有一个值 。属性和值被冒号 离开 。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字 色彩定义为红色，同时将字体大小设置为 14 像素 。

在这个例子中，h1 是 取舍器，color 和 font-size 是属性，red 和 14px 是值 。

h1 {color:red; font-size:14px;}

下面的示 用意为您 展示了上面这段代码的 构造：

CSS 语法

 

揭示：请 使用花括号来包围申明 。

 

值的不同写法和单位

 

除了英文单词 red，我们还 可以 使用十六进制的 色彩值 #ff0000：

p { color: #ff0000; }

为了节约字节，我们 可以 使用 CSS 的缩写 模式：

p { color: #f00; }

我们还 可以通过两种 步骤 使用 RGB 值：

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

请 留神，当 使用 RGB 百分比时， 即便当值为 0 时也要写百分比符号 。然而在 其余的状况下就不需求这么做了 。 比方说，当尺寸为 0 像素时，0 之后不需求 使用 px 单位，由于 0 便是 0，无论单位是什么 。

 

记得写引号

 

揭示：假如值为若干单词，则要给值加引号：

p {font-family: "sans serif";}

多重申明：

 

揭示：假如要定义不止一个申明，则需求用分号将每个申明 离开 。下面的例子 展示出如何定义一个红色文字的居中段落 。最终一条 规定是不需求加分号的，由于分号在英语中是一个分隔符号，不是 完毕符号 。然而，大多数有 教训的设计师会在每条申明的末尾都外加分号，这么的 好处是，当你从现有的 规定中增减申明时，会尽可能的削减出错的可能性 。就像这样：

p {text-align:center; color:red;}

你应该在每行只 形容一个属性，这样 可以 加强 款式定义的可读性，就像这样：

p {
  text-align: center;
  color: black;
  font-family: arial;
}

空格和大小写

 

大多数 款式表包括不止一条 规定，而大多数 规定包括不止一个申明 。多重申明和空格的 使用使得 款式表更方便被编辑：

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

是不是包括空格不会影响 CSS 在阅读器的工作 动机，同样，与 XHTML 不同，CSS 对大小写不敏感 。不过存在一个例外：假如 波及到与 HTML 文档一同工作的话，class 和 id 名称对大小写是敏感的 。