首页 > 代码库 > 常见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 | 决定列表项目缩进的程度 |