网页设计与制作C课件_第1页
网页设计与制作C课件_第2页
网页设计与制作C课件_第3页
网页设计与制作C课件_第4页
网页设计与制作C课件_第5页
已阅读5页，还剩57页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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

1、内联样式(inlinestyle)是连接样式和标签的最简单的方式，只需在标签中包含一个style属性，后面再跟一列属性及属性值即可。浏览器会根据样式属性及其值来表现标签中的内容。<H1style="color:blue">Bach'shomepage</H1><H1style="color:blue;font-style:italic">Bach'shomepage</H1>因为内联样式会向其标签的定义中添加更多内容，所以它们难维护，也难以阅读。 样式是一个规则，告诉浏览器如何表现特定的HTML或XHTM2、文档级样式表将样式表放在<head>内的<style>标签和(/style>结束标签之间，就会影响文档中所有相同标签的内容<style>标签功能:定义文档级样式表属性:dir lang media title type<style>和</style>标签之间的所有内容都将被看作是样式规则的一部分type属性级联样式表全部都是text/css类型;JavaScript样式表使用的类型则是text/javascript<html><head><title>Bach'shomepage</title><styletype="text/css"> h1{color:blue;font-style:italic}</style><body><h1>Bach'shomepage</h1><p>JohannSebastianBachwasaprolificcomposer.</p></body></html>2、文档级样式表3、链接式外部样式表当在文档的<head>标签中使用<link>标签

<html><head><title>Bach'shomepage</title><linkrel="stylesheet"href=“sheet1.css"type="text/css"><linkrel="stylesheet"href=“sheet2.css"type="text/css"></head><body><h1>Bach'shomepage</h1><p>JohannSebastianBachwasaprolificcomposer.</p></body></html>link元素规定了：链接类型：指向“stylesheet”。通过“href”属性，指定了样式表的位置。链接的样式表的类型：“text/css”。3、链接式外部样式表样式语法：样式的语法(规则)样式规则至少由三个基本部分组成:1、选择符selector：HTML或XHTML标记元素的名称，2、大括号{}3、大括号{}括起来并用分号分隔的样式列表（样式:”ＣＳＳ属性:属性值”）selector{propertyl:valuel;property2:value2;...}例如：h1{color:purple;font-style:italic}样式的种类：１、单个的简单选择符（只有一个标记）h1{color:blue;font-style:italic}２分组选择符（集合选择符）具有相同样式的选择符可以写在一起，中间用逗号分开。如：h1,h2,h3{color:red;font-style:italic}3、嵌套选择符（派生选择符/上下文选择符）EF匹配元素E的任意后代元素Fpb{color:red}将出现在p之内任何位置的b元素的文本颜色设置为红色

pb，h1sub{color:green}将出现在p之内任何位置的b元素和h1之内任何位置的sub元素的文本颜色设置为绿色

样式语法：样式的语法(规则)3、ID选择符<pid="first_para">精通HTML语言，完全能手写HTML代码；<br>熟练掌握ASP、ASP.Net、PHP,JAVA、JAVASCRIPT等技术；<br>熟悉网站的管理、设计规划、前台、后台程序制作技术。<br>熟练SQLserver,Oracle数据库管理系统,能够独立完成数据库的开发;<br></p>#first_para{font-weight:bold}#first_para{font-weight:bold;letter-spacing:3px;}#first_para{font-weight:bold;letter-spacing:3px;font-family:"楷体_GB2312";}ID选择符的前面是#号ID只能在某个HTML文档中出现一次，即ID名称（如first_para）不能重复４、类选择符<pclass="secobd_para">商务类人才可以分为五种：一是企业网络营销业务，包括利用网站为企业开拓网上业务、网络品牌管理、客户服务等；二是网上国际贸易，包括利用网络平台开发国际市场、进行国际贸易；<br>三是新型网络服务商的内容服务，包括频道规划、信息管理、频道推广、客户服务等；四是电子商务支持系统的推广，负责销售电子商务系统和提供电子商务支持服务、客户管理等；五是创业，包括利用虚拟市场提供产品和服务，也可以直接为虚拟市场提供服务。对于这类人才，一方面要求他们是管理和营销的高手，同时也应熟悉网络虚拟市场下新的经济规律，另一方面他们必须掌握网络和电子商务平台的基本操作技术。</p>3、ID选择符４、类选择符<pclass="second_para"></p>.second_para{color:red;}.second_para{color:green;background-color:#e8d3e3;}类选择符通过直接引用元素中类属性的值而产生效果。在这个引用前面总是一个句点(.)，用它来标识一个类选择符。这个句点是必要的，因为它可以帮助类选择符与其他元素相区别。p.second_para{color:green;background-color:#e8d3e3;}样式只对类属性价为second_para的段落起作用．５、伪类选择符:link:伪类适用于那些还未被访问的连接:visited:伪类适用于用户已经访问过的连接:hover伪类:用于用户指向一个元素,但还没有激活它的时候

:active伪类适用于一个元素被用户激活的时候:focus伪类适用于一个元素获得焦点（接受键盘事件或其它形式的文本输入）的时候４、类选择符a{color:purple}a:link{color:red}a:visited{color:blue}a:hover{color:blue;}a:active{color:yellow}<aclass="student"href="#">学生作品</a>a.student:visited{color:purple;}a.student:link,a.student:visited{color:red;}注意a:hover必须放置在a:link和a:visited规则之后，否则层叠规则将隐藏a:hover的'color'属性。

6、伪元素first-line伪元素:一个段落的第一个格式化的行应用特殊的样式<P>ThisisasomewhatlongHTMLparagraphthatwillbebrokenintoseverallines.Thefirstlinewillbeidentifiedbyafictionaltagsequence.Theotherlineswillbetreatedasordinarylinesintheparagraph.</P>.P:first-line{text-transform:uppercase;color:red;}:first-letter伪元素可以用于“词首(首字符或首字)”P:first-letter{color:green;font-size:200%;font-style:italic;}a{color:purple}6、伪元素通配选择符**{margin:0;padding:0;}元素间的关系：<divtitle="这是一个div"> <h1>这是是h1的内容</h1> <p>这是一个段落p的内容<strong>这里是strong的内容</strong></p></div>div同h1和p形成“父/子”关系，div是h1和p的“父元素”。p

和strong形成“父/子”关系，strong的“父元素”是p。

h1,p,strong都是div的“子元素”（三者都包含在div之内）div是h1pstrong三者的“祖先”，div和strong并非“父/子”关系，而是“祖孙”关系，但strong依然是div的“子（孙）元素”。h1和p两者是相邻的E>F（父子元素）匹配父元素E的任意子元素F注释/**//*P{background-color:#FFFF66}*/通配选择符*CSS元素分类在CSS中，元素被分为三种类型:块级元素:

诸如段落、标题、列表、表格、DIV和BODY等元素都是块级(block-level)元素。每个块级元素都从一个新行开始显示，而且其后的元素也需另起一行进行显示。内联元素:如a,em,span元素及大多数的替换元素，如图像和表单输入元素。它们不必在新行上显示，也不强迫其他元素在新行上显示，而且可以作为任何其他元素的子元素。列表项元素在HTML中只包含li元素。它们类似于书签，用干特殊的表示场合(如圆点、字母或数字)。如果它们出现在某种有序列表中，则具有顺序性。如在有序列表中的列表项能依据它们的上下文自动编号。 这几种元素占据了display属性值（Block、in1ine、list-item、none）四个值中的三个。如果将元素的display属性设成none，则元素的存在会被浏览器所忽略，而且也不被显示。block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度,<div>,<p>,<h1>,<form>等是块元素的CSS元素分类inline元素的特点是：

和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。<span>,<a>,<label>,<input>,<img>,<strong>和<em>是inline元素的例子用display:inline或display:block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？让一个inline元素从新行开始；让块元素和其他元素保持在一行上；控制inline元素的宽度；控制inline元素的高度；inline元素的特点是：HTML块级元素：address-地址blockquote-块引用div-常用块级容易，也是csslayout的主要标签dl-定义列表fieldset-form控制组form-交互表单h1-大标题h2-副标题h3-3级标题h4-4级标题h5-5级标题h6-6级标题hr-水平分隔线ol–有序列表p-段落pre-格式化文本table-表格ul–无序列表HTML块级元素：英寸（in）、厘米（cm）和毫米（mm）根据显示的实际尺寸来确定长度。此类单位不随显示器分辨率的改变而改变12pt字（pc）相当于我国新四号铅字的尺寸

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

字体高（em）表示当前文本的尺寸，相对长度单位。相对于当前对象内文本的字体尺寸

如{font-size:2em}是指文字大小为原来的2倍；英寸（in）、厘米（cm）和毫米（mm）12pt字（pc）相字体文本颜色背景表格边框定位CSS属性字体CSS属性CSS字体属性font-familyfont-weightfont-sizefont-stylefont-variantCSS字体属性font-family1)font-family:设置或检索用于对象中文本的字体名称或字体系列名称语法：

font-family:name(字体名称)

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

除特定的字体系列，如Times,Verdana,Arial外，CSS还定义了五种一般字体系列:Serif字体成比例例且有衬线(serif)的字体,一种字体有比例，是指宇体中的所有字母根据它们不同的尺寸占据不同的宽度。衬线特指加在字母上做装饰的细线，Sansserif字体:有比例但没有衬线的字体。1)font-family:设置或检索用于对象中文本的字体Monospace字体无比例的字体。通常用于模拟打字机打出的文本Cursive字体试图模拟人的笔迹的字体。通常这些字体大部分是由曲线和比衬线字体更强的笔画修饰组成的。Fantasy字体不能通过某种单一的特征来定义，而且也不能简单地归为其他系列的某一类的那些字体。这样的字体较少.2)font-weight：设置或检索对象中的文本字体的粗细。Normal(初始值)、bold、bolder、lighter、100~900适用于:所有元素div{font-weight:bold}div{font-weight:lighter}3)font-size：字体尺寸允许值:xx-small、x-small、small、medium(初始值)

、large、x-large、x-large、larger、smaller、长度（pt|px|cm|in|mm）、百分比(%)适用于:所有元素p{font-size:xx-large}p{font-size:30px}p{font-size:150%}Monospace字体4)font-style：字体样式Normal(默认值)、italic（斜体）、oblique（倾斜的字体）适用于：所有元素div{font-style:italic}5）font-variant：字体变形Normal(默认值)、small-caps（小型的大写字母字体）适用于：所有元素span{font-variant:small-caps;}

4)font-style：字体样式CSS文本属性text-indenttext-aligntext-decorationletter-spacingword-spacingtext-transformwhite-space

line-heightvertical-alignCSS文本属性text-indent1）text-indent：文本首行的缩进。允许值：长度、百分比适用于：块级元素span{text-indent:1.25in;}首行缩进四分之一英寸span{text-indent:-10em;}span{text-indent:-5%;}2）text-alignLeft、right、center、justify

适用于：

块级元素p{text-align:right;}3）text-decoration下划线，上划线，删除线，闪烁none、underline、overline、line-through、blink适用于：

所有元素

P{text-decoration:line-through}4)letter-spacing字母间距适用于：

所有元素

P{letter-spacing:0.5em}5)word-spacing:单词之间的间距适用于：

所有元素P{word-spacing:1em}1）text-indent：文本首行的缩进。6）text-transform:该属性控制某元素文本的大小写效果

值：

capitalize|uppercase|lowercase|nonecapitalize

将每个单词的首字符变为大写。uppercase

将每个单词的所有字符变为大写。lowercase

将每个单词的所有字符变为小写适用于：

所有元素

div{text-transform:capitalize}div{text-transform:uppercase}7)white-space:该属性声明了元素内的空白是如何处理的

值：

normal|pre|nowrap|适用于：

块级元素

normal

该值告诉用户端，合并一系列的空白，在必要的时分行pre

该值阻止用户端合并一系列的空白nowrap

该值象'normal'那样合并空白，但是阻止文本内的分行div{text-transform:uppercase;white-space:nowrap}6）text-transform:该属性控制某元素文本的大小8）line-height:行高，行高指的是文本行的基线间的距离允许值:长度、百分比、数字、normal适用于：所有元素div{line-height:2em}div{line-height:0.5in}div{line-height:32pt}9）vertical-align允许值:baseline、sub、super、bottom、text一bottom、middle、top、Text-top、百分比适用于：内联元素<span>,<a>,<label>,<input>,<img>,<strong>和<em>是inline元素[arry]<span>i</span>

span{vertical-align:sub}span{vertical-align:-200%}8）line-height:行高，行高指的是文本行的基线间color属性background-colorbackgraund-imagebackground-repeatbackground-positionbackground-attachmentCSS颜色背景属性color属性CSS颜色背景属性网页设计与制作C课件网页设计与制作C课件网页设计与制作C课件网页设计与制作C课件 在CSS中，可以设置任何元素的前景色和背景色，从BODY元素到下划线和斜体标记，几乎所有的一切:列表项、整个列表、标题、超链接、表格单元、表单元素.前景色设置前景色的最简便方法是用css的color属性。color属性适用于:所有元紊p(color:yellow;}div(color:blue;}p.second_para1{color:blue}

/*类标识为second_para1的段落文本颜色为蓝色*/p#second_para1{color:red}/*ID标识为second_para1的段落文本颜色为红色*/p#second_para1a:link{color:red}/*ID标识为second_para1的段落中的链接文本颜色为红色*/p#second_para1a:link{color:red}/*类标识标识为second_para1的段落中的链接文本颜色为红色*/颜色属性也可以应用于表单(form)元素。input#the-input{color:red;} 在CSS中，可以设置任何元素的前景色和背景色，从BODY元背景颜色background-color允许值<颜色>或transparent适用于:所有元紊P{background-color:#ccccff}a:link{background-color:silver;}p.second_paraa:link{background-color:silver;}背景图像backgraund-image允许值:<url>适用于:所有元紊body{background-image:url(bg1.JPG)}p{background-image:url(c3.gif)}div{background-image:url(bg1.jpg)}background-repeat允许值Repeat、no-repeat、repeat-x、repeat-yrepeat使图像在两个方向平铺repeat-x、repeat-y:使图像分别在水平和垂直方向上平铺初始值:repeat背景颜色body{background-image:url(03.gif);background-repeat:repeat-y;}背景图像位置background-position适用于块级元素和替换元素允许值：left、right、top、bottom、center、百分比、长度值body{background-image:url(03.gif);background-repeat:repeat-x;background-position:top}要使背景图像横跨元素的三分之一，纵跨三分之二，可以按如下声明body{background-image:url(03.gif);background-repeat:no-repeat;background-position:33%66%}使得背景图像的中心同其父元素中心对齐background-position:50%50%body{背景图像位置background-position长度值

当用长度值来决定背景图像的位置时，它们被解释为相对于元素左上角的偏移量。背景图像上的偏移点也为左_匕角的那个点。 如果设置为20px30px，那么图像的左上角将位于元素左上角往右20个像素，往下30个像素的位置background-position:50px80px

而且，长度值和百分比值还可以为负，这将使图像以某种程度偏离元素。可以只让图像的一部分显示于元素上．阻止图像随文本滚动:background-attachment使用background-attachment属性，可以使背景图像固定在视野范围内，以避免出现因滚动而消失的效果:－－背景图象设置在body上允许值：scroll、fixedbody{background-image:url(03.gif);background-repeat:no-repeat;background-position:50px80px;background-attachment:fixed}背景属性可综合写到一个缩略属性中，可按任意顺序排列背景图像位置background-position长度值list-style-typelist-style-imagelist-style-positionlist-style（组合使用以上３属性）CSS列表项属性list-style-typeCSS列表项属性列表属性CSS2标准允许控制列表元素的外观—尤其是有序和无序列表。1、list-style-type允许值Disc 实心圆Circle 常空心圆Square 空心方块Decimal 1，2，3，4，5，upper-alpha A，B，C，D，E，…lower-alpha a，b，c，d，e，upper-roman I，II,III，IV，V，lower-roman i,ii,iii,iv,vnone适用于：列表项元素<ul><li>1</li><li>2</li></ul>ul{list-style-type:upper-roman;}列表属性2、list-style-image该属性指定用来列表项标记的图形

允许值：

<url>|none|inherit

适用于:列表项元素list-style-image:url(03.gif);3、list-style-position定位与一个列表项有关的记号:是在与列表有关的块外面还是里面。允许值：inside|outside适用于:列表项元素ul{list-style-type:upper-alpha;list-style-position:inside;border-style:dashed;}4、组合三个列表样式属性list-style适用于:列表项元素ul{list-style:upper-alphaoutsideurl(03.gif);(中间用空格隔开)border-style:dashed}2、list-style-imageulli{list-style:upper-alphainsideurl(03.gif);border-style:dotted}列表项单个项目<ul><liid="temp">1</li><li>2</li></ul>ul{list-style:upper-alphaoutsideurl(03.gif);border-style:dashed}#temp{list-style:upper-alphainsideurl(03.gif);border-style:dotted}ulli{WidthHeightBorder-widthBorder-styleBorder-colorPadding-内边距Margin–外边距CSS框属性WidthCSS框属性

CSS中，所有文档元素都生成一个矩形框，称之为元素框。这个框描述了元素及其属性在文档布局中所占的空间大小，因此每个框都可以影响其他元素的位置及大小．内容宽度width标签标记的内容给内容加边框内容高度height边框border CSS中，所有文档元素都生成一个矩形框，称之为元素框。这个

边框与内容之间的部分称为边白（内边距）（padding）

如果边白为0，则边白边和内容边重合

内容宽度width标签标记的内容给内容加边框内容高度height边框border上边白Padding-top右边白Padding-right下边白Padding-bottom左边白Padding-left 边框与内容之间的部分称为边白（内边距）（padding）内

边框外为边界（margin

）-框的外框

如果边界为0，则边界与边框重合

内容宽度width标签标记的内容给内容加边框内容高度height边框border上边白Padding-top右边白Padding-right下边白Padding-bottom左边白Padding-leftmargin-top上边界margin-bottom下边界margin-right右边界margin-right左边界 边框外为边界（margin）-框的外框内容宽度width框的属性及属性值

边框属性设置框的边框区的宽度，颜色和样式

通常情况下，一个元素的width定义为左侧内部边线到右侧内部边线的趾离height定义为上内边线到下内边线的距离。width允许值<长度>、<百分比>、auto初始值：auto:元素框宽度等于父元素宽度适用于：块级元紊和替换元紊百分比是指相对于父元素的宽度。helght允许值：<长度>、auto初始值：auto适用于：块级元紊和替换元紊<divid="kuang">框的示例</div>#kuang{text-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)<border-style>取值：

none:没有边框dotted

：边框是一系列的点。dashed

边框是一系列的短线条的段。solid边框是一条单一的线。double边框有两条实线。两条线宽+空白的宽度之和等于'border-width'的值。groove边框看上去好象是雕刻在画布之内。ridge和'grove'相反：边框看上去好象是从画布中凸出来。inset该边框使整个框看上去好象是嵌在画布中。outset和'inset'相反：该边框使整个框看上去好象是从画布中凸出来边框样式border-style属性及属性值边框样式border-style示例#kuang{text-align:center;width:20%;height:50px;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

一个厚边框。<length>

边框的厚度是显式值。显式的边框宽度不能为负数。边框样式border-style示例边框宽度border-width示例#kuang{text-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’组合写法：

如果只有一个值，它适用于所有四边。如果有两个值，顶底边框采用第一个值，左右边框采用第二个值。如果有三个值，顶边框采用第一个值，左右边框采用第二个值，而底边框采用第三个值。如果有四个值，它们分别适用于顶，右，底，左四边。

边框宽度border-width示例边框颜色border-color属性及属性值border-top-color，border-right-color，border-bottom-color，border-left-color及组合写法border-color

颜色值：color、transparent适用于：所有元素

<div>这是个块</div>div{border-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;}边框颜色border-color属性及属性值边白（内边距）padding属性及属性值内边距是元素的边框和内容之间的距离，适用于任何元素‘padding-top’，‘padding-right’，‘padding-bottom’，‘padding-left’

及组合写法padding

取值：<length>

指定一个确定宽度。<percentage>

百分比的计算基于生成的框的包含块的宽度padding：

如果只有一个值，它适用于所有四边。如果有两个值，顶底边白设置为第一个值而左右边距设置为第二个值。如果有三个值，顶边白设置为第一个值，左右边白设置为第二个值，底边白设置为第三个值。如果有四个值，它们分别设置顶，右，底，左边白。

div{border-width:thin;border-style:dashed;border-top-color:blue;border-bottom-color:teal;border-left-color:purple;border-right-color:red;padding:2em6em2em20%;}边白（内边距）padding属性及属性值CSS外边距(界)属性及属性值margin-top，margin-right，margin-bottom，margin-left以及margin

适用于：

所有元素取值：

<margin-width>

百分比：相对于包含块的宽度、automargin

如果仅有一个值，它将应用于所有四边。如果有两个值，顶底边距设置为第一个值，左右边距设置为第二个值。如果有三个值，顶边距设置为第一个值，左右边距设置为第二个值，底边距设置为第三个值。如果有四个值，它们分别设置顶，右，底，左边距。

margin-top:1em;margin-right:50％;margin-bottom:3em;margin-left:2em;使块级元素居中于父元素<divid="the-div"><pid="the-p">ssssssssssssssssssss</p></div>CSS外边距(界)属性及属性值CSS外边距(界)属性及属性值使块级元素居中于父元素：左右外边距设置为auto#the-div{width=400px;height=200px;border:solid}#the-p{width:100px;height:40px;border:dashed;margin-left:auto;margin-right:auto}样式属性在链接上的应用

链接是行内元素，这意味着只有在单击链接的内容时它们才会激活。但是，有时候希望实现像按钮的效果，有更大的可单击区域。为此可以将锚的display属性设置为block，然后修改width、height和其他属性来创建需要的样式和单击区域。CSS外边距(界)属性及属性值样式属性在链接上的应用<ul><li><ahref="">搜狐</a></li><li><ahref="">新浪</a></li><li><ahref="">网易</a></li></ul>ula:link{color:red}ula:visited{color:black}ula:hover{color:blue;}ula:active{color:yellow;}

a:visited{color:black;text-decoration:none;/*把链接的默认下划线去掉*/border-bottom-width:1px;border-bottom-style:dashed;border-bottom-color:red;/*border-bottom:1pxdashedred;*/line-height:150%;}样式属性在链接上的应用样式属性在链接上的应用ul{border:1pxsolid#333;width:120px;margin:5px;padding:2px;list-style-type:none;}li{background:#DDDDDD;border-bottom:1pxsolid#666;}使链接不局限于链接文字ula:link,ula:visited,ula:hover,ula:active{text-decoration:none;display:block;/*把链接定义为块元素*/width:100%/*把链接宽度定义为包含块的宽度*/}样式属性在链接上的应用样式属性在表格上的应用<table><tr><th></th><th>金牌</th><th>银牌</th><th>铜牌</th><tr><tr><th>中国</th><td>78</td><td>80</td><td>56</td><tr><tr><th>俄罗斯</th><td>78</td><td>80</td><td>56</td><tr><tr><th>美国</th><td>78</td><td>80</td><td>56</td><tr><tr><th>英国</th><td>78</td><td>80</td><td>56</td><tr></table>th{text-align:center;color:blue;background:#e99;width:80px;}td{border-style:solid;border-width:1px;}table{border-collapse:collapse;/*去掉行之间的间隔*/}样式属性在表格上的应用样式属性在表格上的应用<table><tr><th></th><th>金牌</th><th>银牌</th><th>铜牌</th><tr><trclass="single"><th>中国</th><td>78</td><td>80</td><td>56</td><tr><trclass="double"><th>俄罗斯</th><td>78</td><td>80</td><td>56</td><tr><trclass="single"><th>美国</th><td>78</td><td>80</td><td>56</td><tr><trclass="double"><th>英国</th><td>78</td><td>80</td><td>56</td><tr></table>.single{background:yellow;}.double{background:#799;}有关表单元素上的应用(略)学号*:<inputclass="base-input"type=textname="name">姓名*:<inputclass="base-input"type=textname="name">.base-input{display:block;border:none;border-bottom:2pxsolidblack;color:blue;}样式属性在表格上的应用浮动float-使一个元素脱离元素自然流允许值:left、

right、none初始值:none适用于:所有元素对象浮动时，对象将被视作块对象(block-level)，即display属性等于block.

就是说，浮动对象的display特性将被忽略。<divid="div1">div1</div><divid="div2">div2</div><divid="div3">div3</div>#div1{border:1pxsolid#000;background-color:#bbb;height:40px;width:40px;/*float:right*/}#div2{border:1pxsolid#000;background-color:#bbb;height:40px;width:40px;float:right/*浮动-浮动后浮动元素后面的元素将占据浮动元素的位置*/}浮动float-使一个元素脱离元素自然流#div3{border:1pxsolid#000;background-color:#bbb;height:40px;width:40px;/*float:right*/clear:right;/*使浮动元素后面的元素保持原来的位置*/}浮动float例子<divid="container"><h2>floatandleft<h2><imgsrc="moon.jpg"><p>对象浮动时，对象将被视作块对象(block-level)，即display属性等于block.就是说，浮动对象的display特性将被忽略</p>/*p块级元素换行*/</div>#container{border:1pxsolid#000;background-color:#bbb;padding:20px;}使图象浮动，首先将IMG元素包含在一个<div>元素中，这样可以添加更多样式

<divclass="img-float"><imgsrc="moon.jpg"></div>.img-float{float:left;margin:05px5px0;}#div3{

清除clear在浮动元素之后的元素将环绕在浮动元素周围，一个图象浮动在左边，如果其后的段落文本足够长，文本将环绕在图象周围，如果不希望看到这种情况，可以对浮动元素之后的元素应用清除clear允许值:left、right、both、none初始值:none适用于:所有元素none:默认值。允许两边都可以有浮动对象left:不允许左边有浮动对象right:不允许右边有浮动对象both:不允许有浮动对象P{clear:left}可以确保p左边没有浮动元素

清除clearCSS定位position属性允许值:static、relative、absolute、fixed、inherit初始值:static适用于:所有元紊relative:设置此属性值为relative会保持对象在正常的HTML流中。如果对一个元素进行相对定位，可以通过设置left，right，top，bottom等属性在正常文档流中偏移位置，让这个元素“相对于”它的起点进行移动。absolute:

绝对定位使元素的位置与文档流无关，absolute会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局，使用left，right，top，bottom等属性相对于其最接近的一个具有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义,假如其他具有不同z-index属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。

要激活对象的绝对(absolute)定位，除设置此属性值为absolute,还必须指定left，right，top，bottom属性中的至少一个，否则上述属性会使用他们的默认值auto，这将导致对象遵从正常的HTML布局规则．

对于定位的主要问题是要记住每种定位的意义。相对定位是“相对于”元素在文档流中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素。CSS定位position属性偏移属性top、bottom、

left、right(当position属性值为relative、absolute、fixed(IE６以下版本不支持))适用于:定位元素允许值：<长度>、<百分比>

、auto初始值:auto绝对定位的对象不具有边距margin，但仍有补白padding和边框border

#container{border:1pxsolid#000;background-color:#bbb;width:400px;height:400px;}img{position:relative;left:80px;top:30px;}偏移属性top、bottom、left、right(绝对定位－以它最近定位的父元素作为参考点，如果没有定位的父元素，则以视窗为起点img{position:absolute;left:180px;top:130px;}#container{border:1pxsolid#000;background-color:#bbb;width:400px;height:400px;position:relative;／注释掉效果不一样-有定位的父元素*／left:80px

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论