Web應用課 第二講 CSS定義方式、選擇器、顏色

安河桥北i發表於2024-06-12
WebCSS

定義方式

行內樣式表：只作用在單個元素

    <!--CSS定義方式1：行內樣式表-->
    <img src="/static/images/mountain.jpg" alt="山1" width="300">
    <img src="/static/images/mountain.jpg" alt="山2" style="width: 30%;">
    <!--二者效果相同-->

內部樣式表：在單個頁面內定義，作用域為整個頁面

內部樣式表一般定義在head域內，也可定義在body域內

<style type="text/css"> 

    /* 設定頁面中所有圖片的樣式 */
        img{  
            width: 300px;
            height: 200px;
            border-radius: 10%;
        }
    
    /* 設定頁面中所有段落的樣式 */
        p{
            width: 50px;
            height: 50px;
            background-color: lightseagreen;
        }
    /* 設定頁面中所有class為blue-p的樣式，注意類名前有. */
        .blue-p{
            background-color:lightblue;
        }
    
    /* 設定頁面中所有class為big的樣式，注意類名前有. */
        .big{
            height: 70px;
            width: 70px;
        }
    </style>

外部樣式表：定義在頁面外的單個css檔案中，作用域為多個頁面

在頁面中使用link來應用外部樣式表

<link rel="stylesheet" href="/static/css/style1.css" type="text/css">
<link> 標籤常用的 MIME 型別是 "text/css"，它規定樣式表。
type 屬性規定被連結文件/資源的 MIME 型別。只有當設定了 href 屬性時，才能使用該屬性。

註釋

CSS只有多行註釋

/*我是註釋*/

選擇器

標籤選擇器：選擇所有標籤

div{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    margin-bottom: 10px; /*外邊距*/
}

p{
    width: 50px;
    height: 70px;
    background-color: lightblue;
}

ID選擇器：選擇對應ID的標籤

外部css檔案

#mydiv{
    background-color: coral;
}

#myp{
    background-color: blueviolet;
}

頁面檔案

<div id="mydiv">div 3</div>

類選擇器：選擇對應class的標籤

外部CSS檔案

/* 類選擇器 */
.red-tag{
    background-color: brown;
}
.blue-tag{
    background-color: lightblue;
}
.big-tag{
    width: 120px;
    height: 120px;
}

頁面檔案

<p class="big-tag">p 4</p>
<div class="red-tag blue-tag">div 4</div>

偽類選擇器：用於定義元素的特殊狀態

連結偽類選擇器

  • :link：連結訪問前的樣式
  • :visited：連結訪問後的樣式
  • :active：滑鼠點選長按時的樣式
  • :focus：聚焦後的樣式
a:link{
    color: red;
}

a:visited{
    color:green;
}

a:hover{
    color:orange;
}

a:active{
    color:purple;
}
  • :hover：滑鼠懸停時的樣式
.effect:hover{
    transform: scale(1.2);
    transition: 200ms;
}
/* 滑鼠懸停，標籤在200ms內逐漸變大1.2倍 */

位置偽類選擇器

  • :nth-child(n)：選擇是其父標籤第n個子元素的所有元素。

括號內接受an+b的形式，a代表一個迴圈的大小，n是一個計數器（從0開始），以及b是偏移量。
判斷邏輯：若存在自然數n滿足標籤編號為an+b，則選中該標籤

目標偽類選擇器

  • :target：當url指向該元素時生效。
p:target{
    transform: scale(1.2);
    color:orange;
    transition: 1000ms;
}
/*透過連結訪問時變色為橙色，同時在1s內變大1.2倍

<a href="#myp">about</a>
<p id="myp">p 3</p>

複合選擇器：由兩個及以上基礎選擇器組合而成的選擇器

  • element1, element2：同時選擇元素element1和元素element2。
p,div{
    width: 50px;
    height: 70px;
    background-color: greenyellow;
}
  • element.class：選則包含某類的element元素。
div.big{
    transform: scale(1.2);
}
  • element1 + element2：選擇緊跟element1的element2元素。
p + div{
    background-color: blueviolet;
}
//作用在緊跟在p後面的div
  • element1 element2：選擇element1內的所有element2元素。
ul ul{
    color:gold;
}
//選擇ul內的ul元素

    <ul>
        <li>1
            <ul>
                <li>1.1</li>
                <li>1.2</li>
                <li>1.3</li>
            </ul>
        </li>
        <li>2</li>
        <li>3</li>
    </ul>
  • element1 > element2：選擇父標籤是element1的所有element2元素。

萬用字元選擇器

  • ：選擇所有標籤

[attribute]：選擇具有某個屬性的所有標籤

input[required]{
    background-color:red;
}
/*選擇屬性為required的input標籤*/

[attribute=value]：選擇attribute值為value的所有標籤

input[type=text]{
    background-color: aqua;
}
/*選擇type屬性為text的input標籤*/

偽元素標籤

將特定內容當做一個元素，選擇這些元素的選擇器被稱為偽元素選擇器。
::first-letter：選擇第一個字母

p::first-letter{
    color: red;
    font-size: 110%;
}
/*選擇每段第一個字元*/

::first-line：選擇第一行

p::first-line{
    color: red;
    font-size: 110%;
}

::selection：選擇已被選中的內容

p::selection{
    background-color: aquamarine;
    color:yellow;
}

::after：可以在元素後插入內容
::before：可以在元素前插入內容

h1::before{
    content: "《";
}
h1::after{
    content:"》";
}
/*給h1標題加上書名號*/

樣式優先順序

  • 權重大小，越具體的選擇器權重越大：!important > 行內樣式 > ID選擇器 > 類與偽類選擇器 > 標籤選擇器 > 通用選擇器
  • 權重相同時，後面的樣式會覆蓋前面的樣式
  • 繼承自父元素的權重最低

相關文章