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