htmlCSS样式.pptVIP

* * * * * * * * * * * * * * * * * * * * * * * * Page * 5.1 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，无论单位是什么。 Page * 5.1 CSS样式简介 记得写引号 提示：如果值为若干单词，则要给值加引号： p {font-family: sans serif;} Page * 5.1 CSS样式简介 多重声明： 提示：如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么的好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。就像这样： p {text-align:center; color:red;} 你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样： p { text-align: center; color: black; font-family: arial; } Page * 5.1 CSS样式简介 空格和大小写 大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑： body { color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif; } 是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。 Page * 5.2 样式举例 5.2.1 id样式 5.2.2 class样式 Page * 5.2.1 id样式 id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 # 来定义。 下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色： #red {color:red;} #green {color:green;} 下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。 p id=red这个段落是红色。/p p id=green这个段落是绿色。/p 注意：id 属性只能在每个 HTML 文档中出现一次。 Page * 5.2.1 id样式 html head style type=text/css #test1 {color:red; font-size:30; font-family:隶书;font-weight:bold;} #test2 {color:green; font-size:30; font-style:italic;} /style /head body p id=test1这个段落是红色。/p p id=test2这个段落是绿色。/p /body /html Page * 5.2.1 id样式 实践案例 练习使用id样式。 Page * 5.2.2 class样式 在 CSS 中，类选择器以一个点号显示： .center {text-align: center} 在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。 在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 .center 选择器中的规则。 h1 class=center This heading will be center-aligned /h1 p class=center This paragraph will also be center-aligne