超级链接美化+行高 line-height和字号

超级链接美化

超链链接在HTML就是a标签的体现，在css中使用a标签我们前面介绍了伪类选择器的“爱恨原则”-love hate 必须先爱后恨

a标签在使用的时候，非常的难。因为不仅仅要控制a这个盒子，也要控制它的伪类。

我们一定要将a标签写在前面，:link、:visited、:hover、:active这些伪类写在后面。

a标签中，描述盒子； 伪类中描述文字的样式、背景。

.nav ul li a{ 
    display: block; 
    width: 120px; 
    height: 40px;
 }
.nav ul li a:link ,.nav ul li a:visited{ 
    text-decoration: none; 
    background-color:yellowgreen; 
    color:white; }
.nav ul li a:hover{
     background-color: purple; 
    font-weight: bold; 
    color:yellow; 
}

 

记住，所有的a不继承text、font这些东西。因为a自己有一个伪类的权重。

 

最标准的，就是把link、visited、hover都要写。

但是前端开发工程师在大量的实践中，发现不写link、visited浏览器也挺兼容。

所以这些“老油条”们，就把a标签简化了： 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; 
}  

 

行高 line-height和字号

 

 

1.1 行高　　

　　在css中，所有的行，都有行高。盒模型的padding，绝对不是直接作用在文字上的，而是作用在"行"上的。

 

 <div>
        文字文字文字文字文字
 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
 
    </div>

div{
    width: 300px;
    border: 1px solid red;
    line-height: 40px;
 }

　　文字，是在自己的行里面居中的。比如，现在文字字号14px,行高是24px。文字会居中在行高中，上下有5px的距离。如果行高是25px，那么上方有5px，下方有6px的距离。

所以为了严格保证字在行里面居中，我们的工程师都有一个约定：行高、字号一般都是偶数。

 

1.2 单行文本垂直居中

　　文本在行里面居中。公式：行高=盒子高

　　需要注意的是：只适用于单行文本垂直居中！！不适用于多行

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

　　

 div{
            width: 300px;     
            height: 230px;
            border: 1px solid red;
            line-height: 20px;
            padding-top: 70px;
 }

 

1.3 font属性

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

 

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

 

　　  font-size:14px; 2 line-height:24px; 3 font-family:"宋体"; 

 

　　font-family就是“字体”。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% “宋体”