CSS 指层叠样式表 (Cascading Style Sheets)。
样式定义如何显示HTML元素。
本文使用外部样式表为一个HTML指定样式，其中涉及的CSS知识范围很小，但是CSS的语法不复杂，可以通过互联网查询以了解更多的CSS知识。
引入CSS文件
在HTML中引入样式表的方法有三种：
- 外部样式表
- 内部样式表
- 内联样式
当HTML和样式表是两个文件，或者同一份样式表被多个HTML文件使用时，可以使用外部样式表。
只需要在HTML文件中用<link>标签链接样式表即可，一般放在HTML的头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
如果要将样式写在HTML中，可以使用<style>标签：
<head>
<style>
hr {color:black;}
</style>
</head>
或者直接在标签中使用style属性：
<p style="color:red;margin-left:10px">这是一个段落。</p>
在本文中我们只使用外部样式表。
本文中要为鲁迅先生做一个简历，在没有引入样式表时，网页是这样的：
未使用样式表的页面
在使用CSS配置样式后，网页是这样的：
CSS配置后的网页
第一步，在网页中引入外部样式表：
<head>
<title>鲁迅</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="my_style.css">
</head>
外部样式表的文件名是：my_style.css。
由于这个样式表没有任何内容，所以网页显示内容没有任何改变。
id与class，CSS的语法
使用CSS来设置样式，需要使用选择器。
HTML元素可以作为选择器，比如：
p {
color: yellow;
}
还可以使用id或者class选择器，其中id在整个HTML文档中是唯一的，class是可以多次使用的。
id选择器在CSS中使用#表示，例如：
#vip_name {
color: red;
}
这个语句把id为vip_name的元素，颜色设置为红色。
class选择器在CSS中使用.表示，例如：
.vip_friends {
color: blue;
}
这个语句把class为vip_friends的元素，颜色设置为蓝色。
类似于上面的例子，CSS的语法为：
CSS的语法
每条CSS语句中包含选择器和一条或多条声明，每条声明由一个属性和一个值构成。
CSS的注释被/*和*/包围：
h1 {
/* 将一级标题设置为红色 */
color: red;
}
上例中的注释是：将一级标题设置为红色。
position
positon属性规定了元素定位值，通常有四个值：
-
static：默认值，即没有定位。 -
fixed：相对于浏览器窗口是固定位置，即使窗口滚动也不会变。 -
relative： 相对于其正常位置的定位。 -
absolute：相对于最近的已定位父元素的定位。
在本例中，文档中的简历部分由id为resume_base的部分包围，简历部分分为左栏和右栏，其id分别为resume_left和resume_right，程序结构如下：
<body>
<div id="resume_base">
<div id="resume_left">...</div>
<div id="resume_right">...</div>
</div>
</body>
在浏览器中显示如下：
resume_base
下面，我们将#resume_base通过relative方式定位，使它相对于正常位置下降5px。#resume_base的正常位置是指在默认情况下其显示的位置。语句如下：
#resume_base {
position: relative;
top: 5px;
}
将#resume_left通过relative方式定位，将#resume_right通过absolute方式定位，使其距离左侧340px，语句如下：
#resume_left {
position: relative;
}
#resume_right {
position: absolute;
top: 0px;
left: 340px;
}
由于#resume_right的父元素#resume_base已经定位，所以它会显示于#resume_base内容左侧340px处。
此时网页显示如下：
使用position定位后的网页
盒子模型
#resume_left中的HTML代码如下：
<div id="resume_left">
<div class="resume_head">
<div class="resume_icon">
<img src="image_address" alt="鲁迅">
</div>
<div class="p_info">
<h1 class="p_name">鲁迅</h1>
<ul class="p_info_list">
<li>公务员、教师、作家</li>
<li>1881年9月25日 - 1936年10月19日</li>
<li>浙江省绍兴府会稽县</li>
</ul>
</div>
</div>
</div>
可以看到，人物的基本信息全部包含在.resume_head中：人物照片在.resume_icon中；人物基本信息在.p_info中。
.p_info中：人物姓名以.p_name在标签<h1>中；其他信息以.p_info_list在<ul>中。
在CSS中，HTML标签可以看做一个盒子：
CSS盒子模型
盒子有四个部分，由内到外分别是：内容、内边距、边框和外边距。
在设置尺寸的时候指的是内容的尺寸。
下面我们将#resume_left的内边距都设置为20px，内容宽度为300px：
#resume_left {
position: relative;
/* 设置内边距，顺序依次是 上、右、下、左。 */
padding: 20px 20px 20px 20px;
/* 设置宽度 */
width: 300px;
}
对#resume_right进行设置：
#resume_right {
position: absolute;
top: 0px;
left: 340px;
/* 设置外边距 */
margin: 0px;
/* 设置内边距 */
padding: 20px 20px 20px 20px;
/* 设置宽度 */
width: 600px;
}
现在网页如下：
对边距进行处理后的网页
文本与图像，嵌套选择
现在让我们依次处理#resume_left中的内容。
将#resume_left的背景颜色设置为#254665：
#resume_left {
position: relative;
/* 设置内边距，顺序依次是 上、右、下、左。 */
padding: 20px 20px 20px 20px;
/* 设置宽度 */
width: 300px;
/* 设置背景颜色 */
background-color: #254665;
}
页面如下：
左栏添加背景颜色后的网页
现在设置人物图片，即.resume_icon和其中的<img>：将.resume_icon中的内容设置为居中显示；为人物图片设置宽度。
设置居中显示很简单，只需要将text-align设置为center即可：
.resume-icon {
text-align: center;
}
如果仅仅要设置.resume_icon中的<img>元素，需要使用嵌套选择器。这里使用.resume_icon img嵌套选择器，它仅仅操作.resume_icon中的<img>标签，对其他<img>标签无效：
.resume_icon img {
width: 200px;
}
现在网页显示如下：
设置人物图片后
将.p_info中的内容（人物名字和基本信息）设置为居中显示，并将内容设置为白色：
.p_info {
text-align: center;
color: white;
}
利用嵌套选择器对.p_info中的<h1>（人物名字）和<ul>（人物基本信息）做设置：
.p_info h1 {
padding: 0;
margin: 20px 0px 0px 0px;
}
.p_info ul {
padding: 0;
/* 不显示项目标识符 */
list-style-type: none;
}
对于列表，通过list-style-type属性设置列表项目符号，默认为小黑点，none代表不显示项目符号。
现在页面显示如下：
设置列表之后的页面
设置字体
我们希望左边栏的文字是sans-serif类型的，使用font-family属性确定一个字体序列，浏览器会显示系统中安装的序列中最靠前的字体：
.p_info {
text-align: center;
color: white;
/* 设置字体 */
font-family:Arial,Helvetica,sans-serif;
}
CSS中还有很多字体设置属性，例如font-size设置字体大小等等。
至此，左栏的内容都设置完毕。
边框
在右栏中，HTML结构如下：
<div id="resume_right">
<div class="resume_content">
<div class="resume_edu">
<h2>教育背景</h2>
<ul class="edu_list">
<li>1908年，从章太炎先生学习，为“光复会”会员。</li>
<li>1904年，入仙台医学专门学校肄业。</li>
<li>1902年，公费赴日本留学。</li>
<li>1899年，转入江南陆师学堂附设矿务铁路学堂，学开矿。</li>
<li>1898年，入南京水师学堂。</li>
</ul>
</div>
<div class="resume_work">...</div>
<div class="resume_repre_work">...</div>
<div class="resume_evaluation"><p>...</p></div>
</div>
</div>
人物的详细信息都被包含在.resume_content中。
每个板块的标题在<h2>中，内容有的在<ul>中，有的在<p>中。
为<ul>和<p>设置字体：
.resume_content ul {
font-family:"Times New Roman",Times,serif;
}
.resume_content p {
font-family:"Times New Roman",Times,serif;
}
最后，设置板块的标题<h2>，首先为其设置颜色和字体：
.resume_content h2 {
color: #254665;
font-family:Arial,Helvetica,sans-serif;
}
为标题<h2>设置下边框：
.resume_content h2 {
color: #254665;
font-family:Arial,Helvetica,sans-serif;
/* 设置下边框 值依次是：宽度 款式 颜色*/
border-bottom: 1px solid #254665;
}
通过border-bottom设置下边框，它的值依次是宽度（1px）、款式（solid 实线）和颜色（#254665）。
此时页面在浏览器中显示如下：
通过CSS设置后的页面
至此，我们就完成了用CSS配置一个简历样式的工作。
网友评论