广告概述

第四章 CSS样式表

第二节 图文排版属性

1．字体属性

属性 | 属性含义 | 属性值
font-family | 定义字体 | <字体名称>
font-style | 是否斜体 | Normal、italic、oblique
font-variant | 是否大写小体 | Normal、small-caps
font-weight | 字体粗细 | Normal、bold、bolder、lithter等
font-size | 字体大小 | Absolute-size、relative-size、length、percentage等

<p style="font-style:oblique; font-weight:bold; font-size:24pt">hongen</p>

2．颜色和背景属性

属性 | 属性含义 | 属性值
color | 定义前景色 | <颜色>
background-color | 定义背景色 | <颜色>
background-image | 定义背景图案 | <图片路径>
background-repeat | 图案重复方式 | repeat-x、repeat-y、no-repeat
background-attachment | 背景图案滚动 | scroll、fixed
background-position | 背景图初始位置 | percentage、length、top、left、right、bootom等

p{color:red}

body{background-color:yellow}

body{background-image:url(bbb.jpg)}

3．文本属性

属性 | 属性含义 | 属性值
word-spacing | 词间距 | Normal、<长度>
letter-spacing | 字母间距 | Normal、<长度>
text-decoration | 文字装饰 | None、underline、overline、line-through、blink
vertical-align | 垂直位置 | baseline、sub、super、text-top、middle、bottom、text-bottom、<百分比>
text-transform | 文本转换 | capitalize、uppercase、lowercase、none
text-align | 对齐方式 | left、right、center、justify
text-indent | 首行缩进 | <长度>、<百分比>
line-height | 文本行高度 | normal、<点数>、<长度>、<百分比>

<p style="letter-spacing:1em; text-align:justify; text-indent:4em; line-height:17pt">……</p>

4．列表属性

属性 | 属性含义 | 属性值
display | 定义是否显示 | block、inline、list-item、none
white-space | 空白处理 | normal、pre、nowrap
list-style-type | 列表项类型 | dise、circle、square、decimal、lower-roman、upper-roman、lower-alpha、upper-alpha、none
list-style-image | 列表项图符 | <图片路径>、none
list-style-position | 第二行位置 | inside、outside

5．CSS定位

CSS有三种定位方式，分别为绝对定位、相对定位和静态定位。

属性 | 属性含义 | 属性值
position | 定义位置 | absolute、static
left | 横向坐标位置 | <长度>、<百分比>、auto
top | 纵向坐标位置 | <长度>、<百分比>、auto
width | 横向占用空间的大小 | <长度>、<百分比>、auto
height | 纵向占用空间的大小 | <长度>、<百分比>、auto
clip | 剪切 | shape、auto
overflow | 内容超出时的处理方法 | visible、hidden、scroll、auto
z-index | 产生立体效果 | auto、integer
visibility | 可见性 | inherit、visible、hidden