《网页设计与制作CSS》由会员分享，可在线阅读，更多相关《网页设计与制作CSS（63页珍藏版）》请在金锄头文库上搜索。
1、CSSCSS（Cascading StylesheetsCascading Stylesheets，层叠样式表）是一种制作网页，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用的工具之一。使用CSSCSS能够简化网页的格式代码，加快下载显示的速度能够简化网页的格式代码，加快下载显示的速度和减少需要上传的代码量，也减少了重复劳动的工作量和减少需要上传的代码量，也减少了重复劳动的工作量为网页上的元素精确地定位为网页上的元素精确地定位把网页上的内容结构和格式控制相分离把网页上的内容结
2、构和格式控制相分离只要修改只要修改CSS样式表文件就可以改变整个站点的风格特色样式表文件就可以改变整个站点的风格特色CSS是一种样式表语言，用户可以使用它将样式（如：字体，间距及语音提示是一种样式表语言，用户可以使用它将样式（如：字体，间距及语音提示等）附加到结构化的文档（如：等）附加到结构化的文档（如：HTML文档和文档和XML应用）中。由于应用）中。由于CSS将文档将文档呈现的样式和文档的内容相互分离，因此网页的写作和站点的维护得以简化。呈现的样式和文档的内容相互分离，因此网页的写作和站点的维护得以简化。CSS（CascadingStylesheets，层叠样式表），层叠样式表）样式是一个
3、规则，告诉浏览器如何表现特定的样式是一个规则，告诉浏览器如何表现特定的HTML或或XHTML标签中的内标签中的内容。每个标签都有一系列相关的样式属性，它们的值决定了浏览器将如何显示这个容。每个标签都有一系列相关的样式属性，它们的值决定了浏览器将如何显示这个标签。一条规则定义了标签中一个或几个属性的特定值。标签。一条规则定义了标签中一个或几个属性的特定值。将样式和标签结合起来的方式有三种将样式和标签结合起来的方式有三种:内嵌样式表、内部样式表，外部样式表。内嵌样式表、内部样式表，外部样式表。1、内嵌样式、内嵌样式(inlinestyle)是连接样式和标签的最简单的方式，只需在标签中包含一是连接样
4、式和标签的最简单的方式，只需在标签中包含一个个style属性，后面再跟一列属性及属性值即可。浏览器会根据样式属性及其值来表属性，后面再跟一列属性及属性值即可。浏览器会根据样式属性及其值来表现标签中的内容。现标签中的内容。BachshomepageBachshomepage因为内联样式会向其标签的定义中添加更多内容，所以它们难维护，也难以阅读。因为内联样式会向其标签的定义中添加更多内容，所以它们难维护，也难以阅读。2、内部样式表、内部样式表将样式表放在内的标签和(/style结束标签之间，就会影响文档中所有相同标签的内容标签标签功能功能:定义文档级样式表定义文档级样式表属性属性:dirlangm
5、ediatitletype和和标签之间的所有内容都将被看作是样式规则的一部分标签之间的所有内容都将被看作是样式规则的一部分type属性属性级联样式表全部都是级联样式表全部都是text/css类型类型;JavaScript样式表使用的类型则是样式表使用的类型则是text/javascriptBachshomepageh1color:blue;font-style:italicBachshomepageJohannSebastianBachwasaprolificcomposer.3、外部样式表、外部样式表当在文档的当在文档的标签中使用标签中使用标签标签BachshomepageBachshome
6、pageJohannSebastianBachwasaprolificcomposer.link元素规定了：链接类型：指向“stylesheet”。通过“href”属性，指定了样式表的位置。链接的样式表的类型：“text/css”。样式语法：样式的语法(规则)样式规则至少由三个基本部分组成样式规则至少由三个基本部分组成:1、选择符、选择符selector：HTML或或XHTML标记元素的名称，标记元素的名称，2、大括号、大括号3、大括号、大括号括起来并用分号分隔的样式列表（括起来并用分号分隔的样式列表（样式样式:”属性属性:属性值属性值”）selectorpropertyl:valuel;pr
7、operty2:value2;.例如：例如：h1color:purple;font-style:italic样式的种类：样式的种类：、单个的简单选择符（只有一个标记）、单个的简单选择符（只有一个标记）h1color:blue;font-style:italic分组选择符（集合选择符）分组选择符（集合选择符）具有相同样式的选择符可以写在一起，中间用逗号分开。如：具有相同样式的选择符可以写在一起，中间用逗号分开。如：h1,h2,h3color:red;font-style:italic3、嵌套选择符（派生选择符、嵌套选择符（派生选择符/上下文选择符）上下文选择符）EF匹配元素E的任意后代任意后代元
8、素Fpbcolor:red将出现在将出现在p之内任何位置的任何位置的b元素的文本颜色设置为红色元素的文本颜色设置为红色pb，h1subcolor:green将出现在将出现在p之内任何位置的任何位置的b元素和元素和h1之内任何位置的任何位置的sub元素的文本颜色设置为绿色元素的文本颜色设置为绿色3、ID选择符选择符精通HTML语言，完全能手写HTML代码；熟练掌握ASP、ASP.Net、PHP,JAVA、JAVASCRIPT等技术；熟悉网站的管理、设计规划、前台、后台程序制作技术。熟练SQLserver,Oracle数据库管理系统,能够独立完成数据库的开发;#first_parafont-wei
9、ght:bold#first_parafont-weight:bold;letter-spacing:3px;#first_parafont-weight:bold;letter-spacing:3px;font-family:楷体_GB2312;ID选择符的前面是选择符的前面是#号号ID只能在某个HTML文档中出现一次，即ID名称（如first_para）不能重复、类选择符、类选择符商务类人才可以分为五种：商务类人才可以分为五种：一是企业网络营销业务，包括利用网站为企业开拓网上业务、网络品牌管理、客户服一是企业网络营销业务，包括利用网站为企业开拓网上业务、网络品牌管理、客户服务等；二是网上国
10、际贸易，包括利用网络平台开发国际市场、进行国际贸易；务等；二是网上国际贸易，包括利用网络平台开发国际市场、进行国际贸易；三是新型网络服务商的内容服务，包括频道规划、信息管理、频道推广、客户服务等；三是新型网络服务商的内容服务，包括频道规划、信息管理、频道推广、客户服务等；四是电子商务支持系统的推广，负责销售电子商务系统和提供电子商务支持服务、客四是电子商务支持系统的推广，负责销售电子商务系统和提供电子商务支持服务、客户管理等；五是创业，包括利用虚拟市场提供产品和服务，也可以直接为虚拟市场提户管理等；五是创业，包括利用虚拟市场提供产品和服务，也可以直接为虚拟市场提供服务。对于这类人才，一方面要求
11、他们是管理和营销的高手，同时也应熟悉网络虚供服务。对于这类人才，一方面要求他们是管理和营销的高手，同时也应熟悉网络虚拟市场下新的经济规律，另一方面他们必须掌握网络和电子商务平台的基本操作技术。拟市场下新的经济规律，另一方面他们必须掌握网络和电子商务平台的基本操作技术。、类选择符、类选择符-.second_paracolor:red;.second_paracolor:green;background-color:#e8d3e3;类选择符通过直接引用元素中类选择符通过直接引用元素中类属性的值类属性的值而产生效果。在这个引用前面总是一个句点而产生效果。在这个引用前面总是一个句点(.)，用它来标识一
12、个类选择符。这个句点是必要的，因为它可以帮助类选择符与其他，用它来标识一个类选择符。这个句点是必要的，因为它可以帮助类选择符与其他元素相区别。元素相区别。p.second_paracolor:green;background-color:#e8d3e3;样式只对类属性价为样式只对类属性价为second_para的的段落段落起作用起作用、伪类选择符、伪类选择符:link:伪类适用于那些还未被访问的连接:visited:伪类适用于用户已经访问过的连接:hover伪类:用于用户指向一个元素,但还没有激活它的时候:active伪类适用于一个元素被用户激活的时候:focus伪类适用于一个元素获得焦点（接
13、受键盘事件或其它形式的文本输入）的时候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、伪元素、伪元素first-line伪元素伪元素:一个段落的第一个格
14、式化的行应用特殊的样式一个段落的第一个格式化的行应用特殊的样式ThisisasomewhatlongHTMLparagraphthatwillbebrokenintoseverallines.Thefirstlinewillbeidentifiedbyafictionaltagsequence.Theotherlineswillbetreatedasordinarylinesintheparagraph.P:first-linetext-transform:uppercase;color:red;:first-letter伪元素可以用于“词首(首字符或首字)”P:first-lettercol
15、or: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三三者的者的“祖先祖先”，div和strong并非“父/子”关系，而是“祖孙
16、”关系，但strong依然是div的“子（孙）元素”。h1和和p两者是相邻的两者是相邻的EF（父子元素）匹配父元素父元素E的任意子元素F注释注释/*/*Pbackground-color:#FFFF66*/CSS元素分类元素分类在在CSS中，元素被分为三种类型中，元素被分为三种类型:块级元素块级元素:诸如段落、标题、列表、表格、DIV和BODY等元素都是块级(block-level)元素。每个块级元素都从一个新行开始显示，而且其后的元素也需另起一行进行显示。内联元素内联元素:如a,em,span元素及大多数的替换元素，如图像和表单输入元素。它们不必在新行上显示，也不强迫其他元素在新行上显示，而
17、且可以作为任何其他元素的子元素。列表项元素列表项元素在HTML中只包含li元素。它们类似于书签，用干特殊的表示场合(如圆点、字母或数字)。如果它们出现在某种有序列表中，则具有顺序性。如在有序列表中的列表项能依据它们的上下文自动编号。这几种元素占据了display属性值（Block、in1ine、list-item、none）四个值中的三个。如果将元素的display属性设成none，则元素的存在会被浏览器所忽略，而且也不被显示。block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度,等是块元素的inline元素的特点是：和其他
18、元素都在一行上；高，行高及顶和底边距不可改变和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。,和是inline元素的例子用display:inline或display:block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？让一个让一个inline元素从新行开始；元素从新行开始；让块元素和其他元素保持在一行上；让块元素和其他元素保持在一行上；控制控制inline元素的宽度；元素的宽度；控制控制inline元素的高度；元素的高度；HTML块级元素：块级元素：address-地址地址blockquote-块引用块引用div-常用块级容易，
19、也是常用块级容易，也是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）相当于我国新四号铅字的尺寸相当于我国新四号铅字的尺寸即wi
20、ndows系统定义的12字号大小为单位(1pc=12pt)。该单位前输入的数字表示字号大小的倍数。如font-size:2pc;表示文字大小为24pt；是以当前文本的百分比定义尺寸。如font-size:200%是指文字大小为原来的2倍；%百分比百分比-字体、颜色、宽度字体、颜色、宽度像素（像素（px）根据显示器的分辨率来确定长度，在web应用中多采用该单位；像素是相对于显示器屏幕分辨率而言的点数（点数（pt）绝对长度单位。点（）绝对长度单位。点（Point）。）。字体高（字体高（em）表示当前文本的尺寸，）表示当前文本的尺寸，相对长度单位。相对长度单位。相对于当前对象内文本的字体尺寸相对于当
21、前对象内文本的字体尺寸如font-size:2em是指文字大小为原来的2倍；字体字体文本文本颜色背景颜色背景表格表格边框边框定位定位CSS属性属性CSS字体属性字体属性font-familyfont-weightfont-sizefont-stylefont-variant1)font-family:设置或检索用于对象中文本的设置或检索用于对象中文本的字体名称或字体系列名称字体名称或字体系列名称语法：语法：font-family: name(字体名称字体名称) font-family:cursive|fantasy|monospace|serif|sans-serif(字体系列名称字体系列名称
22、)适用于适用于:所有元素所有元素bodycolor:red;font-family:楷体楷体_GB2312字体系列字体系列比如，常见的确字体比如，常见的确字体Times。，实际上。，实际上Times是许多变形的组合，包括是许多变形的组合，包括TimesRegular,TimesBold,TimesItalic,Timespblique,TimesBoldItalic,TimesBoldOblique等等。等等。Times的每一种变形都是一个字体形式的每一种变形都是一个字体形式,Times就是这些字体形就是这些字体形式的组合。也就是说式的组合。也就是说Times是一个字体系列，并不单单是一种是一
23、个字体系列，并不单单是一种.除特定的字体系列，如除特定的字体系列，如Times,Verdana,Arial外，外，CSS还定义还定义了五种一般字体系列了五种一般字体系列:Serif字体字体成比例例且有衬线成比例例且有衬线(serif)的字体的字体,一种字体有比例，是指宇体一种字体有比例，是指宇体中的所有字母根据它们不同的尺寸占据不同的宽度。衬线特指中的所有字母根据它们不同的尺寸占据不同的宽度。衬线特指加在字母上做装饰的细线，加在字母上做装饰的细线，Sansserif字体字体:有比例但没有衬线的字体。有比例但没有衬线的字体。Monospace字体字体无比例的字体。通常用于模拟打字机打出的文本Cu
24、rsive字体字体试图模拟人的笔迹的字体。通常这些字体大部分是由曲线和比衬线字体更强的笔画修饰组成的。Fantasy字体字体不能通过某种单一的特征来定义，而且也不能简单地归为其他系列的某一类的那些字体。这样的字体较少.2)font-weight：设置或检索对象中的文本字体的粗细。Normal(初始值)、bold、bolder、lighter、100900适用于适用于:所有元素所有元素divfont-weight:bolddivfont-weight:lighter3)font-size：字体尺寸字体尺寸允许值允许值:xx-small、x-small、small、medium(初始值)、larg
25、e、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(默认值默认值)、small-caps（小型的（小型的大写字母大
26、写字母字体字体）适用于：所有元素适用于：所有元素spanfont-variant:small-caps;CSS文本属性文本属性text-indenttext-aligntext-decorationletter-spacingword-spacingtext-transformwhite-spaceline-heightvertical-align1）text-indent：文本首行首行的缩进。允许值：长度、百分比适用于：块级元素spantext-indent:1.25in;首行缩进四分之一英寸首行缩进四分之一英寸spantext-indent:-10em;spantext-indent:-5
27、%;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）text-transform:该属性控制某元素文本的大
28、小写效果该属性控制某元素文本的大小写效果值：capitalize|uppercase|lowercase|nonecapitalize将每个单词的首字符变为大写。uppercase将每个单词的所有字符变为大写。lowercase将每个单词的所有字符变为小写适用于：所有元素divtext-transform:capitalizedivtext-transform:uppercase7)white-space:该属性声明了元素内的该属性声明了元素内的空白空白是如何处理的是如何处理的值：normal|pre|nowrap|适用于：块级元素normal该值告诉用户端，合并一系列的空白，在必要的时分行p
29、re该值阻止用户端合并一系列的空白nowrap该值象normal那样合并空白，但是阻止文本内的分行divtext-transform:uppercase;white-space:nowrap8）line-height:行高，行高，行高指的是文本行的基线间的距离行高指的是文本行的基线间的距离允许值允许值:长度、百分比、数字、长度、百分比、数字、normal适用于：所有元素divline-height:2emdivline-height:0.5indivline-height:32pt9）vertical-align允许值允许值:baseline、sub、super、bottom、text一bot
30、tom、middle、top、Text-top、百分比适用于：内联元素适用于：内联元素,和是inline元素arryispanvertical-align:subspanvertical-align:-200%color属性属性background-colorbackgraund-imagebackground-repeatbackground-positionbackground-attachmentCSS颜色背景属性颜色背景属性在在CSS中，可以设置任何元素的前景色和背景色，从中，可以设置任何元素的前景色和背景色，从BODY元素到下划线和斜体标记，几乎所有的一切元素到下划线和斜体标记，几乎
31、所有的一切:列表项、列表项、整个列表、标题、超链接、表格单元、表单元素整个列表、标题、超链接、表格单元、表单元素.前景色前景色设置前景色的最简便方法是用设置前景色的最简便方法是用css的的color属性。属性。color属性属性适用于适用于: :所有元紊所有元紊p(color:yellow;div(color:blue;p.second_para1color:blue/*类标识为类标识为second_para1的段落文本颜色为蓝色的段落文本颜色为蓝色*/p#second_para1color:red/*ID标识为标识为second_para1的段落文本颜色为红色的段落文本颜色为红色*/p#se
32、cond_para1a:linkcolor:red/*ID标识为标识为second_para1的段落中的链接文本颜色为红色的段落中的链接文本颜色为红色*/p#second_para1a:linkcolor:red/*类标识类标识标识为标识为second_para1的段落中的链接文本颜色为红色的段落中的链接文本颜色为红色*/颜色属性也可以应用于表单颜色属性也可以应用于表单(form)元素。元素。input#the-inputcolor:red;背景颜色背景颜色background-color允许值允许值或或transparent适用于适用于: :所有元紊所有元紊Pbackground-color
33、:#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使图像在两个方向平铺使图像在两个方向平铺rep
34、eat-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:repeat-x;background-po
35、sition:top要使背景图像横跨元素的三分之一，纵跨三分之二，可以按如下声明要使背景图像横跨元素的三分之一，纵跨三分之二，可以按如下声明bodybackground-image:url(03.gif);background-repeat:no-repeat;background-position:33%66%使得背景图像的中心同其父元素中心对齐使得背景图像的中心同其父元素中心对齐background-position:50%50%背景图像位置背景图像位置background-position长度值长度值当用长度值来决定背景图像的位置时，它们被解释为相当用长度值来决定背景图像的位置时，它们被
36、解释为相对于元素左上角的偏移量。背景图像上的偏移点也为左对于元素左上角的偏移量。背景图像上的偏移点也为左_ _匕角的匕角的那个点。那个点。如果设置为如果设置为20px 30px20px 30px，那么图像的左上角将位于元素左，那么图像的左上角将位于元素左上角往右上角往右2020个像素，往下个像素，往下3030个像素的位置个像素的位置background-position:50px80px而且，长度值和百分比值还可以为负，这将使图像以某而且，长度值和百分比值还可以为负，这将使图像以某种程度偏离元素。可以只让图像的一部分显示于元素上种程度偏离元素。可以只让图像的一部分显示于元素上阻止图像随文本滚动
37、阻止图像随文本滚动:background-attachment使用使用background-attachment属性，可以使背景图像固定在视野范围内，以避免出属性，可以使背景图像固定在视野范围内，以避免出现因滚动而消失的效果现因滚动而消失的效果:背景图象设置在背景图象设置在body上上允许值：允许值：scroll、fixedbodybackground-image:url(03.gif);background-repeat:no-repeat;background-position:50px80px;background-attachment:fixed背景属性可综合写到一个缩略属性中，可按任
38、意顺序排列背景属性可综合写到一个缩略属性中，可按任意顺序排列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-alphaa，b，c，d，e，upper-ro
39、manI，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定位与一个列表项有关的记号定位与一个列表项有关的记号:是在与列表有关的块外面还是里面。是在与列表有关的块外面还是里面。允许值允许值：inside|
40、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-style:dotted列表项单个项目列
41、表项单个项目12ullist-style:upper-alphaoutsideurl(03.gif);border-style:dashed#templist-style:upper-alphainsideurl(03.gif);border-style:dottedWidthHeightBorder-widthBorder-styleBorder-colorPadding-内边距内边距Margin外边距外边距CSS框属性框属性CSS中，所有文档元素都生成一个矩形框，称之为元素中，所有文档元素都生成一个矩形框，称之为元素框。这个框描述了元素及其属性在文档布局中所占的空间大小，框。这个框描述了元
42、素及其属性在文档布局中所占的空间大小，因此每个框都可以影响其他元素的位置及大小因此每个框都可以影响其他元素的位置及大小内容宽度内容宽度width标签标记的内容标签标记的内容给内容加边框给内容加边框内内容容高高度度height边框边框border边框与内容之间的部分称为边框与内容之间的部分称为边白（内边距）边白（内边距）（padding）如果边白为如果边白为0，则边白边和内容边重合，则边白边和内容边重合内容宽度内容宽度width标签标记的内容标签标记的内容给内容加边框给内容加边框内内容容高高度度height边框边框border上边白上边白Padding-top右边白右边白Padding-righ
43、t下边白下边白Padding-bottom左边白左边白Padding-left边框外为边框外为边界边界（margin）-框的外框框的外框如果边界为如果边界为0，则边界与边框重合，则边界与边框重合内容宽度内容宽度width标签标记的内容标签标记的内容给内容加边框给内容加边框内内容容高高度度height边框边框border上边白上边白Padding-top右边白右边白Padding-right下边白下边白Padding-bottom左边白左边白Padding-leftmargin-top上边界上边界margin-bottom下边界下边界margin-right右边界右边界margin-right左
44、边界左边界框的属性及属性值框的属性及属性值边框属性设置框的边框属性设置框的边框区边框区的宽度，颜色和样式的宽度，颜色和样式通常情况下，一个元素的通常情况下，一个元素的widthwidth定义为左侧内部边线到右侧内部边定义为左侧内部边线到右侧内部边线的趾离线的趾离heightheight定义为上内边线到下内边线的距离。定义为上内边线到下内边线的距离。width允许值允许值、auto初始值：初始值：auto:元素框宽度等于父元素宽度元素框宽度等于父元素宽度适用于：块级元紊和替换元紊适用于：块级元紊和替换元紊百分比是指相对于父元素的宽度。百分比是指相对于父元素的宽度。helght允许值：允许值：、a
45、uto初始值：初始值：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，border-left-style)取值：取值：n
46、one:没有边框dotted：边框是一系列的点。dashed边框是一系列的短线条的段。solid边框是一条单一的线。double边框有两条实线。两条线宽+空白的宽度之和等于border-width的值。groove边框看上去好象是雕刻在画布之内。ridge和grove相反：边框看上去好象是从画布中凸出来。inset该边框使整个框看上去好象是嵌在画布中。outset和inset相反：该边框使整个框看上去好象是从画布中凸出来边框边框样式样式border-style示例示例#kuangtext-align:center;width:20%;height:50px;border-top-style:d
47、otted;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一个厚边框。边框的厚度是显式值。显式的边框宽度不能为负数。边框边框宽度宽度border-width示例示例#kuangte
48、xt-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组合写法：组合写法：如果只有一个值，它适用于所有四边。如果有两个值，顶如果只有一个值，它适用于所有四边。
49、如果有两个值，顶底边框采用第一个值，左右边框采用第二个值。如果有三底边框采用第一个值，左右边框采用第二个值。如果有三个值，顶边框采用第一个值，左右边框采用第二个值，而个值，顶边框采用第一个值，左右边框采用第二个值，而底边框采用第三个值。如果有四个值，它们分别适用于顶，底边框采用第三个值。如果有四个值，它们分别适用于顶，右，底，左四边。右，底，左四边。边框边框颜色颜色border-color属性及属性值属性及属性值border-top-color，border-right-color，border-bottom-color，border-left-color及组合写法及组合写法border-co
50、lor颜色值：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属性及属性值属性及属性值内边距是元素的边框和内容之间的距离，适用于任何元
51、素内边距是元素的边框和内容之间的距离，适用于任何元素padding-top，padding-right，padding-bottom，padding-left及组合写法及组合写法padding取值：指定一个确定宽度。百分比的计算基于生成的框的包含块的宽度padding：如果只有一个值，它适用于所有四边。如果有两个值，顶底边白设置为第一个值而左右边距设置为第二个值。如果有三个值，顶边白设置为第一个值，左右边白设置为第二个值，底边白设置为第三个值。如果有四个值，它们分别设置顶，右，底，左边白。divborder-width:thin;border-style:dashed;border-top-c
52、olor: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如果仅有一个值，它将应用于所有四边。如果有两个值，顶底边距如果仅有一个值，它将应用于所有四边
53、。如果有两个值，顶底边距设置为第一个值，左右边距设置为第二个值。如果有三个值，顶边距设置为设置为第一个值，左右边距设置为第二个值。如果有三个值，顶边距设置为第一个值，左右边距设置为第二个值，底边距设置为第三个值。如果有四个第一个值，左右边距设置为第二个值，底边距设置为第三个值。如果有四个值，它们分别设置顶，右，底，左边距。值，它们分别设置顶，右，底，左边距。margin-top:1em;margin-right:50;margin-bottom:3em;margin-left:2em;使块级元素居中于父元素使块级元素居中于父元素ssssssssssssssssssssCSSCSS外边距外边距(
54、 (界界) )属性及属性值属性及属性值使块级元素居中于父元素：使块级元素居中于父元素：左右外边距设置为左右外边距设置为auto#the-divwidth=400px;height=200px;border:solid#the-pwidth:100px;height:40px;border:dashed;margin-left:auto;margin-right:auto样式属性在链接上的应用样式属性在链接上的应用链接链接是行内元素，这意味着只有在单击链接的内容时它们才会激活。但是，有是行内元素，这意味着只有在单击链接的内容时它们才会激活。但是，有时候希望实现像按钮的效果，有更大的可单击区域。为
55、此可以将锚的时候希望实现像按钮的效果，有更大的可单击区域。为此可以将锚的display属性设属性设置为置为block，然后修改，然后修改width、height和其他属性来创建需要的样式和单击区域。和其他属性来创建需要的样式和单击区域。样式属性在样式属性在链接上的应用链接上的应用搜狐搜狐新浪新浪网易网易ula:linkcolor:redula:visitedcolor:blackula:hovercolor:blue;ula:activecolor:yellow;a:visitedcolor:black;text-decoration:none;/*把链接的默认下划线去掉*/border-bo
56、ttom-width:1px;border-bottom-style:dashed;border-bottom-color:red;/*border-bottom:1pxdashedred;*/line-height:150%;样式属性在样式属性在链接链接上的应用上的应用ulborder:1pxsolid#333;width:120px;margin:5px;padding:2px;list-style-type:none;libackground:#DDDDDD;border-bottom:1pxsolid#666;使链接不局限于链接文字使链接不局限于链接文字ula:link,ula:vis
57、ited,ula:hover,ula:activetext-decoration:none;display:block;/*把链接定义为块元素把链接定义为块元素*/width:100%/*把链接宽度定义为包含块的宽度把链接宽度定义为包含块的宽度*/样式属性在样式属性在表格上表格上的应用的应用金牌金牌银牌银牌铜牌铜牌中国中国788056俄罗斯俄罗斯788056美国美国788056英国英国788056thtext-align:center;color:blue;background:#e99;width:80px;tdborder-style:solid;border-width:1px;tabl
58、eborder-collapse:collapse;/*去掉行之间的间隔去掉行之间的间隔*/样式属性在样式属性在表格上表格上的应用的应用金牌金牌银牌银牌铜牌铜牌中国中国788056俄罗斯俄罗斯788056美国美国788056英国英国788056.singlebackground:yellow;.doublebackground:#799;有关有关表单元素表单元素上的应用上的应用(略略)学号学号*:姓名姓名*:.base-inputdisplay:block;border:none;border-bottom:2pxsolidblack;color:blue;浮动浮动float-使一个元素脱离元
59、素自然流使一个元素脱离元素自然流允许值允许值:left、right、none初始值初始值:none适用于适用于:所有元素所有元素对象浮动时，对象将被视作块对象对象浮动时，对象将被视作块对象(block-level)，即，即display属性等于属性等于block.就是说，浮动对象的就是说，浮动对象的display特性将被忽略特性将被忽略。div1div2div3#div1border:1pxsolid#000;background-color:#bbb;height:40px;width:40px;/*float:right*/#div2border:1pxsolid#000;backgrou
60、nd-color:#bbb;height:40px;width:40px;float:right/*浮动浮动-浮动后浮动元素后面的元素将占据浮动元素的位置浮动后浮动元素后面的元素将占据浮动元素的位置*/#div3border:1pxsolid#000;background-color:#bbb;height:40px;width:40px;/*float:right*/clear:right;/*使浮动元素后面的元素保持原来的位置使浮动元素后面的元素保持原来的位置*/浮动浮动float例子例子floatandleft对象浮动时，对象将被视作块对象对象浮动时，对象将被视作块对象(block-le
61、vel)，即，即display属性等于属性等于block.就就是说，浮动对象的是说，浮动对象的display特性将被忽略特性将被忽略/*p块级元素换行块级元素换行*/#containerborder:1pxsolid#000;background-color:#bbb;padding:20px;使图象浮动，首先将使图象浮动，首先将IMG元素包含在一个元素包含在一个元素中，这样可以添加更多样式元素中，这样可以添加更多样式.img-floatfloat:left;margin:05px5px0;清除清除clear在浮动元素之后的元素将环绕在浮动元素周围，一个图象浮动在左边，如在浮动元素之后的元素将
62、环绕在浮动元素周围，一个图象浮动在左边，如果其后的段落文本足够长，文本将环绕在图象周围，如果不希望看到这种果其后的段落文本足够长，文本将环绕在图象周围，如果不希望看到这种情况，情况，可以对浮动元素之后的元素应用清除可以对浮动元素之后的元素应用清除clear允许值:left、right、both、none初始值:none适用于:所有元素none:默认值。允许两边都可以有浮动对象默认值。允许两边都可以有浮动对象left:不允许左边有浮动对象不允许左边有浮动对象right:不允许右边有浮动对象不允许右边有浮动对象both:不允许有浮动对象不允许有浮动对象Pclear:left可以确保p左边没有浮动元
63、素CSSCSS定位定位positionposition属性属性允许值允许值:static、relative、absolute、fixed、inherit初始值初始值:static适用于适用于:所有元紊所有元紊relative:设置此属性值为设置此属性值为relative会保持对象在正常的会保持对象在正常的HTML流中。如果对一个流中。如果对一个元素进行相对定位，可以通过设置元素进行相对定位，可以通过设置left，right，top，bottom等属性在正常文档等属性在正常文档流中偏移位置，让这个元素流中偏移位置，让这个元素“相对于相对于”它的起点进行移动。它的起点进行移动。absolute:绝
64、对定位使元素的位置与文档流无关，绝对定位使元素的位置与文档流无关，absolute会将对象拖离出会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局正常的文档流绝对定位而不考虑它周围内容的布局，使用，使用left，right，top，bottom等属性相对于其最接近的一个具有定位设置的父对象进行绝对定位。等属性相对于其最接近的一个具有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据如果不存在这样的父对象，则依据body对象。而其层叠通过对象。而其层叠通过z-index属性属性定义定义,假如其他具有不同假如其他具有不同z-index属性的对象已经占据了给定的位置，他们属性的对象
65、已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。之间不会相互影响，而会在同一位置层叠。要激活对象的绝对要激活对象的绝对(absolute)定位，除设置此属性值为定位，除设置此属性值为absolute,还必须指定还必须指定left，right，top，bottom属性中的至少一个，否则上述属属性中的至少一个，否则上述属性会使用他们的默认值性会使用他们的默认值auto，这将导致对象遵从正常的，这将导致对象遵从正常的HTML布局规则布局规则对于定位的主要问题是要记住每种定位的意义。相对定位是对于定位的主要问题是要记住每种定位的意义。相对定位是“相对于相对于”元元素在文档流中的初始位置
66、，而绝对定位是素在文档流中的初始位置，而绝对定位是“相对于相对于”最近的已定位祖先元素最近的已定位祖先元素。偏移属性偏移属性top、bottom、left、right(当当position属性值为属性值为relative、absolute、fixed(IE以下版本不支持以下版本不支持)适用于适用于:定位元素定位元素允许值：允许值：、auto初始值初始值:auto绝对定位的对象不具有绝对定位的对象不具有边距边距margin，但仍有，但仍有补白补白padding和和边边框框border#containerborder:1pxsolid#000;background-color:#bbb;width
67、:400px;height:400px;imgposition:relative;left:80px;top:30px;绝对定位绝对定位以它最近定位的父元素作为参考点，如果没有定位的父元素，以它最近定位的父元素作为参考点，如果没有定位的父元素，则以视窗为起点则以视窗为起点imgposition:absolute;left:180px;top:130px;#containerborder:1pxsolid#000;background-color:#bbb;width:400px;height:400px;position:relative;注释掉效果不一样注释掉效果不一样-有定位的父元素有定位
68、的父元素*left:80px;在进行页面布局时，在进行页面布局时，绝对定位是非常有用的工具，尤其是在使用相对定位的绝对定位是非常有用的工具，尤其是在使用相对定位的祖先元素的情况下祖先元素的情况下。完全可能只使用绝对定位创建出整个设计。为此，这些。完全可能只使用绝对定位创建出整个设计。为此，这些元素需要具有固定尺寸，这样就能够将它们定位在任何地方而不会有重叠的元素需要具有固定尺寸，这样就能够将它们定位在任何地方而不会有重叠的风险。风险。因为绝对定位的元素与文档流无关，所以它们不影响普通流中的框。因为绝对定位的元素与文档流无关，所以它们不影响普通流中的框。如果扩大绝对定位的框如果扩大绝对定位的框(
69、例如，通过增加字号例如，通过增加字号)，周围的框不会重新定位。，周围的框不会重新定位。布局布局让容器让容器div在屏幕上水平居中在屏幕上水平居中:#containerbackground-color:silver;width:80%;margin:auto;只需定义容器只需定义容器div的宽度，然后将水平空白边设置为的宽度，然后将水平空白边设置为autobodytext-align:center;*IE将将text-align:center误解为让所有东西居误解为让所有东西居中中，而不只是文本，而不只是文本*/浮动两列布局浮动两列布局headcontentsidebaritemoneitemt
70、woitemthreeitemfourcontentfoothere浮动两列布局浮动两列布局css#headborder:1pxsolid#000;#sidebarborder:1pxsolidblue;float:right;width:36%;#contentfloat:left;border:1pxsolidred;width:63%;#footerborder:1pxsolidred;clear:both;浮动三列布局浮动三列布局headcontentsidebaritemoneitemtwoitemthreeitemfoursidebaritemoneitemtwoitemthree
71、itemfourcontentfoothere浮动三列布局浮动三列布局bodymargin:010px010px;#headborder:1pxsolid#000;#sidebar-afloat:left;width:150px;border:1pxsolidblue;#sidebar-bborder:1pxsolidblue;float:right;width:150px;#contentborder:1pxsolidgreen;margin-left:152px;/*为浮动的元素流出空间*/margin-right:152px;/*为浮动的元素流出空间*/#footerborder:1px
72、solidred;clear:both;固定三列布局固定三列布局headcontentitemoneitemtwoitemthreeitemfoursidebaritemoneitemtwoitemthreeitemfourcontentfoothere固定三列布局固定三列布局+cssbodymargin:05px05px#headborder:1pxsolid#000;height:60px;#sidebar-aposition:absolute;width:20%;border:1pxsolidblue;top:62px;left:5px;#sidebar-bposition:absolute;border:1pxsolidred;top:62px;right:5px;width:20%;#contentborder:1pxsolidred;margin-left:20%;margin-right:20%;#footerborder:1pxsolidred;margin:020%020%;
