CSS基础语法.doc-资源下载-咨信网-让知识获取变得高效

CSS基础语法.doc

1、如何创建 CSS 如何插入样式表当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。外部样式表可以在

2、任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子： hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} 不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。内部样式表当单个文档需要特

3、殊的样式时，就应该使用内部样式表。你可以使用内联样式由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。

4、Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

This is a paragraph

多重样式如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。例如，外部样式表拥有针对 h3 选择器的三个属性： h3 { color: red; text-align: left; font-size: 8pt; } 而内部样式表拥有针对 h3 选择器的两个属性： h3 { text-align:

5、right; font-size: 20pt; } 假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是： color: red; text-align: right; font-size: 20pt; 即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。 CSS 语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 selector {declaration1; declaration2; ... declarationN } 选择器通常

6、是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 selector {property: value} 下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。 h1 {color:red; font-size:14px;} 下面的示意图为您展示了上面这段代码的结构：提示：请使用花括号来包围声

7、明。值的不同写法和单位除了英文单词 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，无论单位是

8、什么。记得写引号提示：如果值为若干单词，则要给值加引号： p {font-family: "sans serif";} 多重声明：提示：如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。就像这样： p {text-align:center; color:red;} 你应该在每行只描述一个属性，这样可以增强样式定义的可读性

9、就像这样： 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 对大小写不

10、敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。 CSS 派生选择器通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。比方说，

11、你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器： li strong { font-style: italic; font-weight: normal; } 请注意标记为 的蓝色代码的上下文关系：

我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用

我是斜体字。这是因为 strong 元素位于 li 元素内。

我是正常的字体。

12、在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。再看看下面的 CSS 规则： strong { color: red; } h2 { color: red; } h2 strong { color: blue; } 下面是它施加影响的 HTML：
The strongly emphasized word in this paragraph isred.
<
13、h2>This subhead is also red.
The strongly emphasized word in this subhead isblue.
CSS id 选择器 id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 "#" 来定义。下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色： #red {color:red;} #green {color:green;} 下面的 HTML 代码中，id 属性为 re
14、d 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
这个段落是红色。

这个段落是绿色。
注意：id 属性只能在每个 HTML 文档中出现一次。想知道原因吗，请参阅 XHTML:网站重构。 id 选择器和派生选择器在现代布局中，id 选择器常常用于建立派生选择器。 #sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; } 上面的样式只会应用于出现在 id 是 sidebar 的元
15、素内的段落。这个元素很可能是 div 或者是表格单元，尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素，比如或者，不过这样的用法是非法的，因为不可以在内联元素中嵌入
（如果你忘记了原因，请参阅 XHTML:网站重构）。一个选择器，多种用法即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次： #sidebar p { font-style: italic; text-align: right; margin-top: 0.5em
16、 } #sidebar h2 { font-size: 1em; font-weight: normal; font-style: italic; margin: 0; line-height: 1.5; text-align: right; } 在这里，与页面中的其他 p 元素明显不同的是，sidebar 内的 p 元素得到了特殊的处理，同时，与页面中其他所有 h2 元素明显不同的是，sidebar 中的 h2 元素也得到了不同的特殊处理。单独的选择器 id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用： #sidebar {
17、border: 1px dotted #000; padding: 10px; } 根据这条规则，id 为 sidebar 的元素将拥有一个像素宽的黑色点状边框，同时其周围会有 10 个像素宽的内边距（padding，内部空白）。老版本的 Windows/IE 浏览器可能会忽略这条规则，除非你特别地定义这个选择器所属的元素： div#sidebar { border: 1px dotted #000; padding: 10px; } CSS 类选择器在 CSS 中，类选择器以一个点号显示： .center {text-align: center} 在上面
18、的例子中，所有拥有 center 类的 HTML 元素均为居中。在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
This heading will be center-aligned

This paragraph will also be center-aligned.
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。和 id 一样，class 也可被用作派
19、生选择器： .fancy td { color: #f60; background: #666; } 在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）元素也可以基于它们的类而被选择： td.fancy { color: #f60; background: #666; } 在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。你可以将类 fancy 分配给任何一个表格元素任意多的次数。那些以 fancy 标
20、注的单元格都会是带有灰色背景的橙色。那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。还有一点值得注意，class 为 fancy 的段落也不会是带有灰色背景的橙色，当然，任何其他被标注为 fancy 的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式，这个效果被限制于被标注为 fancy 的表格单元（即使用 td 元素来选择 fancy 类）。 CSS 属性选择器对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。注释：只有在规定了 !DOCTYPE 时，IE7 和 IE
21、8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。属性选择器下面的例子为带有 title 属性的所有元素设置样式： [title] { color:red; }
22、>
可以应用样式：

Hello world
W3School

无法应用样式：

Hello world
W3School 属性和值选择器下面的例子为 title="W3School" 的所有元素设置样式： [title=W3School] { border:5px solid blue; }
23、
可以应用样式：

W3School

无法应用样式：

Hi!
W3School 属性和值选择器 - 多个值下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值： [title~=hello] { color:red; }
25、"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
可以应用样式：

Hello world

Hello W3Scho
26、ol students!

无法应用样式：

Hello world

Hello W3School students!
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值： [lang|=en] { color:red; }
27、3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
可以应用样式：

Hello!

Hi!

无法应用样式：

Hi!

Hao!

28、tml> 设置表单的样式属性选择器在为不带有 class 或 id 的表单设置样式时特别有用： input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; }
29、OCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

31、"button" value="Example Button">
CSS 选择器参考手册选择器描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。 [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 [attribute^=value] 匹配属性值以指定值开头的每个元素。 [attribute$=value]
32、匹配属性值以指定值结尾的每个元素。 [attribute*=value] 匹配属性值中包含指定值的每个元素。 CSS 背景 CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。 CSS 在这方面的能力远远在 HTML 之上。背景色可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。这条规则把元素的背景设置为灰色： p {background-color: gray;} 如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距： p {background-color: gray; padd
33、ing: 20px;} 如需查看本例的效果，可以亲自试一试！
34、
这是标题 1

这是标题 2

这是段落

这个段落设置了内边距。
可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。 background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。背景图像要把图像放入背景，需要使用 background-image 属性。background-i
35、mage 属性的默认值是 none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个 URL 值： body {background-image: url(/i/eg_bg_04.gif);} 大多数背景都应用到 body 元素，不过并不仅限于此。下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景： p.flower {background-image: url(/i/eg_bg_03.gif);} 您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像： a.radio {background-image: url(/
36、i/eg_bg_07.gif);} 如需查看上述例子的效果，可以亲自试一试！
37、lass="flower">我是一个有花纹背景的段落。我是一个有放射性背景的链接。

注释：为了清晰地显示出段落和链接的背景图像，我们为它们设置了少许内边距。
理论上讲，甚至可以向 textareas 和 select 等替换元素的背景应用图像，不过并不是所有用户代理都能很好地处理这种情况。另外还要补充一点，background-image 也不能继承。事实上，所有背景属性都不能继承。背景重复如果需要在页面上对背景图像进行平铺，可以使用 back
38、ground-repeat 属性。属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。默认地，背景图像将从一个元素的左上角开始。请看下面的例子： body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y; } 如需查看上例的效果，可以亲自试一试。背景定位可以利用 background-position 属性改变图像在背景中的位置。下面的例子在 body 元素中将一个背景图像居中放置： body { background-image:url('/i/eg_bg_03.gif'); background-repeat:n
40、o-repeat; background-position:center; } 为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。关键字图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 -
41、一个对应水平方向，另一个对应垂直方向。如果只出现一个关键字，则认为另一个关键字是 center。所以，如果希望每个段落的中部上方出现一个图像，只需声明如下： p { background-image:url('bgimg.gif'); background-repeat:no-repeat; background-position:top; } 下面是等价的位置关键字：单一关键字等价的关键字 center center center top top center 或 center top bottom bottom cente
42、r 或 center bottom right right center 或 center right left left center 或 center left 百分数值百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易： body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:50% 50%; } 这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于
43、元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明： body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:66% 33%; } 如
44、果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。 background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。长度值长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上： body { background-image:url('/i/eg_bg_03.gif');
45、 background-repeat:no-repeat; background-position:50px 100px; } 注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。背景关联如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响： body
46、 { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed } 如需查看上例的效果，可以亲自试一试。
47、d>
图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。
48、
图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

49、 background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。 CSS 文本 CSS 文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。缩进文本把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。 CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em： p {text-indent: 5em;} 注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。使用负值 text

邮箱/手机：
温馨提示：	快捷下载时，用户名和密码都是您填写的邮箱或者手机号，方便查询和重复下载（系统自动生成）。如填写123，账号就是123，密码也是123。
特别说明：	请自助下载，系统不会自动发送文件的哦；如果您已付费，想二次下载，请登录后访问：我的下载记录
支付方式：
验证码：	换一换

账号：
密码：
验证码：	换一换
当日自动登录忘记密码？