WEB學習-CSS行高、字體，連接的美化以及背景

• 行高和字號

• CSS中，全部的行，都有行高。盒模型的padding，絕對不是直接做用在文字上的，而是做用在「行」上的。

   

• 單行文本垂直居中

• 文本在行裏面是居中
  其中，行高:盒子高;
  須要注意的是，這個小技巧，行高=盒子高。 只適用於單行文本垂直居中！！不適用於多行。 若是想讓多行文本垂直居中，須要設置盒子的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","微軟雅黑","宋體";
  
  ● 全部的中文字體，都有英語別名，咱們也要知道：
  微軟雅黑的英語別名：
  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標籤。 1 僞類
  同一個標籤，根據用戶的某種狀態不一樣，有不一樣的樣式。這就叫作「僞類」。
  類就是工程師加的，好比div屬於box類，很明確，就是屬於box類。可是a屬於什麼類？不明確。由於要看用戶有沒有點擊、有沒有觸碰。因此，就叫作「僞類」。
  
  僞類用冒號來表示。
  
  
  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。必須先愛，後恨。
  
  2 超級連接的美化
  a標籤在使用的時候，很是的難。由於不單單要控制a這個盒子，也要控制它的僞類。
  咱們必定要將a標籤寫在前面，:link、:visited、:hover、:active這些僞類寫在後面。
  a標籤中，描述盒子； 僞類中描述文字的樣式、背景。
  .nav ul li a{
              display: block;
              width: 120px;
              height: 40px;
          }
          .nav ul li a:link ,.nav ul li a:visited{
              text-decoration: none;
              background-color: yellowgreen;
              color:white;
          }
          .nav ul li a:hover{
              background-color: purple;
              font-weight: bold;
              color:yellow;
          }
  
  全部的a不繼承text、font這些東西。由於a本身有一個僞類的權重。
  
  最標準的，就是把link、visited、hover都要寫。可是前端開發工程師在大量的實踐中，發現不寫link、visited瀏覽器也挺兼容。因此這些「老油條」們，就把a標籤簡化了：
  a:link、a:visited都是能夠省略的，簡寫在a標籤裏面。也就是說，a標籤涵蓋了link、visited的狀態。
  
  最標準的，就是把link、visited、hover都要寫。可是前端開發工程師在大量的實踐中，發現不寫link、visited瀏覽器也挺兼容。因此這些「老油條」們，就把a標籤簡化了：
  a:link、a:visited都是能夠省略的，簡寫在a標籤裏面。也就是說，a標籤涵蓋了link、visited的狀態。
          .nav ul li a{
              display: block;
              width: 120px;
              height: 50px;
              text-decoration: none;
              background-color: purple;
              color:white;
          }
          .nav ul li a:hover{
              background-color: orange;
          }

   

• background系列屬性

• 1 background-color屬性：背景顏色屬性。
  css2.1中，顏色的表示方法一共有三種：單詞、rgb表示法、十六進制表示法
  
  1.1 用英語單詞來表示
  可以用英語單詞來表述的顏色，都是簡單顏色。
  紅色：background-color: red;   
  
  3.1.2 用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.3 十六進制表示法
  紅色：
  background-color: #ff0000;
  全部用#開頭的值，都是16進制的。
  #ff0000
  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;
  沒法簡化！
  再好比
  background-color:#123123;
  沒法簡化！
  
  要記住：
  #000   黑
  #fff    白
  #f00   紅
  #333   灰
  #222   深灰
  #ccc   淺灰