国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端技術之_CSS詳解第五天

番茄西紅柿 / 1377人閱讀

摘要：前端技術之詳解第五天一行高和字號行高中，所有的行，都有行高。微軟雅黑我們一定要將標簽寫在前面，這些偽類寫在后面。也就是說，標簽涵蓋了的狀態。表示三原色紅綠藍。進制表示法，也是兩位兩位看，看，但是沒有逗號隔開。

前端技術之_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           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

                 
                   
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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條評論
   
                
 
                      

              

           

           

              
 
                

                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    













<