●修羽のsozai●
START 2006/01 (C)Rony

<<  < 2006 - >  >>
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28

---===Meun===---

---===Guestbook====---


*Skin by Rony*


 ←本站LOGO◎宝井修羽之梦◎←点击进入主站
●修羽のsozai●是分站,这里主要提供oblog的模板和各种图片素材下载。刚刚建站,我也是边学边做,大家请多指教!

---====What's new?====---

---====Diary====---
常用的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能够精确地表示元素在屏幕中的位置和大小,网页主要是为了屏幕显示,而不是为了打印等其它需要的。

 


阅读全文 | 回复(0) | 引用通告 | 编辑


发表评论:[注册一个新ShineBlog?]

    昵称:
    密码: (游客无须输入密码)
    主页:
    标题:
    正在读取数据……


---====Link====---
Powered By ShineBlog.com
---====Info====---