前言
CSSQCascading StylesheetsQ层叠样式表Q是一U制作网늚新技术，现在已经为大多数的浏览器所支持Q成为网设计必不可的工具之一?br />
W3CQThe World Wide Web ConsortiumQ把动态HTMLQDynamic HTMLQ分Z个部分来实现Q脚本语aQ包括JavaScript、Vbscript{）(j)、支持动态效果的览器（包括Internet Explorer、Netscape Navigator{）(j)和CSS样式表?br />
一Q层叠样式表的特?br />
且不说过ȝ|页~少动感Q就是在|页内容的排版布局上也有很多困难，如果不是专业人员或特别有耐心(j)的hQ很难让|页按自q构思和创意来显CZ息。即便是掌握?jin)HTML语言_N的h也要通过多次地测试，才能N好这些信息的排版Q过E十分O长和痛苦。ؓ(f)?jin)Internet的发展，让更多h早日tq个多姿多彩的世界，新的HTML辅助工具gƲ出?br />
样式表就是在q种需求下诞生的，它首先要做的是ؓ(f)|页上的元素_地定位，可以让网设计者象导演一PL地控制由文字、图片组成的演员们，在网这个舞C按剧本要求好好地表演?br />
其次Q它把网上的内容结构和格式控制相分R浏览者想要看的是|页上的内容l构Q而ؓ(f)?jin)让览者更好地看到q些信息Q就要通过格式控制来帮忙了(jin)。以前两者在|页上的分布是交错结合的Q查看修改很不方便，而现在把两者分开׃(x)大大方便|页的设计者。内容结构和格式控制相分，使得|页可以光由内容构成Q而将所有网늚格式控制指向某个CSS样式表文件。这样一来的好出表现在两个方面：(x)
W一Q简化了(jin)|页的格式代码，外部的样式表q会(x)被浏览器保存在缓存里Q加快了(jin)下蝲昄的速度Q也减少?jin)需要上传的代码数量Q因为重复设|的格式被只保存一ơ）(j)?br />
W二Q只要修改保存着|站格式的CSS样式表文件就可以改变整个站点的风格特Ԍ在修攚w面数量庞大的站点Ӟ昑־格外有用。避免了(jin)一个一个网늚修改Q大大减了(jin)重复力_的工作量Q当你面对的是有数百个网늚站点ӞCSS直象是神Ҏ(gu)们的恩赐Q^_^
二．d层叠样式表的Ҏ(gu)
我们为网|加样式表的方法有四种?br />
1Q最单的Ҏ(gu)是直接添加在HTML的标识符QtagQ里Q?br />
< Tag style=”properties”>|页内容< /tag>
举个例子Q?br />
< p style=”color: blue; font-size: 10pt”>CSS实例< /p>
代码说明Q?br />
用蓝色显C字体大ؓ(f)10pt?#8220;CSS实例”。尽用简单、显C直观，但是q种Ҏ(gu)不怎么常用Q因h加无法完全发挥样式表的优?#8220;内容l构和格式控制分别保?#8221;?
2Q添加在HTML的头信息标识W?lt; head>里：(x)
< head>
< style type=”text/css”>
< !-- 样式表的具体内容 -->
< /style>
< /head>
type=”text/css”表示样式表采用MIMEcdQ帮助不支持CSS的浏览器qo(h)掉CSS代码Q避免在览器面前直接以源代码的方式昄我们讄的样式表。但Z(jin)保证上述情况一定不要发生，q是有必要在样式表里加上注释标识W?“< !--注释内容-->”?br />
3Q链接样式表
同样是添加在HTML的头信息标识W?lt; head>里：(x)
< head>
< link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”>
< /head>
*.css是单独保存的样式表文Ӟ其中不能包含< style>标识W，q且只能以css为后~?br />
Media是可选的属性，表示使用样式表的|页用什么媒体输出。取D_(d)(x)
·ScreenQ默认）(j)Q输出到?sh)脑屏?br />
·PrintQ输出到打印?br />
·TVQ输出到?sh)视?br />
·ProjectionQ输出到投媄(jing)?br />
·AuralQ输出到扬声?br />
·BrailleQ输出到凸字触觉感知讑֤
·TtyQ输出到?sh)传打字?br />
·AllQ输出到以上所有设?br />
如果要输出到多种媒体Q可以用逗号分隔取D?br />
Rel属性表C样式表以何种方式与HTML文档l合。取D_(d)(x)
·StylesheetQ指定一个外部的样式?br />
·Alternate stylesheetQ指定用一个交互样式表
4Q联合用样式表
同样是添加在HTML的头信息标识W?lt; head>里：(x)
< head>
< style type=”text/css”>
< !--
@import “*.css”
其他样式表的声明
-->
< /style>
< /head>
以@import开头的联合样式表输入方法和链接样式表的Ҏ(gu)很相|但联合样式表输入方式更有优势。因合法可以在链接外部样式表的同Ӟ针对该网늚具体情况Q做出别的网不需要的样式规则?br />
需要注意的是：(x)
·联合法输入样式表必须以@import开头?br />
·如果同时输入多个样式表有冲突的时候，按照第一个输入的样式表对|页排版?br />
·如果输入的样式表和网里的样式规则冲H时Q用外部的样式表?br />
一般来_(d)样式表的声明分ؓ(f)选择W（selectorQ和块{}QblockQ，块里包含属性（propertiesQ和属性的取|valueQ，基本格式如下Q?br />
选择W?{属性：(x)值}
其它格式1Q?br />
选择W?Q选择W?Q选择W? {属?Q?Q属?Q?Q属?Q?}
有时候多个选择W将使用相同的设|，Z(jin)化代码，我们可以一ơ性ؓ(f)它们讄样式Qƈ在多个选择W之间加?#8220;Q?#8221;来分隔它们?br />
当有多个属性的时候，必须在两个属性之间用“Q?#8221;来分隔?br />
其它格式2Q?br />
选择W? 选择W? {属?Q?Q属?Q?Q属?Q?}
和格?非常怼Q只是在选择W之间少加了(jin)“Q?#8221;Q但作用却大不相同。表C如果选择W?包括的内容同时包括在选择W?里的时候，所讄的样式规则才起作用?br />
四．层叠样式表的分类
Z(jin)使网늚格式不过分的单调Q必需让相同的选择W也能分c，q能按照不同的类别来q行不同的样式设计。基本格式如下：(x)
选择W?cd?{属性：(x)值}
cd名将可以在HTML的标识符里引用：(x)
< 标识W?class=cd?gt;|页内容
五．层叠样式表的伪类
除了(jin)上述的分cL式外Qؓ(f)?jin)分类的用更灉|多样Q又产生?jin)伪cȝ概念。类和伪cL什么样的区别呢Q?br />
一般地_(d)选择W可以和多个c采用捆l的形式来设定，q样虽然能够为同一个选择W创建多U不同的样式Q但捆绑的Ş式同时也限制?jin)设定的cMؓ(f)其它的选择W所使用。伪cȝ产生是Z(jin)解决q个问题Q每个预声明的伪c都可以被所有的HTML标识W引用，当然有些块内容的设|除外。基本格式如下：(x)
.伪类?{属性：(x)值}
伪类可以被Q何标识符在HTML里引用?br />
<标识W?class=伪类?gt;|页内容
六．控制字体的样?
控制字体的样式包括控制字体类型、字体大、字体风根{字体粗l四个部分?
1Q字体类?
qx在用WORD之类的字处理软g的时候，l常需要调整字体的昄Q比如说“Arial”?#8220;Impact”?#8220;Verdana”{字体都是笔者用的较多的?
基本格式如下Q?
font-family: 字体名称
如果在font-family后加上多U字体的名称Q浏览器回按字体名称的顺序逐一在用L(fng)计算机里L已经安装的字体，一旦遇C要求的相匚w的字体，按q种字体昄|页内容Qƈ停止搜烦(ch)Q如果不匚wql搜索，直到扑ֈ为止Q万一样式表里的所有字体都没有安装的话Q浏览器׃(x)用自己默认的字体来替代显C网늚内容?
注意Q?
·当指定多U字体时Q用“Q?#8221;分隔每种字体名称?
·当字体名U包含两个以上分开的单词时Q用“”把该字体名称括v来?
·当样式规则外已经?#8220;”Ӟ?#8216;’代替“”?
2Q字体大?
基本格式如下Q?
font-size: 字号参数
字号的取D_(d)(x)
·以Point为单位：(x)点单位在所有的览器和操作q_上都适用
·以Em为单位：(x)指字母要素的寸Q和Point相同距离
·以Pixes为单位：(x)像素可以使用于所有的操作q_Q但可能?x)因为浏览者的屏幕分L率不同，而造成昄上的效果差异
·以inQ英寸）(j)为单?
·以cmQ厘cI(j)为单?
·以mmQ毫cI(j)为单?
·以pcQ打印机的字体大）(j)为单?
·以exQx-heightQؓ(f)单位
·smallerQ比当前文字的默认大更一?
·largerQ比当前文字的默认大更大?
·使用比例关系
·xx-small
·x-small
·small
·medium
·large
·x-large
·xx-large
3Q字体风?
字体风格只能控制各种斜体字的昄?
基本格式如下Q?
font-style: 斜体字的名称
4Q字体粗l?
字体_细控制_体字的昄Q取D围从数字100~900Q浏览器默认的字体粗lؓ(f)400。另外可以通过参数l(f)ighter和bolder使得字体在原有基上显得更l或更粗些?
基本格式如下Q?
font-weight: 字体_细
七．控制文字的样?
控制文字的样式包括文字大写、文字修C个部分?
1Q文字大写
文字大小写ɾ|页的设计者不用在输入文字时就完成文字的大写Q而可以在输入完毕后，再根据需要对局部的文字讄大小写?
基本格式如下Q?
text-transform: 参数
参数取D_(d)(x)
·uppercaseQ所有文字大写显C?
·lowercaseQ所有文字小写显C?
·capitalizeQ每个单词的头字母大写显C?
·noneQ不l承母体的文字变形参?
注意Q承是指HTML的标识符对于包含自己的标识符的参C(x)l承下来?
2Q文字修?
文字修饰的主要用途是改变?gu)览器显C文字链接时的下划线?
基本格式如下Q?
text-decoration: 参数
参数取D_(d)(x)
·underlineQؓ(f)文字加下划线
·overlineQؓ(f)文字加上划线
·line-throughQؓ(f)文字加删除线
·blinkQ文字闪烁
·noneQ不昄上述M效果
八．控制文本的样?
控制文本的样式包括单词距R字母距R文本行距、文本水q_齐、文本垂直对齐文本羃q六个部分?
1Q单词间?
单词间距指的是英文每个单词之间的距离Q不包括中文文字?
基本格式如下Q?
word-spacing: 间隔距离
间隔距离的取|(x)points、em、pixes、in、cm、mm、pc、ex、normal{?
2Q字母间?
字母间距是指英文字母之间的距，功能、用法，以及(qing)参数的设|和单词间距很相伹{?
基本格式如下Q?
letter-spacing: 字母间距
3Q行?br />
行距是指上下两行基准U之间的垂直距离。一般地_(d)英文五线格练?fn)本Q从上往下数的第三条横线是计算机所认ؓ(f)的该行的基准Uѝ?br />
基本格式如下Q?br />
line-height: 行间距离
行间距离取|(x)
·不带单位的数字：(x)?为基敎ͼ相当于比例关pȝ100%
·带长度单位的数字Q以具体的单位ؓ(f)?br />
·比例关系
注意Q如果文字字体很大，而行距相对较?yu)的话，可能会(x)发生上下两行文字互盔R叠的现象?br />
4Q文本水q_?br />
文本水^寚w可以控制文本的水q_齐，而且q不仅仅指文字内容，也包括设|图片、媄(jing)像资料的寚w方式?br />
基本格式如下Q?br />
text-align: 参数
参数的取|(x)
·leftQ左寚w
·rightQ右寚w
·centerQ居中对?br />
·justifyQ相对左叛_?br />
但需要注意的是，text-alight是块U属性，只能用于< p>?lt; blockquqte>?lt; ul>?lt; h1>~< h6>{标识符里?br />
5Q文本垂直对?br />
文本的垂直对齐应当是相对于文本母体的位置而言的，不是指文本在|页里垂直对齐。比如说Q表格的单元格里有一D|本，那么对这D|本设|垂直居中就是针对单元格来衡量的Q也是_(d)文本在单元格的正中昄Q而不是整个网늚正中?br />
基本格式如下Q?br />
vertical-align: 参数
参数取|(x)
·topQ顶寚w
·bottomQ底寚w
·text-topQ相Ҏ(gu)本顶寚w
·text-bottomQ相Ҏ(gu)本底寚w
·baselineQ基准线寚w
·middleQ中?j)对?br />
·subQ以下标的Ş式显C?br />
·superQ以上标的Ş式显C?br />
6Q文本羃q?br />
文本~进可以使文本在相对默认DH的区域里显C，主要用于中文板式的首行羃q，或是为大D늚引用文本和备注做成羃q的格式?br />
基本格式如下Q?br />
text-indent: ~进距离
~进距离取|(x)
·带长度单位的数字
·比例关系
但是需要注意的是，在用比例关pȝ时候，有h?x)认为浏览器默认的比例是相对D落的宽度而言的，其实事实q如此Q整个浏览器的窗口才是浏览器所默认的参照物?br />
另外Qtext-indent是块U属性，只能用于< p>?lt; blockquqte>?lt; ul>?lt; h1>~< h6>{标识符里?
?ji)．控制颜色和背景的样?
控制颜色和背景的样式包括颜色属性、背景颜艌Ӏ背景图片、背景图片重复、背景图片固定、背景定位六个部分?
1Q颜色属?
基本格式如下Q?
color: 参数
颜色参数取D_(d)(x)
·以RGBDC?
·?6q制QhexQ的色彩DC?
·以默认颜色的英文名称表示
以默认颜色的英文名称表示无疑是最为方便的Q但׃预定义的颜色U类太少Q所以更多的|页设计者喜Ƣ用RGB的方式。RGB方式的好处很多，不但可以用数字的形式_地表C颜Ԍ而且也是很多囑փ制作软gQ如PhotoshopQ里默认使用的规范，q样一来就为图片和|页更好地结合打下了(jin)坚实的基?
2Q背景颜?
在HTML当中Q要为某个对象加上背景色只有一U办法，那就是先做一个表|在表g讄完背景色Q再把对象放q单元格。这样做比较ȝ(ch)Q不但代码较多，q要格的大小和定位伤些脑{。现在用CSS可以轻村֜直接搞定?jin)，而且对象的范围很q，可以是一D|字，也可以只是一个单词或一个字母?
基本格式如下Q?
background-color: 参数
参数取值和颜色属性一栗?
3Q背景图?
基本格式如下Q?
background-image: url(URL)
URL是背景囄的存放\径。如果用“none”来代替背景图片的存放路径Q将什么也不显C?br />
4Q背景图片重?
背景囄重复控制的是背景囄q铺与否Q也是_(d)l合背景定位的控制可以在|页上的某处单独昄一q背景图片?
基本格式如下Q?
background-repeat: 参数
参数取D_(d)(x)
·no-repeatQ不重复q铺背景囄
·repeat-xQ囄只在水^方向上^?
·repeat-yQ囄只在垂直方向上^?
如果不指定背景图片重复属性，览器默认的是背景图片向水^、垂直两个方向上q铺?
5Q背景图片固?
背景囄固定控制背景囄是否随网늚滚动而滚动。如果不讄背景囄固定属性，览器默认背景图片随|页的滚动而滚动。ؓ(f)?jin)避免过于花哨的背景囄在滚动时伤害览者的视力Q所以可以解除背景图片和文字内容的捆l，该ؓ(f)和浏览器H口捆绑?
基本格式如下Q?
background-attachment: 参数
参数取D_(d)(x)
·fixedQ网|动时Q背景图片相对于览器的H口而言Q固定不?
·scrollQ网|动时Q背景图片相对于览器的H口而言Q一h?
6Q背景定?
背景定位用于控制背景囄在网中昄的位|?
基本格式如下Q?
background-position: 参数?
参数取D_(d)(x)
·带长度单位的数字参数
·topQ相对前景对象顶寚w
·bottomQ相对前景对象底寚w
·leftQ相对前景对象左寚w
·rightQ相对前景对象右寚w
·centerQ相对前景对象中?j)对?
·比例关系
参数中的center如果用于另外一个参数的前面Q表C水q_中；如果用于另外一个参数的后面Q表C垂直居中?
十．控制列表的样?
列表是HTML里一U很有用的显C方式，可以把相关的q列内容整齐地垂直排列，使网|得整z专业，q让览者有一目了(jin)然的感觉?
样式表ؓ(f)列表增加?jin)一些功能，控制列表的样式包括列表样式、图形符受列表位|三个部分?
1Q列表符?
列表W号是指昄于每一个列表项目前的符h识?
基本格式如下Q?
list-style-typeQ参?
参数取D_(d)(x)
·discQ圆?
·circleQ空?j)?
·squareQ方?
·decimalQ十q制数字
·lower-romanQ小写罗马数?
·upper-romanQ大写罗马数?
·lower-alphaQ小写希腊字?
·upper-alphaQ大写希腊字?
·noneQ无W号昄
参数中的disc是默认选项?
2Q图形符?
囑ŞW号指原来列表的目W号可以用图形来代替?
基本格式如下Q?
list-style-imageQURL
URL是用来代曉K目符L(fng)囑Ş文g的地址Q可以用相对地址或绝对地址?
3Q列表位|?
列表位置描述列表在何处显C?
基本格式如下Q?
list-style-positionQ参?
参数取D_(d)(x)
·insideQ在BOX模型内部昄
·outsideQ在BOX模型外部昄
q里又出C(jin)一个新的概念：(x)BOX模型。BOX是指一U容器，包含?jin)应用样式规则的对象Q具体介l将在后文中l出?
十一Q控制用L(fng)面的样式
在网上Q鼠标^时呈头形，指向链接时成为手形，{待|页下蝲时成为沙漏Ş……q似乎是U定俗成的。虽然这L(fng)设计能我们知道览器现在的状态或是可以做什么，但这些好像还不能完全地满x们的需要。就拉K接来_(d)可以是指向一个帮助文Ӟ也可以是向前q一|是向后退一，针对如此多的功能光靠千篇一律的手Ş鼠标是不能说明问题的。值得?jin)幸的是QCSS提供?jin)多?3U的鼠标形状Q供我们选择?
基本格式如下Q?
cursorQ鼠标Ş状参?
CSS鼠标形状参数表：(x)
CSS代码
鼠标形状
style="cursor:hand"
手Ş
style="cursor:crosshair"
十字?
style="cursor:text"
文本?
style="cursor:wait"
沙漏?
style="cursor:move"
十字头?
style="cursor:help"
问号?
style="cursor:e-resize"
右箭头Ş
style="cursor:n-resize"
上箭头Ş
style="cursor:nw-resize"
左上头?
style="cursor:w-resize"
左箭头Ş
style="cursor:s-resize"
下箭头Ş
style="cursor:se-resize"
右下头?
style="cursor:sw-resize"
左下头?
十二Q控制BOX的样?
样式表规定了(jin)一个容器BOXQ它?yu)要储存一个对象的所有可操作的样式。包括了(jin)对象本n、边框空白、对象边框、对象间隙四个方面?
Z(jin)大家更好地理解这些属性的意义Q以?qing)互怹间的关系Q请看下面这个图C：(x)
1Q边框空白（MARGINQ?
如图所C，位于BOX模型的最外层Q包括四属性?
格式分别如下Q?
·margin-topQ顶部空白距?
·margin-rightQ右边空白距?
·margin-bottomQ底部空白距?
·margin-leftQ左边空白距?
I白的距d以用带长度单位的数字表示?
如果使用上述属性的化方式marginQ可以在其后q箋加上四个带长度单位的数字Q来分别表示margin-top、margin-right、margin-bottom、margin-leftQ每个数字中间要用空格分隔?br />
2Q对象边框（BORDERQ?
如图所C，位于Ҏ(gu)I白和对象空隙之_(d)包括?jin)七属性?
格式分别如下Q?
·border-topQ顶Ҏ(gu)宽度
·border-rightQ右Ҏ(gu)宽度
·border-bottomQ底Ҏ(gu)宽度
·border-leftQ左Ҏ(gu)宽度
·border-widthQ所有边框宽?
·border-colorQ边框颜?
·border-styleQ边框样式参?
其中border-width可以一ơ性设|所有的Ҏ(gu)宽度Qborder-color同时讄四面Ҏ(gu)的颜色时Q可以连l写上四U颜Ԍq用I格分隔。上q连l设|的Ҏ(gu)都是按border-top、border-right、border- bottom、border-left的顺序?
Border-style相对别的属性而言E稍复杂些，因ؓ(f)它还包括?jin)多个边框样式的参数Q?
·noneQ无Ҏ(gu)?
·dottedQ边框ؓ(f)点线?
·dashedQ边框ؓ(f)长短Uѝ?
·solidQ边框ؓ(f)实线?
·doubleQ边框ؓ(f)双线?
·grooveQ根据color属性显CZ同效果的3DҎ(gu)
·ridgeQ根据color属性显CZ同效果的3DҎ(gu)
·insetQ根据color属性显CZ同效果的3DҎ(gu)
·outsetQ根据color属性显CZ同效果的3DҎ(gu)
3Q对象间隙（PADDINGQ?
如图所C，位于对象Ҏ(gu)和对象之_(d)包括?jin)四属性?
基本格式如下Q?
·padding-topQ顶部间?
·padding-rightQ右辚w?
·padding-bottomQ底部间?
·padding-leftQ左辚w?
和MARGINcMQPADDING也可以用padding一ơ性设|所有的对象间隙Q格式也和MARGIN怼Q不再一一列D?jin)?
十三Q显C控制样?
基本格式如下Q?
display: 参数
参数取D_(d)(x)
·blockQ默认）(j)Q在对象前后都换?
·inlineQ在对象前后都不换行
·list-itemQ在对象前后都换行，增加?jin)项目符?
·noneQ无昄
十四Q空白控制样?
基本格式如下Q?
I白属性决定如何处理元素内的空根{?
white-space: 参数
参数取D_(d)(x)
normalQ把多个I格替换Z个来昄
preQ忠实地按输入显C空?
nowrapQ禁止换?
但要注意的是Qwrite-space也是一个块U属性?br />
]]>