css詳解2

時間 2019-11-10

標籤 css 詳解欄目 CSS 简体版

原文原文鏈接

一、僞類選擇器

1.一、a標籤的愛恨準則 LoVe HAte 。一個冒號鏈接

1.二、a標籤的示例

給a標籤設置個顏色，生效了css

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        a{color: red}
    </style>
</head>
<body>
    <a href="#">百度一下</a>
</body>
</html>

給body設置個顏色，在body中的a標籤會繼承這個顏色嗎？html

    <style>
        body{color: red}
    </style>

沒有繼承，a標籤內部有本身的默認樣式瀏覽器

因此：對於a標籤，若是想設置a標籤的樣式，要做用於a標籤上，對於繼承性來講，a標籤不起做用的編輯器

1.三、僞類選擇器使用案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
         /*LoVe HAte*/
        /*a標籤沒有被訪問時候設置的屬性*/
        a:link{color: red;}
        /*a標籤被訪問時候設置的屬性*/
        a:visited{color:yellow;}
        /*a標籤懸浮時設置的屬性*/
        a:hover{color: deeppink;}
         /*a標籤被摁住的時候設置的屬性*/
        a:active{color: deepskyblue;}
    </style>
</head>
<body>
    <a href="#1">百度一下</a>
    <a href="#2">360 一下</a>
    <a href="#3">搜狗 一下</a>
    <a href="#4">過河 一下</a>
</body>
</html>

1.4其它也可使用僞類選擇器hover。鼠標放在它上面想讓它變個樣子就用hover

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{height: 200px;width: 200px;background-color: black;}
       div:hover{background-color: red;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

1.五、栗子

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{padding: 0;margin: 0} /*通配符選擇器去掉全部pading margin*/
        div{height: 200px;width: 200px;background-color: black;
            line-height: 200px;text-align: center;color: #000;
        }
        div:hover{background-color: red;}
    </style>
</head>
<body>
    <div>
        <p>魔降風雲變</p>
    </div>
</body>
</html>

效果，黑色框。鼠標懸浮在上面變紅色並顯示黑色字。工具

1.六、hover栗子

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{padding: 0;margin: 0} /*通配符選擇器去掉全部pading margin*/
        div{height: 200px;width: 200px;background-color: black;
            line-height: 60px;text-align: center;color: #000;
        }
        #box p{background-color: #d33333}
        div:hover {background-color: red;}
    </style>
</head>
<body>
    <div id="box"><p>魔降風雲變</p></div>
</body>
</html>

鼠標沒放上去時：佈局

鼠標放上去時：字體

如今的要求是，鼠標放在盒子上，覆蓋掉子元素p標籤的內容：動畫

    <style>
        *{padding: 0;margin: 0} /*通配符選擇器去掉全部pading margin*/
        div{height: 200px;width: 200px;background-color: black;
            line-height: 60px;text-align: center;color: #000;
        }
        #box p{background-color: #d33333}
        div:hover {background-color: red;}
      div:hover p{display: none} </style>

僞類選擇器選中div，而後選它下面的子元素顯示改成none。網站

鼠標沒放在上面時：spa

鼠標放在上面時：

把這行註釋掉，紅色沒有了：

    <style>
        *{padding: 0;margin: 0} /*通配符選擇器去掉全部pading margin*/
        div{height: 200px;width: 200px;background-color: black;
            line-height: 60px;text-align: center;color: #000;
        }
        #box p{background-color: #d33333}
        /*div:hover {background-color: red;}*/
        div:hover p{display: none}
    </style>

鼠標沒放在上面時：

鼠標懸浮後：

css還能夠作旋轉，3d動畫，懸浮離子等。還能作遊戲，好比跑酷，憤怒的小鳥等

下面是上面的一個子標籤，點擊上去以後就改變了，也有hover麼？：

由下可見電視有span標籤，而且是個a標籤。也是無序列表中的一個li元素。這個li下面還包裹了一個div標籤。li標籤是個塊級標籤，是獨佔一行的。而這裏是一行顯示，若是用塊轉行內方式那麼也會有空白摺疊現象(折行)，也很差調整。每一個li標籤之間有間距，能夠用margin來分開

這裏還有一個display none

二、屬性選擇器

要給每一個input起個名字，若是有不少個input起名很麻煩。這時使用屬性選擇器，鍵值鍵值，值可加引號也可不加引號

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        input[type=text]{background-color: red;}
    </style>
</head>
<body>
    <form action="">
        <input type="text">
        <input type="password">
        <input type="radio">
        <input type="checkbox">
    </form>
</body>
</html>

三、僞元素選擇器

3.一、給第一個字添加屬性

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p:first-letter{color: red}
    </style>
</head>
<body>
    <p>我是魔降風雲變</p>
</body>
</html>

和僞類選擇器使用差很少，加個冒號或者加兩個冒號均可以。給第一個字添加屬性

3.二、在某個標籤內容前面添加內容

    <style>
        p:first-letter{color: red}
        p::before{content: '@'}
    </style>

3.3給某個標籤內容後面添加內容

    <style>
        p:first-letter{color: red}
        p::before{content: '@'}
        p::after{content: '$'}
    </style>

給前面加給後面加內容是行內元素，由於和p標籤是在同一行內。經過僞元素添加的元素是行內元素。p::after是解決浮動佈局經常使用的一個方法

好比這些地方：

這裏使用了僞元素選擇器。寬高，內容是空，top等

四、font字體

4.1

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p{font-family: '微軟雅黑'}
    </style>
</head>
<body>
    <p>我是魔降風雲變</p>
</body>
</html>

點擊去掉勾選作調試，沒有變化。這裏微軟雅黑找的是我電腦上的字體，電腦通常默認是有這個字體的。

我將字體改成楷體：

    <style>
        p{font-family: '楷體'}
    </style>

改掉了。

      p{font-family: '楷體',"微軟雅黑"}

其它網站也有不少

設置body字體大小14px

 body{font-family: '楷體',"微軟雅黑";font-size: 14px}

設置p標籤字體大小1em，沒有變大小

鼠標點到大小，按向上鍵，上調body。p標籤的字也隨之增大

也就是說這裏56px就是對應的1em的大小。p標籤字體的大小相對於當前盒子（這裏是body）來調整大小的

以下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body{font-family: '楷體',"微軟雅黑";font-size: 14px}
        #box{width: 200px;height: 200px;
            background-color: red;font-size: 20px}
        #box p{width: 100%;
        height: 50px;
            background-color: yellow;}
    </style>
</head>
<body>
    <div id="box"><p>我是魔降風雲變</p></div>
</body>
</html>

當前的字體大小是20px

我想p標籤裏的字體變成body標籤的14px，

那就做用於這個標籤再設置字體大小

    <style>
        body{font-family: '楷體',"微軟雅黑";font-size: 14px}
        #box{width: 200px;height: 200px;
            background-color: red;font-size: 20px}
        #box p{width: 100%;
        height: 50px;
            background-color: yellow;font-size: 14px}
    </style>

這樣的話box類裏面的20就不起做用了。

若是我將p標籤裏的14px改成1em，

    <style>
        body{font-family: '楷體',"微軟雅黑";font-size: 14px}
        #box{width: 200px;height: 200px;
            background-color: red;font-size: 20px}
        #box p{width: 100%;
        height: 50px;
            background-color: yellow;font-size: 1em}
    </style>

若是我不改p標籤內的14px，將p標籤的高度改成1em，那麼：

4.2

一個普通的盒子：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body{font-family: '楷體',"微軟雅黑";font-size: 14px}
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
            font-size: 20px}
        #box p{
            width: 100%;
            height: 1em;
            background-color: yellow;
            font-size: 30px
        }
    </style>
</head>
<body>
    <div id="box">
        <p></p>
    </div>
</body>
</html>

p標籤裏的1em等於p標籤裏的30px字體大小，

這就是一個盒子，如今咱們須要調整盒子裏p標籤高度，以前每次都須要調整p標籤height，如今只須要調整font-size，height就隨之改變

若是我將右邊p標籤顯示的height從1em改成60px,那麼就height黃色部分的高度就不能隨font-size改變而改變。

也就是說若是用em那就是一個相對單位，相對於當前的盒子p的大小。若是我再將height改成1em，黃色高度又能隨font-size而改變了。

如今是經過手動調整font-size的大小從而控制height的大小，若是未來有一個自動控制font-size的大小就能自動控制height的大小了。

假設我pc端設置的大小是1200,1em是50px，那麼網頁到500px大小的移動端就能夠自動根據比例調整大小，從而使得移動端等像素大小不一致的設置也能正常使用網頁了。若是沒有設置相對大小的話，那麼只要一個客戶端大小不一樣，那麼就要修改一次像素大小去適應它的尺寸，顯然是不合理的。

五、px，ex,rex的區別

5.1

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{padding: 0;margin: 0}
        .box{
 width: 400px; height: 400px; background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

若是我把瀏覽器從右邊縮小顯示，紅色div大小沒有改變，通常網頁都是能夠根據瀏覽器的展現大小而調整網頁內容大小的，而這裏卻沒有實現這個功能。

也就是咱們如今設置的是400px，瀏覽器大小改變了它仍是400px,這是一個固定的大小，不能隨屏幕大小而適應。這個盒子在pc上400很是好看，若是放到手機上仍是400px，會好看麼？400就比手機屏幕小

一點點。px是固定單位，是絕對單位。不論是在多少尺寸的屏幕下，始終是當前尺寸

像這個網頁，即便到了手機上依然是能正常去看的

代碼入下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{padding: 0;margin: 0}
        .box{
            font-size: 20px;
            width: 20em;
            height: 20em;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

　如今設置一個font-size爲20px，將400px的width和height用em來表示，那麼存在一個換算單位，即：1em=20px。因此兩者都是20em，這樣兩者大小是沒有變化的

如今我只須要動態修改font-size大小，盒子的大小就隨之而改變了

這個em是相對於當前盒子的，就是當前塊區域。佈局整個網站有不少個這樣的盒子，那麼有不少個盒子之間有不少個相對大小的關係。那麼就有了rem，根元素。

5.二、rem原理圖

　　　咱們最開始的最外層標籤是html標籤，html標籤包含head和body標籤。head標籤又包含meta、title、script、style、link標籤。body下又有div、p、ul、ol標籤。div標籤又有a標籤，a標籤下面又可能有span標籤。p標籤裏面有input標籤。ul標籤下又有li標籤。li下面又可能有div標籤等等。上面的包裹下面的不少個標籤。這樣構成了一棵樹，head，body這樣的標籤就是它的分叉點。樹根是html。有這個圖寫的時候輕鬆點。rem的r就是root，就是樹根html，給html設置font-size

爲何要有rem，這樣寫的網頁能適應不一樣終端的屏幕大小。不用老是修改html尺寸去適應不一樣的終端，有了rem就就能夠動態控制

5.三、使用rem的案例分析

使用rem以前是：

        .box{
 font-size: 20px; width: 400px; height: 400px;
            background-color: red;
        }

使用rem以後是（換算單位是20px=1rem，由此得出子的div的相對寬高）：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{padding: 0;margin: 0}
       html{font-size: 20px}
        .box{
            font-size: 12px;
 width: 20rem; height: 20rem;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">魔降風雲變</div>
</body>
</html>

給html根設置一個大小，box繼承html大小。

我如今只是寫了一個樣式，之後只要修改html的font-size大小，個人子元素div就能隨之改變大小了。

我就算到了移動上，也只須要修改html的font-size 就能夠了。

若是我能用js腳本動態修改html的font-size大小。這個值一遍，和div的換算關係變了，div就變了。

假設個人html的font-size由20變成了40，那麼20rem是變大了變小了？若是20rem沒有變，那麼div隨着html的font-size成比例增大，可是他們之間的換算關係變小了，1rem表明的px數變大了。

若是div要保持不變，html的font-size變大了，那麼那麼div的width和height就要變小，這樣單位rem和寬高乘積不變，div大小不變。

        html{font-size: 20px}
        .box{
            font-size: 12px;
            width: 20rem;
            height: 20rem;
            background-color: red;
        }

六、詳細字體屬性文本屬性。來自複製。

https://book.apeland.cn/details/351/

6.1字體屬性

字體

在平常工做中，咱們會用到word來編寫內容，好比能夠對咱們須要設置的內容設置字體、字號、顏色等設置。如圖所示。

那麼咱們在網頁中使用css樣式時，一樣也能作相關的設置。

看個栗子，爲網頁中的文字設置字體爲微軟雅黑。

body{font-family:'微軟雅黑'}

這裏要注意不要設置不經常使用的字體，好比你給我來個’圓體-簡’,由於若是用戶本地電腦上若是沒有安裝你設置的字體，就會顯示瀏覽器默認的字體。也就是說，用戶是否能夠看到你設置的字體樣式取決於用戶本地電腦上是否安裝你設置的字體。

如今通常網頁中喜歡設置」微軟雅黑」，以下代碼：

body{font-family:"Microsoft Yahei"}

由於這種字體既美觀又能夠在客戶端徹底的顯示出來(用戶本地通常都是默認安裝的)

備選字體

備選字體是爲了防止用戶電腦上沒有」微軟雅黑「這個字體。

語法：

body{font-family:'Microsoft Yahei','宋體','黑體'}

備選字體能夠有無數個，那麼瀏覽器在去解析這個代碼的時候，是從左往右解析的，若是沒有微軟雅黑，再去找宋體，最後黑體。

字體大小

能夠爲網頁中的文本設置字體大小，那麼通常瀏覽器的字體大小默認爲爲16px。

最經常使用的像素單位：px、em、rem，這裏我們先介紹一種單位，px。

px:像素是指由圖像的小方格組成的，這些小方塊都有一個明確的位置和被分配的色彩數值，小方格顏色和位置就決定該圖像所呈現出來的樣子。看下圖。

好比以前咱們小時候玩的超級瑪麗，這些動圖的尺寸就是用像素單位來表示的。

字體顏色

顏色分爲三原色：紅、綠、藍，如圖所示，三原色進行混合能呈現出不一樣的顏色

好比紅色+綠色=黃色。

顏色表示方法在css中有三種方式：

英文單詞表示法，好比red、green、blue
rgb表示法
十六進制表示法

對於rgb表示法和十六進制表示法，咱們能夠經過編輯器中輔助工具（顏色取色器）來取到對應的顏色。這裏就不一一贅述了。

字體樣式

網站中的字體分爲了普通字體和斜體字體，咱們可使用font-style屬性來設置對應的字體樣式。

屬性值	描述
normal	默認的，文本設置爲普通字體
italic	若是當前字體的斜體版本可用，那麼文本設置爲斜體版本；若是不可用，那麼會利用 oblique 狀態來模擬 italics。經常使用
oblique	將文本設置爲斜體字體的模擬版本，也就是將普通文本傾斜的樣式應用到文本中。

代碼演示：

<meta charset="UTF-8"/>
<title>字體樣式</title>
<style type="text/css">
p{
font-style: italic;
}
i{
font-style: normal;
}
</style>
<p>普通字體樣式</p>
<i>斜體樣式</i>

效果展現：

由於i標籤自己具備傾斜的含義，因此能夠對已有的傾斜的字體來按照需求進行相應的設置。

字體粗細

網站中咱們能夠經過font-weight來設置文字的粗體大小。這裏有不少值可選，那麼使用最多的就是normal和bold分別表明普通和加粗和字體粗細。

屬性值	描述
normal	普通的字體粗細，默認
bold	加粗的字體粗細
lighter	比普通字體更細的字體
bolder	比bold更粗的字體
100~900	400表示normal

6.2文本屬性

文本修飾

在網頁中有些時候咱們須要對文本設置下劃線，或者刪除線。如圖所示：

若是想實現下劃線或者刪除線，使用text-decoration屬性。

屬性值	描述
none	無文本的修飾
underline	文本下劃線
overline	文本上劃線
line-through	穿過文本的線，~~能夠模擬刪除線~~。

文本縮進

好比咱們一般寫文章的時候，首字母要空兩格。那麼咱們須要使用text-indent屬性來實現。它的屬性值是像素(px、em、rem)單位。

代碼以下：

<p>在人類漫長的歷史長河中，推進社會向前的從不會是那些甘於平凡的多數人，相反，他們每每都是一羣特立獨行桀驁不馴的瘋子！這一羣瘋子中有位傳奇的人物，他顛覆性地將人文與科技完美融合，極大地改變了人類計算機領域，改變了人們的生活方式，其一手建立的計算機公司到現在還是手機行業的傳奇，沒錯！他就是喬布斯！</p>

效果顯示：

咱們但願整段文章描述，首行空兩格，那麼首先要知道字體大小是多少。好比字體大小默認是16px，那麼我須要給它設置text-indent:32px;才能實現效果。

代碼以下：

<meta charset="UTF-8"/>
<title>文本縮進</title>
<style type="text/css">
p{
text-indent: 32px;
}
</style>
<p>在人類漫長的歷史長河中，推進社會向前的從不會是那些甘於平凡的多數人，相反，他們每每都是一羣特立獨行桀驁不馴的瘋子！這一羣瘋子中有位傳奇的人物，他顛覆性地將人文與科技完美融合，極大地改變了人類計算機領域，改變了人們的生活方式，其一手建立的計算機公司到現在還是手機行業的傳奇，沒錯！他就是喬布斯！</p>