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(右)

上一篇下一篇

猜你喜欢

热点阅读