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

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

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三大特性,盒子浮動等內容,請多多關注,謝謝

相關文章