CSS基础（二）

CSS基础

字体样式

属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
font-style	字体风格
color	字体颜色

font-style：normal / italic / oblique

有些字体有斜体italic属性，但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果。

CSS注释：

/* CSS注释 */

文本样式

属性	说明	值
text-indent	首行缩进	…px
text-align	水平对齐	left / center / right
text-decoration	文本修饰	none / underline / line-through / overline
text-transform	大小写转换	none / uppercase / lowercase / capitalize
line-height	行高	…px / font-size的倍数
letter-spacing	字母间距	…px
word-spacing	单词间距	…px

边框样式

属性	说明	值
border-width	边框宽度	…px
border-style	边框外观	none / dashed / solid / hidden / dotted / double
border-color	边框颜色	颜色

这三个属性需要同时设置才有效果。

简写模式：

border : 1px solid red;

局部样式：

border-top-color:
border-bottom-style:
...

列表样式

列表项符号：list-style-type

list-style-type 属性取值（有序列表）：

属性	说明
decimal	阿拉伯数字
lower-roman	小写罗马字母
upper-roman	大写罗马字母
lower-alpha	小写英文字母
upper-alpha	大写英文字母

list-style-type 属性取值（无序列表）：

属性	说明
disc	实心圆
circle	空心圆
square	正方形

去除列表符号：list-style-type:none

列表项图片：list-style-image:url(图片路径)，但是一般情况下我们都不会用list-style-image属性来实现，而是使用更为高级的iconfont图标技术来实现。

表格样式

表格标题位置：caption-side:top / bottom

表格边框合并：border-collapse: separate / collapse

表格边框间距：border-spacing:..px

图片样式

图片大小：width:..px，height:..px

图片边框：border:1px solid red，与上面的边框样式相同

图片水平对齐：text-align:left / center / right
图片垂直对齐：vertical-align:top / middle / baseline / bottom

文字环绕：float:left / right