知识点导航:
* 行高和字号
+ 行高
+ 单行文本垂直居中
+ font 属性
* 超级链接
+ 伪类
* background 系列属性
+ background-color
+ background-image
+ background-repeat
+ background-position
+ background-attachment
+ background 综合属性
行高和字号<p>
行高<p>
在 CSS 中,所有的行都有行高。盒模型的 padding 不是作用在文字上的,而是作用在 “行”上的
文字是在自己的行里面居中的
为了严格保证字在行里面居中,行高、字号一般都是偶数,这样他们的差就是偶数,能够被 2 整除
单行文本垂直居中<p>
文本在行里面居中: 对于单行文本, 让行高等于盒子高;多行文本垂直居中,设置盒子的 padding。
font 属性<p>
font 综合属性<p>
font: 14px/24px "宋体"
等价于:
font-size: 14px;
line-height: 24px;
font-family: "宋体";
字体<p>
有些时候设置的字体系统没有,默认会设置为宋体。遇到这种情况可以设置备选字体( 英语字体放前面,这样所有的中文就不能匹配英语字体,因为英语字体内没有中文字 )
font-family: "Times New Roman", "微软雅黑", "宋体";
行高使用百分比<p>
行高可以用百分比,表示字号的百分之多少。一般来说,都是大于 100%的,因为行高一定要大于字号
font: 12px/200% "宋体";
等价于:
font: 12px/24px "宋体";
超级链接<p>
伪类<p>
同一个标签根据用户的状态不同有不同的样式,这就是伪类,它用冒号来表示。
a 标签有 4 种伪类:
a:link { //正常状态下
color: red;
}
a:visited { //已访问的状态
color: orange;
}
a:hover { //鼠标悬停的状态
color: green;
}
a:active { //鼠标点击的状态
color: black;
}
//必须按照这个顺序写,否则会失效
编写代码时,a 标签中描述盒子;伪类中描述文字的样式、背景
所有的 a 不继承 text、font 这些东西,因为 a 自己有一个伪类的权重
background 系列属性<p>
1. background-color<p>
在 CSS2.1 中,颜色的表示方法共有三种:
1. 单词 (简单的颜色)
2. rgb
3. 十六进制 (可以简化成三位)
2. background-image<p>
用来给盒子加上背景图片,默认会被铺满(padding的区域有背景图)
background-image: url(images/wuyifan.jpg) //相对路径
在 CSS 2.1 中,背景图片是不能调整尺寸大小的
3. background-repeat<p>
用来设置背景图是否重复以及重复方式。共有三种值:
background-repeat: no-repeat; //不重复
background-repeat: repeat-x; //横向重复
background-repeat: repeat-y; //纵向重复
4. background-position<p>
背景定位属性,类似iOS中的 frame 的 origin 的感觉,可以为负数,表示相反方向
它还可以用单词来描述:
background-position: right bottom; //右下角
CSS 精灵
"CSS 精灵"也叫做"CSS 雪碧"技术(CSS Sprite),是一种 CSS 图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用 CSS 的背景定位来显示需要显示的图片部分,减少了请求,比如 4 张小图片,原本需要 4 个请求,但是用了 CSS 精灵,小图片变为了一张图,请求就只有一个了。
5. background-attachment<p>
背景是否固定<p>
background-attachment: fixed;
背景被固定住,不会被滚动条滚走
6. background 综合属性<p>
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: blue url(1.jpg) no-repeat 100px 100px;
精灵的使用
background: url(1.jpg) no-repeat 0-133px;