网页设计与制作C课件.ppt

《网页设计与制作C课件.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作C课件.ppt（62页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、样式是一个规则，告诉浏览器如何表现特定的样式是一个规则，告诉浏览器如何表现特定的HTML或或XHTML标签中的内标签中的内容。每个标签都有一系列相关的样式属性，它们的值决定了浏览器将如何显示这个容。每个标签都有一系列相关的样式属性，它们的值决定了浏览器将如何显示这个标签。一条规则定义了标签中一个或几个属性的特定值。标签。一条规则定义了标签中一个或几个属性的特定值。将样式和标签结合起来的方式有三种将样式和标签结合起来的方式有三种:内联样式表、文档级样式表，或者通过使用外部样式表。内联样式表、文档级样式表，或者通过使用外部样式表。1、内联样式、内联样式(inlinestyle)是连接样式和标签的最

2、简单的方式，只需在标签中包含一是连接样式和标签的最简单的方式，只需在标签中包含一个个style属性，后面再跟一列属性及属性值即可。浏览器会根据样式属性及其值来表属性，后面再跟一列属性及属性值即可。浏览器会根据样式属性及其值来表现标签中的内容。现标签中的内容。BachshomepageBachshomepage因为内联样式会向其标签的定义中添加更多内容，所以它们难维护，也难以阅读。因为内联样式会向其标签的定义中添加更多内容，所以它们难维护，也难以阅读。2、文档级样式表、文档级样式表将样式表放在内的标签和(/style结束标签之间，就会影响文档中所有相同标签的内容标签标签功能功能:定义文档级样式表

3、定义文档级样式表属性属性:dirlangmediatitletype和和标签之间的所有内容都将被看作是样式规则的一部分标签之间的所有内容都将被看作是样式规则的一部分type属性属性级联样式表全部都是级联样式表全部都是text/css类型类型;JavaScript样式表使用的类型则是样式表使用的类型则是text/javascriptBachshomepageh1color:blue;font-style:italicBachshomepageJohannSebastianBachwasaprolificcomposer.3、链接式外部样式表、链接式外部样式表当在文档的当在文档的标签中使用标签中使

4、用标签标签BachshomepageBachshomepageJohannSebastianBachwasaprolificcomposer.link元素规定了：链接类型：指向“stylesheet”。通过“href”属性，指定了样式表的位置。链接的样式表的类型：“text/css”。样式语法：样式的语法(规则)样式规则至少由三个基本部分组成样式规则至少由三个基本部分组成:1、选择符、选择符selector：HTML或或XHTML标记元素的名称，标记元素的名称，2、大括号、大括号3、大括号、大括号括起来并用分号分隔的样式列表（括起来并用分号分隔的样式列表（样式样式:”属性属性:属性值属性值”）

5、selectorpropertyl:valuel;property2:value2;.例如：例如：h1color:purple;font-style:italic样式的种类：样式的种类：、单个的简单选择符（只有一个标记）、单个的简单选择符（只有一个标记）h1color:blue;font-style:italic分组选择符（集合选择符）分组选择符（集合选择符）具有相同样式的选择符可以写在一起，中间用逗号分开。如：具有相同样式的选择符可以写在一起，中间用逗号分开。如：h1,h2,h3color:red;font-style:italic3、嵌套选择符（派生选择符、嵌套选择符（派生选择符/上下文选

6、择符）上下文选择符）EF匹配元素E的任意后代任意后代元素Fpbcolor:red将出现在将出现在p之内任何位置的任何位置的b元素的文本颜色设置为红色元素的文本颜色设置为红色pb，h1subcolor:green将出现在将出现在p之内任何位置的任何位置的b元素和元素和h1之内任何位置的任何位置的sub元素的文本颜色设置为绿色元素的文本颜色设置为绿色3、ID选择符选择符精通HTML语言，完全能手写HTML代码；熟练掌握ASP、ASP.Net、PHP,JAVA、JAVASCRIPT等技术；熟悉网站的管理、设计规划、前台、后台程序制作技术。熟练SQLserver,Oracle数据库管理系统,能够独立完

7、成数据库的开发;#first_parafont-weight:bold#first_parafont-weight:bold;letter-spacing:3px;#first_parafont-weight:bold;letter-spacing:3px;font-family:楷体_GB2312;ID选择符的前面是选择符的前面是#号号ID只能在某个HTML文档中出现一次，即ID名称（如first_para）不能重复、类选择符、类选择符商务类人才可以分为五种：商务类人才可以分为五种：一是企业网络营销业务，包括利用网站为企业开拓网上业务、网络品牌管理、客户服一是企业网络营销业务，包括利用网站为

8、企业开拓网上业务、网络品牌管理、客户服务等；二是网上国际贸易，包括利用网络平台开发国际市场、进行国际贸易；务等；二是网上国际贸易，包括利用网络平台开发国际市场、进行国际贸易；三是新型网络服务商的内容服务，包括频道规划、信息管理、频道推广、客户服务等；三是新型网络服务商的内容服务，包括频道规划、信息管理、频道推广、客户服务等；四是电子商务支持系统的推广，负责销售电子商务系统和提供电子商务支持服务、客四是电子商务支持系统的推广，负责销售电子商务系统和提供电子商务支持服务、客户管理等；五是创业，包括利用虚拟市场提供产品和服务，也可以直接为虚拟市场提户管理等；五是创业，包括利用虚拟市场提供产品和服务，

9、也可以直接为虚拟市场提供服务。对于这类人才，一方面要求他们是管理和营销的高手，同时也应熟悉网络虚供服务。对于这类人才，一方面要求他们是管理和营销的高手，同时也应熟悉网络虚拟市场下新的经济规律，另一方面他们必须掌握网络和电子商务平台的基本操作技术。拟市场下新的经济规律，另一方面他们必须掌握网络和电子商务平台的基本操作技术。、类选择符、类选择符-.second_paracolor:red;.second_paracolor:green;background-color:#e8d3e3;类选择符通过直接引用元素中类选择符通过直接引用元素中类属性的值类属性的值而产生效果。在这个引用前面总是一个句点而产

10、生效果。在这个引用前面总是一个句点(.)，用它来标识一个类选择符。这个句点是必要的，因为它可以帮助类选择符与其他，用它来标识一个类选择符。这个句点是必要的，因为它可以帮助类选择符与其他元素相区别。元素相区别。p.second_paracolor:green;background-color:#e8d3e3;样式只对类属性价为样式只对类属性价为second_para的的段落段落起作用起作用、伪类选择符、伪类选择符:link:伪类适用于那些还未被访问的连接:visited:伪类适用于用户已经访问过的连接:hover伪类:用于用户指向一个元素,但还没有激活它的时候:active伪类适用于一个元素被用

11、户激活的时候:focus伪类适用于一个元素获得焦点（接受键盘事件或其它形式的文本输入）的时候acolor:purplea:linkcolor:reda:visitedcolor:bluea:hovercolor:blue;a:activecolor:yellow学生作品a.student:visitedcolor:purple;a.student:link,a.student:visitedcolor:red;注意注意a:hover必须放置在必须放置在a:link和和a:visited规则之规则之后，否则层叠规则将隐藏后，否则层叠规则将隐藏a:hover的的color属性属性。6、伪元素、伪元

12、素first-line伪元素伪元素:一个段落的第一个格式化的行应用特殊的样式一个段落的第一个格式化的行应用特殊的样式ThisisasomewhatlongHTMLparagraphthatwillbebrokenintoseverallines.Thefirstlinewillbeidentifiedbyafictionaltagsequence.Theotherlineswillbetreatedasordinarylinesintheparagraph.P:first-linetext-transform:uppercase;color:red;:first-letter伪元素可以用于“词

13、首(首字符或首字)”P:first-lettercolor:green;font-size:200%;font-style:italic;通配选择符*margin:0;padding:0;元素间的关系：这是是h1的内容这是一个段落p的内容这里是strong的内容div同同h1和和p形成形成“父父/子子”关系，关系，div是是h1和和p的的“父元素父元素”。p和和strong形成形成“父父/子子”关系，关系，strong的的“父元素父元素”是是p。h1,p,strong都是都是div的的“子元素子元素”（三者都包含在（三者都包含在div之内之内）div是是h1pstrong三者三者的的“祖先祖先

14、”，div和strong并非“父/子”关系，而是“祖孙”关系，但strong依然是div的“子（孙）元素”。h1和和p两者是相邻的两者是相邻的EF（父子元素）匹配父元素父元素E的任意子元素F注释注释/*/*Pbackground-color:#FFFF66*/CSS元素分类元素分类在在CSS中，元素被分为三种类型中，元素被分为三种类型:块级元素块级元素:诸如段落、标题、列表、表格、DIV和BODY等元素都是块级(block-level)元素。每个块级元素都从一个新行开始显示，而且其后的元素也需另起一行进行显示。内联元素内联元素:如a,em,span元素及大多数的替换元素，如图像和表单输入元素。

15、它们不必在新行上显示，也不强迫其他元素在新行上显示，而且可以作为任何其他元素的子元素。列表项元素列表项元素在HTML中只包含li元素。它们类似于书签，用干特殊的表示场合(如圆点、字母或数字)。如果它们出现在某种有序列表中，则具有顺序性。如在有序列表中的列表项能依据它们的上下文自动编号。这几种元素占据了display属性值（Block、in1ine、list-item、none）四个值中的三个。如果将元素的display属性设成none，则元素的存在会被浏览器所忽略，而且也不被显示。block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定

16、一个宽度,等是块元素的inline元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。,和是inline元素的例子用display:inline或display:block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？让一个让一个inline元素从新行开始；元素从新行开始；让块元素和其他元素保持在一行上；让块元素和其他元素保持在一行上；控制控制inline元素的宽度；元素的宽度；控制控制inline元素的高度；元素的高度；HTML块级元素：块级元素：address-地址地址b

17、lockquote-块引用块引用div-常用块级容易，也是常用块级容易，也是csslayout的主要标签的主要标签dl-定义列表定义列表fieldset-form控制组控制组form-交互表单交互表单h1-大标题大标题h2-副标题副标题h3-3级标题级标题h4-4级标题级标题h5-5级标题级标题h6-6级标题级标题hr-水平分隔线水平分隔线ol有序列表有序列表p-段落段落pre-格式化文本格式化文本table-表格表格ul无序列表无序列表英寸（英寸（in）、厘米（）、厘米（cm）和毫米（）和毫米（mm）根据显示的实际尺寸来确定长度。此类单位不随显示器分辨率的改变而改变12pt字（字（pc）相当

18、于我国新四号铅字的尺寸相当于我国新四号铅字的尺寸即windows系统定义的12字号大小为单位(1pc=12pt)。该单位前输入的数字表示字号大小的倍数。如font-size:2pc;表示文字大小为24pt；是以当前文本的百分比定义尺寸。如font-size:200%是指文字大小为原来的2倍；%百分比百分比-字体、颜色、宽度字体、颜色、宽度像素（像素（px）根据显示器的分辨率来确定长度，在web应用中多采用该单位；像素是相对于显示器屏幕分辨率而言的点数（点数（pt）绝对长度单位。点（）绝对长度单位。点（Point）。）。字体高（字体高（em）表示当前文本的尺寸，）表示当前文本的尺寸，相对长度单位

19、。相对长度单位。相对于当前对象内文本的字体尺寸相对于当前对象内文本的字体尺寸如font-size:2em是指文字大小为原来的2倍；字体字体文本文本颜色背景颜色背景表格表格边框边框定位定位CSS属性属性CSS字体属性字体属性font-familyfont-weightfont-sizefont-stylefont-variant1)font-family:设置或检索用于对象中文本的设置或检索用于对象中文本的字体名称或字体系列名称字体名称或字体系列名称语法：语法：font-family:name(字体名称字体名称)font-family:cursive|fantasy|monospace|seri

20、f|sans-serif(字体系列名称字体系列名称)适用于适用于:所有元素所有元素bodycolor:red;font-family:楷体楷体_GB2312字体系列字体系列比如，常见的确字体比如，常见的确字体Times。，实际上。，实际上Times是许多变形的组合，包括是许多变形的组合，包括TimesRegular,TimesBold,TimesItalic,Timespblique,TimesBoldItalic,TimesBoldOblique等等。等等。Times的每一种变形都是一个字体形式的每一种变形都是一个字体形式,Times就是这些字体形就是这些字体形式的组合。也就是说式的组合。也

21、就是说Times是一个字体系列，并不单单是一种是一个字体系列，并不单单是一种.除特定的字体系列，如除特定的字体系列，如Times,Verdana,Arial外，外，CSS还定义还定义了五种一般字体系列了五种一般字体系列:Serif字体字体成比例例且有衬线成比例例且有衬线(serif)的字体的字体,一种字体有比例，是指宇体一种字体有比例，是指宇体中的所有字母根据它们不同的尺寸占据不同的宽度。衬线特指中的所有字母根据它们不同的尺寸占据不同的宽度。衬线特指加在字母上做装饰的细线，加在字母上做装饰的细线，Sansserif字体字体:有比例但没有衬线的字体。有比例但没有衬线的字体。Monospace字体

22、字体无比例的字体。通常用于模拟打字机打出的文本Cursive字体字体试图模拟人的笔迹的字体。通常这些字体大部分是由曲线和比衬线字体更强的笔画修饰组成的。Fantasy字体字体不能通过某种单一的特征来定义，而且也不能简单地归为其他系列的某一类的那些字体。这样的字体较少.2)font-weight：设置或检索对象中的文本字体的粗细。Normal(初始值)、bold、bolder、lighter、100900适用于适用于:所有元素所有元素divfont-weight:bolddivfont-weight:lighter3)font-size：字体尺寸字体尺寸允许值允许值:xx-small、x-sma

23、ll、small、medium(初始值)、large、x-large、x-large、larger、smaller、长度（、长度（pt|px|cm|in|mm）、百分比）、百分比(%)适用于适用于:所有元素所有元素pfont-size:xx-largepfont-size:30pxpfont-size:150%4)font-style：字体样式：字体样式Normal(默认值默认值)、italic（斜体）、斜体）、oblique（倾斜的字体倾斜的字体）适用于：所有元素适用于：所有元素divfont-style:italic5）font-variant：字体变形：字体变形Normal(默认值默认值

24、)、small-caps（小型的（小型的大写字母大写字母字体字体）适用于：所有元素适用于：所有元素spanfont-variant:small-caps;CSS文本属性文本属性text-indenttext-aligntext-decorationletter-spacingword-spacingtext-transformwhite-spaceline-heightvertical-align1）text-indent：文本首行首行的缩进。允许值：长度、百分比适用于：块级元素spantext-indent:1.25in;首行缩进四分之一英寸首行缩进四分之一英寸spantext-indent

25、:-10em;spantext-indent:-5%;2）text-alignLeft、right、center、justify适用于：块级元素ptext-align:right;3）text-decoration下划线，上划线，删除线，闪烁none、underline、overline、line-through、blink适用于：所有元素Ptext-decoration:line-through4)letter-spacing字母间距适用于：所有元素Pletter-spacing:0.5em5)word-spacing:单词之间的间距适用于：所有元素Pword-spacing:1em6）te

26、xt-transform:该属性控制某元素文本的大小写效果该属性控制某元素文本的大小写效果值：capitalize|uppercase|lowercase|nonecapitalize将每个单词的首字符变为大写。uppercase将每个单词的所有字符变为大写。lowercase将每个单词的所有字符变为小写适用于：所有元素divtext-transform:capitalizedivtext-transform:uppercase7)white-space:该属性声明了元素内的该属性声明了元素内的空白空白是如何处理的是如何处理的值：normal|pre|nowrap|适用于：块级元素normal

27、该值告诉用户端，合并一系列的空白，在必要的时分行pre该值阻止用户端合并一系列的空白nowrap该值象normal那样合并空白，但是阻止文本内的分行divtext-transform:uppercase;white-space:nowrap8）line-height:行高，行高，行高指的是文本行的基线间的距离行高指的是文本行的基线间的距离允许值允许值:长度、百分比、数字、长度、百分比、数字、normal适用于：所有元素divline-height:2emdivline-height:0.5indivline-height:32pt9）vertical-align允许值允许值:baseline、

28、sub、super、bottom、text一bottom、middle、top、Text-top、百分比适用于：内联元素适用于：内联元素,和是inline元素arryispanvertical-align:subspanvertical-align:-200%color属性属性background-colorbackgraund-imagebackground-repeatbackground-positionbackground-attachmentCSS颜色背景属性颜色背景属性在在CSS中，可以设置任何元素的前景色和背景色，从中，可以设置任何元素的前景色和背景色，从BODY元素到下划线和斜

29、体标记，几乎所有的一切元素到下划线和斜体标记，几乎所有的一切:列表项、列表项、整个列表、标题、超链接、表格单元、表单元素整个列表、标题、超链接、表格单元、表单元素.前景色前景色设置前景色的最简便方法是用设置前景色的最简便方法是用css的的color属性。属性。color属性属性适用于适用于:所有元紊所有元紊p(color:yellow;div(color:blue;p.second_para1color:blue/*类标识为类标识为second_para1的段落文本颜色为蓝色的段落文本颜色为蓝色*/p#second_para1color:red/*ID标识为标识为second_para1的段落

30、文本颜色为红色的段落文本颜色为红色*/p#second_para1a:linkcolor:red/*ID标识为标识为second_para1的段落中的链接文本颜色为红色的段落中的链接文本颜色为红色*/p#second_para1a:linkcolor:red/*类标识类标识标识为标识为second_para1的段落中的链接文本颜色为红色的段落中的链接文本颜色为红色*/颜色属性也可以应用于表单颜色属性也可以应用于表单(form)元素。元素。input#the-inputcolor:red;背景颜色背景颜色background-color允许值允许值或或transparent适用于适用于:所有元紊

31、所有元紊Pbackground-color:#ccccffa:linkbackground-color:silver;p.second_paraa:linkbackground-color:silver;背景图像背景图像backgraund-image允许值允许值:适用于:所有元紊bodybackground-image:url(bg1.JPG)pbackground-image:url(c3.gif)divbackground-image:url(bg1.jpg)background-repeat允许值允许值Repeat、no-repeat、repeat-x、repeat-yrepeat使图

32、像在两个方向平铺使图像在两个方向平铺repeat-x、repeat-y:使图像分别在水平和垂直方向上平铺使图像分别在水平和垂直方向上平铺初始值初始值:repeatbodybackground-image:url(03.gif);background-repeat:repeat-y;背景图像位置背景图像位置background-position适用于适用于块级元素和替换元素块级元素和替换元素允许值：允许值：left、right、top、bottom、center、百分比、长度值、百分比、长度值bodybackground-image:url(03.gif);background-repeat:r

33、epeat-x;background-position:top要使背景图像横跨元素的三分之一，纵跨三分之二，可以按如下声明要使背景图像横跨元素的三分之一，纵跨三分之二，可以按如下声明bodybackground-image:url(03.gif);background-repeat:no-repeat;background-position:33%66%使得背景图像的中心同其父元素中心对齐使得背景图像的中心同其父元素中心对齐background-position:50%50%背景图像位置背景图像位置background-position长度值长度值当用长度值来决定背景图像的位置时，它们被解释为

34、相当用长度值来决定背景图像的位置时，它们被解释为相对于元素左上角的偏移量。背景图像上的偏移点也为左对于元素左上角的偏移量。背景图像上的偏移点也为左_ _匕角的匕角的那个点。那个点。如果设置为如果设置为20px 30px20px 30px，那么图像的左上角将位于元素左，那么图像的左上角将位于元素左上角往右上角往右2020个像素，往下个像素，往下3030个像素的位置个像素的位置background-position:50px80px而且，长度值和百分比值还可以为负，这将使图像以某而且，长度值和百分比值还可以为负，这将使图像以某种程度偏离元素。可以只让图像的一部分显示于元素上种程度偏离元素。可以只让

35、图像的一部分显示于元素上阻止图像随文本滚动阻止图像随文本滚动:background-attachment使用使用background-attachment属性，可以使背景图像固定在视野范围内，以避免出属性，可以使背景图像固定在视野范围内，以避免出现因滚动而消失的效果现因滚动而消失的效果:背景图象设置在背景图象设置在body上上允许值：允许值：scroll、fixedbodybackground-image:url(03.gif);background-repeat:no-repeat;background-position:50px80px;background-attachment:fixe

36、d背景属性可综合写到一个缩略属性中，可按任意顺序排列背景属性可综合写到一个缩略属性中，可按任意顺序排列list-style-typelist-style-imagelist-style-positionlist-style（组合使用以上属性（组合使用以上属性）CSS列表项属性列表项属性列表属性列表属性CSS2CSS2标准允许控制列表元素的外观标准允许控制列表元素的外观尤其是有序和无序列表。尤其是有序和无序列表。1、list-style-type允许值Disc实心圆Circle常空心圆Square空心方块Decimal1，2，3，4，5，upper-alphaA，B，C，D，E，lower-al

37、phaa，b，c，d，e，upper-romanI，II,III，IV，V，lower-romani,ii,iii,iv,vnone适用于：适用于：列表项元素列表项元素12ullist-style-type:upper-roman;2、list-style-image该属性指定用来列表项标记的图形该属性指定用来列表项标记的图形允许值：|none|inherit适用于适用于:列表项元素列表项元素list-style-image:url(03.gif);3、list-style-position定位与一个列表项有关的记号定位与一个列表项有关的记号:是在与列表有关的块外面还是里面。是在与列表有关的块

38、外面还是里面。允许值允许值：inside|outside适用于适用于:列表项元素列表项元素ullist-style-type:upper-alpha;list-style-position:inside;border-style:dashed;4、组合三个列表样式属性、组合三个列表样式属性list-style适用于适用于:列表项元素列表项元素ullist-style:upper-alphaoutsideurl(03.gif);(中间用空格隔开中间用空格隔开)border-style:dashedullilist-style:upper-alphainsideurl(03.gif);border

39、-style:dotted列表项单个项目列表项单个项目12ullist-style:upper-alphaoutsideurl(03.gif);border-style:dashed#templist-style:upper-alphainsideurl(03.gif);border-style:dottedWidthHeightBorder-widthBorder-styleBorder-colorPadding-内边距内边距Margin外边距外边距CSS框属性框属性CSS中，所有文档元素都生成一个矩形框，称之为元素中，所有文档元素都生成一个矩形框，称之为元素框。这个框描述了元素及其属性在文

40、档布局中所占的空间大小，框。这个框描述了元素及其属性在文档布局中所占的空间大小，因此每个框都可以影响其他元素的位置及大小因此每个框都可以影响其他元素的位置及大小内容宽度内容宽度width标签标记的内容标签标记的内容给内容加边框给内容加边框内内容容高高度度height边框边框border边框与内容之间的部分称为边框与内容之间的部分称为边白（内边距）边白（内边距）（padding）如果边白为如果边白为0，则边白边和内容边重合，则边白边和内容边重合内容宽度内容宽度width标签标记的内容标签标记的内容给内容加边框给内容加边框内内容容高高度度height边框边框border上边白上边白Padding-

41、top右边白右边白Padding-right下边白下边白Padding-bottom左边白左边白Padding-left边框外为边框外为边界边界（margin）-框的外框框的外框如果边界为如果边界为0，则边界与边框重合，则边界与边框重合内容宽度内容宽度width标签标记的内容标签标记的内容给内容加边框给内容加边框内内容容高高度度height边框边框border上边白上边白Padding-top右边白右边白Padding-right下边白下边白Padding-bottom左边白左边白Padding-leftmargin-top上边界上边界margin-bottom下边界下边界margin-rig

42、ht右边界右边界margin-right左边界左边界框的属性及属性值框的属性及属性值边框属性设置框的边框属性设置框的边框区边框区的宽度，颜色和样式的宽度，颜色和样式通常情况下，一个元素的通常情况下，一个元素的widthwidth定义为左侧内部边线到右侧内部边定义为左侧内部边线到右侧内部边线的趾离线的趾离heightheight定义为上内边线到下内边线的距离。定义为上内边线到下内边线的距离。width允许值允许值、auto初始值：初始值：auto:元素框宽度等于父元素宽度元素框宽度等于父元素宽度适用于：块级元紊和替换元紊适用于：块级元紊和替换元紊百分比是指相对于父元素的宽度。百分比是指相对于父元

43、素的宽度。helght允许值：允许值：、auto初始值：初始值：auto适用于：块级元紊和替换元紊适用于：块级元紊和替换元紊框的示例框的示例#kuangtext-align:center;width:20%;height:50px;border-style:solid边框边框样式样式border-style属性及属性值属性及属性值元素的边框元素的边框(border就是一条就是一条(有时是多条有时是多条)围绕着元素内容及补白的线围绕着元素内容及补白的线border-style(border-top-style，border-right-style，border-bottom-style，bord

44、er-left-style)取值：取值：none:没有边框dotted：边框是一系列的点。dashed边框是一系列的短线条的段。solid边框是一条单一的线。double边框有两条实线。两条线宽+空白的宽度之和等于border-width的值。groove边框看上去好象是雕刻在画布之内。ridge和grove相反：边框看上去好象是从画布中凸出来。inset该边框使整个框看上去好象是嵌在画布中。outset和inset相反：该边框使整个框看上去好象是从画布中凸出来边框边框样式样式border-style示例示例#kuangtext-align:center;width:20%;height:50

45、px;border-top-style:dotted;border-bottom-style:double;border-right-style:groove;border-left-style:inset;边框本身边框本身border-width宽度宽度border-top-width，border-right-width，border-bottom-width，border-left-width及组合写法及组合写法border-width可以取如下值：thin一个窄的边框。medium一个中等的边框。thick一个厚边框。边框的厚度是显式值。显式的边框宽度不能为负数。边框边框宽度宽度bor

46、der-width示例示例#kuangtext-align:center;width:20%;height:50px;border-top-style:dotted;border-bottom-style:double;border-right-style:solid;border-left-style:outset;border-top-width:10px;border-bottom-width:thick;border-right-width:medium;border-left-width:20px;border-width组合写法：组合写法：如果只有一个值，它适用于所有四边。如果有两

47、个值，顶如果只有一个值，它适用于所有四边。如果有两个值，顶底边框采用第一个值，左右边框采用第二个值。如果有三底边框采用第一个值，左右边框采用第二个值。如果有三个值，顶边框采用第一个值，左右边框采用第二个值，而个值，顶边框采用第一个值，左右边框采用第二个值，而底边框采用第三个值。如果有四个值，它们分别适用于顶，底边框采用第三个值。如果有四个值，它们分别适用于顶，右，底，左四边。右，底，左四边。边框边框颜色颜色border-color属性及属性值属性及属性值border-top-color，border-right-color，border-bottom-color，border-left-col

48、or及组合写法及组合写法border-color颜色值：color、transparent适用于：适用于：所有元素所有元素这是个块这是个块divborder-width:thin;border-style:dashed;/*border-color:blue*/border-width:thin;border-style:dashed;border-top-color:blue;border-bottom-color:teal;border-left-color:purple;border-right-color:red;边白（内边距）边白（内边距）padding属性及属性值属性及属性值内边距

49、是元素的边框和内容之间的距离，适用于任何元素内边距是元素的边框和内容之间的距离，适用于任何元素padding-top，padding-right，padding-bottom，padding-left及组合写法及组合写法padding取值：指定一个确定宽度。百分比的计算基于生成的框的包含块的宽度padding：如果只有一个值，它适用于所有四边。如果有两个值，顶底边白设置为第一个值而左右边距设置为第二个值。如果有三个值，顶边白设置为第一个值，左右边白设置为第二个值，底边白设置为第三个值。如果有四个值，它们分别设置顶，右，底，左边白。divborder-width:thin;border-styl

50、e:dashed;border-top-color:blue;border-bottom-color:teal;border-left-color:purple;border-right-color:red;padding:2em6em2em20%;CSSCSS外边距外边距(界界)属性及属性值属性及属性值margin-top，margin-right，margin-bottom，margin-left以及以及margin适用于：适用于：所有元素所有元素取值：取值：百分比：百分比：相对于包含块的宽度相对于包含块的宽度、automargin如果仅有一个值，它将应用于所有四边。如果有两个值，顶底边距