简书的css排版,css格式化排版

1，文字排版

1-1，字体

.p1 {

font-family: "宋体"

}

运行效果：

第一个段落为“宋体”

1-2，字号和颜色

p {

font-size: 25px;

color: #0F0

}

运行效果：

两个段落的字号为“25px”，字体颜色为“#0F0”   第一个段落继承了  .p1 的字体，字体为“宋体”

1-3，粗体和斜体

1-3.1，粗体

.p2 {

font-weight： bold

}

运行效果：

段落二的字体粗细为“bold”(粗体)

bold(粗体)  lighter (细体)   normal (正常体)

1-3.2，斜体

.p2 q {

font-style: italic

}

运行效果：

段落中引用的字体为“italic”(斜体)

1-4，下划线，删除线

.cost1 {

text-decoration: underline

}

.cost2 {

text-decoration: line-through

}

运行效果：

“现价”样式为“underline”(下划线)                                 ”原价“样式为：“line-through”(划掉)

2，段落排版

2-1，缩进

.p1 {

text-indent: 2em

}

运行效果：

第一段开始空出“2em”

文本中的“em”的大小是根据font-size：的值来变化的!

例：font-size：20px；则 1em=20px

2-2，行间距

.p1 {

line-height: 2em

}

运行效果：

段落中每个字符占的行间距“2em”

2-3，字间距

.spacing1 {

letter-spacing: 20px

}

.spacing2 {

word-spacing: 20px

}

运行效果：

letter-spacing：运行如第一段，作用于每一个文字和字母！(单词会被拆分成字母)

word-spacing：运行如第二段，作用于每一个单词

2-4,文本排列

h1 {

text-align: center

}

h2 {

text-align: left

}

h3 {

text-align: right

}

运行效果：

center(中)  left(左)  right(右)