零基础CSS（四）行高 字号、background-系列

一、行高和字号

1.1 行高

CSS中，所有的行，都有行高。盒模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。换句话来说，padding距离是边框与行之间的距离，而不是边框与文字之间的距离。

文字，是在自己的行里面居中的。比如，现在文字字号14px，行高是24px。那么：

为了严格保证字在行里面居中，我们有一个约定： 行高、字号，一般都是偶数。这样，它们的差，就是偶数，就能够被2整除。

1.2 单行文本垂直居中

文本在行里面居中: 行高=盒子高

需要注意的是，这个小技巧，行高=盒子高。  只适用于单行文本垂直居中！！不适用于多行。

如果想让多行文本垂直居中，需要设置盒子的padding：

1.3 font属性

● 使用font属性，能够将字号、行高、字体，能够一起设置。

font: 14px/24px “宋体”;   等价于三句话：

font-size:14px;

line-height:24px;

font-family:"宋体";

● 网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装。

页面中，中文我们只使用： 微软雅黑、宋体、黑体。 如果页面中，需要其他的字体，那么需要切图。

英语：Arial 、 Times New Roman。

● 为了防止用户电脑里面，没有微软雅黑这个字体。就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，没有安装微软雅黑字体，那么就是宋体：

font-family: "微软雅黑","宋体";  //备选字体可以有无数个，用逗号隔开。

● 我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体，（中文字体可以匹配英语）

font-family: "Times New Roman","微软雅黑","宋体";

● 所有的中文字体，都有英语别名，我们也要知道：

微软雅黑的英语别名：font-family: "Microsoft YaHei";   

font属性能够将font-size、line-height、font-family合三为一：

font:12px/30px  "Times New Roman","Microsoft YaHei","SimSun";

● 行高可以用百分比，表示字号的百分之多少。一般来说，都是大于100%的，因为行高一定要大于字号。

font:12px/200% “宋体”   等价于   font:12px/24px “宋体”;

 

二、background系列属性

3.1 background-color属性

背景颜色属性。

css2.1中，颜色的表示方法有哪些？一共有三种：单词、rgb表示法、十六进制表示法

能够用英语单词来表述的颜色，都是简单颜色。

红色  background-color: red;   

3.1.2 用rgb方法来表示

红色：background-color: rgb(255,0,0);

rgb表示三原色“红”red、“绿”green、“蓝”blue。光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。

用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。

黑色：background-color: rgb(0,0,0);

光学显示器，每个元件都不发光，黑色的。

3.1.3 十六进制表示法

红色：background-color: #ff0000;

所有用#开头的值，都是16进制的。

#ff0000 16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。

请两位表示红，中间两位表示绿，后两位表示蓝；

任何一种十六进制表示法，都能够换算成为rgb表示法。也就是说，两个表示法的颜色数量，一样。

十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;

比如：background-color:#ff0000;等价于 background-color:#f00;

3.2 background-image

用于给盒子加上背景图片：

background-image: url("image/linyushen.jpg");

url()表示网址，uniform resouces locator 同意资源定位符

背景天生是会被平铺满的。padding的区域也有背景图。

3.3 background-repeat属性

设置背景图是否重复的，重复方式的。

repeat表示“重复”。

也就是说，background-repeat属性，有三种值：

1. background-repeat:no-repeat;   不重复
2. background-repeat:repeat-x;    横向重复

3.background-repeat:repeat-y;    纵向重复 

 

3.4 background-position属性

3.4.1 属性的意思

position就是“位置”的意思。background-position就是背景定位属性。

background-position:向右移动量 向下移动量;

background-position：100px 100px;  //属性值可以是负数

3.4.2 css精灵

“css精灵”，英语css sprite，所以也叫做“css雪碧”技术。是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

css精灵有什么优点，就是减少了http请求。比如4张小图片，原本需要4个http请求。但是用了css精灵，小图片变为了一张图，http请求只有1个了。

 

3.4.3 用单词描述

background-position: 描述左右的词儿  描述上下的词儿;

描述左右的词儿： left、 center、right

描述上下的词儿： top 、center、bottom

background-position: right bottom; 表示右下角；

3.5 background-attachment

背景是否固定。

background-attachment:fixed;

背景就会被固定住，不会被滚动条滚走。

3.6 background综合属性

background属性和border一样，是一个综合属性：

background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于：

background-color:red;

background-image:url(1.jpg);

background-repeat:no-repeat;

background-position:100px 100px;

background-attachment:fixed;

可以任意省略部分：比如 background: red; 只设置背景颜色

 

今晚月色很美

but感冒了