内嵌式
- 直接写在标签里,使用style属性,只对当前标签有效。
- 页面内容和表现形式是高度耦合的,不利于分工合作。
<h1 style="color: aquamarine;">绝句</h1>
内部样式
- 内部样式是在head中部分使用
style
标签,样式对当前页面有效。 - 内容和表现格式也实现了一定程度的分离,但不彻底。
外联式
- 需要一个
link
标签与css连接起来,内容和表现形式完全分离。 - 任何需要改样式的页面都可以通过
link
标签连接的方法实现。
class
<div class="poetry">
.poetry{
text-align: center;
}
id
<p id="text1">两个黄鹂鸣翠柳</p>
#text1{
color:darkgoldenrod;
}
字体相关属性
位置相关属性
text-align: center/left/right;
line-height(行高):`normal/xx px`
letter-spacing(字符间距):`2px/5px/xxxpx`
word-spacing(单词间距):`normal/2px/5px/xxxpx`
大小相关属性
font-size: 50px;
font-weight: 100/200/normal(400)/bold(700)/bolder
font-variant: normal/small-caps(小写/大写)
类型相关属性
font-family `字体名称`
font-style `italic` / `normal` 是否倾斜
color:代码/英文
text-decoration: none/overline/underline/line-through 正常/上划线/下划线/删除线
direction`方向`:`rtl` right to left `ltr` 同上
text-transform:capitalize/uppercase/lowercase 首字母大写/全部大写/全部小写