行高和字体、超链接以及background（七）

作者: flowerflower | 来源:发表于2016-11-12 22:29 被阅读49次

行高和字体、超链接以及background（七）
css整理2-文字-文字溢出-盒模型-绝对居中-文档流-边距合并
css样式（1）
开发间距 ≠ 设计间距？
markdown语法
html的部分标签
简书markdown操作
calibre转合适索尼13寸pdf设置
css样式
css 入门

行高和字号

行高
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