CSS基本知識點——帶你走進CSS的新世界

秋落雨微涼發表於2022-07-07

CSS

CSS基本知識點

我們在學習HTML之後，前端三件套第二件便是CSS，但CSS內容較多，我們分幾部分講解：

（如果沒有學習HTML，請參考之前文章：HTML知識點概括——一篇文章帶你完全掌握HTML>）

CSS作用

如果說HTML為網頁提供內容，那麼CSS就是為內容進行裝飾，為網頁進行佈局

CSS可以控制整體框架，控制文字字型，大小等諸多事宜

CSS語法

CSS基本語法只有一條：

選擇器 {
    宣告1；
    宣告2；
}

元素顯示模式

首先我稍微解釋一下元素顯示模式：

元素以什麼方式進行顯示

HTML的元素型別模式：

塊元素
行內元素

我們先講解一下塊元素：

塊元素包括：h標題系列，p，div，ul，ol，li
塊元素特點包括：
- 自己獨佔一行
- 高寬，外距，背景色都可以設定
- 寬度預設為父類
- 是一個容器，可以放置行內或行內塊元素

我們再來講解一下行內元素：

行內元素包括：a，strong，b，em，span
行內元素特點包括：
- 相近元素在一行
- 無法設定長寬
- 預設寬度為字寬度
- 行內元素只能容納文字和其他行內元素

最後我們介紹一下行內塊元素：

行內塊元素包括：img，input，td
行內塊元素特點：
- 一行可有多個行內塊元素
- 正常情況寬度為內容寬度
- 可以設定寬度

這些屬性並非都是繫結的，我們可以通過方法進行轉換：

display：inline/block/inline-block 分別對應行內元素，塊元素，行內塊元素

CSS寫入的三種方式

CSS作用HTML中一共有三種方法，我們一一介紹：

第一種：行內樣式
- 直接在單個標籤中寫入style並進行書寫
第二種：內部樣式
- 在html檔案的head區域寫入style進行書寫
第三種：外部樣式
- 在css檔案中書寫，在html檔案中的head區域採用link方法匯入
- link語法：

上面三種語法講究就近原則，當前標籤距離誰較近，就是用哪種css

一般情況：行內元素>內部樣式>外部樣式

下面給出程式碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>匯入方法</title>
<!-- 注意：這裡遵循就近原則，當前標籤離哪個近就用哪個樣式 -->

    <!-- 內部樣式：在HTML的Head部位書寫 -->
    <style>
        h1 {
            color: aliceblue;
        }
    </style>
    <!-- 外部樣式：在CSS中書寫，然後通過Link匯入 -->
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <!-- 行內樣式：在body中書寫標籤時直接寫入style -->
    <h1 style="color:aqua;"></h1>
</body>
</html>

h1 {
    color: black;
}

CSS的四種選擇器

CSS的基本選擇器分為四種：

萬用字元選擇器：
- 針對所有標籤進行選擇
標籤選擇器：
- 針對所有對應的標籤進行選擇
類選擇器（class）：
- 針對所有對應class名的所有類標籤進行選擇
- 一個標籤可以具有多個類，一個類可以作用於多個標籤
id選擇器（id）：
- 針對對應id名的唯一標籤進行選擇
- 一個標籤只能有一個id，一個id只能作用於一個標籤

三種選擇器具有明確的優先順序：id選擇器>類選擇器>標籤選擇器

下面給出示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三種選擇器</title>
    <!-- 這裡選擇器的樣式遵循：id選擇器>類選擇器>標籤選擇器 -->

    <style>
        /* 
        1.標籤選擇器：
        樣式： 標籤名{}
        自動選中所有標籤的程式碼
        */
        h1 {
            color: bisque;
        }
        p {
            color: blueviolet;
            font-size: 30px;
        }

        /* 
        2.類選擇器：
        樣式：.類名{}
        自動選中所有帶類名的程式碼，可以跨標籤，類名定義用class
        */
        .myStyle {
            color: blue;
            font-size: 20px;
        }

        /* 
        3.id選擇器：
        樣式：#id名{}
        自動選擇帶有id名的程式碼，注意id具有全域性唯一性
        */
        #w123 {
            color: aquamarine;
            font-size: 40px;
        }

        #w333 {
            color: aquamarine;
            font-size: 40px;
        }

        /* 
        4.萬用字元選擇器
        樣式： * {}
        全部鎖定，全部標籤都帶有以上特徵
        */
    </style>

</head>
<body>
    <h1>標題1</h1>
    <p>我是30px大小的</p>

    <p class="myStyle"> 我是類選擇器</p>

    <p id="w123">我是id選擇器</p>

    <p class="myStyle" id="w333"> 我的最高許可權是id選擇器</p>

    <p class="myStyle">我的最高許可權是類選擇器</p>
</body>
</html>

CSS層次選擇器

層次選擇器分為五種：

並集選擇器：
- 選擇器1，選擇器2 {}
- 同時選擇多個選擇器的標籤
後代選擇器：
- 父子{}
- 可以選擇父類的所有子類標籤以及子類標籤後的所有標籤
子選擇器：
- 父>子{}
- 只能選擇父類的所有子類標籤
相鄰選擇器：
- .class+兄弟標籤型別{}
- 只能選擇.class的父類的下一個兄弟標籤

通用選擇器：

.class~標籤型別{}
可以選擇.class的父類的下一個之後包括下一個的所有兄弟標籤

下面給出程式碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>層次選擇器</title>
    <!-- 層次選擇器主要用於後代，下一代，兄弟等 -->

    <style>
        /* 
        後代選擇器： 
        格式：父類 父類的後代{}
        用於父類的後代所有標籤內
        */
        ul li{
            color: rgb(255, 0, 0);
        }

        /* 
        子選擇器：
        格式：父類 子類{}
        僅用於父類的下一代
        */
        body>p{
            color: aqua;
        }

        /* 
        相鄰兄弟選擇器：
        格式：.class名 + 同輩標籤{}
        選定class的標籤的相鄰標籤
        */
        .active + p {
            color: black;
        }

        /* 
        通用兄弟選擇器：
        格式：.class名 ~ 同輩標籤{}
        選定class的標籤的以下所有兄弟標籤
        */
        .allover ~ p {
            color: rgb(243, 255, 7);
        }
    </style>
</head>
<body>
    <p>
        <p>孫子1</p>
    </p>
    <p class="active">兒子2</p>
    <p class="allover">兒子3</p>
    <p>兒子4</p>
    <p>兒子5</p>
    <ul>
        <li>
            <p>我是孫子輩</p>
        </li>
        <li>我是兒子輩</li>
    </ul>
</body>
</html>

結構偽選擇器

結構偽選擇器主要負責有條件性的標籤選擇

下面直接給出程式碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>結構偽類選擇器</title>
    <!-- 
    結構偽類選擇器在實際開發中並不常用，但我們仍需瞭解認識
    結構偽類選擇器具有條件性，它有條件地選擇部分內容進行CSS操作
    具體結構：父類：條件{} 
    -->
    <style>
        /* 例如我們希望在ul中的第一個和最後一個li中單獨進行CSS操作 */
        ul li:first-child {
            color: brown;
        }

        ul li:last-child {
            color: red;
        }

        /* 這裡我們以p的父元素為父類，來選擇第2個孩子 */
        /* 我們可以通過nth-child（n）來選擇第n個元素 */
        p:nth-child(2){
            color: aquamarine;
        }

        /* 這裡我們以p的父元素為父類，來選擇第2個p型別的孩子 */
        /* 我們可以通過nth-of-type（n）來選擇第n個元素 */
        p:nth-of-type(2){
            color: antiquewhite;
        }

        /* 同時，“：”也具有其他性質；例如a的hover屬性表示當滑鼠放在a上時的CSS操作 */
        a:hover {
            background-color: black;
        }
    </style>
</head>
<body>
    <a href="#">123</a>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>l1</li>
        <li>l2</li>
        <li>l3</li>
    </ul>
</body>
</html>

CSS屬性選擇器

屬性選擇器是CSS3新加入的特性，極大程度方便了選擇器的利用

屬性選擇器的格式如下：

標籤[屬性名]{}
標籤[屬性名=屬性]{}
標籤[屬性名*=屬性]{}
標籤[屬性名^=屬性]{}
標籤[屬性名$=屬性]{}

下面給出程式碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>屬性選擇器</title>
    <!-- 
    屬性選擇器
    結構分有五種，分別有不同的作用：
    標籤[屬性名]{}   
    標籤[屬性名=屬性]{}
    標籤[屬性名*=屬性]{}
    標籤[屬性名^=屬性]{}
    標籤[屬性名$=屬性]{} 
     -->

    <style>
        /* 首先我們把下方連線都變成框框，以便於效果明顯（這裡後面會涉及，目前不需要深究） */
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #2700ff;
            text-align: center;
            color: gray;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        
        /* 以下操作為防止衝突，均以註釋格式出現，請測試時去除註釋 */

        /* 
        標籤[屬性名]{} ：該標籤內帶有該屬性的所有標籤     

        .demo a[id]{
            background: red;
        } 

        */
        
        /* 
        標籤[屬性名=屬性]{} :該標籤內帶有該屬性，且屬性值對應的所有標籤（注意：需要完全匹配）

        .demo a[id=w123]{
            background-color: aquamarine;
        }

        .demo a[class="class1 class2 class3"]{
            background-color: black;
        }
        */
        
        /* 
        標籤[屬性名*=屬性]{}：該標籤內帶有該屬性，且屬性值對應的所有標籤（注意：存在匹配即可） 

        .demo a[class*="class1"]{
            background-color: aqua;
        }

        */
        
        /* 
        標籤[屬性名^=屬性]{}:該標籤內帶有該屬性，且以該屬性開頭 
        
        .demo a[href^="https"]{
            background-color: red;
        }
        
        */

        
        /* 
        標籤[屬性名$=屬性]{}:該標籤內帶有該屬性，且以該屬性結尾 
        
        .demo a[href$="https"]{
            background-color: red;
        }
        
        */
    </style>
</head>
<body>
    <p class="demo">
        <a href="https://www.baidu.com" class="class1 class2 class3" id="w123">1</a>
        <a href="https://www.taobao.com/" class="class1 class2 class3">2</a>
        <a href="#" class="class1 class2 class3">3</a>
        <a href="#" class="class1 class2 class3">4</a>
        <a href="#" class="class1 class2" id="w321">5</a>
        <a href="#" class="class1 class2">6</a>
        <a href="#" class="class1 class2">7</a>
        <a href="#" class="class1">8</a>
        <a href="#" class="class1">9</a>
        <a href="#" class="class1">10</a>
    </p>
</body>
</html>

CSS字型樣式

我們依次介紹字型樣式：

font-family: 中文字型，英文字型；（這裡設定文字字型，可以同時設定英文和中文字型，需要用逗號隔開，也可以只設定一種）
font-size: 20px;（這裡設定文字大小）
font-weight: bold;（這裡設定文字粗細，可以採用數字px，也可以採用bold等）
font-style:italic;(這裡設定文字樣式，例如italic斜體，normal正常)
color: brown;（這裡設定字型顏色）
font: 粗細大小字型;(這裡整合所有font設定，可以一次性設定完畢)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字型樣式</title>

    <style>
    .divclass p{
        /* 我們常用的字型樣式就以下四種 */
        font-family: 微軟雅黑;
        font-size: 20px;
        font-weight: bold;
        color: brown;
    }
    </style>
</head>
<body>
    <!-- 這裡稍微介紹一下div和span，就是簡單的盒子，屬於行內元素，我們常常用來規範做某些事情 -->
    <div class="divclass">
        <p>123</p>
        <span>123</span>
    </div>
</body>
</html>

CSS文字樣式

文字樣式主要是對文字進行操作，大致包括以下五種：

顏色：color
文字對齊：text-align
首行縮排：text-indent
行高：line-height
裝飾：text-decoration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字樣式</title>

    <style>
        /* 
        顏色 color 有三種形式 
        1.直接寫英文顏色 red 等
        2.以#開頭，寫000000~ffffff之間的顏色
        3.以RBG來寫
        4.以RBGA來寫（可寫透明度）
        */

        .class1 {
            /* 這裡之間為大家舉例（這樣書寫是不對的） */
            color: red;
            color: #121212;
            color: rgb(0, 255, 255);
            color:rgba(0, 255, 255, 0.1);
        }

        /* 
        文字對齊 text-align 有三種情況 
        center 居中對齊
        left 靠左對齊
        right 靠右對齊
        */

        .class2 {
            text-align: center;
        }

        /* 
        首行縮排 text-indent
        通常採用em，em表示一個文字大小，常用2em
        */
        .class3 {
            text-indent: 2em;
        }

        /*
        行高 text-height
        行高常用來使文字位於框架垂直中心
        當行高=框架高度，文字位於垂直中心
        */

        .class4 {
            background-color: #121212;
            height: 300px;
            line-height: 300px;
        }

        /*
        修飾 text-decoration
        可以跟 none underline line-through overline
        因為超連結a自帶下劃線，我們常使用none去除下劃線使其美觀  
        */
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p class="class1">123</p>
    <p class="class2">123</p>
    <p class="class3">123</p>
    <p class="class4">123</p>
    <a href="#">我是連結</a>
</body>
</html>

CSS超連結偽類

在CSS的超連結中會出現動態情況，所以css給出相關偽類來改變超連結各種狀態下的形態

下面給出程式碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超連結偽類和陰影</title>
    <!-- 我們先解釋一下超連結偽類 -->
    

    <style>
        /* 正常情況下超連結偽類是很醜的且帶下劃線 */
        /* 首先我們對a進行修正 */
        a {
            /* 取消下劃線，修改顏色 */
            text-decoration: none;
            color: black;
        }
        
        /* 我們來講解一下a的一些偽類操作 */
        /* 這裡表示當滑鼠觸及到超連結的狀態 */
        a:hover{
            color: yellow;
        }  
        /* 這裡表示當滑鼠點選超連結且未鬆開的狀態 */
        a:active{
            color: green;
        }
        /* 這裡表示當滑鼠未點選超連結的狀態（可能與a發生衝突，儘量不要使用） */
        /* 
        a:link{
            color:blue;
        } 
        */
        /* 這裡表示滑鼠已點選過的狀態 （可能與a發生衝突，儘量不要使用）*/
        /* 
        a:visited{
            color:red;
        } 
        */
    </style>

    <!-- 我們稍微介紹一下陰影 -->

    <style>
        /* text-shadow: 陰影顏色 陰影水平移動大小 陰影垂直移動大小 陰影光暈半徑 （移動大小是可以寫負數的） */
        #price{
            text-shadow: blue 10px 10px 2px;
        }
    </style>
</head>
<body>
    <p>
        <a href="#"> <img src="../../../../Resources/picture/1.jpeg" alt="紗霧老師"></a>
    </p>
    <p>
        <a href="#">紗霧老師</a>
    </p>
    <p>
        <a href="#" id="price">￥99</a>
    </p>
</body>
</html>

CSS表單常用focus偽選擇器

input:focus選擇器專用於表單input中：用來表示當點選該表單時的標籤狀態

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表單選擇器</title>

    <style>
        /* 用來表示選中該input標籤時的狀態 */
        input:focus{
            background-color: orange;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type= "button">
</body>
</html>

CSS列表簡單美化

在css基本課程中，我們給出列表的一些簡單美化步驟

下面內容稍微閱讀理解即可，後面我們會給出更加美觀詳細的步驟

下面給出程式碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>簡單列表練習</title>
    <!-- 與css連結 -->
    <link rel="stylesheet" href="ccs.css">
</head>
<body>
    <!-- div是一個盒子，用來控制整體大小 -->
    <div id="nav">
        <h2>淘寶銷售</h2>
        <ul>
            <li><a href="#">女裝</a>&nbsp;&nbsp;<a href="#">男裝</a>&nbsp;&nbsp;<a href="#">童裝</a>&nbsp;</li>
            <li><a href="#">女鞋</a>&nbsp;&nbsp;<a href="#">男鞋</a>&nbsp;&nbsp;<a href="#">童鞋</a>&nbsp;</li>
            <li><a href="#">手機</a>&nbsp;&nbsp;<a href="#">電腦</a>&nbsp;&nbsp;<a href="#">數碼</a>&nbsp;</li>
        </ul>
    </div>
</body>
</html>

/* 首先設定最上方標題 */
h2{
    background-color: blanchedalmond;
    font-size: 20px;
    font-weight: bold;
    text-indent: 2em;
    line-height: 35px;
}

/* 然後我們設定盒子大小 */
#nav {
    width: 300px;
    background-color: gray;
}

/* 然後我們對li做出調整 */
ul li{
    /* 
    首先我們去掉前方的索引號 
    list-style:
    none 無
    circle 空心圓
    decimal 數字
    square 方形
    */
    list-style: none;
    height: 30px;
    text-indent: 1em;
}

/* 最後我們設定a和a：hover */
a {
    text-decoration: none;
    color:black;
    font-size: 14px;
}

a:hover{
    color: orange;
}

CSS背景

CSS背景主要分為兩部分：

背景顏色
背景圖片

我們的解釋主要圍繞這兩部分展開：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景</title>
    <!--  -->
    <style>
        /* 背景顏色：background-color: transparent*/
        /* 
        背景圖片：background-image: none/url("圖片地址") 
        背景圖片可以選擇其展示樣式：
        background-repeat：選擇是否平鋪
        repeat平鋪 no-repeat不平鋪 repeat-x水平平鋪 repeat-y垂直平鋪
        背景圖片可以選擇位置：
        background-position：x y；選擇x，y位置
        x：top/center/bottom   y：left/center/right
        背景圖片可以選擇是否固定：
        background-attachment：選擇背景圖片是否固定
        scroll可滾動 fixed固定
        背景圖片具有複合寫法：
        background：顏色 地址 平鋪 是否固定 位置
        背景圖片可選擇透明度：
        background：rgba（，，，a）a是透明度
        */
    </style>
</head>
<body>
    <div id="nav"></div>
</body>
</html>

結束語

關於CSS的基本知識點，我們就簡單介紹到這裡，後面我會逐漸更新CSS三大特性，盒子浮動等內容，請多多關注，謝謝

帶你走進CSS定位詳解
2018-08-03
CSS
帶你走進零知識證明
2023-01-29
帶你走進Choerodon豬齒魚的知識管理
2019-01-29
css零星進階知識點
2016-06-06
CSS
CSS知識點整理
2018-02-27
CSS
HTML/CSS知識點
2017-06-23
HTMLCSS
css必備知識點
2019-03-06
CSS
css細節知識點
2018-06-21
CSS
CSS小知識點一
2017-07-12
CSS
CSS知識點面試總結
2020-02-24
CSS面試
css&html面試知識點
2018-10-15
CSSHTML面試
CSS知識
2016-05-27
CSS
你該學點HTML/CSS知識的9大理由
2015-02-12
HTMLCSS
CSS基礎知識點總結
2018-02-18
CSS
帶你走進 Redis
2022-12-30
Redis
關於 CSS 的零碎知識點
2019-02-20
CSS
30道CSS 面試知識點總結
2022-04-08
CSS面試
前端開發知識點之 html &css
2017-10-18
前端HTMLCSS
css3知識點思維導圖
2019-03-30
CSSS3
HTML+CSS知識點大雜燴（二）
2018-12-16
HTMLCSS
css知識略寫
2019-02-19
CSS
css知識：flex 、bfc
2019-01-10
CSSFlex
CSS基礎知識
2021-01-10
CSS
Css知識掃盲
2023-01-04
CSS
CSS3帶有節點的進度條效果
2017-03-15
CSSS3
CSS 基礎知識初識
2018-10-10
CSS
CSS零碎知識點（3）——居中頭像
2020-11-14
CSS
CSS零碎知識點（2）——居中DIV盒子
2020-11-14
CSS
手摸手帶你學CSS
2020-12-27
CSS
帶你熟悉CSS浮動
2016-05-14
CSS
從零認識webpack4.0，帶你走進神祕的webpack
2019-07-23
Web
css佈局知識摘要
2019-02-22
CSS
圖片的基本知識點
2019-03-17
遨翔在知識的海洋裡----(css之vue中sass基本用法)
2018-03-30
CSSVue
整理一些CSS的知識
2019-06-04
CSS
CSS並不簡單--帶你認識不一樣的margin
2017-06-01
CSS
帶你走進Java集合之ArrayList
2018-09-24
Java
帶你走進Java集合之HashMap
2018-10-06
JavaHashMap

CSS基本知識點——帶你走進CSS的新世界

CSS基本知識點

CSS作用

CSS語法

元素顯示模式

CSS寫入的三種方式

CSS的四種選擇器

CSS層次選擇器

結構偽選擇器

CSS屬性選擇器

CSS字型樣式

CSS文字樣式

CSS超連結偽類

CSS表單常用focus偽選擇器

CSS列表簡單美化

CSS背景

結束語

相關文章