CSS 常用属性
1 字体属性
font
font:字体风格[字体加粗]<字体大小>[/行高]<字体族科>
font-family 字体族科 宋体|微软雅黑
font-family:"Arial","Helvetica",sans-serif;
font-size 字体大小
font-style 字体风格 normal | italic | oblique (斜体)
font-weight 字体加粗 normal | bold | lighter
font-variant 字体变形 normal | small-caps
2 文字颜色
- color 设置文字颜色
3 文本属性
letter-spacing 字母间隔 值为长度,可以是负值
word-spacing 词的间距(通过空格识别)
text-decoration 文字修饰
underline overline line-through none(默认)
text-align 横向排列 left | right | center
vertical-align 垂直对齐方式
baseline: 将支持valign特性的对象的内容与基线对齐 sub: 垂直对齐文本的下标 super: 垂直对齐文本的上标 top: 将支持valign特性的对象的内容与对象顶端对齐 text-top: 将支持valign特性的对象的文本与对象顶端对齐 middle: 将支持valign特性的对象的内容与对象中部对齐 bottom: 将支持valign特性的对象的文本与对象底端对齐 text-bottom: 将支持valign特性的对象的文本与对象顶端对齐 <percentage>: 用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。 <length>: 用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。(CSS2)
text-indent 文本缩进 2em(2个字) 50px
line-height 设置行间距离 不允许使用负值
行高和基线:
- 基线:红色的线。
- 顶线:绿色的线。
- 底线:紫红色的线。
- 中线:蓝色的线。
4 背景属性
background
background:<背景颜色>|<背景图像>|<背景重复>|<背景附件>|<背景位置> 例:background:red url('./123.png') no-repeat 100px 10px;
background-color 设置背景色,或设置为transparent(透明)
background-image 背景图片 url 或者 none
background-repeat 背景重复 repeat | repeat-x | repeat-y | no-repeat
background-attachment 背景附件 scroll | fixed
background-position 背景位置
background-position: 水平方向 垂直方向 background-position:left top; background-position:100px 100px; left | center | right (横向) top | center | bottom (纵向) 或者使用百分比或者数值
5 鼠标光标
cursor
text 文字选择器 crosshair 十字架 wait 等待 help 帮助 pointer 小手
6 列表属性
list-style-type
disc 实心点 circle 圆圈 square 小方框 decimal 数字 lower-roman 小写罗马字 upper-roman 大写罗马字 lower-alpha 小写字母 upper-alpha 大写字母
list-style-position 位置
inside 标示在li里面 outside 标示在li外面
list-style-image 使用图片 url(./123.gif)
list-style 复合属性
list-style: type position image list-style: none
7 表格属性
table-layout 表格布局方式
auto(默认) 布局将基于各单元格的内容,换言之,可能你给某个单元格定义宽度为100px,但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来,速度很慢 fixed 平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关。也就是说,内容可能被裁切
border-collapse 表格的行和单元格的边是合并还是独立
separate (默认) 独立 collapse 合并
border-spacing 当表格边框独立时,行和单元格的边框在横向和纵向上的间距
caption-side caption 在table上面还是下面
top bottom
empty-cells 没有内容的单元格隐藏还是显示
show (默认) hide