CSS 知识整理(三) 样式
目录
一、字体
- 字体：font-famliy
- 字号：font-size
- 粗细：font-weight
- 颜色：color
二、文本
- 颜色：color
- 对齐方式：text-align
- 首行缩进：text-indent
- 行高：line-height
- 装饰：text-decoration
- 阴影：text-shadow
三、列表
CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。
- 列表类型：list-style-type
设置列表项标志为实心圆、空心圆、方形
- 列表项图像：list-style-image
设置列表项标志为一张图片
四、背景
- 背景色：background-color
- 背景图片：background-image
- 背景重复：background-repeat
可设置图片是重复排满背景还是其他
- 背景定位：background-position
这个比较简单，可现用现查
举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: 楷体; /*字体*/
color: brown; /*文本颜色*/
text-align: center; /*排版*/
}
h1 {
font-size: 50px; /*字号*/
}
p[class=p1] {
font-weight: bolder; /*粗细*/
text-indent: 2em; /*首行缩进*/
}
.p2 {
background: yellow; /*背景色*/
height: 200px; /*段落高度*/
line-height: 15px; /*行高*/
}
.p3{
text-decoration: underline; /*文本修饰符*/
}
/*body {*/
/* font: bolder 16px "楷体";*/
/*}*/
</style>
</head>
<body>
<h1>蜀道难</h1>
李白
<p class="p1">噫吁嚱，危乎高哉！<br>
蜀道之难，难于上青天！<br>
蚕丛及鱼凫，开国何茫然！<br>
尔来四万八千岁，不与秦塞通人烟。<br>
西当太白有鸟道，可以横绝峨眉巅。<br>
地崩山摧壮士死，然后天梯石栈相钩连。<br>
上有六龙回日之高标，下有冲波逆折之回川。<br>
黄鹤之飞尚不得过，猿猱欲度愁攀援。<br>
青泥何盘盘，百步九折萦岩峦。<br>
扪参历井仰胁息，以手抚膺坐长叹。<br>
</p>
<p class="p2">
问君西游何时还？畏途巉岩不可攀。<br>
但见悲鸟号古木，雄飞雌从绕林间。<br>
又闻子规啼夜月，愁空山。<br>
蜀道之难，难于上青天，使人听此凋朱颜！<br>
连峰去天不盈尺，枯松倒挂倚绝壁。<br>
飞湍瀑流争喧豗，砯崖转石万壑雷。<br>
其险也如此，嗟尔远道之人胡为乎来哉！<br>
</p>
<p class="p3">
剑阁峥嵘而崔嵬，一夫当关，万夫莫开。<br>
所守或匪亲，化为狼与豺。<br>
朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。<br>
锦城虽云乐，不如早还家。<br>
蜀道之难，难于上青天，侧身西望长咨嗟！<br>
</p>
</body>
</html>运行结果如下：
