常用的CSS代码
|
hyde357 发表于 2006-2-15 22:59:00 | 背景属性(background) 这个属性是设置背景相关属性的一种快捷的综合写法, 包括background-color, background-image, background-repeat, backgroundattachment, background-position。例句如下: body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}
边框属性(border)(边框粗细) 这个属性是边框属性的一个快捷的综合写法,它包含border-width, border-style和border-color。例句如下: .d1 {border:5px solid gray;} 单边边框属性 上下左右四个边框不但可以统一设定,也可以分开设定。 设定上边框属性,你可以使用border-top, border-top-width, border-top-style, border-top-color。 设定下边框属性,你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。 设定左边框属性,你可以使用border-left, border-left-width, border-left-style, border-left-color。 设定上边框属性,你可以使用border-right, border-right-width, border-right-style, border-right-color。
边距属性(margin)(用来设置一个元素所占空间的边缘到相邻元素之间的距离) 这个属性是设定边距宽度的一个快捷的综合写法,用这个属性可以同时设定上下左右边距属性。 你可以为上下左右边距设置相同的宽度。示例入下: .d1 {margin:1cm} 你也可以分别设置边距,顺序是上,右,下,左。示例如下: .d1 {margin:1cm 2cm 3cm 4cm} 上面的代码表示,上边距为1cm,右边距为2cm,下边距为3cm,左边距为4cm
间隙属性(padding)(正文与边框的距离) 这个属性是设定间隙宽度的一个快捷的综合写法,用这个属性可以同时设定上下左右间隙属性。 你可以为上下左右间隙设置相同的宽度。示例入下: .d1 {padding:1cm} 你也可以分别设置间隙,顺序是上,右,下,左。示例如下: .d1 {padding:1cm 2cm 3cm 4cm} 上面的代码表示,上间隙为1cm,右间隙为2cm,下间隙为3cm,左间隙为4cm。
列表样式属性(list-style) 这个属性是设定列表样式的一个快捷的综合写法。用这个属性可以同时设值列表样式类型属性(list-style-type),列表样式位置属性(list-style-position)和列表样式图片属性(list-style-image)。示例代码如下: ul {list-style:circle inside url(../images/css_tutorials/dot02.gif)} disc (缺省值,黑圆点) circle (空心圆点) square (小黑方块) decimal (数字排序) lower-roman (小写罗马字排序) upper-roman (大写罗马字排序) lower-alpha (小写字母排序) upper-alpha (大写字母排序) none (无列表项标记)
锚(a)伪类是最常用的伪类。例句如下: a:link {color: #FF0000} /* 未被访问的链接 红色 */ a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */ a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */ a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
CSS注释 为了方便你自己或者他人日后更好地理解你的CSS代码,你可以写CSS代码注释。CSS代码注释以/*开头,以*/结束。例句如下: /* 段落样式 */ p { text-align: center; /* 居中显示 */ color: black; font-family: arial }
文本修饰属性(text-decoration) 这个属性主要设定文本划线的属性。有以下值: none (无,缺省值) underline (下划线) overline (上划线) line-through (当中划线) 示例代码如下: .p2 {text-decoration: underline}
px能够精确地表示元素在屏幕中的位置和大小,网页主要是为了屏幕显示,而不是为了打印等其它需要的。
|