11 KiB
行高和字号
行高
CSS中，所有的行，都有行高。盒模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。
如下图所示：
20170808_2216.png
上图中，我们设置行高为30px，30px * 5 = 150px，通过查看审查元素，这个p标签的高度果然为150px。而且我们发现，我们并没有给这个p标签设置高度，显然是内容将其撑高的。
文字，是在自己的行里面居中的。比如，现在文字字号14px，行高是24px。那么：
20170808_2220.png
为了严格保证字在行里面居中，我们的工程师有一个约定： 行高、字号，一般都是偶数。这样可以保证，它们的差一定偶数，就能够被2整除。
单行文本垂直居中
小技巧：如果一段文本只有一行，如果此时设置行高 = 盒子高，就可以保证单行文本垂直居中。这个很好理解。
上面这个小技巧，只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，还需要设置盒子的padding。如下：
20170808_2240.png
font字体属性
1、字号、行高、字体三大属性：
（1）字号：
font-size:14px;
（2）行高：
line-height:24px;
（3）字体：（font-family就是“字体”，family是“家庭”的意思）
font-family:"宋体";
上面这三个属性，我们可以使用一行代码来实现：（字号 font-size、行高 line-height、字体 font-family）
font: 14px/24px “宋体”;
2、字体属性的说明：
（1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置：
font-family: "华文彩云";
上方代码中，如果用户电脑里面没有这个字体，那么就会变成宋体。
页面中，中文我们只使用： 微软雅黑、宋体、黑体。 如果页面中，需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman
（2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，隔开备选字体。如下：
font-family: "微软雅黑","宋体";
上方代码表示：如果用户电脑里没有安装微软雅黑字体，那么就是宋体。
备选字体可以有无数个，用逗号隔开。
（3）我们要将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：
font-family: "Times New Roman","微软雅黑","宋体";
上方代码的意思是，英文会采用Times New Roman字体，而中文会采用微软雅黑字体（因为美国人设计的Times New Roman字体并不针对中文，所以中文会采用后面的微软雅黑）。比如说，对于smyhvae哈哈哈这段文字，smyhvae会采用Times New Roman字体，而哈哈哈会采用微软雅黑字体。
可是，如果我们把中文字体写在前面：(错误写法)
font-family: "微软雅黑","Times New Roman","宋体";
上方代码会导致，中文和英文都会采用微软雅黑字体。
（4）所有的中文字体，都有英语别名。
微软雅黑的英语别名：
font-family: "Microsoft YaHei";
宋体的英语别名：
font-family: "SimSun";
于是，当我们把字号、行高、字体这三个属性合二为一时，也可以写成：
font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
（5）行高可以用百分比，表示字号的百分之多少。
一般来说，百分比都是大于100%的，因为行高一定要大于字号。
比如说， font:12px/200% “宋体”等价于font:12px/24px “宋体”;。200%可以理解成word里面的2倍行高。
反过来， font:16px/48px “宋体”;等价于font:16px/300% “宋体”。
超级链接的美化
超级链接就是a标签。
伪类
伪类：同一个标签，根据用户的某种状态不同，有不同的样式。这就叫做“伪类”。
类是工程师加的，比如div属于box类，很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户有没有点击、有没有触碰。所以，就叫做“伪类”。 伪类用冒号来表示。
a标签有4种伪类，要求背诵。如下：
a:link{
color:red;
}
a:visited{
color:orange;
}
a:hover{
color:green;
}
a:active{
color:black;
}
上方代码解释如下：
:link表示“链接”，用户没有点击过这个链接的样式。:visited表示“访问过的”， 用户访问过了这个链接之后的样式。:hover表示“悬停”，用户鼠标悬停的时候链接的样式。:active表示“激活”， 用户用鼠标点击这个链接，但是不松手，此刻的样式。
上面的代码，看一下动图的效果：
记住，这四种状态，在css中，必须按照固定的顺序写：
a:link 、a:visited 、a:hover 、a:active
如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。
超链接的美化
超链接a标签在使用的时候，比较难。因为不仅仅要控制a这个盒子，也要控制它的伪类。
我们一定要将a标签写在前面，将:link、:visited、:hover、:active这些伪类写在后面。
举个例子。如果效果：
20170810_2235.gif
为了实现上面这个效果，完整版代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav{
width: 960px;
height: 50px;
border: 1px solid red;
margin: 100px auto;
}
.nav ul{
/*去掉小圆点*/
list-style: none;
}
.nav ul li{
float: left;
width: 120px;
height: 50px;
/*让内容水平居中*/
text-align: center;
/*让行高等于nav的高度，就可以保证内容垂直居中*/
line-height: 50px;
}
.nav ul li a{
display: block;
width: 120px;
height: 50px;
}
/*两个伪类的属性，可以用逗号隔开*/
.nav ul li a:link , .nav ul li a:visited{
text-decoration: none;
background-color: purple;
color:white;
}
.nav ul li a:hover{
background-color: orange;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
</ul>
</div>
</body>
</html>
上方代码中，我们发现，当我们在定义a:link和 a:visited这两个伪类的时候，如果它们的属性相同，我们其实可以写在一起，用逗号隔开就好，摘抄如下：
.nav ul li a{
display: block;
width: 120px;
height: 50px;
}
/*两个伪类的属性，可以用逗号隔开*/
.nav ul li a:link , .nav ul li a:visited{
text-decoration: none;
background-color: purple;
color:white;
}
.nav ul li a:hover{
background-color: orange;
}
如上方代码所示，最标准的写法，就是把link、visited、hover这三个伪类都要写。但是前端开发工程师在大量的实践中，发现不写link、visited也挺兼容。写法是：
a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态（前提是都具有了相同的属性）。写法如下：
.nav ul li a{
display: block;
width: 120px;
height: 50px;
text-decoration: none;
background-color: purple;
color:white;
}
.nav ul li a:hover{
background-color: orange;
}
当然了，在写a:link、a:visited这两个伪类的时候，要么同时写，要么同时不写。如果只写a属性和a:link属性，不规范。
background系列属性
background-color背景颜色属性
css2.1中，背景颜色的表示方法有三种：单词、rgb表示法、十六进制表示法。
比如红色可以有下面的三种表示方法：
background-color: red;
background-color: rgb(255,0,0);
background-color: #ff0000;
下面分别介绍。
1、用英语单词来表示：
能够用英语单词来表述的颜色，都是简单颜色。比如红色：
background-color: red;
2、rgb表示法：
rgb表示三原色“红”red、“绿”green、“蓝”blue。
光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。r、g、b的值，每个值的取值范围0~255，一共256个值。
比如红色：
background-color: rgb(255,0,0);
黑色：
background-color: rgb(0,0,0);
颜色可以叠加，比如黄色就是红色和绿色的叠加：
background-color: rgb(255,255,0);
3、十六进制表示法：
比如红色：
background-color: #ff0000;
PS:所有用#开头的值，都是16进制的。
这里，我们就要学会16进制与10进制之间的转换。下面举几个例子。
问：16进制中28等于10进制多少？ 答：2*16+8 = 40。
16进制中的af等于10进制多少？ 答：10 * 16 + 15 = 175
所以，#ff0000就等于rgb(255,0,0)。
background-color: #123456;等价于background-color: rgb(18,52,86);
十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc。举例如下：
比如：
background-color:#ff0000;
等价于：
background-color:#f00;
比如：
background-color:#112233;
等价于：
background-color:#123;
但是，比如下面这个是无法简化的：
background-color:#222333;
再比如，下面这个也是无法简化的：
background-color:#123123;
几种常见的颜色简写可以记住。如下：
#000 黑
#fff 白
#f00 红
#222 深灰
#333 灰
#ccc 浅灰
background-image属性
background-repeat属性
background-position属性
CSS精灵：