本文整理了CSS相關的基礎知識，包括CSS權重、雪碧圖、Base64編碼、自定義字體等知識點在CSS中的使用。 ...
1.CSS樣式（選擇器）的優先順序？
1.1 權重的計算規則
- 第一優先順序：無條件優先的屬性只需要在屬性後面使用!important。它會覆蓋頁面內任何位置定義的元素樣式。（ie6支持上有些bug）。
- 第一等：內聯樣式，如：style="color:red;"，權值為1000.（該方法會造成css難以管理，所以不推薦使用）
- 第二等：ID選擇器，如：#header，權值為0100.
- 第三等：類選擇器、如：.bar， 權值為0010.
- 第四等：類型（標簽）選擇器和偽元素選擇器，如：div ::first-line 權值為0001.
- 通配符，子選擇器，相鄰選擇器等。如*，>,+, 權值為0000.
- 繼承的樣式沒有權值。
[!NOTE]
CSS選擇器的優先順序：!important > 行內樣式 > ID選擇器 > 類選擇器 > 標簽選擇器 > 其他
1.2 實際案例
<style>
a{color: yellow;} /*權值：0,0,0,1*/
div a{color: green;} /*權值：0,0,0,2*/
.demo a{color: black;} /*權值：0,0,1,1*/
.demo input[type="text"]{color: blue;} /*權值：0,0,2,1*/
.demo *[type="text"]{color: grey;} /*權值：0,0,2,0*/
#demo a{color: orange;} /*權值：0,1,0,1*/
div#demo a{color: red;} /*權值：0,1,0,2*/
</style>
<body>
<a href="">第一條應該是黃色</a> <!-適用第1行規則->
<div class="demo">
<input type="text" value="第二條應該是藍色" /><!-適用第4、5行規則，第4行優先順序高->
<a href="">第三條應該是黑色</a><!-適用第2、3行規則，第3行優先順序高->
</div>
<div id="demo">
<a href="">第四條應該是紅色</a><!-適用第5、6行規則，第6行優先順序高->
</div>
</body>2.雪碧圖的作用？
[!NOTE]
減少HTTP的請求次數，提高載入的性能
在一些情況下可以減少圖片的大小
關鍵在於對background-position概念的理解和使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>購物車特效</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.select{
margin: 0 auto;
display: block;
width: 1000px;
height: 35px;
background-color:#F5FFFA;
}
div{
width: 42px;
height: 34px;
background-image: url(amazon-sprite_.png);
background-repeat: no-repeat;
background-position: -8px -335px;
}
div:hover{
background-image: url(amazon-sprite_.png);
background-repeat: no-repeat;
background-position: -55px -335px;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target='_blank' class="select">
<div></div>
</a>
</body>
</html>3.自定義字體的使用場景？
[!NOTE]
宣傳/品牌/banner等固定文案
字體圖標中使用
<style>
@font-face{
font-family: '字體名稱隨便起';
src: url('../font/字體名稱.eot');
src:url('../font/字體名稱.woff') format('woff'),
url('../font/字體名稱.ttf') format('truetype'),
url('../font/字體名稱.svg') format('svg');
}
/* 使用方法：html中的代碼中加一個h1或者其他的，裡面寫你自己想要的特殊文字 */
h1{
font-size:36px;
color:#ccc;
font-family: "字體名稱隨便起";
}
</style>4.Base64的使用？
4.1 概念
Base64就是一種基於64個可見字元(26個大寫字母，26個小寫字母，10個數字，1個+，一個 / 剛好64個字元)來表示二進位數據的表示方法。
[!NOTE]
擴展：不可見字元其實並不是不顯示，只是這些字元在屏幕上顯示不出來，比如：換行符、回車、退格......字元。
Base64字元表中的字元原本用6個bit就可以表示，現在前面添加2個0，變為8個bit，會造成一定的浪費。因此，Base64編碼之後的文本，要比原文大約三分之一
4.2 原理
- 第一步，將待轉換的字元串每三個位元組分為一組，每個位元組占8bit，那麼共有24個二進位位。
- 第二步，將上面的24個二進位位每6個一組，共分為4組。
- 第三步，在每組前面添加兩個0，每組由6個變為8個二進位位，總共32個二進位位，即四個位元組。
- 第四步，根據Base64編碼對照表（見下圖）獲得對應的值。
[!NOTE]
兩個位元組：兩個位元組共16個二進位位，依舊按照規則進行分組。此時總共16個二進位位，每6個一組，則第三組缺少2位，用0補齊，得到三個Base64編碼，第四組完全沒有數據則用“=”補上。因此，上圖中“BC”轉換之後為“QKM=”；
一個位元組：一個位元組共8個二進位位，依舊按照規則進行分組。此時共8個二進位位，每6個一組，則第二組缺少4位，用0補齊，得到兩個Base64編碼，而後面兩組沒有對應數據，都用“=”補上。因此，上圖中“A”轉換之後為“QQ==”；
4.3 作用
- 用於減少HTTP請求
- 適用於小圖片
- base64編碼圖片之後的體積約為原圖的4/3
5.偽類和偽元素的區別？
- 偽元素是真的有元素
- 前者是單冒號，後者是雙冒號
<style>
li:first-child {
height: 20px;
width: 100px;
background-color: #139aff;
}
li:last-child {
height: 60px;
width: 100px;
background-color: #89ff56;
line-height: 60px;
}
p:first-of-type {
background-color: red;
}
p:last-of-type {
background-color:deeppink;
}
/*每個p標簽之前新增一個Hello文本*/
.container p::before {
content: 'Hello';
}
.container p::after {
content: 'Thanks';
}
.container p::first-letter {
font-size: 32px;
}
.container p::first-line {
background-color: #f1ffad;
}
/*所有選中的元素會變色*/
.container p::selection {
background-color: #1025ff;
color: red;
}
</style>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<div>
<h1>h1文本</h1>
<p>p文本1</p>
<p>p文本2</p>
<p>p文本3</p>
<p>p文本4</p>
</div>
<div class="container">
<p> css1 </p>
<p> css2 </p>
<p> css3 </p>
<p>我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素</p>
</div>
</body>
</html>6.如何美化CheckBox？
[!NOTE]
- label[for]和id
- 隱藏原生的input
- :checked + label 選擇器
<style>
#value1{
display: none;
}
#value1:checked+label{
color:blue;
background: #4cda60;
}
#value1:checked+label:before{
left:31px;
}
#value1+label{
cursor: pointer;
color:red;
display: block;
width:60px;
height: 30px;
background: #fafbfa;
border-radius: 15px;
position: relative;
box-shadow:inset 0 0 0 0 #eee,0 0 1px rgba(0,0,0,0.4);
transition: background 0.1s;
-webkit-transition: background 0.1s;
-moz-transition: background 0.1s;
-o-transition: background 0.1s;
}
#value1+label:before{
content:'';
position: absolute;
background: #fff;
top:1px;
left:1px;
width: 28px;
height: 28px;
border-radius: 50%;
box-shadow:0 3px 1px rgba(0,0,0,0.05), 0 0 1px rgba(0,0,0,0.3);
transition: left 0.1s;
-webkit-transition: left 0.1s;
-moz-transition: left 0.1s;
-o-transition: left 0.1s;
}
</style>
<body>
<input type="checkbox" name="timeType" value="1" id="value1" checked="checked"/>
<label for="value1"></label>
</body>
