行高和字号
- 行高
CSS中，所有的行，都有行高，盒模型的padding,绝对不是直接作用在文字上的，而是作用在行上的。为了保证字在行里面居中，行高、字号，一般都是偶数，他们的差就是偶数，就能被2整除。
- 单行文本垂直居中
单行文本垂直居中(行高= 盒子高),只适合单行文本垂直居中，而不适用多行。
p{
height:40px;
line-height:40px
}
- 多行文本居中需计算
p{
width: 200px;
/*height: 200px;*/
line-height: 20px;
font-size: 20px;
text-indent: 2em;
border: 2px solid fuchsia;
padding: 60px;
}
多行文本居中需计算.png
- font属性
1)使用font属性，能够将字号、行高、字体，能够一起设置。
font: 14px/24px “宋体”;
等价于：
font-size:14px;
line-height:24px;
font-family:"宋体";
- 网页中不是所有字体都能用的，因为这个字体要看用户的电脑里面装没装，比如你设置：
font-family: "华文仿宋";如果用户电脑里面没有这个字体，那么就会变成宋体。
页面中，中文我们只使用： 微软雅黑、宋体、黑体。 如果页面中，需要其他的字体，那么需要切图。
英语：Arial、Times New Roman - 为了防止用户电脑里面，没有微软雅黑这个字体。就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，没有安装微软雅黑字体，那么就是宋体：
font-family: "微软雅黑","宋体";
备选字体可以有无数个，用逗号隔开。 - 我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：
font-family: "Times New Roman","微软雅黑","宋体";
- 所有的中文字体，都有英语别名，我们也要知道：
//微软雅黑的英语别名
font-family: "Microsoft YaHei";
//宋体的英语别名
font-family: "SimSun";
font属性能够将font-size、line-height、font-family合三为一：
font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
- 行高可以用百分比，表示字号的百分之多少。一般来说，都是大于100%的，因为行高一定要大于字号。
font:12px/200% “宋体”
等价于
font:12px/24px “宋体”;
反过来，比如：
font:16px/48px “宋体”;
等价于
font:16px/300% “宋体”
超链接
<a href= "#"></a> //#代表跳转到当前页面
<a href="http://www.baodu.com" target="_blank">百度</a> //代表重新打开新的界面跳转到百度
a标签有4种伪类(触发某些操作才去执行,同一个标签，根据用户的某种状态不同，有不同的样式)
a:link{ //用户从没有点击过这个链接的样式
color:red;
}
a:visited{ //用户访问过了这个链接的样式
color:grey;
}
a:hover{ //用户悬浮在元素上方时的样式
color:blue;
}
a:active{ //用户点击链接，但是没有松手时的样式
color:pink;
}
这四种状态，在css中，需按照固定的顺序写,如果不按照顺序写，那么将会失效，简称“爱恨准则”:love hate(L-V-H-A).
a标签中描述盒子；伪类中描述文字的样式、背景。将a标签写在前面，伪类写在后面
.nav ul li a{
display: block;
width: 120px;
height: 60px;
}
.nav ul li a:link, .nav ul li a:visited{
color: white;
text-decoration: none;
background-color: gold;
}
/*因为上面link中已经设置了text-decoration 所以这里就不需要再设置一遍*/
.nav ul li a:hover{
background-color: fuchsia;
}
注意:所有的a标签不继承text、font等属性。
a:link、a:visited都是可以省略的，简写在a标签里面，即a标签涵盖了link、visited的状态。
.nav ul li a{
display: block;
width: 120px;
height: 60px;
color: white;
text-decoration: none;
background-color: gold;
}
/*因为上面link中已经设置了text-decoration */
.nav ul li a:hover{
background-color: fuchsia;
}
background属性
- background-color 属性
表示法:、字面含义、rgb、16进制表示法。
#000 黑
#fff 白
#f00 红
#333 灰
#222 深灰
#ccc 浅灰
- background-image
background-image: url("qq.png");url()表示地址。bg.jpg是相对路径
相对路径：资源在当前的项目中，.,././中
绝对路径：资源不在当前的项目中，http://、https://、ftp://、file://
body{
background-image: url("qq.png");
/*background-repeat:no-repeat;*/ //不重复
/*background-repeat:repeat-x;*/ //横向重复
background-repeat:repeat-y; //纵向重复
}
background-repeat属性的几种情况
.png
- background-position
- 用像素描述
background-position：背景定位属性，定位属性可以是负数
background-position：向右移动量 向下移动量;
background-position：100px 50px;
- 用单词描述
background-position：描述左边的词 描述右边的词
描述左边的词:left 、center、right
描述右边的词:top 、center、bottom
//右下角
background-position：right bottom;
- background-attachment
background-attachment：背景是否固定
background-attachment:fixed;背景就会固定住，不会被滚动条带走。
- background综合属性
background属性与border属性一样，是一个综合属性
background:red url(qq.png) no-repeat 100px 100px fixed;
等价于
background-color:red;
background-image:url(qq.png);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;
假设有图片，又有背景颜色，那么会以显示图片为主，有空缺的地方会用颜色自动填充。
有图片，又有背景颜色.png
