Css样式表.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,Css,样式表,一、认识,CSS,CSS,就是,Cascading Style Sheets,，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。网页设计最初是用,HTML,标记来定义页面文档及格式，例如标题,、段落,、表格,、链接,等，但这些标记不能满足更多的文档样式需求，为了解决这个问题，在,1997,年,W3C(The World Wide Web Consortium),颁布,HTML4,标准的同时也公布了有关样式表的第一个标准,CSS1,自,CSS1,的版本之后，又在,1998,年,5,月发布了,CSS2,版本，样式表得到了更多的充实。,W3C,把,DHTML(Dynamic,HTML),分为三个部分来实现：脚本语言,(,包括,JavaScript,、,Vbscript,等,),、支持动态效果的浏览器,(,包括,Internet Explorer,、,Netscape Navigator,等,),和,CSS,样式表。,二、语法,基本语法,CSS,的定义是由三个部分构成：选择符（,selector,），属性（,properties,）和属性的取值（,value,）。基本格式如下：,selector property:value,（选择符,属性：值,）,选择符是可以是多种形式，一般是你要定义样式的,HTML,标记，例如,BODY,、,P,、,TABLE,，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开：,body color:black,选择符,body,是指页面主体部分，,color,是控制文字颜色的属性，,black,是颜色的值，此例的效果是使页面中的文字为黑色。,如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：,p font-family:sans serif,（定义段落字体为,sans serif,）,如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：,p text-align:center;color:red,（段落居中排列；并且段落中的文字为红色）,为了使你定义的样式表方便阅读，你可以采用分行的书写格式：,ptext-align:center;color:black;font-family:,arial,（段落排列居中，段落中文字为黑色，字体是,arial,）,2.,选择符组你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：,h1,h2,h3,h4,h5,h6 color:green,（这个组里包括所有的标题元素，每个标题元素的文字都为绿色）,p,table font-size:9pt,（段落和表格里的文字尺寸为,9,号字）效果完全等效于：,p font-size:9pt table font-size:9pt,3.,类选择符用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类：,p.right,text-align:right,p.center,text-align:center,然后用不在不同的段落里，只要在,HTML,标记里加入你定义的,class,参数：,这个段落向右对齐的,这个段落是居中排列的,注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。,类选择符还有一种用法，在选择符中省略,HTML,标记名，这样可以把几个不同的元素定义成相同的样式：,.center text-align:center,（定义,.center,的类选择符为文字居中排列）这样的类可以被应用到任何元素上。下面我们使,h1,元素（标题,1,）和,p,元素（段落）都归为“,center”,类，这使两个元素的样式都跟随“,.center”,这个类选择符：,这个标题是居中排列的,这个段落也是居中排列的,注意：这种省略,HTML,标记的类选择符是我们今后最常用的,CSS,方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。,4.ID,选择符在,HTML,页面中,ID,参数指定了某个单一元素，,ID,选择符是用来对这个单一元素定义单独的样式。,ID,选择符的应用和类选择符类似，只要把,CLASS,换成,ID,即可。将上例中类用,ID,替代：,这个段落向右对齐,定义,ID,选择符要在,ID,名称前加上一个“,#”,号。和类选择符相同，定义,ID,选择符的属性也有两种方法。下面这个例子，,ID,属性将匹配所有,id=intro,的元素：,#introfont-size:110%;font-,weight:bold,;color:#0000ff;background-,color:transparent,（字体尺寸为默认尺寸的,110%,；粗体；蓝色；背景颜色透明）下面这个例子，,ID,属性只匹配,id=intro,的段落元素：,p#intro,font-size:110%;font-,weight:bold,;color:#0000ff;background-,color:transparent,5.,包含选择符可以单独对某种元素包含关系定义的样式表，元素,1,里包含元素,2,，这种方式只对在元素,1,里的元素,2,定义，对单独的元素,1,或元素,2,无定义，例如：,table afont-size:12px,在表格内的链接改变了样式，文字大小为,12,象素，而表格外的链接的文字仍为默认大小。,6.,样式表的层叠性层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例如在,DIV,标记中嵌套,P,标记：,div color:red;font-size:9pt,这个段落的文字为红色,9,号字,（,P,元素里的内容会继承,DIV,定义的属性）注意：有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上边界属性值是不会继承的，直觉上，一个段落不会同文档,BODY,一样的上边界值。,另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了,P,的颜色：,div color:red;font-size:9ptp color:blue,这个段落的文字为蓝色,9,号字,我们可以看到段落里的文字大小为,9,号字是继承,div,属性的，而,color,属性则依照最后定义的。,不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。,ID,选择符，类选择符和,HTML,标记选择符，因为,ID,选择符是最后加上元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用,!important,提升样式表的优先权，例如：,p color:#FF0000!important.blue color:#0000FF#id1 color:#FFFF00,我们同时对页面中的一个段落加上这三种样式，它最后会依照被,!important,申明的,HTML,标记选择符样式为红色文字。如果去掉,!important,，则依照优先权最高的,ID,选择符为黄色文字。,7.,注释你可以在,CSS,中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。,CSS,注释以,/*,开头，以,*/,结尾，如下：,/*,定义段落样式表*,/ptext-align:center;/*,文本居中排列*,/color:black;/*,文字为黑色*,/font-family:,arial,/*,字体为,arial,*/三、伪类,动态链接,伪类可以看做是一种特殊的类选择符，是能被支持,CSS,的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。,1.,语法伪类的语法是在原有的语法里加上一个伪类（,pseudo-class,）：,selector:pseudo,-class property:value,（选择符,:,伪类,属性,:,值,）伪类和类不同，是,CSS,已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。类选择符及其他选择符也同样可以和伪类混用：,selector.class:pseudo,-class property:value,（选择符,.,类,:,伪类,属性,:,值,）,2.,锚的伪类我们最常用的是,4,种,a,（锚）元素的伪类，它表示动态链接在,4,种不同的状态：,link,、,visited,、,active,、,hover,（未访问的链接、已访问的链接、激活链接和鼠标停留在链接上）。我们把它们分别定义不同的效果：,a:link,color:#FF0000;text-decoration:none/*,未访问的链接*,/,a:visited,color:#00FF00;text-decoration:none/*,已访问的链接*,/,a:hover,color:#FF00FF;text-decoration:underline/*,鼠标在链接上*,/,a:active,color:#0000FF;text-decoration:underline/*,激活链接*,/,（上面这个例子中，这个链接未访问时的颜色是红色并无下划线，访问后是绿色并无下划线，激活链接时为蓝色并有下划线，鼠标在链接上时为紫色并有下划线）注意：有时这个链接访问前鼠标指向链接时有效果，而链接访问后鼠标再次指向链接时却无效果了。因为把,a:hover,放在了,a:visited,的前面，这样的话由于后面的优先级高，当访问链接后就忽略了,a:hover,的效果。所以根据叠层顺序，我们在定义这些链接样式时，一定要按照,a:link,，,a:visited,，,a:hover,，,a:actived,的顺序书写。,3.,伪类和类选择符将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果了，例如，我们定义一组链接为红色，访问后为蓝色；另一组为绿色，访问后为黄色：,a.red:link,color:#FF0000,a.red:visited,color:#0000FF,a.blue:link,color:#00FF00,a.blue:visited,color:#FF00FF,现在应用在不同的链接上：,这是第一组链接,这是第二组链接,4.,其他伪类此外,CSS2,还定义了首字和首行first-letter,和,first-line,）的伪类，可以对元素的首字或首行设定不同的样式。下面看这个例子，我们在段落标记里定义文本首字尺寸为默认大小的,3,倍：,p:first,-letter font-size:300%,这是一个段落，这个段落的首字被放大了。,我们再定义一个首行样式的例子：,div:first,-line color:red,这是段落的第一行这是段落的第二行这是段落的第三行,（上例中段落的第一行为红色，第二、三行为默认颜色）注意：首字和首行的伪类需要,IE5.5,以上的版本支持。,四、如何在网页中插入,CSS,1.,链入外部样式表链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用,标记链接到这个样式表文件，这个,标记必须放到页面的,区内，如下：,上面这个例子表示浏览器从,mystyle.css,文件中以文档格式读出定义的样式表。,rel,=”,stylesheet,”,是指在页面中使用这个外部的样式表。,type=”text/,css,”,是指文件的类型是样式表文本。,href,=”,mystyle.css,”,是文件所在的位置。,一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。样式表文件可以用任何文本编辑器（例如：记事本）打开并编辑，一般样式表文件扩展名为,.,css,。内容是定义的样式表，不包含,HTML,标记，,mystyle.css,这个文件的内容如下：,hr color:siennap margin-left:20pxbody background-image:url(images/back40.gif),（定义水平线的颜色为土黄；段落左边的空白边距为,20,象素；页面的背景图片为,images,目录下的,back40.gif,文件）,2.,内部样式表内部样式表是把样式表放到页面的,区里，这些定义的样式就应用到页面中了，样式表是用,标记插入的，从下例中可以看出,标记的用法：,hr color:siennap margin-left:20pxbody background-image:url(images/back40.gif),注意：有些低版本的浏览器不能识别,style,标记，这意味着低版本的浏览器会忽略,style,标记里的内容，并把,style,标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加,HTML,注释的方式（,）隐藏内容而不让它显示：,3.,导入外部样式表导入外部样式表是指在内部样式表的,里导入一个外部样式表，导入时用,import,，看下面这个实例：,例中,import“,mystyle.css,”,表示导入,mystyle.css,样式表，注意使用时外部样式表的路径。方法和链入样式表的方法很相似，但导入外部样式表输入方式更有优势。实质上它相当于存在内部样式表中的。注意：导入外部样式表必须在样式表的开始部分，在其他内部样式表上面。,4.,内嵌样式内嵌样式是混合在,HTML,标记里使用的，用这种方法，可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在,HTML,标记里加入,style,参数。而,style,参数的内容就是,CSS,的属性和值，如下例：,这是一个段落,（这个段落颜色为土黄，左边距为,20,象素）在,style,参数后面的引号里的内容相当于在样式表大括号里的内容。注意：,style,参数可以应用于任意,BODY,内的元素（包括,BODY,本身），除了,BASEFONT,、,PARAM,和,SCRIPT,。,5.,多重样式表的叠加上一章里我们已经提到样式表的层叠顺序，这里我们讨论插入样式表的这几种方法的叠加，如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。例如，我们首先链入一个外部样式表，其中定义了,h3,选择符的,color,、,text-,alig,和,font-size,属性：,h3 color:red;text-align:left;font-size:8pt,（标题,3,的文字颜色为红色；向左对齐文字尺寸为,8,号字）,然后在内部样式表里也定义了,h3,选择符的,text-align,和,font-size,属性：,h3 text-align:right;font-size:20pt,（标题,3,文字向右对齐；尺寸为,20,号字）那么这个页面叠加后的样式就是：,color:red;text-align:right;font-size:20pt,（文字颜色为红色；向右对齐；尺寸为,20,号字）字体颜色从外部样式表里保留下来，而对齐方式和字体尺寸都有定义时，按照后定义的优先而依照内部样式表。注意：依照后定义的优先，所以优先级最高的是内嵌样式，内部样式表高于导入外部样式表，链入的外部样式表和内部样式表之间是最后定义的优先级高。,在,dw,中创建,css,1.CSS Styles,面板,在,CSS Styles,面板里显示了所有自定义的,CSS,样式（也就是上面提到的以点开头的类选择符，,Dreamweaver,把这样以点开头的类选择符作为自定义样式来使用），可以利用,Apply,按钮这些,CSS,样式随意应用在页面中的文本或文档区域。注意：应用按钮前面有一个复选框，选中的时候按钮成灰色不可用，表示自动应用，只要鼠标单击自定的,CSS,样式就会自动应用到页面中当前元素；当对象应用了自定义样式时，也就相当于在当前,HTML,标记后加上,class=”.”,。另外在样式前有一个“,S型的符号，表示内部定义样式；如果是符号，表示这个样式链接到外部样式表文件。,在新建,css,样式里可以选择是外部样式表，还是内部样式表：选择（新建样式表文件），系统会先让你保存这个样式表文件，然后定义这个样式表文件。整个页面的样式就会跟随你建立的这个样式表文件，然后你可以把这个外部样式表文件链接到别的页面去，这样就可以使一个样式表文件控制多个页面了。如果你选择（仅对该文档），你就建立了一个内部样式表，,Dreamweaver4,会自动把你建立的样式表内容放到,区的,标记里。,2.,创建样式表的类型,在类型选择器里有三种样式表类型可供选择：,l,（创建自定义样式）,：自定义一个样式，可以作为class,属性应用于页面中。,l,（重定义,HTML,标记）,：对指定的,HTML,标记的默认格式进行重新定义。,l,（使用,CSS,选择符）,：对特定的标签组合，或者包含有指定,ID,属性的所有标签进行格式定义。,注意：在定义,CSS,前，我们先要考虑清楚，定义的这个样式将用在哪里？要完成哪些效果？是定义在一个页面里还是控制多个页面的风格？然后根据需求来定义合适的样式表。,3.,创建自定义样式,在页面中，我们有时想让一些重要的文字或内容醒目，我们就需要把这些重要的文字或内容单独定义一个样式，来区别一般文字，我们可以通过创建自定义样式单独对重要内容定义,CSS,来完成。假设，我们要求把重要文字和内容的颜色定义成红色、并加粗来达到醒目的目的。,注意：自定义样式的名称可以自己随意设定，一般根据其样式效果命名。在名称前必须有点号，如果漏写，系统也会自动帮你补上。,我们来看一下原代码部分，我们可以看到在,区多了下列样式表代码：,我们来看一下原代码部分，我们可以看到在,区多了下列样式表代码：,注意：如果我们选中的内容是一个表格或一个段落，那么整个表格或段落内的文字被定义了,emphases,样式，从原代码里我们可以看出是在,或,标记后面加了,class=”emphases”,参数，如：,或,当我们把样式加在选中的几个文字上时，文字本身没有,HTML,标记所包围，就会自动加上,标记，例如：重点,注意：,span,标记本身没有任何意义，它专门为样式表指定选取范围，为样式表指定区域的还有,div,。,4.,创建重定义样式表重定义样式表是对某个,HTML,标记重新定义格式。例如，我们想重新格式化页面的段落，每个段落前空两格，并设定段落文字的大小和行距。单击新建样式，弹出新建对话框，在新建样式对话框里，样式表类型选择重定义 特定标签的外观，我们仍然建立内部样式表，选只在该文档中。当样式表类型选择,“,重定义特定标签的外观”时，上面下拉框的名字变成了各种标签，表示输入的内容是,HTML,标记，点击下拉按钮，我们可以看到所有,HTML,标记都在标签下拉框里，这里我们选段落标记,P,：,5创建动态链接样式表下面我们来创建一组链接在不同状态下的样式。单击新建样式，弹出新建对话框，在新建样式对话框里，样式表类型选“高级”，我们仍然建立内部样式表，选“仅在该文档”。当样式表类型选择“高级”时，上面下拉框的名字变成了,“,选择器”，表示输入内容为,CSS,选择符，单击下拉按钮，可以看到动态链接的,4,种状态：,a:active,选中超级链接状态,a:hover,光标移上超级链接状态,a:link,超级链接的正常状态，没有任何动作的时候,a:visited,访问过的超级链接状态接下来我们对这几种状态分别设定,这样定义动态链接时，整个页面的链接效果都会改变，如果我想在一个页面中定义两组以上的链接效果，该怎么做呢？,我们不是说过的类和伪类的混用可以在同一个页面中做不同的链接效果吗。点击新建样式，在选择符下拉框里，我们输入,a.link2:link,（当然可以先选择,a:link,，然后更改）,根据上面的方法我们继续定义,a.link2:visited,和,a.link2:hover,，我们定义,a.link2:visited,为红色有下划线，,a.link2:hover,为红色无下划线，背景为白色。在,CSS Styles,面板里多了一个名称为,link2,的自定义样式。然后将此样式应用在某个动态链接上。保存后，用浏览器打开，我们可以看到两个完全不同的链接样式。,6.,其他样式表的定义我们还可以在,Use CSS Selector,里输入其他,CSS,选择符：,ID,选择符，以“,#”,号开头定义一个样式，例如：“,#id-style”,，然后建立一个,ID,为,id-style,的,ID,样式，,ID,样式表必须手动在,HTML,标记后加,id=”id-style”,属性。含,HTML,标记的类选择符，例如：“,p.red,”,，表示定义段落为,red,类的样式，此样式只对有,class=”red”,属性的段落有效果。包含选择符，是指前一个,HTML,标记里包含着后一个,HTML,标记，例如：“,div p”,，表示定义在,DIV,里包含段落的样式。,7.,编辑修改、删除样式表点,CSS Styles,面板中的按钮 会打开编辑样式表对话框。,按钮功能介绍：,Link,：链接外部样式表，这里可以选择链入外部样式表和导入外部样式表两种方式。,New,：新建样式。,Edit,：选中一个样式然后点,Edit,就可以进行编辑。,Duplicate,：复制一个样式，选中一个样式后点,Duplicate,按钮，弹出对话框，为复制的样式起一个新的名称，,OK,。,Remover,：移除一个样式或一个外部样式表，选中要删除的样式点,Remove,按钮，此样式就被删除了。在,Style definition,（样式定义）栏里可以看到此样式的内容。,8.,外部样式表建立外部样式表和建立内部样式表差不多，只是在新建的时候选择,(New Style Sheet File),，并保存为一个扩展名为,.,css,的样式表文件。现在，我们把刚才实例中的样式表导出，然后再链接到其他页面。点击,CSS Style,面板菜单中的,Export Style Sheet,，系统弹出导出样式表对话框，我们将样式表文件保存为,mystyle.css,。用记事本打开。,然后转到其他页面中，点,CSS Style,面板中的链入外部样式表按钮，链入刚才导出的样式表文件,mystyle.css,，此时这个样式表已经应用到新的页面中了。在新页面的,区添加了下列代码：,此外，还可以导入外部样式表，导入方法如下：点击编辑样式表按钮 ，打开编辑样式表对话框，点击,LINK,按钮，这时弹出”,Link External Style Sheet”,对话框，输入外部样式表的路径，选择,Import,（导入），确定。,可以看到在,区的代码为：,DW,中,CSS,属性详解,在,Dreamweaver,的,CSS,样式里包含了,W3C,规范定义的所有,CSS1,的属性，,Dreamweaver,把这些属性分为（类型）、（背景）、（区块）、（方框）、（边框）、（列表）、（定位）、（扩展）八个部分。,1,（类型）类型面板主要是对文字的字体，大小，颜色，效果等基本样式进行设置。设置时，我们只对要改变的属性进行设置，没有必要改变的属性就空着。注意：属性名带*号的是指样式效果不能在编辑文档时显示，要用浏览器打开才能看到效果。,字体：设置字体系列。什么叫字体系列呢？是指对文字设定几个字体，当遇到第一个字体不能显示的文字时会自动用系列中的第二个字体或后面的字体显示。相对应的,CSS,属性是”,font-family”,。注意：,Dreamweaver,已经内置设定了,6,个系列的英文字体，一般英文字体我们用“,Verdana,Arial,Helvetica,sans-serif”,这个系列比较好看。如果不用这些字体系列，你就需要自己编辑字体系列，你可以通过下拉框最下面的“编辑字体样式”来创建新的字体系列，也可以直接手动在下拉框里写字体名，字体之间用逗号隔开。中文网页默认字体是宋体，一般就空着不要选取任何字体。大小：定义文字的大小。你可以通过选取数字和度量单位来选择具体的字体大小，或者你也可以选择一个相对的字体大小。最好使用,Pixels,作为单位，这样不会在浏览器中文本变形。一般小字体用比较标准的,12px,。相对应的,CSS,属性是”,font-size”,。,注意：,CSS,中长度的单位分绝对长度单位和相对长度单位，一般我们常用的绝对长度单位有：,px,：（象素）根据显示器的分辨率来确定长度。,pt,：（字号）根据,windows,系统定义的字号大小来确定长度。,mm,、,cn,、,in,：（毫米、厘米、英寸）根据显示的实际尺寸来确定长度。此类单位不随显示器的分辨率改变而改变。相对长度单位有：,em,：当前文本的尺寸。例如：,font-size:2em,是指文字大小为原来的,2,倍。,ex,：当前字母“,x”,的高度，一般为字体尺寸的一半。,%,：是以当前文本的百分比定义尺寸。例如：,font-size:300%,是指文字大小为原来的,3,倍。,small,、,large,：表示比当前小一个级别或大一个级别的尺寸。,样式：定义字体样式为正常、斜体、或者偏斜体。斜体,Italic,和偏斜体,Oblique,是斜体字体。默认设置为 正常。相对应的,CSS,属性是”,font-style”,。注意：斜体和偏斜体不同的是，,Italic,是斜体字，而,Oblique,是倾斜的文字，对于没有斜体的字体应该用,Oblique,。行高：设置文本所在行的行高。默认为正常，你也可以自己键入一个精确的数值并选取一个计量单位。比较直观的写法用百分比，例如,140%,是指行高等于文字大小的,1.4,倍。相对应的,CSS,属性是”,line-height”,。,修饰：在文本中添加,underline,（下划线）、,overline,（上划线）、,line-through,（中划线）、,blink,（闪烁效果）。这些效果可以同时存在，将效果前的复选框选定即可。相对应的,CSS,属性是”,text-decoration”,。注意：链接的默认设置是,Underline,，我们可以通过选,none,去除下划线。,Blink,（闪烁效果）,ie,浏览器里不可以看到。粗细：给字体指定粗体字的磅值。正常,Normal,等同于,400,；粗体,Bold,等同于,700,。设粗体字一般用,bold,。相对应的,CSS,属性是”,font-weight”,。变量：允许你选取字体的变种，选,small-caps,（小型大写字母）时，此样式区域内所有字母大写。相对应的,CSS,属性是”,font-variant”,。,大小写：将选区中每个单词的第一个字母转为大写，或者令单词全部大写或全部小写。参数capitalize,（单词首字母大写）、,uppercase,（转换成大写）、,lowercase,（转换成小写）、,none,（不转换）。相对应的,CSS,属性是”,text-transform”,。颜色：定义文字颜色。相对应的,CSS,属性是”,color”,。注意：,CSS,中颜色的值有三种表示方法：,#RRGGBB,格式，是由红绿蓝三种颜色的值组合，每种颜色的值为“,00 FF”,的两位十六进制正整数。例如：,#FF0000,表示红色，,#FFFF00,表示黄色。,rgb(R,G,B,),格式，,RGB,为三色的值，取,0255,，例如：,rgb(255,0,0),表示红色，,rgb(255,255,0),表示黄色。,用颜色名称。,CSS,可以使用已经定义好的颜色名称。例如：,red,表示红色，,yellow,表示黄色。,2,（背景）背景面板主要是对元素的背景进行设置，包括背景颜色、背景图象、背景图象的控制。一般是对,BODY,（页面）、,TABLE,（表格）、,DIV,（区域）的设置。,背景色：设置元素的背景色。相对应的,CSS,属性是”,background-color”,。,背景图片：设置元素的背景图像。相对应的,CSS,属性是”,background-image”,。,重复：确定背景图像是否以及如何重复。,No Repeat,：在元素的开头显示一遍图像。,Repeat,：在元素的背景部分水平和垂直方向平铺图像。,Repeat-x and Repeat-y,：分别在水平和垂直方向重复显示，默认为,Repeat,。相对应的,CSS,属性是”,background-repeat”,。注意：如果定义的元素的,BODY,，可以控制页面背景是否重复。附件：固定背景图像或者跟随内容滚动。参数,fixed,表示固定背景，,scroll,表示跟随内容滚动的背景。相对应的,CSS,属性是”,background-attachment”,。注意：如果定义的元素的,BODY,，可以使页面背景固定。,水平位置：指定背景图像的水平位置。可以指定为,left,（左边），,center,（居中），,right,（右边）；也可以指定数值，如,20px,是指背景距离左边,20,象素。相对应的,CSS,属性是”,background-position”,。垂直位置：指定背景图像的垂直位置。可以指定为,top,（顶部），,center,（居中），,bottom,（底部）；也可以指定数值。相对应的,CSS,属性是”,background-position”,。注意：水平位置和垂直位置使用的是同一个,CSS,属性，在设置时要注意。,3.,（区块）区块面板主要是设置对象文本的文字间距、对齐方式、上标、下标、排列方式、首行缩进等。,单词间距：设置单词之间的间距。可以设置负值。相对应的CSS,属性是”,word-spacing”,。注意：一般情况下,IE,不支持此属性，仅在,MAC,平台上的,IE4+,可用。,字母间距：设置字符之间的间距。可以指定负值。因为中文也是字符，这个参数可以设置文字间的间距。相对应的,CSS,属性是”,letter-spacing”,。,垂直对齐：指定元素的垂直对齐方式。可以指定,sub,（下标）、,super,（上标）、,top,（与顶端对齐）、,middle,（居中）、,bottom,（与底端对齐）,。相对应的,CSS,属性是”,vertical-align”,。,水平对齐：设置文本的排列方式。,Left,（左对齐）、,right,（右对齐）center,（居中）、,justify,（两端对齐）。相对应的,CSS,属性是”,text-align”,。,文本缩进：设置文本第一行的缩进值。负值用于将文本第一行向外拉。要在每段前空两格，可设置为,2em,，因为,em,是当前字体尺寸，,2em,就是两个字的大小。相对应的,CSS,属性是”,text-indent”,。,空格：设置如何处理元素内的空白符。有三个选项可选：正常,Normal,会将空白符全部压缩；保留则会如同处理,pre,标签内的文本一样处理这些空白符（也就是说，所有的空白符，包括空格，标签，回车，等都会得以保留）；不换行指定文本只有遇到,br,标签时才换行。相对应的,CSS,属性是”,white-space”,。,4.,（方框）方框面板主要设置对象的边界、间距、高度、宽度、和漂浮方式等。,宽：定义元素的宽。相对应的,CSS,属性是”,width”,。高：定义元素的高。相对应的,CSS,属性是”,height”,。注意：宽和高定义的对象多为图片，表格，层等。浮动：定义元素的漂浮方式。,left,表示对象浮在左边、,right,表示对象浮在右边、,none,表示对象不浮动。相对应的,CSS,属性是”,float”,。清除：不允许元素的漂浮。,left,表示不允许左边有浮动对象、,right,表示不允许右边有浮动对象、,none,表示允许两边都可以有浮动对象、,both,不允许有浮动对象。相对应的,CSS,属性是”,clear”,。,填充：定义元素内容与其边框的空距（如果元素没有边框就是指页边的空白）。可以分别设置,top,（上补白）、,right,（右补白）、,bottom,（下补白）、,left,（左补白）的值。相对应的,CSS,属性分别是”,padding;padding-top;padding-right;padding-bottom;padding-left”,。,边界：定义元素的边框与其他元素之间的距离（如果没有边框就是指内容之间的距离）。可以分别设置,top,（上边界）、,right,（右边界）、,bottom,（下边界）、,left,（左边界）的值。相对应的,CSS,属性分别是”,margin;margin-top;margin-right;margin-bottom;margin-left”,。,5.,（边框）边框面板可以设置对象边框的宽度、颜色及样式。宽度：设置元素边的宽度。可以分别设定,Top,（上边宽）、,Right,（右边宽）、,Bottom,（下边宽）、,Left,（左边宽）的值。相对应的,CSS,属性分别是”,border;border-top;border-right;border-bottom;border-left”,。颜色：设置边框的颜色。你可以分别对每条边设置颜色。相对应的,CSS,属性分别是”,border-color;border-top-color;border-right-color;border-bottom-color;border-left-color”,。注意：我们可以通过设置不同的颜色做出亮边和暗边的效果，这样元素看起来是立体的。,样式：设置边框样式。可以设置为,none,（无边框）、,dotted,（点线）、,dashed,（虚线）、,solid,（实线）、,double,（双线）、,groove,（凹槽）、,ridge,（凸槽）、,inset,（凹边）、,outset,（凸边）等边框样式。相对应的,CSS,属性是”,border-style”,。注意：,dotted,（点线）、,dashed,（虚线）必须要,IE5.5,以上或者,MAC,平台支持，否则效果为实线。,6.,（列表）列表面板可以设置列表项样式、列表项图片、和位置。,类型：设置列表项所使用的预设标记。可以设置的样式有：,disc,（实心圆）、,circle,（空心圆）、,square,（方块）、,decimal,（阿拉伯数字）、,lower-roman,（小写罗马数字）、,upper-roman,（大写罗马数字）、,lower-alpha,（小写英文字母）、,upper-alpha,（大写英文字母）、,none,（无项目符号）。相对应的,CSS,属性是”,list-style-type”,。项目符号图像：设置列表项的图像。值为图象的,URL,地址或路径。相对应的,CSS,属性是”,list-style-image”,。位置：设置列表项在文本内还是在文本外。内,Inside,：列表项目标记放置在文本以内，外,Outside,：列表项目标记放置在文本以外。相对应的,CSS,属性是”,list-style-position”,。,7.,（定位）定位面板就相当于对象放在一个层里来定位，它相当于,HTML,的,DIV,标记。你可以把定义看作为一个,CSS,定义的层。,类型：设定对象的定位方式。有三种方式：,Absolute,（绝对定位）、,Relative,（相对定位）、,Static,（无特殊