CSS入门教程Word文档格式.docx
《CSS入门教程Word文档格式.docx》由会员分享，可在线阅读，更多相关《CSS入门教程Word文档格式.docx（30页珍藏版）》请在冰点文库上搜索。
linkrel="
stylesheet"
type="
text/css"
href="
mystyle.css"
>
/head>
2、内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。
你可以在head部分通过<
style>
标签定义内部样式表。
styletype="
body{background-color:
red}
p{margin-left:
20px}
/style>
3、内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。
使用内联样式的方法是在相关的标签中使用样式属性。
样式属性可以包含任何CSS属性。
以下实例显示出如何改变段落的颜色和左外边距。
pstyle="
color:
red;
margin-left:
20px"
Thisisaparagraph
/p>
8.1.2如何使用CSS
CSS语法由三部分构成：
选择器、属性和值：
selector{property:
value}
选择器（selector）通常是你希望定义的HTML元素或标签，属性（property）是你希望改变的属性，并且每个属性都有一个值（value）。
属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：
body{color:
blue}
上面这行代码的作用是将body元素内的文字颜色定义为蓝色。
在上述例子中，body是选择器，而包括在花括号内的的部分是声明。
声明依次由两部分构成：
属性和值，color为属性，blue为值。
如果要定义不止一个声明，则需要用分号将每个声明分开。
下面的例子展示出如何定义一个红色文字的居中段落。
最后一条规则是不需要加分号的，不过建议每条声明的末尾都加上分号，好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。
就像这样：
p{text-align:
center;
color:
red;
}
建议每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：
p{
text-align:
center;
black;
font-family:
arial;
8.1.3选择器
我们想要通过CSS来控制HTML元素，首先我们要通过一定的方法找到这个元素。
在CSS中通过选择器（selector）来定位元素。
1、类型选择器
类型选择器用来寻找特定类型的元素，比如段落、锚或是标题，只需要指定希望应用样式的元素的名称，类型选择器有时候也被称为元素选择器或简单选择器。
p{color:
a{text-decoration:
underline;
h1{font-weight:
bold;
2、派生选择器
派生选择器可以用来寻找特定元素的后代元素。
比方说，你希望列表中的strong元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
listrong{
font-style:
italic;
font-weight:
normal;
}
strong>
我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用<
/strong>
ol>
li>
我是斜体字。
这是因为strong元素位于li元素内。
/li>
我是正常的字体。
/ol>
在上面的例子中，只有li元素中的strong元素的样式为斜体字，无需为strong元素定义特别的class或id，代码更加简洁。
3、id选择器
id选择器可以选择标有特定id的HTML元素，id选择器以"
#"
来定义。
下面的两个id选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red{color:
#green{color:
green;
下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色。
pid="
red"
这个段落是红色。
green"
这个段落是绿色。
注意：
id属性一般只能在每个HTML文档中出现一次。
id就像人的名字，如果一个屋子里面有两个都叫李三的人，有人喊“李三”，你就不知道喊的是哪个了。
同样道理在一个页面里，如果两个不同的元素拥有相同的id，也很容易混淆。
虽然有可能在很大部分浏览器中多次使用同一个id不会出现问题，但在标准上这绝对是错误的使用，而且很可能在某些浏览器中引发问题。
id选择器也可以用于建立派生选择器，请看下面示例：
#sidebarp{
right;
margin-top:
0.5em;
上面的样式只会应用于出现在id是sidebar的元素内的段落。
这个元素很可能是div或者是表格单元。
虽然被标注为sidebar的元素只能在文档中出现一次，但是这个id选择器作为派生选择器却可以被使用很多次：
#sidebarh2{
font-size:
1em;
margin:
0;
line-height:
1.5;
在这里，与页面中的其他p、h2元素明显不同的是，sidebar内的p、h2元素得到了特殊的处理。
4、类选择器
在CSS中，类选择器以一个点号显示：
.center{text-align:
center}
在上面的例子中，所有class属性为center的HTML元素均为居中。
在下面的HTML代码中，h1和p元素都有center类。
这意味着两者都将遵守"
.center"
选择器中的规则。
类名的第一个字符不能使用数字！
它无法在Mozilla或Firefox中起作用。
h1class="
center"
Thisheadingwillbecenter-aligned
/h1>
pclass="
Thisparagraphwillalsobecenter-aligned.
和id选择器一样，类选择器也可被用作派生选择器：
.fancytd{
#f60;
background:
#666;
在上面这个例子中，类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字。
（名为fancy的更大的元素可能是一个表格或者一个div）
元素也可以基于它们的类而被选择：
td.fancy{
在上面的例子中，类名为fancy的表格单元将是带有灰色背景的橙色。
tdclass="
fancy"
你可以将类fancy分配给任何一个表格元素任意多的次数。
那些以fancy标注的单元格都会是带有灰色背景的橙色。
当然，任何其他被标注为fancy的元素也不会受这条规则的影响。
这都是由于我们书写这条规则的方式，这个效果被限制于被标注为fancy的表格单元（即使用td元素来选择fancy类）。
和id不一样，每个HTML文档中允许有多个元素的class属性是一样的，也就是说class可以反复使用。
8.2使用CSS的注意点
通过前面的学习，你已经会使用简单的CSS来控制HTML文档的样式了，本节主要讲解CSS使用过程中的一些注意点，另外再探讨一下CSS的继承和层叠的特性。
8.2.1CSS单位
CSS中很多属性的值是有单位的，CSS的单位包括长度单位和颜色单位。
1、长度单位
在CSS中，长度是一种度量尺寸，用于宽度、高度、字号、字和字母间距、文本的缩排、行高、页边距、贴边、边框线宽以及许许多多的其他属性。
长度可以是绝对长度，也可以是相对长度。
CSS常用的绝对长度值有厘米（cm）、毫米（mm）、英寸（in）、点（pt）、派卡（pc）等等。
绝对长度值的使用范围比较有限，只有在完全知道外部输出设备的具体情况下，才使用绝对长度值。
也就是说，绝对长度值最好用于打印机输出设备，而在仅仅作为屏幕显示时，使用绝对长度值意义不大，应该尽量使用相对长度值。
相对长度就是需要定义尺寸的元素按照系统和浏览器默认大小为标准，相应地按比例缩放。
这样就不会产生难以辨认的情况。
百分比单位以及某些HTML标签（如<
至<
h2>
等）就是一种相对长度。
另外，CSS还支持下列三种长度的相对单位：
em（当前字体中字母M的宽度）、ex（当前字体中字母X的高度）、px（一个象素的大小）。
使用em和ex的目的就是为所给的字体设置合适的宽度，而没有必要知道字体有多大，在显示时，可通过比较当前字体中的M和X来确定。
字体越大，所对应的em和ex也就越大。
以象素为单位的长度是相对于显示器上的象素（或许为方形）的高度和宽度。
影像的宽度和高度经常是以象素给出的。
象素测量法通常也不是个好方法。
首先，象素的大小依分辩率变化较大，大多数用户都会将显示器设置成尽可能高的分辩率，从而导致象素太小，而无法阅读。
2、颜色单位
适当地在不同的部位使用不同的颜色，能使HTML页面充满生气，还可以通过颜色把读者的注意力吸引到关键的部分。
定义颜色值可以使用百分比值。
在这种情况下，红、绿、蓝颜色值的等级用百分比数来确定。
格式是：
rgb（R%,G%,B%）。
指定颜色的另一种方法是使用范围在0～255之间的整数来设置。
格式是color:
rgb（128,128，128）。
定义颜色的第三种方法是使用十六进制数组定义颜色。
这种定义的方法对于经常进行程序设计的人来说比较熟悉。
定义颜色时使用三个前后按顺序排列的十六进制数组表示，例如“#FC0EA8”。
这种定义的方式就是形如#RRGGBB的格式。
即在红、绿、蓝的位置上添上需要的十六进制值。
定义颜色最后一种方法也最简单的方法是指定颜色的名称，CSS有17个预先确定的颜色，它们是：
aqua（水绿色）、black（黑色）、blue（蓝色）、fuchsia（紫红色）、
gray（灰色）、green（绿色）、lime（柠檬绿色）、maroon（褐红色）、
navy（藏青色）、olive（橄榄色）、orange（橙色）、purple（紫色）、
red（红色）、silver（银色）、teal（青色）、white（白色）、yellow（黄色）
8.2.2CSS的继承及其问题
根据CSS的规定，子元素从父元素继承属性。
看看下面这条规则：
body{
Verdana,sans-serif;
根据上面这条规则，站点的body元素将使用Verdana字体（假如访问者的系统中存在该字体的话）。
通过CSS继承，子元素将继承最高级元素（在本例中是body）所拥有的属性（这些子元素诸如p、td、ul、ol、ul和li等），所有body的子元素，不需要再自行定义，都应该显示Verdana字体，子元素的子元素也一样。
这在大部分的新版浏览器中，确实是这样的。
但是在浏览器混战年代里，有时候未必如我们所愿。
浏览器提供商（Microsoft、Netscape等）为了自身的利益，都没有遵守当时的一些标准。
比方说，Netscape4就不支持继承；
微软的IE直到IE6还存在部分不支持继承的问题。
我们又该如何面对这些问题呢？
你可以通过使用一些冗余法则来处理旧式浏览器无法理解继承的问题。
p,td,ul,ol,li,dl,dt,dd{
上面这么做虽然会有些浪费，但是如果需要使老的浏览器访问我们的网页不至于显示得很糟糕，就不得不这么做。
如果你不希望从父元素中得到继承，比方说，你希望段落的字体是Times，而不是从body继承Verdana。
你可以创建一个针对p的样式，来摆脱父元素的样式：
td,ul,ol,ul,li,dl,dt,dd{
Times,"
TimesNewRoman"
serif;
8.2.3层叠（Cascading）的意义
对于CSS，一个重要的特性就是层叠Cascading。
这个特性通过一定规则将多重样式将层叠为一个。
记住，这和继承不是同一个概念。
样式可以规定在单个的HTML元素中，在HTML页的头元素中，或在一个外部的CSS文件中。
甚至可以在同一个HTML文档内部引用多个外部样式表。
那么，当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有页面设计者的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中越往下优先级越低。
❑内联样式（在HTML元素内部）
❑外部样式表（通过链接<
link……>
导入）和内部样式表（位于<
标签内部）
❑浏览器缺省设置
可以看出，内联样式（在HTML元素内部）拥有最高的优先权。
另外，可以使用!
important来提高优先级，加了!
important的外部样式表比不加!
important的内联样式优先级要高，但是比加了!
important的内联样式优先级要低
关于CSS的层叠性，还有一个需要注意的是：
使用浏览器查看网页的用户，他们可以在浏览器中设置自己的样式表，比如IE可以通过“工具”>
“internet选项”>
“常规”>
“外观”>
“辅助功能”>
“用户样式表”来设置自定义样式表。
当网页设计者和用户的样式表发生冲突，网页设计者的样式表的优先级会高于用户自定义的样式表。
为了让我们的用户具有更大的自由度，可以通过!
important来提高自定义的样式表的优先级，如果考虑用户和设计者的，那么层叠顺序还有以下顺序，越往下越低：
❑标记为!
important的用户样式
important的页面设计者样式
❑设计者样式
❑用户样式
❑浏览器缺省样式
当使用了多个样式表之后，样式表之间可能会争夺某个特定元素的控制权。
在这些情况下，会根据选择器的特殊性，运用一定的算法规则，来决定该元素最终按照那个样式显示。
这个算法通过选择器的不同，算出一个值，值大的样式具有高的优先级。
这个算法看起来有些复杂也比较难记，一般来说有这样的规则，越往下优先级越低：
❑元素的style属性，即内联样式，例如：
"
❑具有ID选择器的样式，例如：
#content{color:
❑具有类选择器的样式，例如：
.content{color:
❑具有类型选择器的样式，例如：
p{color:
另外，如果两个样式的优先级相同，后定义的样式优先。
这一点也很重要，比如在head部内<
标签中定义的样式在<
link>
标签链接的外部样式之后，那么真正起作用的是<
标签内的样式。
反过来head部内<
标签链接的外部样式之前，最后起作用的是通过<
标签引入的外部样式。
8.2.4绝对地址和相对地址
CSS中有些属性的值是一个URL，比如背景图像。
URL的写法有两种：
绝对路径和相对路径。
绝对路径时含服务器协议（在网页上通常是http:
//或ftp:
//）的完全路径。
绝对路径包含的是精确位置而不用考虑当前文档的位置，但是如果目标文档被移动，则链接将无效。
创建对当前站点以外文件的链接时必须使用绝对路径。
与绝对路径不同，相对路径自身并不包含完整的路径信息（例如不包含服务器协议），相对路径描述的是被引用文档和当前文档之间的相对位置关系（文档相对路径）或被引用文档和网站根目录之间的相对位置关系（根相对路径）。
当在浏览器中点击某个使用相对路径的链接时，浏览器会自动获取当前文档的服务器协议、地址和端口等信息，并将该信息和相对路径发送到服务器上，而服务器则根据当前文档位置和相对路径，计算出被引用文档的绝对位置并获取文档，最终将结果返回给浏览器。
根相对路径以“/”开头（请注意，不是“\”），是从当前站点的根目录到被引用文档的完整路径。
例如，某个网站的根目录为/home/wwwroot，其下有一个gif图像/home/wwwroot/a/b/1.gif，则该图像的根相对路径为“/a/b/1.gif”。
文档相对路径是指从当前文档所在目录访问被引用文档的路径。
也就是说，相对路径描述的是当前文档所在目录和被引用文档所在目录的相对位置关系。
例如，当前文档的物理路径是/home/wwwroot/a/1.htm，而被引用文档的物理路径是/home/wwwroot/b/2.htm，第二个文档相对于第一个文档的相对路径就是“../b/2.htm”。
在使用相对路径时，我们需要知道如何描述当前文档所在目录以及如何描述当前文档的上一级目录（父目录）。
通常我们使用“./”或空描述当前文档所在目录，例如，当前文档为/home/wwwroot/a/1.htm，则“./2.htm”和“2.htm”都是一个指向“/home/wwwroot/a/2.htm”的相对路径。
在描述当前文档所在目录的上一级目录时，我们使用前缀“../”。
还是上面的例子，如果相对路径为“../b/2.htm”，则我们请求的是物理路径为“/home/wwwroot/b/2.htm”的文档。
“../”和“./”可以任意组合，例如，“../../”代表当前目录的上一级目录的上一级目录。
在明白绝对路径和相对路径的概念和区别之后，我们还要了解什么时候使用它们的时机。
一般来说，如果需要引用当前网站外部的文档和素材，我们应该使用绝对路径；
而在引用当前网站内部的文档和素材时，我们应该使用相对路径。
由于相对路径中不包含网站地址等信息，从而使得网站更容易移植（例如，更换网站域名）。
一般来说，在制作内部链接时，我们应该尽量使用文档相对路径，而不是根相对路径，这样做的原因是在本地预览网站时，浏览器并不承认当前站点的根目录为服务器，因此会导致链接错误的情况，使用文档相对路径则没有这样的问题。
在CSS文件中书写相对路径：
CSS文件是指在页面中引用的外部样式定义文件，该文件通常用于定义页面中各种html标记的显示效果。
浏览器认为CSS文件是一个独立的文档，因此，在CSS中对素材的引用可以通过计算素材文件和该CSS文件之间的相对路径来实现，而与引用该CSS文件的页面所在的位置无关。
例如，文档“/home/wwwroot/a/index.htm”中引用了CSS文件“/home/wwwroot/a/css/main.css”，而在该CSS中引用了素材“/home/wwwroot/a/images/1.jpg”，则在CSS中对于该素材引用的相对路径应该是“../images/1.jpg”，而不能是“./images/1.jpg”或“images/1.jpg”。
8.2.5其他注意点和技巧
1、记得写引号
提示：
如果属性的值为若干单词，则要给值加引号：
p{font-family:
"
sansserif"
;
2、空格和大小写敏感
大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。
多重声明和空格的使用使得样式表更容易被阅读和编辑：
#000;
#fff;
padding:
Georgia,Palatino,serif;
是否包含空格不会影响CSS在浏览器的工作效果，从这个角度来说CSS对大小写不敏感。
但是存在一个例外：
选择器中class和id名称对大小写是敏感的。
3、选择器的分组
你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。
用逗号将需要分组的选择器分开。
在下面的例子中，我们对所有的标题元素进行了分组。
所有的标题元素都是绿色的。
h1,h2,h2,h3,h5,h6{
green;
4、同时使用两个class
通常我们只能为元素指定一个class属性,但这并不等于你只能指定一个，你想指定多少就可以指定多少，例如：
divclass="
newshot"
内容内容内容内容内容内容
/div>
通过
升级会员 