御麗詩妃，CSS-in-JS：一個充滿爭議的技術方案

阿新 • • 發佈：2020-08-14

御麗詩妃，本文來源於網路，著作權歸屬原作者。

W3C三劍客——CSS快速入門

尐不正經丶 2020-08-12 10:51:54

我自己是一名從事了多年開發的web前端老程式設計師，目前辭職在做自己的web前端私人定製課程，今年我花了一個月整理了一份最適合2020年學習的web前端學習乾貨，各種框架都有整理，送給每一位前端小夥伴，想要獲取的可以關注我的頭條號並在後臺私信我：前端，即可免費獲取

W3C3劍客—CSS

全球資訊網聯盟（外語縮寫：W3C）標準不是某一個標準，而是一系列標準的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行為（Behavior）。全球資訊網聯盟創建於1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。
CSS3 作為變現層，其威力堪比整容。
未加樣式和加了樣式做對比，淘寶：

加上樣式後

1.CSS該如何學習？

css的3種引入方式
CSS的選擇器
CSS的基本樣式
CSS幾種佈局方式
CSS響應式
網頁動畫（專業的必修，非專業的瞭解）

1.1什麼是CSS？

Cascading Style Sheets （層疊樣式表）
CSS2 W3C組織於1998年推出的技術規範
CSS3 早在2001年W3C就完成了CSS3的草案規範。CSS3規範的一個新特點是被分為若干個相互獨立的模組

1.2CSS如何使用

行內式引入，通過Style屬性(不推薦使用，結構與表現高度耦合難以維護)

 <h1 style="color: red">CSS行內式演示</h1>

通過內部式Style引入

<style>
    /*這是在css中的註釋  */
    h1{
        font-size: 100px;  
    }        
</style>

外部樣式表引入（推薦使用，結構與表現低耦合，方便維護）

<link rel="stylesheet" href="../CSS/index.css">
1

在html中的位置一覽

<!DOCTYPE html>
<html lang="en">
<head>
 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*這是在css中的註釋  內部樣式*/
        h1{
          font-size: 100px;  
        }        
    </style>
    <link rel="stylesheet" href="../CSS/index.css">  <!-- 外部引入樣式-->
</head>
<body>
    <!-- 行內樣式 -->
 <h1 style="color:rgb(182, 17, 17)">CSS行內式演示</h1>
</body>
</html>

樣式優先順序，html從上往下載入，後邊的樣式會覆蓋先前的樣式，樣式變現為就近原則。
除此之外還可以在Style內通過import匯入，CSS2.1特有，使用較少，可以和 link 進行替換

2.CSS選擇器

標籤選擇器
層次選擇器
id選擇器（重點）
類選擇器（重點）
偽類選擇器（愛恨原則）
屬性選擇器（重點）

2.1標籤選擇器

標籤選擇器可以快速定位到html中的某一類標籤。

<style>
        /*直接以標籤名字作為選擇器
    
    標籤名{
    宣告1;
    宣告2;
    宣告3;
    ...
    }
    
    */
        h1{
          font-size: 100px;  
        }        
 </style>

2.2 id選擇器(重點)

id 選擇器，通過標籤的id屬性快速定位，一般id就是元素的標識，是唯一的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
        id 選擇器，通過標籤的id屬性快速定位，一般id就是元素的標識，是唯一的
        id 選擇器：
        #id名{
         	宣告1;
            宣告2;
            宣告3;
            ...
        }
        */
        #txt{
            color: red;
        }
    </style>
</head>
<body>
    <p id="txt">這是一行文字</p>
</body>
</html>

2.3 類選擇器（重點）

類選擇器，通過標籤的class屬性進行定位，一般class屬性可以付給多個元素，同一個元素也可以有多個class值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        當一個元素有多個class值時用空格隔開，並且後邊的樣式會覆蓋前邊的樣式
        如下，class1中有font-size屬性,class2中也有font-size屬性,這時同時把
        .class1 和 .class1都付給了p ，則class2 會覆蓋class1的font-size
        .類名{
        	宣告1;
            宣告2;
            宣告3;
            ...
        }
         */
        .class1{
            color: red;
            font-size: 14px;
        }
        .class2{
            font-size: 36px;
        }
    </style>
</head>
<body>
    <p class="class1">我是p1</p>
    <p class="class1 class2">我是p2</p>
</body>
</html>

2.4 層次選擇器

層次選擇器，通過父元素來定位子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 給ul一個樣式，它的子元素都會繼承它的樣式 */
        ul{
            color: red;
        }
        /* 同樣的如果想通過父元素來定位子元素，可以通過
            父元素 子元素{
                宣告1;
                宣告2;
                宣告3;
                宣告4;
                ...
            }
            的方式進行定位
            同時如果子元素有樣式跟父元素一樣則會覆蓋
        	除此之外還有下一個相鄰兄弟選擇器
         	#p1+p 則為#p1的像一個相鄰並且為p的元素(瞭解，一般不用)
        	下邊全部兄弟元素
        	#p1~p 下方所有為p的兄弟元素（瞭解，一般不用）
          */
        p{
            color: red;
        }
        p span{
            font-size: 36px;
            color: aqua;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <span>這是外邊的span</span>
    <p><span>這是p的子元素span</span></p>
</body>
</html>