CSS教程(免费版).pdf

《CSS教程(免费版).pdf》由会员分享，可在线阅读，更多相关《CSS教程(免费版).pdf（20页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、CSS 完全教程CSS 教程(一)认识 CSS Dreamweaver4 是现今最好的网站编辑工具之一，用它来给制作网页的CSS 样式表会更简单、更方便。本教程教你如何利用Dreamweaver4 在页面中加入CSS，你不用死记硬背的记代码标记，也不用去看很厚的CSS 手册，你就可以轻松自如的在网页中运用CSS。不过首先你要对CSS 有一定的了解。因此，本教程的前面4 章为 CSS 理论知识，主要是对CSS 的全面介绍，希望读者看后对CSS 的语法、结构、应用有一个全面的了解；后面4 章为DW 实战，主要是教你如何利用Dreamweaver4 灵活运用CSS 在网页中。阅读此文前，你需要对HT

2、ML 有一定的了解，并会使用Dreamweaver。一、认识 CSS CSS 就是 Cascading style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。网页设计最初是用HTML 标记来定义页面文档及格式，例如标题、段落、表格、链接 等，但这些标记不能满足更多的文档样式需求，为了解决这个问题，在1997 年 W3C(The World Wide Web Consortium)颁布 HTML4 标准的同时也公布了有关样式表的第一个标准CSS1,自 CSS1 的版本之后，又在 1998 年 5 月发布了CSS2版本，样式表得到了更多的充实。W3C 把 DHT

3、ML(Dynamic HTML)分为三个部分来实现：脚本语言(包括 javascript、Vbscript 等)、支持动态效果的浏览器(包括 Internet Explorer、Netscape Navigator 等)和 CSS 样式表。你可以用CSS 精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。使用CSS 能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。注意：CSS 需要 IE4(Internet Explorer 4.0)和 NC4(Netscape 4.0)以上的浏览器支持，有些效果需要更高版

4、本的浏览器支持。CSS 教程(二)语法1.基本语法CSS 的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。基本格式如下：selector property:value（选择符 属性：值）选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE,，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开：body color:black 选择符body 是指页面主体部分，color 是控制文字颜色的属性，black 是颜色的值，此例的效果是使页面中的文字为黑色。如果属性的值是多个单词组成，必须在值上加引号，比

5、如字体的名称经常是几个单词的组合：p font-family:sans serif（定义段落字体为sans serif）如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：p text-align:center;color:red（段落居中排列；并且段落中的文字为红色）为了使你定义的样式表方便阅读，你可以采用分行的书写格式：p text-align:center;color:black;font-family:arial （段落排列居中，段落中文字为黑色，字体是arial）2.选择符组你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：h1

6、,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 然后用不在不同的段落里，只要在

7、HTML 标记里加入你定义的class 参数：这个段落向右对齐的 这个段落是居中排列的 注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。类选择符还有一种用法，在选择符中省略HTML 标记名，这样可以把几个不同的元素定义成相同的样式：.center text-align:center（定义.center 的类选择符为文字居中排列）这样的类可以被应用到任何元素上。下面我们使h1 元素（标题1）和 p 元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符：这个标题是居中排列的 这个段落也是居中排列的 注意：这种省略HTML

8、 标记的类选择符是我们经后最常用的CSS 方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。4.ID 选择符在 HTML 页面中 ID 参数指定了某个单一元素，ID 选择符是用来对这个单一元素定义单独的样式。ID 选择符的应用和类选择符类似，只要把CLASS 换成 ID 即可。将上例中类用ID 替代：这个段落向右对齐 定义 ID 选择符要在ID 名称前加上一个“#”号。和类选择符相同，定义ID 选择符的属性也有两种方法。下面这个例子，ID 属性将匹配所有id=intro 的元素：#intro font-size:110%;font-weight:bold;color:#0

9、000ff;background-color:transparent （字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明）下面这个例子，ID 属性只匹配id=intro 的段落元素：p#intro font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent 注意：ID 选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。5.包含选择符可以单独对某种元素包含关系定义的样式表，元素1 里包含元素2，这种方式只对在元素1 里的元素 2 定义，对单独的元素1 或元素 2 无定义，例如：ta

10、ble a font-size:12px 在表格内的链接改变了样式，文字大小为12 象素，而表格外的链接的文字仍为默认大小。6.样式表的层叠性层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例如在DIV 标记中嵌套P 标记：div color:red;font-size:9pt 这个段落的文字为红色9 号字 （P 元素里的内容会继承DIV 定义的属性）注意：有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上边界属性值是

11、不会继承的，直觉上，一个段落不会同文档BODY 一样的上边界值。另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P 的颜色：div color:red;font-size:9pt p color:blue 这个段落的文字为蓝色9 号字 我们可以看到段落里的文字大小为9 号字是继承div 属性的，而color 属性则依照最后定义的。不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID 选择符，类选择符和HTML 标记选择符，因为 ID 选择符是最后加上元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用!important 提升样式

12、表的优先权，例如：p color:#FF0000!important .blue color:#0000FF#id1 color:#FFFF00 我们同时对页面中的一个段落加上这三种样式，它最后会依照被!important 申明的 HTML 标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的ID 选择符为黄色文字。7.注释你可以在CSS 中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS 注释以/*开头，以*/结尾，如下：/*定义段落样式表*/p text-align:center;/*文本居中排列*/

13、color:black;/*文字为黑色*/font-family:arial/*字体为 arial*/CSS 教程(三)伪类动态链接伪类可以看做是一种特殊的类选择符，是能被支持CSS 的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。1.语法伪类的语法是在原有的语法里加上一个伪类（pseudo-class）：selector:pseudo-class property:value（选择符:伪类 属性:值）伪类和类不同，是CSS 已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。类选择符

14、及其他选择符也同样可以和伪类混用：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

15、 color:#FF00FF;text-decoration:underline/*鼠标在链接上*/a:active color:#0000FF;text-decoration:underline/*激活链接*/（上面这个例子中，这个链接未访问时的颜色是红色并无下划线，访问后是绿色并无下划线，激活链接时为蓝色并有下划线，鼠标在链接上时为紫色并有下划线）注意：有时这个链接访问前鼠标指向链接时有效果，而链接访问后鼠标再次指向链接时却无效果了。这是因为你把 a:hover 放在了 a:visited 的前面，这样的话由于后面的优先级高，当访问链接后就忽略了a:hover的效果。所以根据叠层顺序，我们

16、在定义这些链接样式时，一定要按照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-

17、letter 和 first-line）的伪类，可以对元素的首字或首行设定不同的样式。下面看这个例子，我们在段落标记里定义文本首字尺寸为默认大小的3 倍：p:first-letter font-size:300%这是一个段落，这个段落的首字被放大了。我们再定义一个首行样式的例子：div:first-line color:red 这是段落的第一行这是段落的第二行这是段落的第三行 （上例中段落的第一行为红色，第二、三行为默认颜色）注意：首字和首行的伪类需要IE5.5 以上的版本支持。CSS 教程(四)如何在网页中插入CSS 前两章我们了解了CSS 的语法，但要想在浏览器中显示出效果，就要让浏览器识

18、别并调用。当浏览器读取样式表时，要依照文本格式来读，这里介绍四种在页面中插入样式表的方法：链入外部样式表、内部样式表、导入外表样式表和内嵌样式。链入外部样式表链入外部样式表是把样式表保存为一个样式表文件，然后在页面中?lt;link 标记链接到这个样式表文件，这个 标记必须放到页面的区内，如下：上面这个例子表示浏览器从mystyle.css 文件中以文档格式读出定义的样式表。rel=”stylesheet”是指在页面中使用这个外部的样式表。type=”text/css”是指文件的类型是样式表文本。href=”mystyle.css”是文件所在的位置。一个外部样式表文件可以应用于多个页面。当你改

19、变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。样式表文件可以用任何文本编辑器（例如：记事本）打开并编辑，一般样式表文件扩展名为.css。内容是定义的样式表，不包含HTML 标记，mystyle.css 这个文件的内容如下：hr color:sienna p margin-left:20px body background-image:url(images/back40.gif)（定义水平线的颜色为土黄；段落左边的空白边距为20 象素；页面的背景图片为images 目录下的

20、back40.gif 文件）内部样式表内部样式表是把样式表放到页面?lt;head区里，这些定义的样式就应用到页面中了，样式表是用 标记插入的，从下例中可以看出标记的用法：hr color:sienna p margin-left:20px body background-image:url(images/back40.gif)注意：有些低版本的浏览器不能识别style 标记，这意味着低版本的浏览器会忽略style 标记里的内容，并把 style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML 注释的方式（）隐藏内容而不让它显示：导入外部样式表导入外部样式表是指在内

21、部样式表的里导入一个外部样式表，导入时用import，看下面这个实例：例中 import“mystyle.css”表示导入mystyle.css 样式表，注意使用时外部样式表的路径。方法和链入样式表的方法很相似，但导入外部样式表输入方式更有优势。实质上它相当于存在内部样式表中的。注意：导入外部样式表必须在样式表的开始部分，在其他内部样式表上面。内嵌样式内嵌样式是混合在HTML 标记里使用的，用这种方法，可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML 标记里加入style 参数。而style 参数的内容就是CSS 的属性和值，如下例：这是一个段落（这个段落颜色为土黄，左边距

22、为20 象素）在 style 参数后面的引号里的内容相当于在样式表大括号里的内容。注意：style 参数可以应用于任意BODY 内的元素（包括BODY 本事），除了BASEFONT、PARAM 和 SCRIPT。多重样式表的叠加上一章里我们已经提到样式表的层叠顺序，这里我们讨论插入样式表的这几种方法的叠加，如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。例如，我们首先链入一个外部样式表，其中定义了h3 选择符的color、text-alig 和 font-size 属性：h3 color:red;text-align:left;fon

23、t-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 号字）字体颜色从外部样式表里保留下来，而对齐方式和字体尺寸都有定义时，按照后定义的优先而依照内部样式表。注意：依照后定义的优先，所以优先级最高的是内嵌样式，内部样

24、式表高于导入外部样式表，链入的外部样式表和内部样式表之间是最后定义的优先级高。CSS 教程(五)用 DW4 创建 CSS 1.CSS styles 面板通过前面几章的学习，相信大家对CSS 有了一定的了解，这一章我们来讲解如何利用Dreamweaver4 来创建 CSS。首先运行Dreamweaver4，启动后，选择菜单下的Windows-CSS styles（或按 Shitf+F11），系统弹出CSS styles 管理面板，如下图所示：在 CSS styles 面板里显示了所有自定义的CSS 样式（也就是上面提到的以点开头的类选择符，Dreamweaver4 把这样以点开头的类选择符作为自

25、定义样式来使用），可以利用Apply 按钮这些CSS 样式随意应用在页面中的文本或文档区域。注意：应用按钮前面有一个复选框，选中的时候按钮成灰色不可用，表示自动应用，只要鼠标单击自定的CSS样式就会自动应用到页面中当前元素；如果复选框没有选中，Apply 按钮为可用，应用时需要点Apply 按钮。当对象应用了自定义样式时，也就相当于在当前HTML 标记后加上class=”.”。另外在样式前有一个“S”型的符号，表示内部定义样式；如果是符号，表示这个样式链接到外部样式表文件。注意：CSS styles 面板只显示自定义（class）CSS 样式；重定义的HTML 标记和其他CSS 选择符样式不会

26、出现在CSS styles 面板上，这是因为它们可以自动应用于那些HTML 标记控制的区域。（重定义HTML标记是指选择符为单个 HTML 标记的 CSS 样式，之所以叫重定义是因为重新定义了并改变原来HTML 标记的样式。）在右下角有4 个小按钮，这是最常用的几个命令：Attach style Sheet：（链接到样式表）点击后会弹出一个选择样式表对话框，选中以前创建好的外部样式表，点确定就链接加入了这个外部样式表。加入外部样式表时注意尽量使用相对路径。New style：（新建样式）一般我们通过这个按钮来创建CSS 样式表。Edit style sheet：（编辑样式表）点击后会弹出编辑样

27、式表对话框，显示了所有已存在的内部和外部样式表，可以在这个对话框里新建、编辑、删除样式。Delete：（删除样式）先选中要删除的自定义CSS 样式，然后点此按钮，样式就被删除了。点上面的小三角或点击鼠标右键会弹出一个菜单，菜单的功能依次为：Edit：（编辑）编辑你当前选中的自定义CSS 样式，点击后就进入了编辑此项CSS 类样式的定义样式对话框。Duplicate：（复制）将当前选中的自定义CSS 样式类复制。Delete：（删除）删除当前选中的自定义CSS 样式，和按钮的效果相同。Apply：（应用）是指将选中的CSS 类应用在页面中当前元素。同Apply 按钮。New style：（新建样

28、式）等同于按钮。Edit style sheet：（编辑样式表）等同于按钮。Attach style Sheet：（链接到外部样式表）等同于按钮。Export style Sheet：（导出样式表）将此页面中的内部样式表导出为一个外部样式表文件。注意：Dreamweaver4 导出样式表除了用这个方法外，还可以用主菜单下的File-Export-Export CSS styles 导出。2.创建样式表的类型在创建样式表之前我们首先介绍一下Dreamweaver4 的三种样式表类型，点击CSS styles 面板中的按钮（或CSS styles 面板菜单 New style），弹出新建样式对话框

29、，如下图：在 Define 里可以选择是外部样式表，还是内部样式表：l 选择 New style Sheet File（新建样式表文件），系统会先让你保存这个样式表文件，然后定义这个样式表文件。整个页面的样式就会跟随你建立的这个样式表文件，然后你可以把这个外部样式表文件链接到别的页面去，这样就可以使一个样式表文件控制多个页面了。l 如果你选择This Document Only（只存在这个文档），你就建立了一个内部样式表，Dreamweaver4 会自动把你建立的样式表内容放到区的 标记里。在 Type 里有三种样式表类型可供选择：l Make Custon style(class)：（创建自

30、定义样式）自定义一个样式，可以作为class 属性应用于页面中。l Redefine HTML Tag：（重定义HTML 标记）对指定的HTML 标记的默认格式进行重新定义。l Use CSS Selector：（使用 CSS 选择符）对特定的标签组合，或者包含有指定ID 属性的所有标签进行格式定义。在定义CSS 前，我们先要考虑清楚，定义的这个样式将用在哪里？要完成哪些效果？是定义在一个页面里还是控制多个页面的风格？然后根据需求来定义合适的样式表。3.创建自定义样式在页面中，我们有时想让一些重要的文字或内容醒目，我们就需要把这些重要的文字或内容单独定义一个样式，来区别一般文字，我们可以通过创

31、建自定义样式单独对重要内容定义CSS 来完成。假设，我们要求把重要文字和内容的颜色定义成红色、并加粗来达到醒目的目的。单击新建样式，弹出新建对话框，在新建样式对话框里，样式表类型选Make Custon style(class)，这里我们建立内部样式表，选This Document Only，然后在上面的Name 下拉框里输入你定义的样式名称，我们输入“.emphases”按 OK，如下图：注意：自定义样式的名称可以自己随意设定，一般根据其样式效果命名。在名称前必须有点号，如果漏写，系统也会自动帮你补上。弹出样式定义对话框，在Category（类别）里选Type，然后设置颜色为红色，Weigh

32、t 为 bold，按 OK，如图：然后在 CSS styles 面板里多了一个名为emphases的自定义样式，这样一个新的样式我们就定义好了：我们来看一下原代码部分，我们可以看到在区多了下列样式表代码：定义好了样式，现在我们就可以把这个自定义样式套用在需要的地方，在网页中选中文字，然后单击样式面板中的 emphases样式。看看，是不是你要的效果。注意：如果我们选中的内容是一个表格或一个段落，那么整个表格或段落内的文字被定义了emphases 样式，从原代码里我们可以看出是在 或标记后面加了class=”emphases”参数，如：或当我们把样式加在选中的几个文字上时，文字本身没有HTML

33、标记所包围，就会自动加上标记，例如：,重点,注意：span 标记本身没有任何意义，它专门为样式表指定选取范围，为样式表指定区域的还有div。4.创建重定义样式表重定义样式表是对某个HTML标记重新定义格式。例如，我们想重新格式化页面的段落，每个段落前空两格，并设定段落文字的大小和行距。单击新建样式，弹出新建对话框，在新建样式对话框里，样式表类型选择Redefine HTML Tag，我们仍然建立内部样式表，选This Document Only。当样式表类型选择Redefine HTML Tag 时，上面下拉框的名字Name 变成了 Tag，表示输入的内容是HTML 标记，点击下拉按钮，我们可

34、以看到所有 HTML 标记都在Tag 下拉框里，这里我们选段落标记P：OK 后，进入样式定义对话框，在Type 里，我们设定字体大小为12 象素，行距为文字尺寸的150%，如下图：在 Block 部分里，我们设定文本缩进，因为文字尺寸为12 象素，所以两个字的空格就是24 象素：按 OK 后，这个重定义样式就完成了。这时页面里每个段落的文字大小都是12 象素，行距是150%，但是在Dreamweaver 编辑器里我们看不到缩进的效果，不要紧，只要将文件保存，然后用浏览器打开就可以看到效果了。此时 CSS 样式表的原代码是：5.创建动态链接样式表下面我们来创建一组链接在不同状态下的样式。单击新建

35、样式，弹出新建对话框，在新建样式对话框里，样式表类型选 Use CSS Selector，我们仍然建立内部样式表，选This Document Only。当样式表类型选择Use CSS Selector 时，上面下拉框的名字变成了Selector，表示输入内容为CSS 选择符，单击下拉按钮，可以看到动态链接的 4 种状态：l a:active 选中超级链接状态l a:hover 光标移上超级链接状态l a:link 超级链接的正常状态，没有任何动作的时候l a:visited 访问过的超级链接状态接下来我们对这几种状态分别设定，首先，选择a:link，OK 后弹出样式定义对话框，我们设定无下划

36、线，颜色为橙色，如下图：我们用同样的方法设定a:visited，设定无下划线，黄色，如下图：接下来设定a:hover，有下划线和上划线，颜色为橙色，并在Background 设定背景为黄色：这里我们不对a:active 进行设置，根据层叠规则a:active 的样式会自动依照a:hover。这样所有动态链接的效果我们就设置好了，注意设置时的顺序。在浏览器中就我们就可以看到：此页面上未访问的链接无下划线，橙色；访问后的链接无下划线，黄色；鼠标指向链接时有上、下划线，橙色，并背景为黄色。样式表原代码为：这样定义动态链接时，整个页面的链接效果都会改变，如果我想在一个页面中定义两组以上的链接效果，该怎

37、么做呢？在第四章里我们不是说过的类和伪类的混用可以在同一个页面中做不同的链接效果吗。点击新建样式，在选择符下拉框里，我们输入a.link2:link（当然可以先选择a:link，然后更改），如下图：这样我们就新建立了一个.link2 类，我们为a.link2:link 设定样式，红色，有下划线：根据上面的方法我们继续定义a.link2:visited和a.link2:hover，我们定义 a.link2:visited为红色有下划线，a.link2:hover 为红色无下划线，背景为白色。在CSS styles 面板里多了一个名称为link2 的自定义样式。然后将此样式应用在某个动态链接上。保

38、存后，用浏览器打开，我们可以看到两个完全不同的链接样式。全部CSS 代码如下：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”，表示定

39、义在DIV 里包含段落的样式。7.编辑、修改、删除样式表点 CSS styles 面板中的按钮会打开编辑样式表对话框，如下图：按钮功能介绍：Link：链接外部样式表，这里可以选择链入外部样式表和导入外部样式表两种方式。New：新建样式。Edit：选中一个样式然后点Edit 就可以进行编辑。Duplicate：复制一个样式，选中一个样式后点Duplicate 按钮，弹出对话框，为复制的样式起一个新的名称，OK。Remover：移除一个样式或一个外部样式表，选中要删除的样式点Remove 按钮，此样式就被删除了。在 style definition（样式定义）栏里可以看到此样式的内容。8.外部样式

40、表建立外部样式表和建立内部样式表差不多，只是在新建的时候选择(New style Sheet File)，并保存为一个扩展名为.css 的样式表文件。现在，我们把刚才实例中的样式表导出，然后再链接到其他页面。点击CSS style 面板菜单中的Export style Sheet，系统弹出导出样式表对话框，我们将样式表文件保存为mystyle.css。用记事本打开mystyle.css 文件可以看到如下样式表代码：.emphases font-weight:bold;color:#FF0000 p font-size:12px;line-height:150%;text-indent:24px

41、 a:link color:#FF9900;text-decoration:none a:visited color:#FFFF00;text-decoration:none a:hover color:#FF9900;text-decoration:underline overline;background-color:#FFFF00 a.link2:link color:#FF0000;text-decoration:underline a.link2:visited color:#FF0000;text-decoration:underline a.link2:hover color:#

42、FF0000;text-decoration:none;background-color:#FFFFFF 然后转到其他页面中，点CSS style 面板中的链入外部样式表按钮，链入刚才导出的样式表文件mystyle.css，此时这个样式表已经应用到新的页面中了。在新页面的区添加了下列代码：此外，还可以导入外部样式表，导入方法如下：点击编辑样式表按钮，打开编辑样式表对话框，点击LINK 按钮，这时弹出”Link External style Sheet”对话框，输入外部样式表的路径，选择Import（导入），确定。可以看到在 区的代码为：CSS 教程(六)DW4 中 CSS 属性详解在 Drea

43、mweaver4 的 CSS 样式里包含了W3C 规范定义的所有CSS1 的属性，Dreamweaver4 把这些属性分为Type（类型）、Background（背景）、Block（块）、Box（盒子）、Border（边框）、List（列表）、Positioning（定位）、Extensions（扩展）八个部分，如下图，下面我们分别详细讲解。1.Type（类型）Type 面板主要是对文字的字体，大小，颜色，效果等基本样式进行设置。设置时，我们只对要改变的属性进行设置，没有必要改变的属性就空着。注意：属性名带*号的是指样式效果不能在编辑文档时显示，要用浏览器打开才能看到效果。Font：设置字体系

44、列。什么叫字体系列呢？是指对文字设定几个字体，当遇到第一个字体不能显示的文字时会自动用系列中的第二个字体或后面的字体显示。相对应的CSS 属性是”font-family”。注意：Dreamweaver4 已经内置设定了6 个系列的英文字体，一般英文字体我们用“Verdana,Arial,Helvetica,sans-serif”这个系列比较好看。如果不用这些字体系列，你就需要自己编辑字体系列，你可以通过下拉框最下面的“Edit Font List”来创建新的字体系列，也可以直接手动在下拉框里写字体名，字体之间用逗号隔开。中文网页默认字体是宋体，一般就空着不要选取任何字体。Size：定义文字的大

45、小。你可以通过选取数字和度量单位来选择具体的字体大小，或者你也可以选择一个相对的字体大小。最好使用Pixels 作为单位，这样不会在浏览器中文本变形。一般小字体用比较标准的12px。相对应的 CSS 属性是”font-size”。注意：CSS 中长度的单位分绝对长度单位和相对长度单位，一般我们常用的绝对长度单位有：px：（象素）根据显示器的分辨率来确定长度。pt：（字号）根据windows 系统定义的字号大小来确定长度。mm、cn、in：（毫米、厘米、英寸）根据显示的实际尺寸来确定长度。此类单位不随显示器的分辨率改变而改变。相对长度单位有：em：当前文本的尺寸。例如：font-size:2em

46、 是指文字大小为原来的2 倍。ex：当前字母“x”的高度，一般为字体尺寸的一半。%：是以当前文本的百分比定义尺寸。例如：font-size:300%是指文字大小为原来的3 倍。small、large：表示比当前小一个级别或大一个级别的尺寸。style：定义字体样式为Normal、Italic、或者 Oblique。Italic 和 Oblique 是斜体字体。默认设置为Normal。相对应的CSS 属性是”font-style”。注意：Italic 和 Oblique 都是斜体字体。而它们不同的是，Italic 是斜体字，而Oblique 是倾斜的文字，对于没有斜体的字体应该用Oblique。

47、Line Height：设置文本所在行的行高。默认为 Normal，你也可以自己键入一个精确的数值并选取一个计量单位。比较直观的写法用百分比，例如140%是指行高等于文字大小的1.4 倍。相对应的CSS 属性是”line-height”。Decoration：在文本中添加underline（下划线）、overline（上划线）、line-through（中划线）、blink（闪烁效果）。这些效果可以同时存在，将效果前的复选框选定即可。相对应的CSS 属性是”text-decoration”。注意：链接的默认设置是Underline，我们可以通过选none 去除下划线。Blink（闪烁效果）只在

48、NC 浏览器里可以看到。Weight：给字体指定粗体字的磅值。Normal 等同于 400；Bold 等同于 700。设粗体字一般用bold。相对应的CSS属性是”font-weight”。Variant：允许你选取字体的变种，选 small-caps（小型大写字母）时，此样式区域内所有字母大写。相对应的CSS属性是”font-variant”。Case：将选区中每个单词的第一个字母转为大写，或者令单词全部大写或全部小写。参数：capitalize（单词首字母大写）、uppercase（转换成大写）、lowercase（转换成小写）、none（不转换）。相对应的CSS 属性是”text-tra

49、nsform”。Color：定义文字颜色。相对应的CSS 属性是”color”。注意：CSS 中颜色的值有三种表示方法：l#RRGGBB 格式，是由红绿蓝三种颜色的值组合，每种颜色的值为“00 FF”的两位十六进制正整数。例如：#FF0000 表示红色，#FFFF00 表示黄色。l rgb(R,G,B)格式，RGB 为三色的值，取0255，例如：rgb(255,0,0)表示红色，rgb(255,255,0)表示黄色。l 用颜色名称。CSS 可以使用已经定义好的颜色名称。例如：red 表示红色，yellow 表示黄色。2.Background（背景）Background 面板主要是对元素的背景进

50、行设置，包括背景颜色、背景图象、背景图象的控制。一般是对BODY（页面）、TABLE（表格）、DIV（区域）的设置。Background Color：设置元素的背景色。相对应的CSS 属性是”background-color”。Background Image：设置元素的背景图像。相对应的CSS 属性是”background-image”。Repeat：确定背景图像是否以及如何重复。No Repeat：在元素的开头显示一遍图像。Repeat：在元素的背景部分水平和垂直方向平铺图像。Repeat-x and Repeat-y：分别在水平和垂直方向重复显示，默认为Repeat。相对应的CSS 属性