CSS基础(五)--行高、a标签及background属性

最新推荐文章于 2022-10-19 14:56:15 发布

伊莉丝

最新推荐文章于 2022-10-19 14:56:15 发布

阅读量1.4k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/u013658374/article/details/78176522

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

行高和字号

行高

CSS中，所有的行，都有行高。盒模型的padding，绝对不是直接作用在文字上的，而是作用在文字“行”上的。文字，是在自己的行里面居中的。为了严格保证字在行里面居中，我们的工程师有一个约定：行高、字号，一般都是偶数。这样，它们的差，就是偶数，就能够被2整除。

单行文本垂直居中

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        p {
            height: 50px;
            background-color: yellowgreen;
            line-height: 50px;
        }
    </style>
</head>
<body>
<p>2017年10月8日 18:49:11</p>
</body>
</html>

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

`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", "华文彩云","宋体";

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

Microsoft YaHei

宋体的英语别名：

SimSun

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

 font:14px/200% "SimSun","华文彩云";

等价于

            font-size: 14px;
            line-height: 28px;
            font-family:"SimSun","华文彩云";

超级链接的美化

超级链接就是a标签。

伪类

伪类就是不同状态有不同的样式。

        /* 用户没有点击过这个链接的样式。*/
        a:link{
            color: red;
        }
        /* 用户访问过了这个链接的样式。*/
        a:visited{
            color: orange;
        }
        /*用户鼠标悬停的时候链接的样式。*/
        a:hover{
            color: green;
        }
        /* 用户用鼠标点击这个链接，但是不松手，此刻的样式。*/
        a:active{
            color: black;
        }

记住，这四种状态，在css中，必须按照固定的顺序写

background系列属性

background-image

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

  background-image: url(../img/a.png);

url()表示网址，uniform resouces locator 同意资源定位符
../img/a.png就是相对路径。

这里写图片描述

padding的区域有背景图。

background-repeat属性

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

             /*不重复*/
            background-repeat: no-repeat;
            /*横向重复*/
            background-repeat: repeat-x;
            /*纵向重复*/
            background-repeat: repeat-y;

background-position属性

背景定位属性。

用数字表示

background-position: 100px 100px;

第一个数值表示向右移动量，第二个数值表示向下移动量。

用字母表示

      background-position: center top;

第一个表示左右，可选的有left、 center、right
第二个表示上下，可选的有top 、center、bottom

background-attachment

背景是否固定。

background-attachment:fixed;

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

background综合属性

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

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

等价于：

1background-color:red;
2background-image:url(1.jpg);
3background-repeat:no-repeat;
4background-position:100px 100px;
background-attachment:fixed;

可以任意省略部分：
如：

background: red;

伊莉丝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录