css格式化排版
2017-04-26 本文已影响0人
随意人生_1b90
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(右)