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