CSS实战详解｜青训营1.css基础知识 1.1 CSS概述 CSS（Cascading Style Sheet

1.css基础知识

1.1 CSS概述

CSS（Cascading Style Sheets）是层叠样式表，用来定义网页的显示效果。可以解决html代码对样式定义的重复性问题，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

单纯使用html的属性来控制页面样式不方便：

<p align="center"><font color="#00ff33">小青</font></p>
<p align="center"><font color="#00ff33">大家好，我们开始学习css</font></p>

1.2 优势

格式和结构分离：有利于格式的重用以及网页的修改与维护。
精确控制页面布局：对网页实现更加精确的控制，如网页的布局，字体，颜色，背景等。
实现多个网页同时更新。

1.3应用css的步骤

（1）定义css样式表

（2）将定义好的css样式在HTML文档中应用

css基本语法

CSS的定义是由三部分组成的，包括选择符( selector)、属性( properties)、属性值（value）语法如下：

选择器{
属性1:属性值1;
属性2:属性值2;
……
}

注意： 每个属性有一个值，属性和值用冒号隔开。如果要定义不止一一个“属性:属性值”的声明时，需要用分号将每个声明分开，最后一条声明规则可以不加分号（建议每条声明的末尾都加上分号，会减少出错的可能。）

例如：

h1{ /标记选择器h1选中网页的所有h1标记/
color :red; /设置文字的颜色属性为红色/
font-size:14px; /设置文字的大小属性为14像素/
}

注意：css中/* */是注释。

如果属性值由多个单词组成是需要用引号括起来，例如：

h2{
font-family: 'New Century Schoolbook' ;
}

注意：

包含空格不会影响CSS在浏览器中的工作效果
CSS对大小写是不敏感的
如果涉及与HTML文档一起工作， class类选择器和id选择器对名称的大小写是敏感的。

需要使用几个属性值进行定义，每个属性值之间用逗号隔开，例如：

h2{
font-family: Times, ' New Century Schoolbook' ，Georgia;
}

2. CSS的引入方式

2.1. 在HTML元素属性中引入

在html标签中使用style属性：属性值是键值对形式的集合，每一个键值对之间的用 : 连接，多个属性值之间用 ; 隔开。

<p style="color: #00ff33;text-align: center;">小青</p>
<p style="color: #00ff33;text-align: center;">大家好，我们开始学习css</p>

2.2. 在HTML的头信息中定义CSS代码块

<style type="text/css">p {color:#0000ff;text-align:center;}
</style>

2.3. 在HTML中引入CSS文件

通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。
HTML代码：

<p >小青</p>
<p >大家好，我们开始学习css</p>

CSS引入代码：

<link href="1.css" type="text/css" rel="stylesheet">

CSS文件代码：

p {color: #00ff22;text-align: center;}input {width: 50px;height: 10px;}

在css层叠样式表中的优先级： 由上到下，由外到内。优先级由低到高。（样式离标签近的优先级高）

注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。

3. CSS的选择器

3.1. CSS的基本选择器：

html选择器（元素类型选择器），就是把html本身作为选择器。
class选择器，就是把html标签的class属性值作为选择器。为了和HTML进行区分，加.作为前缀。
id选择器，就是把html标签的id属性值作为选择器。为了和HTML进行区分，加#作为前缀。

html代码:

<p>小青</p>
<p id="p3" class="p_class">大家好，我们现在开始学习CSS</p>

css代码：

<style type="text/css">p {color: #00ff22;text-align: center;}.p_class{color: #00aa22;
text-align: left;}#p3{color: #00aabb;text-align: right;}
</style>

基本选择器的优先级：元素类型选择器< 类选择器< id选择器

3.2. 选择器扩展

关联选择器：标签的嵌套使用。相同标签中某些内容有不同显示。
- 需求：写一个段话,我爱学习,把学习用粗体表示。针对一段话中的粗体部分添加样式：红色,30px
- p b：元素中间的空格代表p元素内部的b元素。

html代码：

<p>我们开始学习<b>css</b></p>

css代码：

<style type="text/css">p b{font-size:50px;color: red;}
</style>

组合选择器：不同的标签显示相同的样式。
- 需求：我要把所有的p标签和b标签的内容都添加样式：蓝色,130px
- b,p：逗号代表两侧的元素使用当前同一个样式。

html代码：

<p >大家好</p>
<p >老师好</p>
<b>css真简单</b>

css代码：

<style type="text/css">b,p{font-size: 100px;color: blue;} 
</style>

4. div和span

div和span是html中块级元素，是层叠样式表中的定位技术。

4.1. div示例代码

<html>
<head>
<title>div 标记范例</title>
<style type="text/css">
<!--
div{font-size:18px;	        /* 字号大小 */
font-weight:bold;	                /* 字体粗细 */
font-family:Arial;	        /* 字体 */
color:#FF0000;		        /* 颜色 */
background-color:#FFFF00;	        /* 背景颜色 */
text-align:center;		/* 对齐方式 */
width:300px;			/* 块宽度 */
height:100px;			/* 块高度 */
}
-->
</style>
</head>
<body>
<div>这是一个div标记</div>
</body>
</html>

4.2. div和span的区别

div自动的换行，span不换行。

<html>
<head>
<title>div与span的区别</title>
</head>
<body><p>div标记不同行：</p>
<div><img src="building.jpg" border="0"></div>
<div><img src="building.jpg" border="0"></div>
<div><img src="building.jpg" border="0"></div>

<p>span标记同一行：</p>
<span><img src="building.jpg" border="0"></span>
<span><img src="building.jpg" border="0"></span>
<span><img src="building.jpg" border="0"></span>
</body>
</html>

4.3. div的边框样式border-style

<html>
<head>
<title>border-style</title>
<style type="text/css">
<!--
div{border-width:6px;
border-color:#000000;
margin:20px; 
padding:5px;
background-color:#FFFFCC;
}
-->
</style>
</head>
<body>
<div style="border-style:dashed">The border-style of dashed.</div>
<div style="border-style:dotted">The border-style of dotted.</div>
<div style="border-style:double">The border-style of double.</div>
<div style="border-style:solid">The border-style of solid.</div>
</body>
</html>

4.4. div的内边框padding

所有html在布局上都遵守盒子模型。

<html>
<head>
<title>padding</title>
<style type="text/css">
<!--
.outside{padding:10px 30px 50px 100px;	/* 同时设置，顺时针 */
border:1px solid #000000;		        /* 外边框 */
background-color:#fffcd3;		        /* 外背景 */
}

.inside{background-color:#66b2ff;		/* 内背景 */
border:1px solid #005dbc;		        /* 内边框 */
width:100%;
line-height:40px;
text-align:center;
font-family:Arial;
}
-->
</style>
</head>
<body>
<div class="outside"><div class="inside">padding</div></div>
</body>
</html>

4.5. div外边框margin

<html>
<head>
<title>两个行内元素的margin</title>
<style type="text/css">
<!--
span{background-color:#a2d2ff;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
}
span.left{margin-right:30px;
background-color:#a9d6ff;
}
span.right{margin-left:40px;
background-color:#eeb0b0;
}
-->
</style>
</head>
<body>
<span class="left">行内元素1</span>
<span class="right">行内元素2</span>
</body>
</html>

<html>
<head>
<title>父子块的margin</title>
<style type="text/css">
<!--
div.father{		/* 父div */
background-color:#fffebb;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
border:1px solid #000000;
}
div.son{		        /* 子div */
background-color:#a2d2ff;
margin-top:30px;
margin-bottom:0px;
padding:15px;
border:1px dashed #004993;
}
-->
</style></head>
<body><div class="father"><div class="son">子div</div></div>
</body>
</html>

<html>
<head>
<title>设置父块的高度</title>
<style type="text/css">
<!--
div.father{			/* 父div */
background-color:#fffebb;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
border:1px solid #000000;
height:40px;			/* 设置父div的高度 */
}
div.son{			        /* 子div */
background-color:#a2d2ff;
margin-top:30px; 
margin-bottom:0px;
padding:15px;
border:1px dashed #004993;
}
-->
</style>
</head>
<body>
<div class="father"><div class="son">子div</div></div>
</body>
</html>

5. 文字处理

5.1. 字体

<html>
<head>
<title>文字字体</title>
<style>
<!--
h2{font-family:黑体, 幼圆;}
p{font-family:Arial, Helvetica, sans-serif;}
p.kaiti{font-family:楷体_GB2312, "Times New Roman";}
-->
</style>
</head>

<body>
<h2>立 春</h2>
<p>自秦代以来，我国就一直以立春作为春季的开始。
立春是从天文上来划分的，而在自然界、在人们的心目中，春是温暖，鸟语花香；春是生长，耕耘播种。
在气候学中，春季是指候（5天为一候）平均气温10℃至22℃的时段。</p>
<p class="kaiti">作者: isaac</p>
</body>
</html>

5.2. 文字大小

大小单位
- px：
  相对长度单位。像素（Pixel）。
  像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。
- em
  相对长度单位。相对于当前对象内文本的字体尺寸。
  如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
- ex
  相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。
  如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
- pt
  绝对长度单位。点（Point）。
  1in = 2.54cm = 25.4 mm = 72pt = 6pc
- pc
  绝对长度单位。派卡（Pica）。相当于我国新四号铅字的尺寸。
  1in = 2.54cm = 25.4 mm = 72pt = 6pc
- in
  绝对长度单位。英寸（Inch）。
  1in = 2.54cm = 25.4 mm = 72pt = 6pc
- mm
  绝对长度单位。毫米（Millimeter）。
  1in = 2.54cm = 25.4 mm = 72pt = 6pc
- cm
  绝对长度单位。厘米（Centimeter）。
  1in = 2.54cm = 25.4 mm = 72pt = 6pc

<html>
<head>
<title>文字大小</title>
<style>
<!--
p.inch{ font-size: 0.5in; }
p.cm{ font-size: 0.5cm; }
p.mm{ font-size: 4mm; }
p.pt{ font-size: 12pt; }
p.pc{ font-size: 2pc; }
-->
</style>
</head>

<body>
<p class="inch">文字大小，0.5in</p>
<p class="cm">文字大小，0.5cm</p>
<p class="mm">文字大小，4mm</p>
<p class="pt">文字大小，12pt</p>
<p class="pc">文字大小，2pc</p>
</body>
</html>

5.3. 文字加粗

<html>
<head>
<title>文字粗体</title>
<style>
<!--
h1 span{ font-weight:lighter;}
span.ten{ font-weight:bold; }
span.eleven{ font-weight:normal; }
-->
</style>
</head>

<body>
<h1>文字<span>粗</span>体</h1>
<span class="ten">文字粗细: lighter </span>
<span class="ten">文字粗细:bold</span>
<span class="eleven">文字粗细:normal</span>
</body>
</html>

5.4. 文字斜体

<html>
<head>
<title>文字斜体</title>
<style>
<!--
h1{ font-style:italic; }			/* 设置斜体 */
h1 span{ font-style:normal; }		/* 设置为标准风格 */
p{ font-size:18px; }
p.one{ font-style:italic; }
p.two{ font-style:oblique; }
-->
</style>
</head>

<body>
<h1>文字<span>斜</span>体</h1>
<p class="one">文字斜体</p>
<p class="two">文字斜体</p>
</body>
</html>

5.5. 文字下划线、顶划线、删除线

<html>
<head>
<title>文字下划线、顶划线、删除线</title>
<style>
<!--
p.one{ text-decoration:underline; }			/* 下划线 */
p.two{ text-decoration:overline; }			/* 顶划线 */
p.three{ text-decoration:line-through; }	                /* 删除线 */
p.four{ text-decoration:blink; }			        /* 闪烁 */
-->
</style>
</head>

<body>
<p class="one">下划线文字，下划线文字</p>
<p class="two">顶划线文字，顶划线文字</p>
<p class="three">删除线文字，删除线文字</p>
<p class="four">文字闪烁</p><p>正常文字对比</p>
</body>
</html>

<html>
<head>
<title>文字下划线、顶划线、删除线</title>
<style>
<!--
p.one{ text-decoration:underline overline; }				/* 下划线+顶划线 */
p.two{ text-decoration:underline line-through; }			        /* 下划线+删除线 */
p.three{ text-decoration:overline line-through; }			        /* 顶划线+删除线 */
p.four{ text-decoration:underline overline line-through; }		/* 三种同时 */
-->
</style>
</head>

<body>	
<p>正常文字对比</p>
<p class="one">下划线文字，顶划线文字</p>
<p class="two">下划线文字，删除线文字</p>
<p class="three">顶划线文字，删除线文字</p>
<p class="four">三种效果同时</p>
</body>
</html>

5.6. 文字对齐方式

<html>
<head>
<title>水平对齐</title>
<style>
<!--
p{ font-size:12px; }
p.left{ text-align:left; }		/* 左对齐 */
p.right{ text-align:right; }		/* 右对齐 */
p.center{ text-align:center; }		/* 居中对齐 */
-->
</style>
</head>
<body>	
<p class="left">这个段落采用左对齐的方式，text-align:left，因此文字都采用左对齐。
<br>床前明月光，疑是地上霜。
<br>举头望明月，低头思故乡。
<br>李白</p>
<p class="right">这个段落采用右对齐的方式，text-align:right，因此文字都采用右对齐。
<br>床前明月光，疑是地上霜。
<br>举头望明月，低头思故乡。
<br>李白</p>
<p class="center">这个段落采用居中对齐的方式，text-align:center，因此文字都采用居中对齐。
<br>床前明月光，疑是地上霜。
<br>举头望明月，低头思故乡。
<br>李白</p>
</body>
</html>

5.7. 实现首字放大效果

<html>
<head>
<title>首字放大</title>
<style>
<!--
body{background-color:black;	/* 背景色 */}
p{font-size:15px;		        /* 文字大小 */
color:white;			/* 文字颜色 */}
p span{font-size:60px;		/* 首字大小 */
float:left;			/* 首字下沉 */
padding-right:5px;		/* 与右边的间隔 */
font-weight:bold;		        /* 粗体字 */
font-family:黑体;		        /* 黑体字 */
color:yellow;			/* 字体颜色 */}
</style>

</head>
<body>
<p><span>中</span>秋节是远古天象崇拜——敬月习俗的遗痕。
据《周礼.春官》记载，周代已有“中秋夜迎寒”、“中秋献良裘”、“秋分夕月（拜月）”的活动；
汉代，又在中秋或立秋之日敬老、养老，赐以雄粗饼。
晋时亦有中秋赏月之举，不过不太普遍；
直到唐代将中秋与嫦娥奔月、吴刚伐桂、玉兔捣药、杨贵妃变月神、唐明皇游月宫等神话故事结合起，
使之充满浪漫色彩，玩月之风方才大兴。</p>
<p>北宋，正式定八月十五为中秋节，并出现“小饼如嚼月，中有酥和饴”的节令食品。
孟元老《东京梦华录》说：“中秋夜，贵家结饰台榭，民间争占酒楼玩月”；
而且“弦重鼎沸，近内延居民，深夜逢闻笙芋之声，宛如云外。
间里儿童，连宵婚戏；夜市骈阗，至于通晓。”
吴自牧《梦梁录》说：“此际金凤荐爽，玉露生凉，丹桂香飘，银蟾光满。
王孙公子，富家巨室，莫不登危楼，临轩玩月，或开广榭，玳筵罗列，琴瑟铿锵，酌酒高歌，以卜竟夕之欢</p>
</body>
</html>

6. 背景设置

6.1. 背景颜色

<html>
<head>
<title>背景颜色</title>
<style>
<!--
body{background-color:#5b8a00;		/* 设置页面背景颜色 */
margin:0px;
padding:0px;
color:#c4f762;				/* 设置页面文字颜色 */
}
p{font-size:15px;				/* 正文文字大小 */
padding-left:10px;
padding-top:8px;
line-height:120%;
}
span{					/* 首字放大 */
font-size:80px;
font-family:黑体;
float:left;
padding-right:5px;
padding-left:10px;
padding-top:8px;
}
-->
</style>
</head>

<body>
<span>春</span>
<p>季，地球的北半球开始倾向太阳，受到越来越多的太阳光直射，因而气温开始升高。
随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。
冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁徙，离开越冬地向繁殖地进发。
许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。
春季气温和生物界的变化对人的心理和生理也有影响。</p>
<p>对农民来说，春季是播种许多农作物的季节。
在春季，地球的北半球开始倾向太阳，受到越来越多的太阳光直射，因而气温开始升高。
随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。
冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁徙，离开越冬地向繁殖地进发。
许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。</p>
</body>
</html>

6.2. 背景图片

<html>
<head>
<title>背景图片</title>
<style>
<!--
body{background-image:url(03.jpg);	/* 页面背景图片 */
}
-->
</style>
</head>
<body>
</body>
</html>

6.3. 背景平铺

background-repeat:repeat-y: 控制垂直方向平铺
background-repeat:repeat-x :控制水平方向平铺
background-repeat:no-repeat; : 图片不重复

<html>
<head>
<title>背景重复</title>
<style>
<!--
body{padding:0px;
margin:0px;
background-image:url(bg1.jpg);		/* 背景图片 */
background-repeat:repeat-y;		/* 垂直方向重复 */
background-color:#0066FF;			/* 背景颜色 */
}
-->
</style>
</head>
<body>
</body>
</html>

7. 表格样式

<html>
<head>
<title>年度收入</title>
<style>
<!--
.datalist{border:1px solid #429fff;	/* 表格边框 */
font-family:Arial;border-collapse:collapse;	/* 边框重叠 */
}
.datalist caption{padding-top:3px;
padding-bottom:2px;
font:bold 1.1em;
background-color:#f0f7ff;
border:1px solid #429fff;	/* 表格标题边框 */
}
.datalist th{border:1px solid #429fff;	/* 行、列名称边框 */
background-color:#d2e8ff;
font-weight:bold;
padding-top:4px; 
padding-bottom:4px;
padding-left:10px; 
padding-right:10px;
text-align:center;
}
.datalist td{border:1px solid #429fff;	/* 单元格边框 */
text-align:right;padding:4px;
}
-->
</style>
</head>

<body> 
<table class="datalist">
<caption>年度收入 2004 - 2007</caption>
<tr>
<th></th>
<th scope="col">2004</th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
</tr>

<tr>
<th scope="row">拨款</th>
<td>11,980</td>
<td>12,650</td>
<td>9,700</td>
<td>10,600</td>
</tr>

<tr>
<th scope="row">捐款</th>
<td>4,780</td>
<td>4,989</td>
<td>6,700</td>
<td>6,590</td>
</tr>

<tr>
<th scope="row">投资</th>
<td>8,000</td>
<td>8,100</td>
<td>8,760</td>
<td>8,490</td>
</tr>

<tr>
<th scope="row">募捐</th>
<td>3,200</td>
<td>3,120</td>
<td>3,700</td>
<td>4,210</td>
</tr>

<tr>
<th scope="row">销售</th>
<td>28,400</td>
<td>27,100</td>
<td>27,950</td>
<td>29,050</td>
</tr>

<tr>
<th scope="row">杂费</th>
<td>2,100</td>
<td>1,900</td>
<td>1,300</td>
<td>1,760</td>
</tr>

<tr>
<th scope="row">总计</th>
<td>58,460</td>
<td>57,859</td>
<td>58,110</td>
<td>60,700</td>
</tr>
</table>
</body>
</html>

8. 列表样式

<html>
<head>
<title>图片符号</title>
<style>
<!--
body{background-color:#c1daff;}
ul{font-family:Arial;
font-size:13px;
color:#00458c;
list-style-type:none;					/* 不显示项目符号 */
}
li{background:url(icon1.jpg) no-repeat;	               /* 添加为背景图片 */
padding-left:25px;					/* 设置图标与文字的间隔 */
}
-->
</style>
</head>

<body>
<p>自行车</p>
<ul>
<li>Road cycling 公路自行车赛</li>
<li>Track cycling 场地自行车赛</li>
<li>sprint  追逐赛</li>
<li>time trial 计时赛</li>
<li>points race  计分赛</li>
<li>pursuit  争先赛</li>
<li>Mountain bike 山地自行车赛</li>
</ul>
</body>
</html>

<html>
<head>
<title>无需表格的菜单</title>
<style>
<!--
body{background-color:#ffdee0;}
#navigation {width:200px;
font-family:Arial;
}
#navigation ul {list-style-type:none;				/* 不显示项目符号 */
margin:0px;padding:0px;
}
#navigation li {border-bottom:1px solid #ED9F9F;			/* 添加下划线 */
}
#navigation li a{display:block;					/* 区块显示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515;					/* 左边的粗红边 */
border-right:1px solid #711515;					/* 右侧阴影 */
}
#navigation li a:link, #navigation li a:visited{background-color:#c11136;color:#FFFFFF;
}
#navigation li a:hover{						/* 鼠标经过时 */
background-color:#990020;						/* 改变背景色 */
color:#ffff00;							/* 改变文字颜色 */
}
-->
</style>
</head>

<body>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">My Blog</a></li>
<li><a href="#">Friends</a></li>
<li><a href="#">Next Station</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</body>
</html>

<html>
<head>
<title>菜单的横竖转换</title>
<style>
<!--
body{background-color:#ffdee0;
}
#navigation {font-family:Arial;
}
#navigation ul {list-style-type:none;		/* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation li {float:left;			/* 水平显示各个项目 */
}
#navigation li a{display:block;			/* 区块显示 */
padding:3px 6px 3px 6px;
text-decoration:none;
border:1px solid #711515;
margin:2px;
}
#navigation li a:link, #navigation li a:visited{background-color:#c11136;
color:#FFFFFF;
}
#navigation li a:hover{				/* 鼠标经过时 */
background-color:#990020;				/* 改变背景色 */
color:#ffff00;					/* 改变文字颜色 */
}
-->
</style>
</head>

<body>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">My Blog</a></li>
<li><a href="#">Friends</a></li>
<li><a href="#">Next Station</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</body>
</html>

总结：

css中有很多已经写好的代码，在我们写代码时就不用一点一点地敲了，我们只需要把这些框架照搬过来，然后更改部分数值就可以快速写出有用且易于交互的代码了。

CSS实战详解 ｜ 青训营

1.css基础知识

1.1 CSS概述

1.2 优势

1.3应用css的步骤

css基本语法

2. CSS的引入方式

2.1. 在HTML元素属性中引入

2.2. 在HTML的头信息中定义CSS代码块

2.3. 在HTML中引入CSS文件

3. CSS的选择器

3.1. CSS的基本选择器：

3.2. 选择器扩展

4. div和span

4.1. div示例代码

4.2. div和span的区别

4.3. div的边框样式border-style

4.4. div的内边框padding

4.5. div外边框margin

5. 文字处理

5.1. 字体

5.2. 文字大小

5.3. 文字加粗

5.4. 文字斜体

5.5. 文字下划线、顶划线、删除线

5.6. 文字对齐方式

5.7. 实现首字放大效果

6. 背景设置

6.1. 背景颜色

6.2. 背景图片

6.3. 背景平铺

7. 表格样式

8. 列表样式

总结：

CSS实战详解｜青训营