《层叠样式表CSS》PPT课件.ppt

第六章层叠样式表CSS,本章内容,CSS简介CSS和XML和HTML/XHTML的结合在XML文件上直接应用CSS在XML上使用CSS和XSLT在XSLT样式表中设置样式CSS的语法细节,CSS简介,CSS指层叠样式表（CascadingStyleSheets），它并不是一种程序设计语言，而只是一种用于网页排版的标记语言。CSS在应用中不断走向成熟，现在CSS有两个不同层次的标准：CSS1和CSS2。CSS1（CSSLevel1）是CSS的第一层标准，正式发布于1996年12月17日，1999年1月11日进行了修改。它提供了简单的样式表机制。CSS2（CSSLevel2）在1998年5月12日被正式作为标准发布。CSS2基于CSS1，包含了CSS1所有的特色和功能。CSS2支持多媒体样式表，使得我们能够根据不同的输出设备为文档制定不同的表现样式，如可视化的浏览器、语音设备、打印机、盲文设备、手持设备等。它还可以实现内容定位、可下载字体、表格布局和自动记数等功能。,CSS和XML和HTML/XHTML的结合,样式表定义HTML元素如何被显示，诸如HTML3.2的样式中的字体标签和颜色属性通常被保存在外部的.css文件中。通过仅仅编辑一个简单的CSS文档，外部样式表使你有能力同时改变站点中所有页面布局的外观。由于允许同时控制多重页面的样式和布局，CSS可以称得上WEB设计领域的一个突破。作为网站开发者，你可以为每个HTML元素定义样式，并将之应用于你希望的任意多的页面。为了进行全局变换，只需简单地改变样式，然后网站中的所有元素均会被自动地升级。对于XML文档来说具有同样的作用。,在XML文件上直接应用CSS,这种方法的缺点是将在浏览器上显示XML文档的所有数据，编程者没有选择权。例6.1,在XML上使用CSS和XSLT,可以利用XSLT将XML文档中的数据进行筛选然后利用CSS将其以某种格式显示在浏览器上。例6.2,在XSLT样式表中设置样式,我们也可以直接在XSLT样式表中设置元素样式，从而控制XML文件输出的外观。但是这种方法并不好，当需要修改样式时，需要修改每一处设置。,CSS的语法细节,本节内容：CSS基础语法CSS高级语法CSS派生选择器CSSid选择器CSSclass选择器如何创建CSSCSS背景CSS文本CSS字体CSS边框CSS边距CSS填充CSS列表,CSS尺寸CSS分类CSS定位CSS伪类CSS伪元素CSS媒介类型CSS总结,CSS基础语法,CSS语法由三部分构成：选择器、属性和值：selectorproperty:value选择器(selector)通常是你希望定义的XML元素或标签，属性(property)是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：bodycolor:blue上面这行代码的作用是将body元素内的文字颜色定义为蓝色。在上述例子中，body是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color为属性，blue为值。,CSS基础语法-值的不同写法和单位,值的不同写法和单位除了英文单词red，我们还可以使用十六进制的颜色值#ff0000：pcolor:#ff0000;为了节约字节，我们可以使用CSS的缩写形式：pcolor:#f00;我们还可以通过两种方法是用RGB值：pcolor:rgb(255,0,0);pcolor:rgb(100%,0%,0%);请注意，当使用RGB百分比时，即使当值为0时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为0像素时，0之后不需要使用px单位。,CSS基础语法-记得写引号,记得写引号提示：如果值为若干单词，则要给值加引号：pfont-family:sansserif;,CSS基础语法-多重声明,多重声明：提示：如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么的好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。就像这样：ptext-align:center;color:red;你应该在每行描述只写一个属性，以使得样式定义的可读性更强，就像这样：ptext-align:center;color:black;font-family:arial;,CSS基础语法-空格和大小写敏感,空格和大小写敏感大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：bodycolor:#000;background:#fff;margin:0;padding:0;font-family:Georgia,Palatino,serif;是否包含空格不会影响CSS在浏览器的工作效果，同样，与XHTML不同，CSS对大小写不敏感。不过存在一个例外：如果涉及到与HTML文档一起工作的话，class和id名称对大小写是敏感的。,CSS高级语法-选择器的分组,选择器的分组你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。h1,h2,h2,h3,h5,h6color:green,CSS高级语法-继承,继承根据CSS，子元素从父元素继承属性。看看下面这条规则：bodyfont-family:Verdana,sans-serif;根据上面这条规则，站点的body元素将使用Verdana字体（假如访问者的系统中存在的话）。通过CSS继承，子元素将继承最高级元素（在本例中是body）所拥有的属性（这些子元素诸如p,td,ul,ol,ul,li,dl,dt,和dd）。不需要另外的规则，所有body的子元素都应该显示Verdana字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。,CSS高级语法-继承,摆脱继承如果你不希望Verdana,sans-serif字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是Times。没问题。创建一个针对p的特殊规则，这样它就会摆脱父元素的规则：bodyfont-family:Verdana,sans-serif;td,ul,ol,ul,li,dl,dt,ddfont-family:Verdana,sans-serif;pfont-family:Times,TimesNewRoman,serif;,CSS高级语法-派生选择器,派生选择器通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。在CSS1中，通过这种方式来应用规则的选择器被称为上下文选择器(contextualselectors)，这是由于他们依赖于上下文关系来应用或者避免某项规则。在CSS2中，他们被称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使HTML代码变得更加整洁。比方说，你希望列表中的strong元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：listrongfont-style:italic;font-weight:normal;,CSS高级语法-派生选择器,例6.3：我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用我是斜体字。这是因为strong元素位于li元素内。我是正常的字体。在上面的例子中，只有li元素中的strong元素的样式为斜体字，无需为strong元素定义特别的class或id，代码更加简洁。,CSS高级语法-派生选择器,再看看下面的CSS规则：例6.4strongcolor:red;h2color:red;h2strongcolor:blue;下面是它施加影响的HTML：Thestronglyemphasizedwordinthisparagraphisred.Thissubheadisalsored.Thestronglyemphasizedwordinthissubheadisblue.,CSS高级语法-id选择器,id选择器id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以#来定义。下面的两个id选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：#redcolor:red;#greencolor:green;下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色。这个段落是红色。这个段落是绿色。注意：id属性只能在每个HTML文档中出现一次。例6.5,CSS高级语法-id选择器,id选择器和派生选择器在现代布局中，id选择器常常被用来建立派生选择器。#sidebarpfont-style:italic;text-align:right;margin-top:0.5em;上面的样式只会应用于出现在id是sidebar的元素内的段落。,CSS高级语法-id选择器,一个选择器，多种用法即使被标注为sidebar的元素只能在文档中出现一次，这个id选择器作为派生选择器也可以被使用很多次：#sidebarpfont-style:italic;text-align:right;margin-top:0.5em;#sidebarh2font-size:1em;font-weight:normal;font-style:italic;margin:0;line-height:1.5;text-align:right;在这里，与页面中的其他p元素明显不同的是，sidebar内的p元素得到了特殊的处理，同时，与页面中其他所有h2元素明显不同的是，sidebar中的h2元素也得到了不同的特殊的处理。,CSS高级语法-id选择器,单独的选择器id选择器即使不被用来创建派生选择器，它也可以独立发挥作用：#sidebarborder:1pxdotted#000;padding:10px;根据这条规则，id为sidebar的元素将拥有一个像素宽的黑色点状边框，同时其周围会有10个像素宽的填充（padding，内部空白）。老板本的Windows/IE浏览器也能会忽略这条规则，除非你特别地定义这个选择器所属的元素：div#sidebarborder:1pxdotted#000;padding:10px;,CSS高级语法-CSS类选择器,CSS类选择器在CSS中，类选择器以一个点号显示：.centertext-align:center在上面的例子中，所有拥有center类的HTML元素均为居中。在下面的HTML代码中，h1和p元素都有center类。这意味着两者都将遵守.center选择器中的规则。Thisheadingwillbecenter-alignedThisparagraphwillalsobecenter-aligned.注意：不要使用数字起始类名！它无法在Mozilla或Firefox中起作用。例6.6,CSS高级语法-CSS类选择器,class也可被用作派生选择器：.fancytdcolor:#f60;background:#666;在上面这个例子中，类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为fancy的更大的元素可能是一个表格或者一个div）,CSS高级语法-CSS类选择器,元素也可以基于它们的类而被选择：td.fancycolor:#f60;background:#666;在上面的例子中，类名为fancy的表格单元将是带有灰色背景的橙色。你可以将类fancy分配给任何一个表格元素任意多的次数。那些以fancy标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为fancy的类的单元格不会受这条规则的影响。还有一点值得注意，class为fancy的段落也不会是带有灰色背景的橙色，当然，任何其他被标注为fancy的元素也不会这条规则的影响。这都是由于我们书写这条规则的方式，这个效果被限制于被标注为fancy的表格单元（即使用td元素来选择fancy类）。,CSS高级语法-如何插入样式表,如何插入样式表当读到一个样式表，浏览器会根据它来格式化文件。插入样式表的方法有三种：外部样式表当样式需要被应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。,CSS高级语法-如何插入样式表,外部样式表可以被编写于任何的文本编辑器。文件不能包含任何的html标签。样式表应该被保存为以css为扩展名的文件。下面是一个样式表文件的例子：hrcolor:siennapmargin-left:20pxbodybackground-image:url(images/back40.gif)不要在属性值与单位之间留有空格。假如你使用“margin-left:20px”而不是“margin-left:20px”，它仅能工作于IE6，但是在Mozilla/Firefox或Netscape中却无法正常工作。,有空格,CSS高级语法-如何插入样式表,内部样式表当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用标签在头部分定义内部样式表，就像这样:hrcolor:siennapmargin-left:20pxbodybackground-image:url(images/back40.gif),CSS高级语法-如何插入样式表,内联样式由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这个方法，例如当样式需要被只应用一次于某个元素时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性。本例展示如何改变段落的颜色和左边距：Thisisaparagraph,CSS高级语法-如何插入样式表,多重样式如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。例如，外部样式表拥有针对h3选择器的三个属性：h3color:red;text-align:left;font-size:8pt;而内部样式表拥有针对h3选择器的两个属性：h3text-align:right;font-size:20pt;假如拥有内部样式表的这个页面同时与外部样式表链接，那么它得到的样式是：color:red;text-align:right;font-size:20pt;即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。,CSS背景属性,CSS背景属性CSS背景属性允许你控制元素的背景颜色，将图像设置为背景，垂直或水平低重复背景图像，并且在网页上定位背景图像。background属性background是用于在一个声明中设置所有背景属性的一个简写属性。可能的值有：background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position例6.7,CSS背景属性,background-attachment属性background-attachment属性可设置一副背景图像是否固定或者随着页面的其余部分滚动。可能的值：scroll默认。背景图像会随着页面其余部分的滚动而移动。fixed当页面的其余部分股东时，背景图像不会移动。例6.8,CSS背景属性,background-color属性background-color属性可设置元素的背景颜色。可能的值：color：颜色值可以是颜色名称、rgb值或者十六进制数。transparent：默认。背景颜色为透明。例6.9本例演示如何为元素设置背景颜色。例6.10本例颜色如何设置部分文本的背景颜色。,CSS背景属性,background-image属性background-image属性可把一幅图像设置为背景。可能的值：url(URL)：指向图像的路径。none：默认。无背景图像。例6.11,CSS背景属性,background-position属性background-position属性可设置一副背景图像的起始位置。可能的值：toplefttopcentertoprightcenterleftcentercentercenterrightbottomleftbottomcenterbottomright如果您仅规定了一个关键词，那么第二个值将是center。默认值：0%0%。,CSS背景属性,x%y%第一个值是水平位置，第二个值是垂直位置。左上角是0%0%。右下角是100%100%。如果您仅规定了一个值，另一个值将是50%。xposypos第一个值是水平位置，第二个值是垂直位置。左上角是00。单位是像素(0px0px)或任何其他的CSS单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用%和position值。例6.12本例演示如何在页面上放置背景图像。例6.13本例演示如何使用百分比来在页面上定位背景图像。例6.14本例演示如何使用像素来在页面上定位背景图像。,CSS背景属性,background-repeat属性background-repeat属性可设置是否及如何重复一副背景图像。可能的值：repeat：默认。背景图像将在垂直方向和水平方向重复。repeat-x：背景图像将在水平方向重复。repeat-y：背景图像将在垂直方向重复。no-repeat：背景图像将仅显示一次。例6.15本例演示如何重复背景图像。例6.16本例演示如何垂直地重复背景图像。例6.17本例演示如何水平地重复背景图像。例6.18本例演示如何仅显示一次背景图像。,CSS文本属性,CSS文本属性CSS文本属性允许你控制文本的外观。它可用于改变文本颜色，增加或减少文本中的字符间距，排列文本，装饰文本，对文本中的首行进行缩进，以及其他等等。color属性color属性可设置文本的颜色。可能的值：color：颜色值可以是颜色名称、rgb值或者十六进制数。默认值：取决于浏览器。例6.19,CSS文本属性,direction属性direction属性可设置文本的方向。可能的值：ltr：默认。文本方向从左到右。rtl：文本方向从右到左。例6.20,CSS文本属性,letter-spacing属性letter-spacing属性可增加或减少字符间的空白。可能的值normal：默认。定义字符间的标准空间。length：定义字符间的固定空间。例6.21,CSS文本属性,text-align属性text-align属性可排列一个元素中的文本。可能的值：left把文本排列到左边。默认值：由浏览器决定。right把文本排列到右边。center把文本排列到中间。例6.22,CSS文本属性,text-decoration属性text-decoration属性可对文本进行装饰。可能的值：none默认。定义标准的文本。underline定义文本下的一条线。overline定义文本上的一条线。line-through定义穿过文本下的一条线。blink定义闪烁的文本（无法运行在IE和Opera中）。例6.23,CSS文本属性,text-indent属性text-indent属性可缩进某个元素中的首行文本。注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。可能的值length：定义固定的缩进。默认值：0%：定义基于父元素宽度的百分比的缩进。例6.24,CSS文本属性,text-transform属性text-transform可对元素中的字母进行控制。可能的值：none默认。定义带有小写字母和大写字母的标准的文本。capitalize文本中的每个单词以大写字母开头。uppercase定义仅有大写字母。lowercase定义无大写字母，仅有小写字母。例6.25,CSS文本属性,white-space属性white-space属性可设置某个元素内部的浏览器如何被处理。可能的值：normal：默认。空白会被浏览器忽略。pre：空白会被浏览器保留。其行为方式类似HTML中的标签。nowrap：文本不会换行，文本会在在同一行上继续，直到遇到标签为止。例6.26,CSS文本属性,word-spacing属性word-spacing属性可增加或减少单词间的空白。注释：允许使用负值。可能的值：normal：默认。定义单词间的标准空间。length：定义单词间的固定空间。例2.27,CSS字体属性,CSS字体属性(font)CSS字体属性允许你改变字体的种类、粗细、尺寸以及样式。font属性除了某些系统字体，font属性可用于在一个声明中设置针对一个字体的所有属性的简写属性。注释：此属性也有第六个值：“line-height”，可设置行间距。可能的值:font-stylefont-variantfont-weightfont-size/line-heightfont-family,设置针对某个字体的属性。line-height值可设置行间的空白，此值可以是一个数字、一个百分比或者一个字号。默认值：取决于浏览器。,CSS字体属性,caption:定义被有标题的控件使用的字体（比如按钮、下拉列表等）。icon:定义被图标标记使用的字体。menu:定义被下拉列表使用的字体。message-box:定义被对话框使用的字体。small-captionstatus-bar:定义被窗口状态栏使用的字体。例2.28本例演示如何使用简写属性将字体属性设置在一个声明之内。例2.29本例演示如何设置使用“caption”值的段落字体。,CSS字体属性,font-family属性font-family属性是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。有两种字体族（font-family）的值：family-name：某个字体族的名称，比如times、courier、arial等等。generic-family：某个类族的名称，比如serif、sans-serif、cursive、fantasy、monospace等等。注释：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。可能的值：family-namegeneric-family用于某个元素的字体族名称或/及类族名称的一个优先表。默认值：取决于浏览器。例2.30本例演示如何设置文本字体。,CSS字体属性,font-size属性font-size属性可设置某个字体的尺寸。可能的值：xx-smallx-smallsmallmediumlargex-largexx-large把字体的尺寸设置为不同的尺寸，从xx-small到xx-large。默认值：medium。smaller把font-size设置为比父元素更小的尺寸。larger把font-size设置为比父元素更大的尺寸。length把font-size设置为一个固定的值。%把font-size设置为基于父元素的一个百分比。例6.31本例演示如何设置字体尺寸。,CSS字体属性,font-size-adjust属性字体的小写字母x的高度与font-size高度之间的比率被称为一个字体的aspect值。当字体拥有高的aspect值时，那么当此字体被设置为很小的尺寸时会更易阅读。举例：Verdana的aspect值是0.58（意味着当字体尺寸为100px时，它的x-height是58px）。TimesNewRoman的aspect值是0.46。这就意味着Verdana在小尺寸时比TimesNewRoman更易阅读。font-size-adjust属性可为某个元素规定一个aspect值，这样就可以保持首选字体的x-height。,CSS字体属性,可能的值：none默认。如果此字体不可用，则不保持此字体的x-height。number定义字体的aspect值比率。可使用的公式：首选字体的字体尺寸*（font-size-adjust值/可用字体的aspect值）=可应用到可用字体的字体尺寸举例：如果14px的Verdana（aspect值是0.58）不可用，但是某个可用的字体的aspect值是0.46，那么替代字体的尺寸将是14*(0.58/0.46)=17.65px。例6.32本例演示如何使用font-size-adjust设置字体尺寸。,CSS字体属性,font-stretch属性font-stretch属性可对当前的font-family进行伸缩变形。可能的值：normal默认。把缩放比例设置为标准。wider把伸展比例设置为更进一步的伸展值narrower把收缩比例设置为更进一步的收缩值ultra-condensedextra-condensedcondensedsemi-condensedsemi-expandedexpandedextra-expandedultra-expanded设置font-family的缩放比例。ultra-condensed是最宽的值，而ultra-expanded是最窄的值。,CSS字体属性,font-style属性font-style属性可定义一个字体的样式。可能的值normal默认。浏览器显示一个标准的字体。italic浏览器会显示一个斜体的字体。oblique浏览器会显示一个倾斜的字体。例6.33本例演示如何设置字体样式。,CSS字体属性,font-variant属性font-variant属性可用来使用小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。可能的值normal默认。浏览器会显示一个标准的字体。small-caps浏览器会显示小型大写字母的字体。例6.34本例演示如何设置字体的异体,CSS字体属性,font-weight属性font-weight属性可设置文本的粗细。可能的值normal默认。定义标准的字符。bold定义粗体字符。bolder定义更粗的字符。lighter定义更细的字符。100200300400500600700800900定义由粗到细的字符。400等同于normal，而700等同于bold。例6.35本例演示如何设置字体的鲜明度。,CSS边框,CSS边框属性(border)CSS边框属性允许你规定元素边框的样式和颜色。在HTML中，我们使用表格来创建文本周围的边框，但是通过使用CSS边框属性，我们可以创建出效果出色的边框，并且可以被应用于任何元素。,CSS边框,border属性border属性是用于把针对四个边的属性设置在一个声明中的简写属性。可能的值:border-widthborder-styleborder-color设置针对四条边框的属性。例6.36本例演示用简写属性来将所有四个的边框属性设置于同一声明之中。,CSS边框,border-bottom属性border-bottom属性是用于把底边框的所有属性设置到一个声明中的简写属性。可能的值border-bottom-widthborder-styleborder-color为底边框设置属性。例6.37本例演示用简写属性来将所有底边框属性设置于同一声明之中。,CSS边框,border-bottom-color属性border-bottom-color可设置某个元素的底边框的颜色。可能的值：color颜色值可以是颜色名称、rgb值或者十六进制数。transparent边框是透明的。,CSS边框,border-bottom-styleborder-bottom-style可设置元素底边框的样式。可能的值：none定义无边框。hidden与“none”相同。dotted定义点状边框。在大多数浏览器中呈现为实线。dashed定义一条虚线。在大多数浏览器中呈现为实线。solid定义一条实线。double定义双线。双线的宽度等于border-width的值。groove定义一个3D凹槽边框。其效果取决于border-color的值。ridge定义一条3D垄状边框。其效果取决于border-color的值。inset定义一条3Dinset边框。其效果取决于border-color的值。outset定义一条3Doutset边框。其效果取决于border-color的值。例6.38本例演示如何设置底边框的样式。,CSS边框,border-bottom-width属性border-bottom-width属性可设置一个元素的底边框的宽度。注释：请始终把border-style属性声明到border-width属性之前。一个元素只有在获得边框之后，才能改变其边框的宽度。可能的值thin定义细的底边框。medium默认。定义一条中等的底边框。thick定义粗的底边框。length允许您来定义底边框的宽度。例6.39本例演示如何设置底边框的宽度。,CSS边框,border-color属性border-color属性可设置四条边框的颜色。此属性可设置1到4种颜色。注释：请始终把border-style属性声明到border-color属性之前。一个元素必须在您改变其颜色之前获得边框。可能的值color颜色值可以是颜色名称、rgb值或者十六进制数。transparent边框是透明的。例6.40本例演示如何设置四个边框的颜色。可以设置一到四个颜色。,CSS边框,border-left属性border-left属性是用于把左边框的所有属性设置到一个声明中的简写属性。可能的值border-left-widthborder-styleborder-color为左边框设置属性。例6.41所有左边框属性在一个声明之中,CSS边框,border-left-colorborder-left-color可设置某个元素的左边框的颜色。注释：请始终把border-style属性声明到border-color属性之前。一个元素必须在您改变其颜色之前获得边框。可能的值color颜色值可以是颜色名称、rgb值或者十六进制数。transparent边框是透明的。例6.42本例演示如何设置左边框的颜色。,CSS边框,border-left-styleborder-left-style可设置元素左边框的样式。可能的值none定义无边框。hidden与none相同。dotted定义点状边框。在大多数浏览器中呈现为实线。dashed定义一条虚线。在大多数浏览器中呈现为实线。solid定义一条实线。double定义双线。双线的宽度等于border-width的值。groove定义一个3D凹槽边框。其效果取决于border-color的值。ridge定义一条3D垄状边框。其效果取决于border-color的值。inset定义一条3Dinset边框。其效果取决于border-color的值。outset定义一条3Doutset边框。其效果取决于border-color的值。例6.43本例演示如何设置左边框的样式。,CSS边框,border-left-width属性border-left-width属性可设置一个元素的左边框的宽度。可能的值thin定义细的底边框。medium默认。定义一条中等的底边框。thick定义粗的底边框。length允许您来定义底边框的宽度。例6.44本例演示如何设置左边框的宽度。,CSS边框,border-right简写属性。将所有用于右边框的属性设置于一个声明中。border-right-widthborder-styleborder-colorborder-right-color设置右边框的颜色border-colorborder-right-style设置右边框的样式border-styleborder-right-width设置右边框的宽度。thinmediumthicklength,CSS边框,border-style设置四个边框的样式，可以设置一到四个样式。nonehiddendotteddashedsoliddoublegrooveridgeinsetoutsetborder-top简写属性。将所有用于顶边框的属性设置于一个声明中。border-top-widthborder-styleborder-color,CSS边框,border-top-color设置顶边框的颜色。border-colorborder-top-style设置顶边框的样式。border-styleborder-top-width设置顶边框的宽度。thinmediumthicklengthborder-width简写属性。在一个声明中设置四个边框的宽度，可以设置一到四个值。thinmediumthicklength,CSS边距,CSS边距属性(border)CSS边距属性定义元素周围的空间。采用负值对内容进行叠加是可能的。通过使用独立的属性，可以对上、右、下、左边距进行改变。而简写边距属性也可以被用于同时改变所有的边距。提示：Netscape和IE对body标签定义的默认边距（margin）值是8px。而Opera不是这样。相反地，Opera将内部填充（padding）的默认值定义为8px，因此如果希望对整个网站的边缘部分进行调整，并将之正确显示于Opera中，那么必须对body的padding进行自定义。,CSS边距,margin属性margin属性是用于在一个声明中设置四个边距的所有属性的简写属性。可能的值margin-topmargin-rightmargin-bottommargin-left设置针对边距的属性。值可以是：百分比（基于父对象总高度或宽度的百分比）长度值（定义一个固定的边距）auto（浏览器设定的值）。默认值：未定义。例6.45本例演示如何将所有的边距属性设置于一个声明中。,CSS边距,margin-bottom属性margin-bottom属性可设置一个元素的底边距。可能的值auto浏览器设置的一个底边距。length定义一个固定的底边距。默认值是0。%定义一个基于父对象总高度的百分比底边距。例6.46本例演示如何使用厘米值来设置文本的底边距。例6.47本例演示如何使用百分比值来设置文本的底边距。,CSS边距,margin-left设置元素的左边距autolength%margin-right设置元素的右边距autolength%margin-top设置元素的上边距autolength%,CSS填充,CSS填充属性CSS填充属性定义元素边框与元素内容之间的空白。负值是不被允许的。通过使用单独的属性，上、右、下、左填充可以被独立地修改。简写填充属性也可被创建来同时对多边进行控制。,CSS填充,CSSpadding属性padding属性是用于在一个声明中设置所有padding属性的简写属性。注释：不允许使用负值。继承性：No可能的值padding-toppadding-rightpadding-bottompadding-left设置填充padding。值可以是：百分比（基于父元素宽度的百分比）长度值（固定的padding值）默认值：未定义。例6.48,CSS填充,CSSpadding-bottom属性padding-bottom属性可设置元素底部填充（底部空白）。注释：不允许使用负值。继承性：No可能的值length定义一个固定的底部填充值。默认值是0。%定义基于父元素高度的百分比底部填充。此值不会如预期的那样工作于所有的浏览器中。例6.49本例演示如何使用厘米值来设置单元格的下填充。例6.50本例演示如何使用百分比值来设置单元格的下填充。,CSS填充,padding-left设置元素左侧的填充length%padding-right设置元素右侧的填充length%padding-top设置元素顶端的填充length%,CSS列表,CSS列表属性(list)CSS列表属性允许你放置、更改列表标记，或者将图像作为列表标记。,CSS列表,CSSlist-style属性list-style属性是用于在一个声明中设置一个列表的所有属性的简写属性。继承性：Yes可能的值list-style-typelist-style-positionlist-style-image设置列表的属性。默认值：未为定义。例6.51本例演示将所有针对列表的属性设置于一个简写属性。,CSS列表,list-style-image属性list-style-image属性可使用一幅图像来替换列表项的标记。注释：请始终规定一个list-style-type属性以防图像不可用。继承性：Yes可能的值url图像的路径。none默认。无图形被显示。例6.52本例演示如何将图像作为列表项标记。,CSS列表,CSSlist-style-position属性List-style-position可放置列表中的列表项标记。继承性：Yes可能的值inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。outside默认。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。例6.53本例演示在何处放置列表标记。,CSS列表,list-style-type属性list-style-type属性可设置列表项标记的类型。注释：某些浏览器仅支持disc值。继承性：Yes可能的值none无标记。disc默认。标记是实心圆。circle标记是空心圆。square标记是实心方块。decimal标记是数字。decimal-leading-zero0开头的数字标记。(01,02,03,etc.),CSS列表,lower-roman小写罗马数字(i,ii,iii,iv,v,etc.)upper-roman大写罗马数字(I,II,III,IV,V,etc.)lower-alpha小写英文字母Themarkerislower-alpha(a,b,c,d,e,etc.)upper-alpha大写英文字母Themarkerisupper-alpha(A,B,C,D,E,etc.)lower-greek小写希腊字母(alpha,beta,gamma,etc.)lower-latin小写拉丁字母(a,b,c,d,e,etc.)upper-latin大写拉丁字母(A,B,C,D,E,etc.)hebrew传统的希伯来编号方式armenian传统的亚美尼亚编号方式georgian传统的乔治亚编号方式(an,ban,gan,etc.)cjk-ideographic简单的表意数字例6.54本例演示在CSS中不同类型的列表项标记。例6.55本例演示在CSS中不同类型的列表项标记。例6.56本例演示在CSS中所有不同类型的列表项标记。,CSS尺寸,CSS尺寸CSS尺寸属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。,CSS尺寸,CSSheight属性height属性可设置一个元素的高度。继承性：No可能的值auto默认。浏览器会计算出实际的高度。length使用px、cm等单位定义高度。%基于包含它的块级对象的百分比高度。例6.57本例演示如何使用像素值设置元素的高度。例6.58本例掩饰如何使用百分比值来设置元素的高度。,CSS尺寸,CSSline-height属性line-height属性可设置行间的距离。注释：不允许使用负值。继承性：Yes可能的值normal默认。设置合理的行间距。number设置一个数字，此数字会与当前的字体尺寸相乘来设置行间距。length设置一个固定的行间距。%基于当前字体尺寸的百分比行间距。例6.59本例演示如何使用百分比值来设置段落中的行间距。例6.60本例演示如何使用像素值来设置段落中的行间距。例6.61本例演示如何使用一个数值来设置段落中的行间距。,CSS尺寸,CSSwidth属性width属性可设置一个元素的宽度。继承性：No可能的值auto默认。浏览器可计算出实际的宽度。%定义基于父元素宽度的百分比宽度。length使用px、cm等单位定义宽度。例6.62本例演示如何使用像素值来设置某元素的宽度。例6.63本例演示如何使用百分比值来设置某元素的宽度。,CSS分类,CSScursor属性cursor属性可规定当指向某元素之上时被显示的指针类型。继承性：No可能的值url需被使用的自定义光标的URL注释：请在此列表的末端始终定义一种普通的光标，以防没有可用的由URL定义的光标。default默认光标（通常是一个箭头）auto默认。浏览器设置一种光标。crosshair光标呈现为十字线。pointer光标呈现为指示某个链接的指针（一只手）move此光标可指示某对象可被移动。,CSS分类,e-resize此光标可指示某个矩形框的边缘可被向右（东）移动。ne-resize此光标可指示某个矩形框的边缘可被向上及向右移动（北/东）。nw-resize此光标可指示某个矩形框的边缘可被向上及向左移动（北/西）。n-resize此光标可指示某个矩形框的边缘可被向上（北）移动。se-resize此光标可指示某个矩形框的边缘可被向下及向右移动（南/东）。sw-resize此光标可指示某个矩形框的边缘可被向下及向左移动（南/西）。s-resize此光标可指示某个矩形框的边缘可被向下移动（北/西）。w-resize此光标可指示某个矩形框的边缘可被向左移动（西）。text此光标可指示文本。wait此光标可指示程序正忙（通常是一只表或沙漏）。help此光标可指示可用的帮助（通常是一个问号或一个气球）。例6.64本例演示如何改变光标。,CSS分类,CSSdisplay属性display属性可设置是否及如何显示某个元素。继承性：No可能的值none此元素不会被显示。block此元素将被显示为块级元素，此元素前后会带有换行符。inline默认。此元素会被显示为一个内联元素，元素前后没有换行符。list-item此元素会被作为列表显示run-in此元素会根据其内容被作为块级元素或内联元素显示。compact此元素会根据其内容被作为块级元素或内联元素显示。table此元素会被作为块级表格来显示（类似），表格前后带有换行符。inline-table此元素会被作为内联表格来显示（类似），表格前后没有换行符。,CSS分类,table-row-group此元素会被作为一个或多个行的分组来显示（类似）。table-header-group此元素会被作为一个或多个行的分组来显示（类似）。table-footer-group此元素会被作为一个或多个行的分组来显示（类似）。table-row此元素会被作为一个表格行显示（类似）。table-column-group此元素会被作为一个或多个列的分组来显示（类似）。table-column此元素会被作为一个单元格列显示（类似）table-cell此元素会被作为一个表格单元格显示（类似和）table-caption此元素会被作为一个表格标题显示（类似）例6.65本例演示如何把元素显示为内联元素。例6.66本例演示如何把元素显示为块级元素。,CSS分类,CSSfloat属性float属性可设置一副图像或一段文本将在另外一个元素中的何处出现。注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间位置。继承性：No可能的值left文本或图像会移至父元素中的左侧。right文本或图像会移至父元素中的右侧。none默认。文本或图像会显示于它在文档中出现的位置。例6.67使图像浮动于一个段落的右侧。例6.68使图像浮动于段落的右侧。向图像添加边框和边界。例6.69使带有标题的图像浮动于右侧例6.70使段落的首字母浮动于左侧，并向这个字母添加样式。例6.71使用具有一栏超链接的浮动来创建水平菜单。例6.72使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页。,CSS分类,CSSposition属性position属性可把一个元素放置到一个静态的、相对的、绝对的、或固定的位置中。继承性：No可能的值static默认。位置被设置为static的元素，它始终会处于页面流给予的位置（一个static元素会忽略任何top、bottom、left或right声明）。relative位置被设置为relative的元素，可将其移至相对于其正常位置的地方，因此“left:20”会将元素移至元素正常位置左边20个像素的位置。absolute位置被设置为absolute的元素，可被定位于相对于包含它的元素的指定坐标。此元素的位置可通过“left”、“top”、“right”以及“bottom”属性来规定。fixed位置被设置为fixed的元素，可被定位于相对于浏览器窗口的指定坐标。此元素的位置可通过left、top、right以及bottom属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于IE7（strict模式）。,CSS分类,例6.73本例演示如何相对于一个元素的正常位置来对其定位。例6.74本例演示如何使用绝对值来对元素进行定位。例6.75本例演示如何相对于浏览器窗口来对元素进行定位。例6.76本例演示如何设置元素的形状。此元素被剪裁到这个形状内，并显示出来。例6.77Z-index可被用于将在一个元素放置于另一元素之后。例6.78上面的例子中的元素已经更改了Z-index。,CSS分类,CSSvisibility属性visibility属性可设置某元素是否可见或不可见。提示：即使不可见的元素也会占据页面上的空间。请使用display属性来创建不占据页面空间的不可见元素。继承性：No可能的值visible元素是可见的hidden元素是不可见的例6.79本例演示如何使元素不可见。,CSS定位,CSS定位属性CSS定位属性允许你对元素进行定位。,CSS定位,CSSbottom属性bottom属性可规定某个元素的底部边缘。注释：如果position属性的值为static，那么设置bottom属性不会产生任何效果。提示：即使不可见的元素也会占据页面上的空间。请使用display属性来创建不占据页面空间的不可见元素。继承性：No可能的值auto默认。通过浏览器计算底部的位置。%设置元素的底边到最近一个具有定位设置父元素的底部边缘的百分比位置。length使用px、cm等单位设置元素的底边到最近一个具有定位设置父元素的底部边缘的位置。可使用负值。例6.80本例演示如何使用像素值设置图像的底部边缘例6.81本例演示如何使用百分比值设置图像的底部边缘,CSS定位,CSSclip属性clip属性可设置元素的形状。当一幅图像的尺寸大于包含它的元素时会发生什么呢？clip属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。继承性：No可能的值shape设置元素的形状。合法的形状值是：rect(top,right,bottom,left)auto默认。浏览器可设置元素的形状。例6.82本例演示如何设置元素的形状。此元素被剪入这个形状中，然后被显示出来。,CSS定位,left设置元素的左边与其父元素的右边或左边的的距离。auto%lengthright设置元素的右边距父元素右边的左侧或右侧的距离auto%lengthtop设置元素的顶边距父元素