ch9 使用CSS样式(三).ppt

,第二级,第三级,第四级,第五级,第九课 使用,CSS,样式（三）,常用的,CSS,属性,1,、,颜色与背景,2,、文本样式属性,3,、边框属性,4,、方框属性,5,、列表属性,6,、定位属性,7,、链接属性,3,边框属性,边框属性,(1),border-width,：设定边框宽度,thin,、,medium,、,thick,长度单位，如,1px,.s1,border-width:1px;,边框宽度,border-width,.d1 border-,style:solid,;,.d2 border-,width:thin;border-style:solid,;,.d3 border-,width:thick;border-style:solid,;,.d4 border-width:10px;border-style:solid;,.d5 border-width:5mm;border-style:solid;,这个,div,的,CSS,边框宽度,(border-width),属性缺省值是,medium,这个,div,的,CSS,边框宽度,(border-width),属性值是,thin,。,这个,div,的,CSS,边框宽度,(border-width),属性值是,thick,。,这个,div,的,CSS,边框宽度,(border-width),属性值是,10px,。,这个,div,的,CSS,边框宽度,(border-width),属性值是,5mm,。,边框属性,(2),border-style,：设定边框风格样式,none,（无边框），,dotted,（点线式）、,dashed,（破折线）、,solid,（直线），,double,（双线）、,groove,（槽线）、,ridge,（脊线）、,inset,（内嵌）、,outset,（突起）,.s2,border-width:1px;,border-style:solid;,边框风格属性,border-style,.d1 border-,style:none,;,.d2 border-,style:solid,;,.d3 border-,style:dotted,;,.d4 border-,style:dashed,;,.d5 border-,style:double,;,.d6 border-,style:groove,;,.d7 border-,style:ridge,;,.d8 border-,style:inset,;,.d9 border-,style:outset,;,这个,div,的,CSS,边框风格,(border-style),属性缺省值是,none,。,这个,div,的,CSS,边框风格,(border-style),属性是,none,。,这个,div,的,CSS,边框风格,(border-style),属性是,solid,。,这个,div,的,CSS,边框风格,(border-style),属性是,dotted,。,这个,div,的,CSS,边框风格,(border-style),属性是,dashed,。,这个,div,的,CSS,边框风格,(border-style),属性是,double,。,这个,div,的,CSS,边框风格,(border-style),属性是,groove,。,这个,div,的,CSS,边框风格,(border-style),属性是,ridge,。,这个,div,的,CSS,边框风格,(border-style),属性是,inset,。,这个,div,的,CSS,边框风格,(border-style),属性是,outset,。,边框属性,(3),border-color,：设定边框颜色,Web,颜色值,.s3,border-width:1px;,border-style:solid;,border-color:red;,边框颜色属性,border-color,.d1 border-color:#FFA500;border-style:solid;,.d2 border-color:#33CC00;border-style:solid;,.d3;border-color:#6600FF;border-style:solid;,.d4 border-color:#FF6347;border-style:solid;,.d5 border-,color:gray;border-style:solid,;,这个,div,的,CSS,边框颜色,(border-color),属性值是橙色。,这个,div,的,CSS,边框颜色,(border-color),属性值是绿色。,这个,div,的,CSS,边框颜色,(border-color),属性值是蓝色。,这个,div,的,CSS,边框颜色,(border-color),属性值是番茄红。,这个,div,的,CSS,边框颜色,(border-color),属性值是灰色。,上下左右四个边框可以统一设定，也可以分开设定,border-top,、,border-bottom,、,border-left,、,border-right,与,borer,类似，但只设置上下左右中的一个边框,border-top,又可拆分为,border-top-width,、,border-top-style,、,border-top-color,，其它三边边框类似,.s5,border-top:1px solid red;,border-right:2px dotted green;,单个边框属性,.d1 border-top:5px solid#FF0000,.d2 border-bottom:5px solid#FF0000,.d3 border-left:5px solid#FF0000,.d4 border-right:5px solid#FF0000,单个边框属性：,设置上边框用,border-top,设置下边框用,border-bottom,设置左边框用,border-left,设置右边框用,border-right,4,方框属性,margin-right,右边界,margin-left,左边界,margin-top,上边界,margin-bottom,下边界,margin,border,padding,border-width,边框的宽度,padding-left,左填充,padding-bottom,下填充,所谓的方框属性是指,CSS,中的边距,(margin),和间隙,(padding),两个属性的合称,边距属性,(margin),是用来设置一个元素所占空间的边缘到相邻元素之间的距离,间隙属性,(padding),是用来设置元素内容到元素边框的距离,属 性,CSS,名称,说 明,边界属性,margin-top,设置对象的上边距,margin-right,设置对象的右边距,margin-bottom,设置对象的下边距,margin-left,设置对象的左边距,边框属性,border-style,设置边框的样式,border-width,设置边框的宽度,border-color,设置边框的颜色,填充属性,padding-top,设置内容与上边框之间的距离,padding-right,设置内容与右边框之间的距离,padding-bottom,设置内容与下边框之间的距离,padding-left,设置内容与左边框之间的距离,方框属性,(2),margin-left,：设定左边距,margin-right,：设定右边距,margin-top,：设定上边距,margin-bottom,：设定下边距,属性值均为长度单位,.s1,margin-left:20pt;,margin-bottom:5cm;,方框属性,(3),margin,：设定四个方向上边距的一种快捷的综合写法,上下左右边距相同,.s2 margin:2cm;,上下相同，左右相同，顺序：,上下、左右,.s3 margin:20px 30px;,上下左右各不相同，顺序：,上、右、下、左,.s4 margin:1cm 2cm 3cm 4cm;,方框属性,(4),padding-left,：设定左边间隙,padding-right,：设定右边间隙,padding-top,：设定上边间隙,padding-bottom,：设定下边间隙,属性值均为长度单位,.s6,padding-left:20pt;,padding-bottom:2cm;,方框属性,(5),padding,：设定四个方向上间隙的一种快捷的综合写法,上下左右边距相同,.s2 padding:2cm;,上下相同，左右相同，顺序：,上下、左右,.s3 padding:20px 30px;,上下左右各不相同，顺序：,上、右、下、左,.s4 padding:1cm 2cm 3cm 4cm;,要实现下图所示的效果，该如何编写样式规则？,单元格右边边框线宽,2px,、虚线框样式,dashed,、颜色为,red,、,单元格里文字与左边框的距离为,10,像素、距离顶部边框为,20,像素,使用,background-color,、,border-right-width,、,border-right-color,、,border-right-style,、,padding-top,和,padding-left,来实现,行的背景色为,yellow,td,border-right-width:2px;,border-right-,color:red,;,border-right-,style:dashed,;,padding-top:20px;,padding-left:10px;,TR ,background:yellow,;,手机冲值,电子彩票,设置单元格右边框宽度为,3,像素,设置单元格右边框为虚线框,设置单元格里文字与左边框的距离为,10,像素,表格行的背景色,5,列表属性,list-style-type,：用于设定列表项标记的类型,none,、,disc,、,circle,、,square,、,decimal,（数字排序）、,lower-roman,（小写罗马数字）、,upper-roman,（大写罗马数字）、,lower-alpha,（小写字母）、,upper-alpha,（大写字母）,列表样式对于无序列表和有序列表来说是,通用,的，但逻辑上我们认为只有有序列表才使用数字序号作为标记类型,.s1list-style-type:circle;,设置内容和边框之间的留白,.disc list-style-type=disc,.circle list-style-type=circle,.square list-style-type=square,.upper-roman list-style-type=upper-roman,.lower-roman 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,决战,office2000,visual Basic6.0,入门,动态网页,电脑维修,组装电脑,BIOS,自己设,VB6.0,无敌秘笈,教您杀病毒,网络赚钱技术,决战,office2000,visual Basic6.0,入门,动态网页,电脑维修,组装电脑,BIOS,自己设,VB6.0,无敌秘笈,教您杀病毒,网络赚钱技术,决战,office2000,visual Basic6.0,入门,动态网页,电脑维修,组装电脑,BIOS,自己设,VB6.0,无敌秘笈,教您杀病毒,网络赚钱技术,6,定位属性,position,：设定元素在文档中的定位方式,relative,：相对定位，使方框相对于它在原本的标准位置偏移指定的距离，通过设置,left,、,right,、,top,、,bottom,等属性来实现；,absolute,：绝对定位，方框的位置以它的包含框为基准进行偏移，通过设置,left,、,right,、,top,和,bottom,等属性；,fixed,：固定定位，和绝对定位类型，只是以浏览器窗口为基准进行定位。,CSS,相对定位,可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。,注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，,移动元素会导致它覆盖其它框,。,#,box_relative,position:relative;left:30px;top:20px;,绝对定位,绝对定位的元素的位置相对于,最近的已定位祖先元素,，如果元素没有已定位的祖先元素，那么它的位置相对于,最初的包含块,。,因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。,#,box_relative,position:absolute;left:30px;top:20px;,7,超,链接,属性,网页中的链接标记能响应浏览者的点击。,a,标记有四种状态能描述这种响应，分别是,a:link,：未访问时链接状态,a:visited,：访问过后的链接状态,a:active,：活动链接状态（鼠标点中不放时的状态）,a:hover,：鼠标悬停时的链接状态,伪类选择器,所谓伪类就是指标记的状态。,网页中的链接标记能响应浏览者的点击。,a,标记有四种状态能描述这种响应，分别是,a:link,、,a:visited,、,a:hover,、,a:active,，,a,标记在这几种状态下的样式能够通过伪类选择器来分别定义，伪类选择器的标记和伪类之间用“,:”,隔开。其格式为：,a:hover,color:green;,font-size:20px;,标记名,属性,值,属性,值,声明,声明,伪类名,一个链接可以有不同的状态。例如，它可以是已访问过的，也可以是未访问过的。,例如：,a:link,color:,blue;,a:visited,color:red;,未访问过的链接和已访问过的链接分别使用,a:link,和,a:visited,。活动的链接为,a:active,，有鼠标悬停的链接为,a:hover,。,例：,鼠标悬停的链接的效果,可以用,letter-spacing,属性来调整字符间距。现在为了取得特殊效果，将它应用到链接上：,a:hover,letter-spacing:10px;,font-,weight:bold,;,color:red,;,