CSS属性.ppt

1、CSS属性主讲:王书琴,1、语法：font-family:隶书，宋体说明：设置字体2、语法：font-size:12px说明：字体大小3、语法：text-decoration:underline/overline/line-throungh/none说明：字体修饰4、语法：line-height:20px说明：行高,字体类,6语法:letter-spacing:4px说明:定义字间距7语法:text-indent:4mm说明:首行缩进8语法：text-align:left/right/center说明：字体水平方向对齐方式,背景类,1、语法：background-color:#十六进制/tra

2、nsparent说明：背景颜色2、语法：background-image:url(路径)/none说明：背景图像3、语法：background-repeat：repeat/repeat-x/repeat-y/no-repeat说明：设置背景图像重复,4、语法：background-attachment:scroll/fixed说明：背景图像是否随滚动条滚动5、语法：background-position:xy说明：设置背景图像对齐位置,如background-position:40px120pxbackground-position:20%50%,链接的设置,选择符：a:link正常显示a:v

3、isited访问过a:active激活时a:hover鼠标经过时a四种一起调用,注：由于CSS优先级的关系(后面比前面的优先级高)，在写a的CSS时，一定要按照a:link，a:visited，a:hover，a:actived的顺序书写。,为多个链接添加不同的样式在head中添加样式a.c1:linkcolor:#FF0000/*红色*/a.c1:visitedcolor:#00FF00/*绿色*/a.c1:hovercolor:#FFCC00/*橙色*/a.c1:activecolor:#0000FF/*蓝色*/在body中应用样式应用样式默认样式,设置滚动条：scrollbar-face

4、-color:A区域的颜色scrollbar-shadow-color:A区阴影颜色scrollbar-highlight-color:A区边框颜色scrollbar-3dlight-color:A区3D光影scrollbar-3darkshadow-color:A区3D阴影scrollbar-track-color:B区滚动条颜色scrollbar-arrow-color:A区小三角形颜色,1、语法：border-style:none/solid(实线)/double(双直线)/dotted(小点虚线)/dashed(大点虚线)/groove(3D凹线)/ridge(3D凸线)/inset(

5、3D框入线)/outset(3D隆起线)说明：边框样式2、语法：border-top-width:长度border-bottom-width:长度border-left-width:长度border-right-width:长度说明：边框粗细也可以设置为:border-width:上右下左,边框设置,3、语法：border-top-color:#RRGGBBborder-bottom-color:#RRGGBBborder-left-color:#RRGGBBborder-right-color:#RRGGBB说明：边框颜色也可以设置为:border-color:上右下左4、快速设置borde

6、r属性border：border-widthborder-styleborder-color,说明：用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离Margin-top/right/bottom/left:14px;也可以这样设置:Margin:12px;Margin:2em(上和下)1em(左和右);Margin:2em(上)1em(左和右)3em(下);,边界设置,说明：控制表格中内容与边框的空白距离Padding-top/right/bottom/left:12px;Padding:12px;,填充设置,间隙属性paddingtdpadding:0.5cm1cm4cm2cm这个单

7、元格设置了CSS间隙属性。上间隙为0.5厘米，右间隙为1厘米，下间隙为4厘米，左间隙为2厘米。,CSS盒子模式(BoxModel),CSS元素的定位,Float定位语法：float:left/right/none说明:设置元素向左或向右浮动时,元素会象其父元素的左侧或右侧靠紧,Position定位说明:指块相对于其父块的位置和相对于它自身应该在的位置语法：position:absolute(绝对)/relative(相对);left:值；top:值；width:值；height:值；visibility:visible/hidden/inherit；z-index:用于定位时重叠块的上下位置,

8、值为整数;,CSS做一个超链接的陷下效果A:link,A:visited,A:activeTEXT-DECORATION:noneA:hovertext-decoration:none;position:relative;top:1px;left:1px,CSS列表样式属性,列表样式类型属性(list-style-type)此属性用来设定列表项标记的类型。值为：disc(缺省值，黑圆点)circle(空心圆点)square(小黑方块)decimal(数字排序)lower-roman(小写罗马字排序)upper-roman(大写罗马字排序)lower-alpha(小写字母排序)upper-alpha(大写字母排序)none(无列表项标记),列表样式位置属性(list-style-position)列表样式位置属性有两个值：outside(以列表项内容为准对齐)inside(以列表项标记为准对齐),列表样式图片属性(list-style-image)列表项标记可