《ch9使用CSS样式三实用教案》由会员分享，可在线阅读，更多相关《ch9使用CSS样式三实用教案（29页珍藏版）》请在金锄头文库上搜索。
1、3边框(binkung)属性边框属性(1)border-width：设定(shdn)边框宽度thin、medium、thick长度单位，如1px.s1border-width:1px;第1页/共28页第一页，共29页。边框(binkung)宽度border-width.d1border-style:solid;.d2border-width:thin;border-style:solid;.d3border-width:thick;border-style:solid;.d4border-width:10px;border-style:solid;.d5border-width:5mm;bor
2、der-style:solid;这个div的CSS边框(binkung)宽度(border-width)属性缺省值是medium这个div的CSS边框(binkung)宽度(border-width)属性值是thin。这个div的CSS边框(binkung)宽度(border-width)属性值是thick。这个div的CSS边框(binkung)宽度(border-width)属性值是10px。这个div的CSS边框(binkung)宽度(border-width)属性值是5mm。第2页/共28页第二页，共29页。边框属性(2)border-style：设定边框风格样式none（无边框），d
3、otted（点线式）、dashed（破折线）、solid（直线），double（双线）、groove（槽线）、ridge（脊线(jxin)）、inset（内嵌）、outset（突起）.s2border-width:1px;border-style:solid;第3页/共28页第三页，共29页。边框(binkung)风格属性border-style.d1border-style:none;.d2border-style:solid;.d3border-style:dotted;.d4border-style:dashed;.d5border-style:double;.d6border-styl
4、e:groove;.d7border-style:ridge;.d8border-style:inset;.d9border-style:outset;这个div的CSS边框(binkung)风格(border-style)属性缺省值是none。这个div的CSS边框(binkung)风格(border-style)属性是none。这个div的CSS边框(binkung)风格(border-style)属性是solid。这个div的CSS边框(binkung)风格(border-style)属性是dotted。这个div的CSS边框(binkung)风格(border-style)属性是das
5、hed。这个div的CSS边框(binkung)风格(border-style)属性是double。这个div的CSS边框(binkung)风格(border-style)属性是groove。这个div的CSS边框(binkung)风格(border-style)属性是ridge。这个div的CSS边框(binkung)风格(border-style)属性是inset。这个div的CSS边框(binkung)风格(border-style)属性是outset。第4页/共28页第四页，共29页。边框属性(3)border-color：设定(shdn)边框颜色Web颜色值.s3border-wid
6、th:1px;border-style:solid;border-color:red;第5页/共28页第五页，共29页。边框颜色属性(shxng)border-color.d1border-color:#FFA500;border-style:solid;.d2border-color:#33CC00;border-style:solid;.d3;border-color:#6600FF;border-style:solid;.d4border-color:#FF6347;border-style:solid;.d5border-color:gray;border-style:solid;这个
7、div的CSS边框颜色(border-color)属性(shxng)值是橙色。这个div的CSS边框颜色(border-color)属性(shxng)值是绿色。这个div的CSS边框颜色(border-color)属性(shxng)值是蓝色。这个div的CSS边框颜色(border-color)属性(shxng)值是番茄红。这个div的CSS边框颜色(border-color)属性(shxng)值是灰色。第6页/共28页第六页，共29页。上下左右四个边框可以统一设定，也可以分开设定border-top、border-bottom、border-left、border-right与borer类似
8、(lis)，但只设置上下左右中的一个边框border-top又可拆分为border-top-width、border-top-style、border-top-color，其它三边边框类似(lis).s5border-top:1pxsolidred;border-right:2pxdottedgreen;第7页/共28页第七页，共29页。单个边框属性(shxng).d1border-top:5pxsolid#FF0000.d2border-bottom:5pxsolid#FF0000.d3border-left:5pxsolid#FF0000.d4border-right:5pxsolid#F
9、F0000单个边框属性(shxng)：设置上边框用border-top设置下边框用border-bottom设置左边框用border-left设置右边框用border-right第8页/共28页第八页，共29页。4方框(fnkun)属性margin-right右边界右边界(binji)margin-left左边界左边界(binji)margin-top上边界上边界margin-bottom下边界下边界marginborderpaddingborder-width边框的宽度边框的宽度padding-left左填充左填充padding-bottom下填充下填充第9页/共28页第九页，共29页。所谓
10、的方框属性是指CSS中的边距(margin)和间隙(padding)两个(lin)属性的合称边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离间隙属性(padding)是用来设置元素内容到元素边框的距离第10页/共28页第十页，共29页。属属 性性CSS名称名称说说 明明边界属性margin-top设置对象的上边距margin-right设置对象的右边距margin-bottom设置对象的下边距margin-left设置对象的左边距边框属性border-style设置边框的样式border-width设置边框的宽度border-color设置边框的颜色填充属性padd
11、ing-top设置内容与上边框之间的距离padding-right设置内容与右边框之间的距离padding-bottom设置内容与下边框之间的距离padding-left设置内容与左边框之间的距离第11页/共28页第十一页，共29页。方框属性(2)margin-left：设定左边距margin-right：设定右边距margin-top：设定上边距margin-bottom：设定下边(xibian)距属性值均为长度单位.s1margin-left:20pt;margin-bottom:5cm;第12页/共28页第十二页，共29页。方框属性(3)margin：设定四个方向上边距的一种快捷的综合写
12、法(xif)上下左右边距相同.s2margin:2cm;上下相同，左右相同，顺序：上下、左右.s3margin:20px30px;上下左右各不相同，顺序：上、右、下、左.s4margin:1cm2cm3cm4cm;第13页/共28页第十三页，共29页。方框属性(shxng)(4)padding-left：设定左边间隙padding-right：设定右边间隙padding-top：设定上边间隙padding-bottom：设定下边间隙属性(shxng)值均为长度单位.s6padding-left:20pt;padding-bottom:2cm;第14页/共28页第十四页，共29页。方框属性(5)
13、padding：设定四个方向上间隙的一种快捷的综合写法上下左右边距相同(xintn).s2padding:2cm;上下相同(xintn)，左右相同(xintn)，顺序：上下、左右.s3padding:20px30px;上下左右各不相同(xintn)，顺序：上、右、下、左.s4padding:1cm2cm3cm4cm;第15页/共28页第十五页，共29页。要实现下图所示的效果，该如何编写(binxi)样式规则？单元格右边边框单元格右边边框(binkung)线线宽宽2px、虚线框样式、虚线框样式dashed、颜、颜色为色为red、单元格里文字与左边、单元格里文字与左边框框(binkung)的距离为
14、的距离为10像素、像素、距离顶部边框距离顶部边框(binkung)为为20像素像素使用使用(shyng)background-color、border-right-width、border-right-color、border-right-style、padding-top和和padding-left来实现来实现行的背景色为行的背景色为yellow第16页/共28页第十六页，共29页。td border-right-width: 2px;border-right-color:red;border-right-style:dashed;padding-top:20px; padding-left
15、:10px;TR background:yellow; 手机冲值手机冲值 电子电子(dinz)彩票彩票 设置单元格右边框设置单元格右边框宽度宽度(kund)为为3像素像素设置设置(shzh)单元单元格右边框为虚线框格右边框为虚线框设置单元格里文字与左边框的设置单元格里文字与左边框的距离为距离为10像素像素表格行的背表格行的背景色景色第17页/共28页第十七页，共29页。5列表(libio)属性list-style-type：用于设定列表项标记的类型none、disc、circle、square、decimal（数字排序）、lower-roman（小写罗马数字）、upper-roman（大写罗马
16、数字）、lower-alpha（小写字母）、upper-alpha（大写字母）列表样式对于无序列表和有序列表来说是通用的，但逻辑上我们认为只有有序列表才使用(shyng)数字序号作为标记类型.s1list-style-type:circle;第18页/共28页第十八页，共29页。设置内容和边框(binkung)之间的留白 .disc list-style-type=disc .circle list-style-type=circle .square list-style-type=square .upper-roman list-style-type=upper-roman .lower-r
17、oman list-style-type=lower-roman .upper-alpha list-style-type=upper-alpha .lower-alpha list-style-type=lower-alpha .decimal list-style-type=decimal .none list-style-type=none决战office2000visual Basic6.0入门(r mn)动态网页电脑维修组装电脑BIOS自己设VB6.0无敌秘笈教您杀病毒网络赚钱技术第19页/共28页第十九页，共29页。决战office2000visual Basic6.0入门动态网页
18、/OL电脑维修组装电脑BIOS自己设 VB6.0无敌秘笈教您杀病毒网络赚钱(zun qin)技术决战office2000visual Basic6.0入门动态网页(wn y)/OL电脑维修组装电脑BIOS自己设 VB6.0无敌秘笈教您杀病毒网络赚钱技术第20页/共28页第二十页，共29页。6定位(dngwi)属性position：设定元素(yuns)在文档中的定位方式relative：相对定位，使方框相对于它在原本的标准位置偏移指定的距离，通过设置left、right、top、bottom等属性来实现；absolute：绝对定位，方框的位置以它的包含框为基准进行偏移，通过设置left、righ
19、t、top和bottom等属性；fixed：固定定位，和绝对定位类型，只是以浏览器窗口为基准进行定位。第21页/共28页第二十一页，共29页。CSS相对(xingdu)定位可以通过设置垂直或水平位置，让这个元素“相对于”它的起点(qdin)进行移动。注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。#box_relativeposition:relative;left:30px;top:20px;第22页/共28页第二十二页，共29页。绝对(judu)定位绝对定位的元素的位置相对于最近的已定位祖先(zxin)元素，如果元素没有已定位的祖先(zx
20、in)元素，那么它的位置相对于最初的包含块。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。#box_relativeposition:absolute;left:30px;top:20px;第23页/共28页第二十三页，共29页。7超链接属性(shxng)网页中的链接标记能响应浏览者的点击。a标记有四种状态能描述这种响应，分别是a:link：未访问(fngwn)时链接状态a:visited：访问(fngwn)过后的链接状态a:active：活动链接状态（鼠标点中不放时的状态）a:hover：鼠标悬停时的链接状态第24页/共28页第二十四页，共29页。伪类选择器所谓伪类就是指标
21、记的状态。网页中的链接标记能响应浏览者的点击。a标记有四种状态能描述这种响应，分别是a:link、a:visited、a:hover、a:active，a标记在这几种状态下的样式能够(nnggu)通过伪类选择器来分别定义，伪类选择器的标记和伪类之间用“:”隔开。其格式为：a:hovercolor: green;font-size: 20px;标记名属性值属性值声明声明伪类名第25页/共28页第二十五页，共29页。一个链接(lin ji)可以有不同的状态。例如，它可以是已访问过的，也可以是未访问过的。例如： a:link color: blue;a:visited color: red; 未访问
22、过的链接(lin ji)和已访问过的链接(lin ji)分别使用a:link和a:visited。活动的链接(lin ji)为a:active，有鼠标悬停的链接(lin ji)为a:hover。第26页/共28页第二十六页，共29页。例：鼠标悬停的链接的效果可以用letter-spacing属性来调整字符(zf)间距。现在为了取得特殊效果，将它应用到链接上：a:hoverletter-spacing:10px;font-weight:bold;color:red;第27页/共28页第二十七页，共29页。感谢您的观赏(gunshng)！第28页/共28页第二十八页，共29页。内容(nirng)总结3 边框属性。这个div的CSS边框风格(border-style)属性缺省值是none。列表样式对于无序列表和有序列表来说是通用的，但逻辑上我们认为只有有序列表才使用数字序号作为(zuwi)标记类型。感谢您的观赏第二十九页，共29页。
