首页 > 代码库 > 常见CSS属性及值

常见CSS属性及值

PHP程序员必须掌握的常见CSS属性及值:

一、内容简介:

1、 字体

2、 文本

3、 背景

4、 位置

5、 边框

6、 列表

7、 其他

 

二、CSS中修饰字体的属性

属性

描述

属性值

Font-family

字体族科

任意字体族科名称都可以使用Times、serif等,而且多个族科的赋值是可以使用的,中间用逗号分隔开,以防止选择不存在的字体族科。

Font-size

字体大小

可以使用绝对大小、相对大小、长度或百分比

Font-style

字体风格

Normal(普通)、italic(斜体)、oblique(倾斜)

Font-weight

字体加粗

Normal、bold、bolder、lighter

Font-variant

字体变形

Normal、small-caps(小型大写字母)

可以使用font属性来解决:

P { font:italic bold 20px courier,serif;}

但是,要尽量按照下面的顺序来给属性:

Font:[<字体风格>] || [<字体变形>] || [<字体加粗>]?<字体大小>[/<行高>]?<字体族科>

 

三、CSS常见的控制文本的属性

属性

描述

属性值

Letter-spacing

字母间隔

该值必须符合长度格式,允许使用负值

Word-spacing

文字间隔

该值必须符合长度格式,允许使用负值

Text-decoration

文字修饰

Underline、overline、line-through、blink

Text-align

横向排列

Left、right、center、justify

Text-indent

文本缩进

该值是一个长度或一个百分比,若是百分比则视上级元素的宽度而定

Line-height

行高

可以接受一个控制文本基线之间的间隔的值。当值为数字时,行高由元素字体大小的量与该数字相乘所得。百分比的值相对于元素字体的大小而定。不允许使用负值。(上下居中使用)

 

四、CSS中常见的控制背景的属性

属性

描述

属性值

Background-color

背景颜色

值与color属性值设置相同,或使用transparent透明值

Background-image

背景图片

图片url或none(无)

Background-repeat

背景重复

Repeat、repea-x、repeat-y、no-repeat

Background-attachment

背景附件

Scroll、fixed

Background-position

背景位置

Left/center/right,top/center/bottom,百分比或长度值也可以用作安排背景图片的位置。

注意:将多个图标放到同一个图片里,通过定义某区块的背景定位,调用同一个图片中不同位置上的小图标,好处是可以减少对服务器的请求次数,从而加快页面的访问速度。

 

五、边框属性

1、 边框风格

Border-style

None、dotted(点线)、dashed(破折线)、solid(实线)、double(双线)、groove(槽线)、ridge(脊线)、inset(内嵌效果)、outset(突起效果)

可以给四个边分别给样式:

Border-style:solid double dashed inset;

也可以单独给某个边设置样式:

Border-top-style:solid;

Border-right-style:dashed;

Border-left-style:inset;

 

2、 边框的宽度

Border-width

可以指定四个边或单独某一边的宽度

Border-width:1px 2px 3px 4px;

Borde-top-width:2px;

 

3、 边框的颜色

Border-color

可以对四个边或单独一个变设置颜色

Border-color:red red yellow blue;

Border-top-color:red;

 

4、 使用border统一定义份边框风格、宽度、颜色等属性。

Border:3px solid red;

 

六、鼠标光标属性

Cursor

Default、pointer、wait、help、move、text、hand、crosshair等

 

七、列表样式

属性

描述

List-style-type

设定引导列表项的符号类型,可以设置多种符号类型,值为disc、circle、square(无序列表)等以及lower-roman、upper-roman、lower-alpha、upper-alpha、decimal(有序列表)等

List-style-image

使用图像作为定制列表符号

List-style-position

决定列表项目缩进的程度