正 文

CSS网页样式设计要点


www.7dspace.com  更新日期:2006-1-30 7:56:59  七度空间


第四章 CSS属性

一、字体属性

  与字体有关的属性包括:font-family,font-style,font-variant,font-weight,font-size,font。执行顺序是:font-style,font-variant,font-weight,font-size

1、font-family:如果字体的名称中含有空格,那么要加上双引号。

2、font-style:normal|italic|oblique

3、font-variant:normal|small-caps

4、font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

  normal相当于400,bold相当于700

5、font-size:absolute-size|relative-size|length|percentage

absolute-size:xx-small|x-small|small|medium|large|x-large|xx-large
relative-size:larger|smaller
6、font:font-style|font-variant|font-weight|font-size|line-height|font-family

  font属性可以一次定义前边提到的所有的字体属性。

二、颜色和背景属性

1、color:一般指前景色。

2、background-color:背景色。

3、background-image:

  body{background-image:url(marble.jpg)}

4、background-repeat:repeat|repeat-x|repeat-y|no-repeat

  body{background-image:url(marble.jpg);background-repeat:repeat-y}

5、background-attachment:scroll|fixed

  设置文字在背景图案上面滚动,背景图案保持固定不动用fixed.

6、background-position:percentage|length{1,2}|top|center|bottom|left|center|right

7、background:background-color|background-image|background-repeat|background-attachment|background-position

  可以一次设置前面的所有的有关背景的属性。如body{background:white url(bg.jpg)}

三、文本属性

1、word-spacing:normal|length

2、letter-spacing:normal|length

3、text-decoration:none|underline|overline|line-through|blink

4、vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|percentage

  这个属性用来对齐图片效果特别好。如image{vertical-align:baseline}

5、text-transform:capitalize|uppercase|lowercase|none

capitalize:每个单词的第一个字母大写。
uppercase:所有字都大写。
lowercase:所有字都小写。

6、text-align:left|right|center|justify

7、text-indent:length|percentage

  适用于块级元素,定义文本首行的缩进方式。如p{text-indent:1cm}

8、line-height:normal|number|length|percentage

四、容器属性

1、margin-top:length|percentage|auto

  如body{margin-top:0}

2、margin-right:同上

3、margin-bottom:同上

4、margin-left:同上

5、margin:length|percentage|auto {1,4}

  前四个属性都可以用margin来定义。如果给出的值少于四个,那么缺失的部分就取其对边的值。

6、padding-top:length|percentage

7、padding-right:同上

8、padding-bottom:同上

9、padding-left:同上

10、padding:length|percentage {1,4}

  前面四个属性都可以用padding来定义。如果给出的值少于四个,那么缺失的部分就取其对边的值。

11、border-top-width:thin|medium|thick|length

12、border-right-width:同上

13、border-bottom-width:同上

14、border-left-width:同上

15、border-width:thin|medium|thick|length {1,4}

  前面四个属性都可以用border-width来定义。可以一次给出一个、两个、三个或者四个border-width值。如果给出的值少于四个,那么缺失的部分就取其对边的值。如h1{border-width:thick thin medium}

16、border-color:<color> {1,4}

  如果只给出一个值,那么四条边框的颜色都一样。否则缺失边的颜色从对边获取。

17、border-style:none|dotted|dash|solid|double|groove|ridge|inset|outset

dotted:点组成的虚线。
dash:短线组成的虚线。
double:双线。
groove:3D沟槽状边框。
ridge:3D脊状的边框。
inset:3D内嵌边框(颜色较深)。
outset:3D外嵌边框(颜色较浅)。

18、border-top:border-top-width|border-style|color

  一个元素顶边的宽度、样式和颜色都可以border-top一次指定。

19、border-right:同上

20、border-bottom:同上

21、border-left:同上

22、border:border-width|border-style|color

  要一次设置一个元素所有边框的宽度、样式和颜色,可以使用border。border只能使四条边框都相同。

23、width:length|percentage|auto

24、height:length|auto

25、float:left|right|none

  适用float元素可以使文字环绕在一个元素的四周。比html中的align属性应用范围更广,不仅仅是图片和表格,所有的元素都可以使用float属性。

26、clear:none|left|right|both

  与float相对应。如果为right,则元素的右边不会放进任何对象。

五、分级属性

1、display:block|inline|list-item|none

2、white-space:normal|pre|nowrap

3、list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none

disc:圆盘
circle:圆圈
square:方块
decimal:十进制数1、2、3……
lower-roman:小写罗马数字i,ii,iii...
upper-roman:大写罗马数字I,II,III...
lower-alpha:小写字母a,b,c...
upper-alpha:大写字母A,B,C...

4、list-style-image:url|none

  如ul{list-style-image:url(bullet.gif)}

5、list-style-position:inside|outside

  决定列项的第二行左边距是否与第一行除了项目符号以外的第一个字母对齐。

6、list-style:keyword|position|url

  可以一次指定list-style-type,list-style-image,list-style-position属性。

六、鼠标属性

cursor:auto|crosshair|default|hand|move|e-resize|ne-resize|nw-resize|n-resize|se-resize|sw-resize|s-resize|w-resize|text|wait|help

4页,页码:[1] [2] [3] [4] 

上一篇:PS教程:奶牛效果
下一篇:CSS使用技巧
标题:CSS网页样式设计要点 作者:未知 来源:blog
收藏此页】【打印】【关闭
站 内 搜 索
 

热 点 导 读
特 别 推 荐