【精品】css样式表（可编辑.ppt

《【精品】css样式表（可编辑.ppt》由会员分享，可在线阅读，更多相关《【精品】css样式表（可编辑.ppt（88页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、CSS样式表 第六章第六章 CSSCSS样式表样式表第六章第六章 CSSCSS样式表样式表 用用HTMLHTML制作网页就象是用画笔绘制一幅图制作网页就象是用画笔绘制一幅图 画。只有那些对网页制作痴迷而执着的人画。只有那些对网页制作痴迷而执着的人 才才可能精确地实现预定的结果，这并不是可能精确地实现预定的结果，这并不是 正确正确的工具和灵活性就可以实现的。的工具和灵活性就可以实现的。任何使用过任何使用过HTMLHTML大多的人都知道大多的人都知道 HTMLHTML是一种非常好的网是一种非常好的网页制作工具。所以页制作工具。所以 有时候我们不得不制作体有时候我们不得不制作体积相当大的积相当大的G

2、IF GIF 图象以获得想要的字体和布图象以获得想要的字体和布局。局。第六章第六章 CSSCSS样式表样式表 同样，有时候也不得不使用各种表格同样，有时候也不得不使用各种表格标签和隐藏的空格标签和隐藏的空格GIFGIF图象以使页面的布局图象以使页面的布局能达到预想的目的。的确有些荒唐。我们能达到预想的目的。的确有些荒唐。我们的编码实在是太复杂了，的编码实在是太复杂了，GIFGIF用量越来越多，用量越来越多，而我们的页面变得比英吉利海峡还要宽，而我们的页面变得比英吉利海峡还要宽，互联网有限的带宽怎么可能通过这么宽的互联网有限的带宽怎么可能通过这么宽的信息呢？这种设计并不是网页设计的最佳信息呢？这

3、种设计并不是网页设计的最佳形式。形式。第六章第六章 CSSCSS样式表样式表19961996年底的时候悄悄诞生了一种叫做样式年底的时候悄悄诞生了一种叫做样式表的技术。全称应该是串接样式表（简称表的技术。全称应该是串接样式表（简称CSSCSS）这位）这位HTMLHTML的表弟的表弟 向世人保证：向世人保证：将对将对布局、字体、颜色、背景和其它文图布局、字体、颜色、背景和其它文图 效果效果实现更加精确的控制。实现更加精确的控制。第六章第六章 CSSCSS样式表样式表csscss样式表有什么特别之处呢样式表有什么特别之处呢?第六章第六章 CSSCSS样式表样式表你可以将格式和结构分离。你可以将格式和

4、结构分离。你可以以前所未有的能力控制页面布局。你可以以前所未有的能力控制页面布局。你可以制作体积更小下载更快的网页。你可以制作体积更小下载更快的网页。你可以将许多网页同时更新，比以前你可以将许多网页同时更新，比以前 更快更快更容易。更容易。浏览器将成为你更友好的界面浏览器将成为你更友好的界面 第六章第六章 CSSCSS样式表样式表对对HTMLHTML总体上的控制却很有限。总体上的控制却很有限。不可能精确地生成不可能精确地生成8080象素的高度，象素的高度，不可能控制行间距或字间距，不可能控制行间距或字间距，不可能在屏幕上精确定位图象的位置。不可能在屏幕上精确定位图象的位置。HTMLHTML标签

5、的外观样式比较单一标签的外观样式比较单一颜色只有黑白颜色只有黑白字体类型和大小无变化字体类型和大小无变化样式表的作用相当于华丽的衣服样式表的作用相当于华丽的衣服第六章第六章 CSSCSS样式表样式表内容相同内容相同外观不同外观不同第六章第六章 CSSCSS样式表样式表样式表能实现内容与样式的分离，方便团队样式表能实现内容与样式的分离，方便团队开发开发程序员程序员写代码写代码美工做样式美工做样式内容与样式和谐内容与样式和谐统一的完整网页统一的完整网页第六章第六章 CSSCSS样式表样式表例如例如:网页设计网页设计 CSS CSS 样式表格的使用样式表格的使用 控制网页样式控制网页样式 第六章第六

6、章 CSSCSS样式表样式表在最初的在最初的和和 标签之间标签之间 插入插入以下代码：以下代码：!-H1 courier -第六章第六章 CSSCSS样式表样式表什么是什么是CSSCSS第六章第六章 CSSCSS样式表样式表类似下面的代码就是类似下面的代码就是CSSCSS。body body background-color:white;background-color:white;margin:0;margin:0;color:black;color:black;font:x-small Georgia Serif;font:x-small Georgia Serif;text-align:

7、center;text-align:center;我们可以分析出我们可以分析出CSSCSS的规则，实际上的规则，实际上CSSCSS只包只包含了三部分含了三部分:大括号外的，冒号前面的，最大括号外的，冒号前面的，最后就是冒号后面的。后就是冒号后面的。第六章第六章 CSSCSS样式表样式表 串接样式表的核心是串接样式表的核心是规则规则。最简单的规则。最简单的规则 就就象这样：象这样：H1 color:green;H1 color:green;整个规则告诉浏览器将所有整个规则告诉浏览器将所有包包 围的围的文字以绿色显示。文字以绿色显示。每一条规则包含一个选择及每一条规则包含一个选择及说明。这里有三个

8、概念，分别是大括号外的说明。这里有三个概念，分别是大括号外的“选选择符（择符（SelectorSelector）”、冒号前的、冒号前的“属性属性（PropertyProperty）”以及冒号后面的以及冒号后面的“属性的值属性的值”或或者说是者说是“属性的参数属性的参数”。第六章第六章 CSSCSS样式表样式表1.1.选择符（有的地方称作选择器）：上面代选择符（有的地方称作选择器）：上面代码中的码中的H1H1。顾名思义，它的作用就是起筛。顾名思义，它的作用就是起筛选的作用。就像上一条代码，它只对所有选的作用。就像上一条代码，它只对所有包围的文字起作用。所有的包围的文字起作用。所有的HtmlHtm

9、l标记都可以充当选择符，所以你可以将标记都可以充当选择符，所以你可以将CSSCSS的任何信息应用到任何元素。的任何信息应用到任何元素。第六章第六章 CSSCSS样式表样式表如果有不同的选择符，但它们的属性及值是如果有不同的选择符，但它们的属性及值是完全一样的，为了方便，我们可以将它们完全一样的，为了方便，我们可以将它们合并起来写，例如：合并起来写，例如：H1,P,SpanH1,P,Span font-family:arial;font-family:arial;上面的代码就会把所有的上面的代码就会把所有的H1,P,SpanH1,P,Span包围起包围起来的文字的字体设置为来的文字的字体设置为A

10、rialArial。第六章第六章 CSSCSS样式表样式表2.2.属性属性上面代码中的上面代码中的colorcolor。每件东西都有属性。每件东西都有属性。比如人类，性别，肤色，体重等等都是人比如人类，性别，肤色，体重等等都是人类的属性。一段文字，一个段落也有自己类的属性。一段文字，一个段落也有自己的属性，比如字体类型，大小，颜色之类。的属性，比如字体类型，大小，颜色之类。不同的对象属性也有所不同。不同的对象属性也有所不同。第六章第六章 CSSCSS样式表样式表 在在CSSCSS中要掌握很多属性，可以搜索中要掌握很多属性，可以搜索“CSS CSS 2 2 中文手册中文手册”，下载一份。在以后的

11、使用，下载一份。在以后的使用中也会介绍一些常用的属性。中也会介绍一些常用的属性。第六章第六章 CSSCSS样式表样式表3.3.属性的值属性的值上面代码中的上面代码中的greengreen。这更容易理解了吧，。这更容易理解了吧，比如性别男，肤色是黄色。字体类型为黑比如性别男，肤色是黄色。字体类型为黑体体4.4.最后不要漏了那个小分号，每一句后面最后不要漏了那个小分号，每一句后面都要加上分号。都要加上分号。5./*5./*注释性文字注释性文字*/，夹在夹在/*/*和和*/之间的之间的是注释是注释,不执行不执行.第六章第六章 CSSCSS样式表样式表样式表的基本结构样式表的基本结构样式规则样式规则

12、P P colorcolor:red:red;font-sizefont-size:30px;:30px;font-font-familyfamily:隶书隶书;Pcolor:red;font-size:30px;font-family:隶书隶书;声明文档样声明文档样式表结束式表结束文档样式表开始，类文档样式表开始，类型为型为CSSCSS样式样式样式规则样式规则选择器选择器属性属性属性的值属性的值第六章第六章 CSSCSS样式表样式表样式规则样式规则Pcolor:red;font-family:隶书隶书;font-size:24px;静夜思静夜思床前明月光，床前明月光，疑是地上霜。疑是地上霜。

13、我是郭德刚，我是郭德刚，低头思故乡。低头思故乡。本页面中所有的本页面中所有的P标标签都应用了此样式签都应用了此样式所有的段落都采用所有的段落都采用P样式，保证风格统一样式，保证风格统一用分号用分号隔开隔开选择器选择器如何编写此样式如何编写此样式?字体类型为律字体类型为律书、大小书、大小24px第六章第六章 CSSCSS样式表样式表分为三种方式分为三种方式:2.1.2.1.行内样式表在标签中直接使用行内样式表在标签中直接使用stylestyle属性来定义属性来定义(例子见下页例子见下页)2.2.2.2.内部样式表写在所在网页的内部样式表写在所在网页的之间，只对所在网页起作用。之间，只对所在网页起

14、作用。2.3.2.3.在独立的文件中声明在独立的文件中声明csscss样式样式,在需在需要的页面中调入此文件，可在多个网页中要的页面中调入此文件，可在多个网页中重复使用重复使用.第六章第六章 CSSCSS样式表样式表2.1 2.1 行内样式表行内样式表它写在标记里面，只对此标记起作用。它写在标记里面，只对此标记起作用。格式：格式：P style=font-size:20pt;网页设计网页设计第六章第六章 CSSCSS样式表样式表2.2 2.2 内部样式表内部样式表 在在标签之间用标签之间用定义样式，可在本网页使用这些样式，这种方式定义样式，可在本网页使用这些样式，这种方式称为称为内部样式表。内

15、部样式表。格式：格式：选择符选择符 以分号分隔的样式表以分号分隔的样式表 第六章第六章 CSSCSS样式表样式表选择符：类与选择符：类与IDID第六章第六章 CSSCSS样式表样式表 选择符选择符是是HTMLHTML标签或自定义的名字，即标签或自定义的名字，即所定义的样式的名称，可决定对网页中的所定义的样式的名称，可决定对网页中的哪些元素起作用，起筛选的作用，哪些元素起作用，起筛选的作用，第六章第六章 CSSCSS样式表样式表主要分为以下主要分为以下3 3种：种：HTMLHTML标签选择符标签选择符 通过通过HTMLHTML标签名去匹配文档中的样式。标签名去匹配文档中的样式。IDID选择符选择

16、符 通过通过IDID名指定某个样式对名指定某个样式对哪个哪个HTMLHTML页面页面元素起作用。元素起作用。类选择符类选择符 通过类名指定某个样式对页面的通过类名指定某个样式对页面的哪些元素哪些元素起作用。起作用。第六章第六章 CSSCSS样式表样式表 类型选择符，即类型选择符，即HTMLHTML标签标签-可以给可以给HTMLHTML语言中现有的标签添加样式，如给语言中现有的标签添加样式，如给、等等 添加样式。添加样式。第六章第六章 CSSCSS样式表样式表尽管所有的尽管所有的HtmlHtml标记都可以用作选择符，标记都可以用作选择符，但是现实中我们仍需要实现更加精细、更但是现实中我们仍需要实

17、现更加精细、更加复杂的目的。加复杂的目的。例如：有三个段落，我们希望每个段落有例如：有三个段落，我们希望每个段落有不同的颜色。以前我们用不同的颜色。以前我们用HTMLHTML选择符定义选择符定义段落颜色，代码会这样写：段落颜色，代码会这样写：p p color:red;color:red;但是这条规则会让所有的段但是这条规则会让所有的段落字体变成红色。这时我们就用到了落字体变成红色。这时我们就用到了IDID和和类。类。第六章第六章 CSSCSS样式表样式表1.ID1.ID和类的规则及使用方法和类的规则及使用方法（1 1）定义）定义IDID#名称名称 属性：值属性：值;（2 2）定义类）定义类

18、.名称名称 属性属性:值值;它们跟以前的选择符格式上差不多，它们跟以前的选择符格式上差不多，IDID前面加一个前面加一个#号，类名前面加一个点（半角）号，类名前面加一个点（半角）。第六章第六章 CSSCSS样式表样式表2.ID2.ID和类的命名和类的命名在命名上，在命名上，IDID和类是随意的，你几乎可以和类是随意的，你几乎可以将它们命名为任何的名字。比如上面的三将它们命名为任何的名字。比如上面的三个段落，我们把第一段的类名命名为：个段落，我们把第一段的类名命名为：firstfirst，代码就要这样写，代码就要这样写，.first color:red;.first color:red;第六章第

19、六章 CSSCSS样式表样式表但为了规范我们最好使用有意义容易理解但为了规范我们最好使用有意义容易理解的名字，让名称尽可能与表现方式无关。的名字，让名称尽可能与表现方式无关。书写上一般采用驼峰式大小写，即多个单书写上一般采用驼峰式大小写，即多个单词的情况下，首单词无大写字母，其后单词的情况下，首单词无大写字母，其后单词首字母大写，如词首字母大写，如topNav,leftSidebartopNav,leftSidebar。第六章第六章 CSSCSS样式表样式表3.ID3.ID和类的使用和类的使用我们在我们在CSSCSS中定义了类或中定义了类或IDID，那么我们怎么把，那么我们怎么把它应用到它应用

20、到HtmlHtml中呢？中呢？第六章第六章 CSSCSS样式表样式表若定义样式时用的是类的形式，即若定义样式时用的是类的形式，即.firstcolor:red;.firstcolor:red;则则HTMLHTML代码中应该写：代码中应该写：第一个段落第一个段落若当初我们定义的是若当初我们定义的是IDID，#first#first color:red;color:red;。那么现在我们应该这样写：。那么现在我们应该这样写：第一个段落第一个段落这样应用了之后，只有第一个段落的颜色为这样应用了之后，只有第一个段落的颜色为红色，其它段落便不受红色，其它段落便不受FirstFirst类影响。类影响。第六

21、章第六章 CSSCSS样式表样式表IDID和类的区别和类的区别可能会觉得可能会觉得IDID和类除了书写上的区别之外，和类除了书写上的区别之外，功能上好像没有区别。功能上好像没有区别。的确，它们在功能上也没有区别，的确，它们在功能上也没有区别，它们的它们的区别就是区别就是IDID在页面上必须是唯一的在页面上必须是唯一的,而用而用类定义的样式可以被多次使用。类定义的样式可以被多次使用。第六章第六章 CSSCSS样式表样式表例如我们定义一个例如我们定义一个IDID，一个类。，一个类。#first color:red;#first color:red;.second color:green;.seco

22、nd color:green;firstfirst因为前面有个因为前面有个#号所以属于号所以属于IDID，SecondSecond则属于类。则：则属于类。则：段落一段落一 段落二段落二 段落三段落三第六章第六章 CSSCSS样式表样式表上面的代码中上面的代码中“SecondSecond”这个类被使用了这个类被使用了两次，说明类可以被多次使用，但两次，说明类可以被多次使用，但IDID在页在页面中只能被使用一次。面中只能被使用一次。我们一般用我们一般用IDID来标识持久的结构性元素。来标识持久的结构性元素。使用更多的是类。使用更多的是类。第六章第六章 CSSCSS样式表样式表样式规则样式规则 P

23、color:red;font-family:隶书隶书;font-size:24px;静夜思静夜思床前明月光，床前明月光，疑是地上霜。疑是地上霜。我是郭德刚，我是郭德刚，低头思故乡。低头思故乡。本页面中所有的本页面中所有的P标签标签都应用了此样式都应用了此样式所有的段落都采用所有的段落都采用P样样式，保证风格统一式，保证风格统一用分号用分号隔开隔开选择器选择器如何编写此样式如何编写此样式?字体类型为律书、字体类型为律书、大小大小24px第六章第六章 CSSCSS样式表样式表 如果希望其他的标签也能采用如果希望其他的标签也能采用P P标签的样式，怎么办？标签的样式，怎么办？其他标签和其他标签和P

24、P标签应该采用相同的样式，所以要为它们标签应该采用相同的样式，所以要为它们定义一个共享样式。定义一个共享样式。类样式类样式(class)(class).red color:red;font-family:隶书隶书;font-size:24px;.类名类名样式规则样式规则第六章第六章 CSSCSS样式表样式表样式规则样式规则 .red color:red;font-family:隶书隶书;静夜思静夜思床前明月光，床前明月光，疑是地上霜。疑是地上霜。我是郭德刚，我是郭德刚，低头思故乡。低头思故乡。CLASS类选类选择器择器为类选择器定为类选择器定义的样式规则义的样式规则和和标签要应用同一样式标签要

25、应用同一样式应用类选择器应用类选择器class”类名类名“如何实现这样的样如何实现这样的样式效果？字体类型式效果？字体类型都为隶书都为隶书第六章第六章 CSSCSS样式表样式表文本属性文本属性 要实现如下图所示的文本样式，该如要实现如下图所示的文本样式，该如何编写？何编写？文本属性文本属性说说明明font-size字体大小字体大小font-family字体类型字体类型font-style字体样式字体样式color设置或检索文本的颜色设置或检索文本的颜色text-align文本对齐文本对齐使用使用font-size、font-family、color实现实现 宋体，字体宋体，字体大小大小12px

26、字体大字体大小小16px第六章第六章 CSSCSS样式表样式表P font-size:12px;font-family:宋体宋体;text-align:left;.bigFont f ont-size:16px;color:red;【新闻新闻】设搜狐为首页设搜狐为首页 9月月1日日 世锦赛刘翔世锦赛刘翔12秒秒95夺冠成就大满贯夺冠成就大满贯我国实施不安全食品召回制度我国实施不安全食品召回制度 遏制非法出口遏制非法出口.声明声明P标签标签样式样式声明名称为声明名称为bigFont类样式类样式,它可被多个标签共享它可被多个标签共享应用类样式用应用类样式用class”类名类名“第六章第六章 CSS

27、CSS样式表样式表样式表的三类应用方式样式表的三类应用方式第六章第六章 CSSCSS样式表样式表分为三种方式分为三种方式:1.1.行内样式表在标签中直接使用行内样式表在标签中直接使用stylestyle属性来定义属性来定义 2.2.内部样式表写在所在网页的内部样式表写在所在网页的之间，只对所在网页起作用。之间，只对所在网页起作用。3.3.在独立的文件中声明在独立的文件中声明csscss样式样式,在需要在需要的页面中调入此文件，可在多个网页中重的页面中调入此文件，可在多个网页中重复使用复使用.第六章第六章 CSSCSS样式表样式表内嵌样式表内嵌样式表内嵌样式表使用格式如下：内嵌样式表使用格式如下

28、：行内（嵌入）样式表行内（嵌入）样式表外部样式表文件外部样式表文件 样式规则样式规则 如果希望本网页内的所有同类标签都采如果希望本网页内的所有同类标签都采用用统一样式统一样式，这时应采用内嵌样式。，这时应采用内嵌样式。第六章第六章 CSSCSS样式表样式表P font-family:隶书隶书;font-size:18px;color:#FF0000;床前明月光，床前明月光，疑是地上霜。疑是地上霜。我是郭德刚，我是郭德刚，低头思故乡。低头思故乡。样式规则样式规则所有的段落都采用所有的段落都采用 P 样式，保证样式统一样式，保证样式统一选择符选择符样式表样式表第六章第六章 CSSCSS样式表样式表

29、如果希望某段文字和其他段落文字显示风格如果希望某段文字和其他段落文字显示风格不一样，该如何解决？不一样，该如何解决？使用行内（嵌入）样式表可以解决使用行内（嵌入）样式表可以解决第六章第六章 CSSCSS样式表样式表设置属性设置属性 这个段落应用了样式这个段落应用了样式这个段落按默认样式显示这个段落按默认样式显示为标签为标签p指指定样式定样式本段本段标签采用标签采用了行内样式了行内样式第六章第六章 CSSCSS样式表样式表静夜思静夜思作者：李白作者：李白 床前明月光，床前明月光，疑是地上霜。疑是地上霜。我是郭德刚，我是郭德刚，低头思故乡。低头思故乡。行内样式使用范围更小，只适用于行内样式使用范围

30、更小，只适用于某一个标签，对其他标签不起作用某一个标签，对其他标签不起作用本段本段标签采标签采用了行内样式用了行内样式第六章第六章 CSSCSS样式表样式表如果希望一个网站中多个页面的样式保一如果希望一个网站中多个页面的样式保一致，如何解决？致，如何解决？使用外部样式表文件样式表可以解决使用外部样式表文件样式表可以解决第六章第六章 CSSCSS样式表样式表根据样式文件与网页的关联方式又分为：根据样式文件与网页的关联方式又分为：链接（链接（LINK LINK）外部样式表）外部样式表导入（导入（importimport）外部样式表）外部样式表第六章第六章 CSSCSS样式表样式表使用使用LINK（

31、链接）标签（链接）标签:第一步：创建样式表文件第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页绑定第二步：把样式文件和网页绑定第三步：浏览查看各网页第三步：浏览查看各网页引入的样引入的样式文件式文件第六章第六章 CSSCSS样式表样式表使用使用import导入导入，语法：，语法：import newstyle.css;引入样式表文件引入样式表文件第六章第六章 CSSCSS样式表样式表CSSCSS常用文本属性常用文本属性第六章第六章 CSSCSS样式表样式表文本对齐属性文本对齐属性(text-align)(text-align)这个属性用来设定文本的对齐方式。有这个属性用

32、来设定文本的对齐方式。有以下值：以下值：left(left(居左，缺省值居左，缺省值)right(right(居右居右)center(center(居中居中)justify(justify(两端对齐两端对齐)示例代码如下：示例代码如下：.p2 text-.p2 text-align:rightalign:right 第六章第六章 CSSCSS样式表样式表文本修饰属性文本修饰属性(text-decoration)(text-decoration)这个属性主要设定文本划线的属性。有以下这个属性主要设定文本划线的属性。有以下值：值：none(none(无，缺省值无，缺省值)underline(und

33、erline(下划线下划线)overlineoverline(上划线上划线)line-through(line-through(当中划线当中划线)这个属性设定每行之间的距离。这个属性设定每行之间的距离。示例代码如下：示例代码如下：.p2 text-decoration:underline.p2 text-decoration:underline第六章第六章 CSSCSS样式表样式表文本缩进属性文本缩进属性(text-indent)(text-indent)这个属性设定文本首行缩进。其值有以下这个属性设定文本首行缩进。其值有以下设定方法：设定方法：length(length(长度，可以用绝对单位

34、长度，可以用绝对单位(cm,mm,(cm,mm,in,pt,pc)in,pt,pc)或者相对单位或者相对单位 (em,ex,px)(em,ex,px)percentage(percentage(百分比，相当于父对象宽度百分比，相当于父对象宽度的百分比的百分比)示例代码如下：示例代码如下：.p1 text-indent:8mm.p1 text-indent:8mm第六章第六章 CSSCSS样式表样式表行高属性行高属性(line-height)(line-height)示例代码如下：示例代码如下。示例代码如下：示例代码如下。这个属性设定每行之间的距离。其值有以这个属性设定每行之间的距离。其值有以下

35、设定方法：下设定方法：normal(normal(缺省值缺省值)length(length(长度，可以用绝对单位长度，可以用绝对单位(cm,mm,(cm,mm,in,pt,pc)in,pt,pc)或者相对单位或者相对单位 (em,ex,px)(em,ex,px)percentage(percentage(百分比，相当于父对象高度百分比，相当于父对象高度的百分比的百分比)第六章第六章 CSSCSS样式表样式表示例代码如下：示例代码如下：.p1 line-height:1cm.p1 line-height:1cm这个属性用来设定字符之间的距离这个属性用来设定字符之间的距离第六章第六章 CSSCSS

36、样式表样式表字间距属性字间距属性(letter-spacing)(letter-spacing)演示示例演示示例 示例代码如下！示例代码如下！这个属性用来设定字符之间的距离。这个属性用来设定字符之间的距离。normal(normal(缺省值缺省值)length(length(长度，可以用绝对单位长度，可以用绝对单位(cm,mm,(cm,mm,in,pt,pc)in,pt,pc)或者相对单位或者相对单位 (em,ex,px)(em,ex,px)演示示例演示示例 示例代码如下。示例代码如下。第六章第六章 CSSCSS样式表样式表示例代码如下：示例代码如下：.p1 letter-spacing:3m

37、m.p1 letter-spacing:3mm颜色属性颜色属性(color)(color)用颜色属性用颜色属性(color)(color)可以改变文本的字体颜可以改变文本的字体颜色。示例代码如下：色。示例代码如下：.p1color:gray.p1color:gray第六章第六章 CSSCSS样式表样式表CSSCSS背景属性背景属性第六章第六章 CSSCSS样式表样式表背景颜色属性背景颜色属性(background-color)(background-color)这个属性为这个属性为HTMLHTML元素设定背景颜色，相当元素设定背景颜色，相当于于HTMLHTML中中bgcolorbgcolor属

38、性。属性。body background-color:#99FF00;body background-color:#99FF00;上面的代码表示上面的代码表示BodyBody这个这个HTMLHTML元素的背景元素的背景颜色是翠绿色的。颜色是翠绿色的。第六章第六章 CSSCSS样式表样式表背景图片属性背景图片属性(background-image)(background-image)这个属性为这个属性为HTMLHTML元素设定背景图片，相当元素设定背景图片，相当于于HTMLHTML中中backgroundbackground属性。属性。body style=background-kground.

39、jpg)上面的代码为上面的代码为BodyBody这个这个HTMLHTML元素设定了一元素设定了一个背景图片。个背景图片。第六章第六章 CSSCSS样式表样式表背景重复属性背景重复属性(background-repeat)(background-repeat)这个属性和这个属性和background-imagebackground-image属性连在一属性连在一起使用，决定背景图片是否重复。如果只起使用，决定背景图片是否重复。如果只设置设置background-imagebackground-image属性，没设置属性，没设置background-repeatbackground-repeat属

40、性，在缺省状态下，属性，在缺省状态下，图片既横向重复，又竖向重复。图片既横向重复，又竖向重复。第六章第六章 CSSCSS样式表样式表repeat-x repeat-x 背景图片横向重复背景图片横向重复 repeat-y repeat-y 背景图片竖向重复背景图片竖向重复 no-repeat no-repeat 背景图片不重复背景图片不重复body background-body background-image:url(./images/css_tutorials/bacimage:url(./images/css_tutorials/background.jpg);background-kg

41、round.jpg);background-repeat:repeat-yrepeat:repeat-y相当于相当于HTMLHTML中中bgcolorbgcolor属性。背景图片是属性。背景图片是background.background.上面的代码表示图片竖向重复。上面的代码表示图片竖向重复。第六章第六章 CSSCSS样式表样式表背景附着属性背景附着属性(background-attachment)(background-attachment)这个属性和这个属性和background-imagebackground-image属性连在一属性连在一起使用，决定图片是跟随内容滚动，还是起使用，决

42、定图片是跟随内容滚动，还是固定不动。这个属性有两个值，一个是固定不动。这个属性有两个值，一个是scrollscroll，一个是，一个是fixedfixed。缺省值是。缺省值是scrollscroll。body background-body background-image:url(./images/css_tutorials/bacimage:url(./images/css_tutorials/background.jpg);background-repeat:no-kground.jpg);background-repeat:no-repeat;background-attachment

43、:fixedrepeat;background-attachment:fixed上面的代码表示图片固定不动，不随内容上面的代码表示图片固定不动，不随内容滚动而动。滚动而动。第六章第六章 CSSCSS样式表样式表背景位置属性背景位置属性(background-position)(background-position)这个属性和这个属性和background-imagebackground-image属性连在一属性连在一起使用，决定了背景图片的最初位置。起使用，决定了背景图片的最初位置。body background-body background-image:url(./images/css_

44、tutorials/bacimage:url(./images/css_tutorials/background.jpg);background-repeat:no-kground.jpg);background-repeat:no-repeat;background-position:20px repeat;background-position:20px 60px60px不随内容滚动而动。上面的代码表示不随内容滚动而动。上面的代码表示BodyBody这个这个HTMLHTML元素的背景颜色是翠绿色的。元素的背景颜色是翠绿色的。上面的代码表示背景图片的初始位置距离上面的代码表示背景图片的初始位

45、置距离网页最左面网页最左面20px20px，距离网页最上面，距离网页最上面60px60px。第六章第六章 CSSCSS样式表样式表CSSCSS边框属性边框属性第六章第六章 CSSCSS样式表样式表边框风格属性边框风格属性(border-style)(border-style)这个属性用来设定上下左右边框的风格，这个属性用来设定上下左右边框的风格，它的值如下：它的值如下：none(none(没有边框，无论边框宽度设为多大没有边框，无论边框宽度设为多大)dotted(dotted(点线式边框点线式边框)dashed(dashed(破折线式边框破折线式边框)solid(solid(直线式边框直线式边

46、框)double(double(双线式边框双线式边框)groove(groove(槽线式边框槽线式边框)第六章第六章 CSSCSS样式表样式表ridge(ridge(脊线式边框脊线式边框)inset(inset(内嵌效果的边框内嵌效果的边框)outset(outset(突起效果的边框突起效果的边框)第六章第六章 CSSCSS样式表样式表边框宽度属性边框宽度属性(border-width)(border-width)这个属性用来设定上下左右边框的宽度，这个属性用来设定上下左右边框的宽度，它的值如下：它的值如下：medium(medium(是缺省值是缺省值)thin(thin(比比mediumme

47、dium细细)thick(thick(比比mediummedium粗粗)用长度单位定值。可以用绝对长度单位用长度单位定值。可以用绝对长度单位(cm,mm,in,pt,pc)(cm,mm,in,pt,pc)或者用相对长度单或者用相对长度单位位 (em,ex,px)(em,ex,px)。上下左右四个边框不但可以统一设定，也上下左右四个边框不但可以统一设定，也可以分开设定。可以分开设定。第六章第六章 CSSCSS样式表样式表单边边框属性单边边框属性上下左右四个边框不但可以统一设定，也上下左右四个边框不但可以统一设定，也可以分开设定。可以分开设定。-top-style,border.-top-styl

48、e,border.设定上边框属性，你可以使用设定上边框属性，你可以使用border-top,border-top,border-top-width,border-top-style,border-top-width,border-top-style,border-top-colorborder-top-color。设定下边框属性，你可以使用设定下边框属性，你可以使用border-border-bottom,border-bottom-width,border-bottom,border-bottom-width,border-bottom-style,border-bottom-colorbo

49、ttom-style,border-bottom-color。-top-width,border-top-.-top-width,border-top-.第六章第六章 CSSCSS样式表样式表设定左边框属性，你可以使用设定左边框属性，你可以使用border-border-left,border-left-width,border-left-left,border-left-width,border-left-style,border-left-colorstyle,border-left-color。设定上边框属性，你可以使用设定上边框属性，你可以使用border-border-right,b

50、order-right-width,border-right,border-right-width,border-right-style,border-right-colorright-style,border-right-color。边距属性是用来设置页面中一个元素所占边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。空间的边缘到相邻元素之间的距离。第六章第六章 CSSCSS样式表样式表左边距属性左边距属性(margin-left)(margin-left)这个属性用来设定左边距的宽度。示例如这个属性用来设定左边距的宽度。示例如下：下：.d1margin-left:1cm.