资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/前端技术之_CSS详解第五天

前端技术之_CSS详解第五天

番茄西红柿 / 1246人阅读

摘要：前端技术之详解第五天一行高和字号行高中，所有的行，都有行高。微软雅黑我们一定要将标签写在前面，这些伪类写在后面。也就是说，标签涵盖了的状态。表示三原色红绿蓝。进制表示法，也是两位两位看，看，但是没有逗号隔开。

前端技术之_CSS详解第五天

一、行高和字号

1.1 行高

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

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>Documenttitle>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        p{
            width: 500px;
            border: 1px solid black;
            margin: 100px;
            line-height: 40px;
        }
    style>
head>
<body>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字p>
body>
html>
View Code 
 line-height: 40px;




    
    Document
    


    
国国国国国国国国国国国国国国国国国国国国国国国
View Code

文字，是在自己的行里面居中的。比如，现在文字字号14px，行高是24px。那么：

 

为了严格保证字在行里面居中，我们的工程师有一个约定： 行高、字号，一般都是偶数。这样，它们的差，就是偶数，就能够被2整除。

1.2 单行文本垂直居中




    
    Document
    


    
文字文字文字文字文字文字文字文字文字

文本在行里面居中

 

公式：

1 行高:盒子高;

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

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

 

1.3 font属性

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




    
    Document
    


    
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
View Code 
1 font: 14px/24px “宋体”;
1 font-size:14px;

2 line-height:24px;

3 font-family:"宋体";

 等价于三行语句：

font-family就是“字体”。family是“家庭”、“伐木累”的意思。




    
    Document
    


    哈abcdefghijklmn哈
    我是span
View Code

● 网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装，比如你设置：

1 font-family: "华文彩云";

 如果用户电脑里面没有这个字体，那么就会变成宋体。

页面中，中文我们只使用： 微软雅黑、宋体、黑体。 如果页面中，需要其他的字体，那么需要切图。

英语：Arial 、 Times New Roman


● 为了防止用户电脑里面，没有微软雅黑这个字体。就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，没有安装微软雅黑字体，那么就是宋体：

1 font-family: "微软雅黑","宋体";

 备选字体可以有无数个，用逗号隔开。

● 我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：

1 font-family: "Times New Roman","微软雅黑","宋体";

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

微软雅黑的英语别名：

1 font-family: "Microsoft YaHei";   
1 font-family: "SimSun";

 宋体的英语别名：

font属性能够将font-size、line-height、font-family合三为一：

1 font:12px/30px  "Times New Roman","Microsoft YaHei","SimSun";

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

1 font:12px/200% “宋体”
1 font:12px/24px “宋体”;

 等价于

反过来，比如：

1 font:16px/48px “宋体”;
1 font:16px/300% “宋体”

等价于

二、超级链接的美化

超级链接就是a标签。

2.1 伪类




    
    Document
    


    点击我去363
    点击我去网易

也就是说，同一个标签，根据用户的某种状态不同，有不同的样式。这就叫做“伪类”。

类就是工程师加的，比如div属于box类，很明确，就是属于box类。但是a属于什么类？不明确。因为要看用户有没有点击、有没有触碰。所以，就叫做“伪类”。

伪类用冒号来表示。

a标签有4种伪类，要求背诵：

1  a:link{
2  color:red;
3  }
4  a:visited{
5  color:orange;
6  }
7  a:hover{
8  color:green;
9  }
10  a:active{
11  color:black;
12  }

:visited 表示， 用户访问过了这个链接的样式。 是英语“访问过的”的意思。:link   表示， 用户没有点击过这个链接的样式。 是英语“链接”的意思。

:hover 表示， 用户鼠标悬停的时候链接的样式。 是英语“悬停”的意思。

:active 表示， 用户用鼠标点击这个链接，但是不松手，此刻的样式。 是英语“激活”的意思。

 

a:link

 

 

a:visited

 

 

a:hover

 

 

a:active

 

 

 

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

a:link 、a:visited 、a:hover 、a:active

如果不按照顺序，那么将失效。“爱恨准则”love hate。必须先爱，后恨。

2.2 超级链接的美化

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

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




    
    Document
View Code

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

 

1     .nav ul li a{
2     display: block;
3     width: 120px;
4     height: 40px;
5     }
6    .nav ul li a:link ,.nav ul li a:visited{
7     text-decoration: none;
8 
9     color:white;
10     }
11     .nav ul li a:hover{
12 
13     font-weight: bold;
14     color:yellow;
15     }

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

最标准的，就是把link、visited、hover都要写。但是前端开发工程师在大量的实践中，发现不写link、visited浏览器也挺兼容。所以这些“老油条”们，就把a标签简化了：




    
    Document
View Code

a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态。

1     .nav ul li a{
2     display: block;
3     width: 120px;
4     height: 50px;
5     text-decoration: none; 
7     color:white;
8     }
9     .nav ul li a:hover{
11     }

三、background系列属性

3.1 background-color属性

背景颜色属性。




    
    Document

css2.1中，颜色的表示方法有哪些？一共有三种：单词、rgb表示法、十六进制表示法

3.1.1 用英语单词来表示

能够用英语单词来表述的颜色，都是简单颜色。

红色：



background-color: red;   





3.1.2 用rgb方法来表示 


红色：






    
    Document
    


    

    

    

    

    

    

    

    

    






 



background-color: rgb(255,0,0);



用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。rgb表示三原色“红”red、“绿”green、“蓝”blue。光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。


如果此项的值，是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.3 十六进制表示法







    
    Document
    


    

    

    

    

    

    

    

    

    





View Code

红色：



background-color: #ff0000;



#ff0000所有用#开头的值，都是16进制的。


16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。


ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);


怎么换算的？我们介绍一下


我们现在看一下10进制中的基本数字（一共10个）:


0、1、2、3、4、5、6、7、8、9


16进制中的基本数字（一共16个）:


0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f


16进制对应表：


十进制数 十六进制数


0 　　 0


1 　　 1


2　　 2　　


3 3　　　　


……


10　　 a


11 　　 b


12 　　 c


13　　 d


14 　　 e


15　　 f


16　　 10


17　　 11


18 　　 12


19 　　 13


……


43 　　 2b


……


255　　 ff


十六进制中，13 这个数字表示什么？


表示1个16和3个1。 那就是19。 这就是位权的概念，开头这位表示多少个16，末尾这位表示多少个1。


小练习：


16进制中28等于10进制多少？


答：2*16+8 = 40。


16进制中的2b等于10进制多少？


答：2*16+11 = 43。


16进制中的af等于10进制多少？


答：10 * 16 + 15 = 175


16进制中的ff等于10进制多少？


答：15*16 + 15 = 255


所以，#ff0000就等于rgb(255,0,0)



background-color: #123456;



 等价于：



background-color: rgb(18,52,86);



所以，任何一种十六进制表示法，都能够换算成为rgb表示法。也就是说，两个表示法的颜色数量，一样。


十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;


比如：



background-color:#ff0000;



等价于



background-color:#f00;



比如：



background-color:#112233;



等价于



background-color:#123;



只能上面的方法简化，比如



background-color:#222333;



要记住：



1 #000   黑
2 #fff    白
3 #f00   红
4 #333   灰
5 #222   深灰
6 #ccc   浅灰



3.2 background-image


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







    
    Document
    


    
文字文字文字文字文字文字文字文字文字文字





View Code


1 background-image:url(images/wuyifan.jpg);





 


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


背景天生是会被平铺满的。


padding的区域有背景图。


3.3 background-repeat属性


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






    
    Document
    


    
文字文字文字文字文字文字文字文字文字文字






repeat表示“重复”。





1 background-repeat:no-repeat;   不重复

2 background-repeat:repeat-x;    横向重复

3 background-repeat:repeat-y;    纵向重复



 也就是说，background-repeat属性，有三种值：







    
    Document
    


    

        
    





View Code

3.4 background-position属性


3.4.1 属性的意思






    
    Document
    


    






背景定位属性，是最难的属性。一定要好好学。


 


 


position就是“位置”的意思。background-position就是背景定位属性。



1 background-position:向右移动量 向下移动量;



定位属性可以是负数： 




3.4.2 css精灵


原理：







    
    Document
    


    





View Code



“css精灵”，英语css sprite，所以也叫做“css雪碧”技术。是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。


css精灵有什么优点，就是减少了http请求。比如4张小图片，原本需要4个http请求。但是用了css精灵，小图片变为了一张图，http请求只有1个了。


淘宝网的精灵图：






    
    Document
    


    
    
    





 




用fireworks精确控制精灵：







    
    Document
    


    





View Code

 


 


3.4.3 用单词描述



1 background-po           
               
                                           
                       
                 

            
                     

                 

                                                                                                                    
                         混合云
                                             
                         云服务器
                                                                                                                                                 
                                      
                     
                    
                                                                                               第五天
                                                                                                           第7天:CSS入门
                                                                                                           前端css
                                                                                                           css前端
                                                         
                 

               
              

             
               

                   
 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

                 
                   
转载请注明本文地址：https://www.ucloud.cn/yun/2289.html

               

                      
               
              

              

                
相关文章

                
    
                             
                                                                                                    
  • 
                                                
    
                            
                        
      
                                                
    
                          
    前端技术之_CSS详解第六天--完结
    
                                                     
    前端技术之_CSS详解第六天--完结 

一、复习第五天的知识
a标签的伪类4个：
　　a:link 没有被点击过的链接
　　a:visited 访问过的链接
　　a:hover 悬停
　　a:active 按下鼠标不松手
顺序就是“love hate”准则。
可以简写：

1 a{
3 }
4 a:hover{
6 }

background系列属性，CSS2.1层面

...
    
                                                   
                          
    
                                
    
                                    番茄西红柿
                                    
                                    评论0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    HTML
    
                                                     
    摘要：目前，中关村黑马程序员训练营已成长为行业学员质量好课程内容深企业满意的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。黑马程序员的学员筛选制度，远比现在以上的企业招聘流程更为严格。系统的学习可以参考w3c的教程
web概念概述
* JavaWeb：
    * 使用Java语言开发基于互联网的项目

* 软件架构：
    1. C/S: Client/Server 客户端/服务...
    
                                                   
                          
    
                                
    
                                    Snailclimb
                                    
                                    评论0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    第五天  JavaScript单线程详解
    
                                                     
    摘要：若以多线程的方式操作这些，则可能出现操作的冲突。另外，因为是单线程的，在某一时刻内只能执行特定的一个任务，并且会阻塞其它任务执行。浏览器事件触发线程事件触发线程，当一个事件被触发时该线程会把事件添加到任务队列的队尾，等待引擎的处理。

首先，说下为什么 JavaScript 是单线程？
总所周知，JavaScript是以单线程的方式运行的。说到线程就自然联想到进程。那它们有什么联系呢？
...
    
                                                   
                          
    
                                
    
                                    caiyongji
                                    
                                    评论0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    前端技术之_CSS详解第二天
    
                                                     
    摘要：前端技术之详解第二天华文中宋基础选择器负责结构，负责样式，负责行为。微软雅黑浏览器的市场占有率浏览器打分儿子选择器测试工具的儿子。表示选择下一个兄弟微软雅黑选择上的是元素后面紧挨着的第一个兄弟。前端技术之_CSS详解第二天
1、css基础选择器
html负责结构，css负责样式，js负责行为。
css写在head标签里面，容器style标签。
先写选择器，然后写大括号，大括号里面是样式。

...
    
                                                   
                          
    
                                
    
                                    番茄西红柿
                                    
                                    评论0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    王下邀月熊_Chevalier的前端每周清单系列文章索引
    
                                                     
    摘要：感谢王下邀月熊分享的前端每周清单，为方便大家阅读，特整理一份索引。王下邀月熊大大也于年月日整理了自己的前端每周清单系列，并以年月为单位进行分类，具体内容看这里前端每周清单年度总结与盘点。

感谢 王下邀月熊_Chevalier 分享的前端每周清单，为方便大家阅读，特整理一份索引。
王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列，并以年/月为单位进行分类，具...
    
                                                   
                          
    
                                
    
                                    2501207950
                                    
                                    评论0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
发表评论

                   

                                      
                      

                        登陆后可评论
                      
                   

               

              

                

                  
0条评论
   
                
 
                      

              

           

           

              
 
                

                    
                    
番茄西红柿

                    
男|高级讲师

                    

                     
                                                                      
      
                                                                                        我要私信
                     
                                            
                    

                    

                          
TA的文章

                          阅读更多
                    

                      
                

                
                 


                  
云社区相关服务
 
                    

                        
                            提问
                            提问
                        
                        
                            学习
                            学习
                        
                        
                        
                            认证
                            认证
                        
                      
                        
                            产品
                            产品
                        
                        
                        
                            技术服务
                            技术服务
                        
                          
                            售前咨询
                            售前咨询
                        
                    
   
                
                   
              
  

                  
最新活动
 
           
         

                    
                      
                    
                    
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
阅读需要支付1元查看
  
         
     
       

      
  
    
    









<