CSS基础之行高和字号，超链接美化，backgroud系列属性
2017-12-20 本文已影响33人
Owen270
1.行高和字号
1.1行高
CSS中，所有的行，都有行高。盒模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。文字，是在自己的行里面居中的。比如，现在文字字号14px，行高是24px。那么：
图片.png
为了严格保证字在行里面居中，我们的工程师有一个约定： 行高、字号，一般都是偶数。这样，它们的差，就是偶数，就能够被2整除。
1.2 单行文本垂直居中
行高=盒子高,只适用于单行文本垂直居中
<!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;
}
p{
width: 600px;
height: 60px;
background-color: yellow;
margin: 100px;
font-size: 16px;
line-height: 60px;
}
</style>
</head>
<body>
<p>文字文字文字文字文字文字文字文字文字</p>
</body>
</html>
图片.png
不适用于多行。如果想让多行文本垂直居中，需要设置盒子的padding：
图片.png
1.3.font属性
使用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","微软雅黑","宋体";
● 所有的中文字体，都有英语别名，我们也要知道：
微软雅黑的英语别名：
1 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% “宋体”
2.超级链接的美化
2.1 伪类：同一个标签，根据用户的某种状态不同，有不同的样式。这就叫做“伪类”
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。必须先爱，后恨
<!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">
a:link{
color:red;
}
a:visited{
color:orange;
}
a:hover{
color:green;
}
a:active{
color:black;
}
</style>
</head>
<body>
<a href="http://www.563.com/" target="_blank">点击我去363</a>
<a href="http://www.163.com/" target="_blank">点击我去网易</a>
</body>
</html>
图片.png
3.background系列属性
3.1.1.background-color用rgb方法来表示
红色：
background-color: rgb(255,0,0);
rgb表示三原色“红”red、“绿”green、“蓝”blue。光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。
用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。
如果此项的值，是255，那么就说明是纯色：
绿色：
background-color: rgb(0,255,0);
蓝色：
background-color: rgb(0,0,255);
黑色：光学显示器，每个元件都不发光，黑色的
background-color: rgb(0,0,0);
白色：
background-color: rgb(255,255,255);
颜色可以叠加，比如黄色就是红色和绿色的叠加：
background-color: rgb(255,255,0);
再比如：
background-color: rgb(111,222,123);
就是红、绿、蓝三种颜色的不同比例叠加。
3.1.2.background-color十六进制表示法
所有用#开头的值，都是16进制的
十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;
比如：
background-color:#ff0000;
等价于
background-color:#f00;
比如：
background-color:#112233;
等价于
background-color:#123;
3.2.background-image
用于给盒子加上背景图片：
background-image:url(images/wuyifan.jpg);
url()表示网址，uniform resouces locator 统一资源定位符
images/wuyifan.jpg 就是相对路径。背景天生是会被平铺满的。padding的区域有背景图。
3.3 background-repeat属性
background-repeat属性，有三种值：
background-repeat:no-repeat; 不重复
background-repeat:repeat-x; 横向重复
background-repeat:repeat-y; 纵向重复
图片.png
<!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;
}
body{
background-image: url(images/dibanzhuan.jpg);
}
.nav{
width: 960px;
height: 40px;
margin: 100px auto;
}
.nav ul{
list-style: none;
}
.nav ul li{
float: left;
text-align: center;
line-height: 40px;
width: 120px;
height: 40px;
}
.nav ul li a{
display: block;
width: 120px;
height: 40px;
background-image: url(images/bg2.png);
background-repeat: repeat-x;
text-decoration: none;
color:white;
}
.nav ul li a:hover{
color:black;
background-image: url(images/bg3.png);
}
</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>
图片.png
3.4.background-position属性
3.4.1.属性的意思
background-position就是背景定位属性,background-position:100px，200px
背景图在盒子中右边移动100px，向下移动200px。
图片.png
定位属性可以是负数background-position:-100px -200px;
向左边100px，向上边200px。
<!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">
div{
width: 300px;
height: 300px;
border: 1px solid #000;
background-image: url(images/wuyifan.jpg);
background-repeat: no-repeat;
background-position:-50px -120px;
}
</style>
</head>
<body>
<div></div>
</body>
</html
图片.png
3.4.2. css精灵
原理：“css精灵”，英语css sprite，所以也叫做“css雪碧”技术。是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。css精灵有什么优点，就是减少了http请求。比如4张小图片，原本需要4个http请求。但是用了css精灵，小图片变为了一张图，http请求只有1个了。
<!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">
div{
width: 150px;
height: 60px;
border: 1px solid #000;
background-image: url(images/1.jpg);
background-repeat: no-repeat;
background-position: -100px -220px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
图片.png
图片.png
3.4.3 用单词描述
background-position: 描述左右的词儿 描述上下的词儿;
描述左右的词儿： left、 center、right
描述上下的词儿： top 、center、bottom
所以：
background-position: right bottom;
右下角：
图片.png
左下角：
background-position: left bottom;
3.5 background-attachment
background-attachment:fixed;背景就会被固定住，不会被滚动条滚走。
<!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">
body{
background-image: url(images/1.jpg);
background-attachment: fixed;
}
.header{
width: 980px;
height: 100px;
background-color: blue;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="header"></div>
<p>sdfsdf</p>
<p>sdfssdfasdfdf</p>
.....................................
</body>
</html>
图片.png
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: blue url(images/wuyifan.jpg) no-repeat 100px 100px;
图片.png
