1.文字

font-family : 微软雅黑,"Times New Roman",Consolas;
当字体名称中有空格时要用引号,各自体之间用半角的逗号隔开.

font-size :字体大小,用长度单位表示

px/cm/in cm 厘米 in=inch 英寸=2.54cm
pt = point = 1/72inch
还有 em/ex
em 表示父元素中的字幕 m 的标准宽度
ex 表示父元素中的字幕 x 的标准高度
与父元素的 font-size 有关

line-height行高,表示两行文字之间基线之间的距离,所谓基线,也就是下划线那个位置
font : 12px/18px 微软雅黑;
这种简写方式,12px 表示的是 font-size 字体大些,后面那个 18px 就是行高

color文字颜色
blue/#0000ff/#00f/rgb(0,0,255)/rgb(0%,0%,100%)都可以表示蓝色

文字样式
font-weight normal/bold 正常/粗体
font-style normal/italic 正常/斜体
text-decoration overline/line-through/underline 顶划线/删除线/下划线

code : overline
效果 : overline
code : line-through
效果 : line-through
code : underline
效果 : underline

段首缩进text-indent : 2em;

关于居中

水平居中 text-aligh = center left/right/justify 表示左对齐/右对齐/两端对齐
垂直居中 vertical-align = middle只在表格中起作用
对于文字较短,不会换行的情况,可将 line-height 设置为 height 相等,那样就居中了.

对于多行文本,要实现垂直居中,有人想出奇淫技巧,一堆 div 嵌套,现在我测试 IE10/9/8/chrome/ff 都可以使用 display : table-cell 来使用 vertical-align : middle 居中,不过 IE6/7 跪了,不伺候了

实例
代码

<div id="test-v-align" style="
    height : 200px;
    text-align : center;
    display : table-cell;
    vertical-align : middle;

    background-color : red;
    color : white;">
多行文本多行文本多行文本
多行文本多行文本多行文本多行文本
多行文本多行文本多行文本多行文本多行文本
多行文本多行文本多行文本多行文本多行文本多行文本
</div>

效果

2.图像

<img>标签表示图片,src 属性表示图片地址,alt 属性表示代替的文字
border=”1”表示边框为 1 个像素粗细,0 则是没有边框,通过 CSS 可以更好的控制

background-image : url();背景图像

background-repeat : repeat/repeat-x/repeat-y/no-repeat; repeat 表示沿两个方向都重复

background-position : right center;
有两个值,分别用来确定水平位置和竖直位置, 取值为
(left/right/center) [top/bottom/center]
省略之后默认为 center
这个 background-position 其实也是 repeat 的起点

背景简写形式

1	background : #fff url("abc.png") repeat-x top;

分别是背景颜色,背景图像,重复,背景位置.

Magicdawn

CSS彻底研究(4) - 文字&图像

1.文字

关于居中