CSS基础之行高和字号，超链接美化，backgroud系列属性

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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,992评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,212评论 3赞 388
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,535评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,197评论 1赞 287
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,310评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,383评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,409评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,191评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,621评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,910评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,084评论 1赞 342
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,763评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,403评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,083评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,318评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,946评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,967评论 2赞 351

推荐阅读更多精彩内容

  • CSS 基础
    CSS基础 本文包括CSS基础知识选择器（重要！！！）继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,071评论 0赞 40
  • 行高和字体、超链接以及background（七）
    行高和字号 行高CSS中，所有的行，都有行高，盒模型的padding,绝对不是直接作用在文字上的，而是作用在行上的...
    flowerflower阅读 757评论 1赞 2
  • CSS 基础_第三天
    请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。 如果您觉得这篇文章还...
    MR_LIXP阅读 2,806评论 1赞 9
  • iOS_UIImage显示GIF图
    一、原理 gif的显示是图片的叠加，因此可以根据这个特征来实现我们的想法： 使用ImageIO库中的CGImage...
    phzean阅读 7,313评论 5赞 6
  • 我们痛苦的症结在于：妄想太多，付出太少
    快餐社会的红男绿女，比的是节奏，要的是feel，看的是结果，奔的是少出苦多收获。 诚然，在当今这个信心爆炸的社会，...
    云水琉璃阅读 348评论 0赞 1