---
# System prepended metadata

title: CSS放置位置、選擇器
tags: [NKFW 網頁設計入門]

---

# CSS放置位置、選擇器
###### tags: `NKFW 網頁設計入門`

* CSS放置位置 
* CSS選擇器



# CSS放置位置
:::info
CSS可以寫在不同的位置，但是目前我們最常用的是2，專業的開發者以3為主
:::



1. 其他標籤屬性中
    
    在想要的改變樣式的標籤頭中加上屬性style
    
    例如：
    
    ```xml!
    <body>
        <h1 style="css撰寫位置">
            這是h1標籤
        </h1>
    </body>
    ```
    
2. style標籤內
    
    在head標籤內建立一個style標籤
    
    ```xml
    <head>
        <style>
            /* css撰寫位置 */
        </style>
    </head>
    ```

3. 獨立css文件中
    
    1. 創立一個.css文件即可
    
    ![](https://i.imgur.com/vnlmPzE.png)
    
    2. 再在要套用的html檔head標籤中使用link標籤
    
    ```htmlembedded!
    <link rel="stylesheet" href=".css檔位置">
    <!-- rel="stylesheet" 代表要連結到一個css檔 -->
    <!-- href="" 雙引號中放css檔的相對或絕對位置' -->
    ```


# CSS選擇器
:::info
CSS選擇器就是一個語法，讓你選擇要些修改的標籤
:::

:::warning
⚠️注意!
外層標籤的CSS也會套用到內層標籤
:::


* 寫在標籤裡的CSS就不用選擇器了
* 通用選擇器：一次選擇全部標籤
    
    ```css!
    * {

    }
    ```
    
    
    例如以下的CSS，會將所有標籤的`padding`、`margin`歸零。
    ```css!
    *{
        padding: 0;
        margin: 0;
    }
    ```
    

* 類型選擇器
    * 選擇特定標籤
    * 直接將標籤名稱打上就可以
    * 如果一次選擇多個標籤中間要加逗號，例如：
    ```css!
    h1,p {
        <!-- css寫在這裡-->
    }
    ```
* id選擇器
    * 在目標id名稱前面加上#
    ```css!
    #id名稱 {
        <!-- css寫在這裡-->
    }
    ```
* class選擇器
    * 在目標class名稱前面加上.
    ```css!
    .class名稱 {
        <!-- css寫在這裡-->
    }
    ```
* 後代選擇器

    * 選擇在特定標籤下的特定標籤
    * 標籤和標籤中以空白隔開
        例：
    ```css!
    div span {
        <!-- css寫在這裡-->
    }
    <!-- div的後代只要有span就會被選到-->
    ```
* 子選擇器
    * 選擇在特定標籤下的特定標籤
    * 標籤和標籤中以>隔開
        例：
    ```css!
    div > span {
        <!-- css寫在這裡-->
    }
    <!-- 只看div的下一層標籤，更裡面的不會被選擇到-->
    ``` 
    :::warning
    ⚠️注意後代選擇器和子選擇器異同
    :::
    :::success
    ❓想一想以上方後代選擇器和子選擇器給的範例，誰可以選到下方的span標籤?
    :::
    ```xml=
    <div>
        <p> <span>哈囉哈囉</span> </p>
    </div>
    ```
    :::spoiler    點我看解答
    A: 後代選擇器。因為div和span中間隔一個p標籤，所以子選擇器不會選到span
    :::

* ## 虛擬選擇器
    ```css=
    選擇器:link {
        /* css寫在這裡*/
    }
    /* 設定連結被點擊前樣式 */

    選擇器:visited {
        /* css寫在這裡 */
    }
    /* 設定連結被點擊後的樣式 */

    選擇器:hover {
        /* css寫在這裡 */
    }
    /* 設定滑鼠在標籤上方時的樣式 */
    ```
    * hover範例：
    ```css=
    <!DOCTYPE html>
    <html>
        <head>
            <style>
                p:hover {
                    color:red;
                }
            </style>
        </head>

        <body>
            <p>這是p標籤</p>
        </body>
    </html>
    ```
    * 畫面呈現如下
    ![](https://i.imgur.com/ByUxU4s.gif)


# 範例：自我介紹的應用
```htmlembedded!
<!DOCTYPE html>
<html lang="ZH-TW">
    <head>
        <title>My Introduction</title>
        <link rel="icon" type="image/x-icon" href="img/favicon3-removebg-preview.png">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- <link rel="stylesheet" href="selfIntro.css"> -->
        <style>
            .head span{
                color: blueviolet;
            }
            p span{
                color:crimson;
            }
            .content-block li{
                font-size: 14px;
            }
            #item1{
                color: red;
            }
            .topic:hover{
                color: blueviolet;
            }
        </style>
    </head>
    <body>
        <div class="profile">
            <h3 class="head"><span>Chris Pan</span></h3>
            <img src="img/head.png" width="100" height="100">
            
            <p><span>Name: </span>PAN, ZHAO-XIN</p>
            <p><span>Phone number: </span>0906301266</p>
            <p><span>Email: </span>chris02200827@gmail.com</p>
            <p>
                <cite>-Every noble work is at first impossible.</cite>
            </p>
        </div>
        
        <div class="content">
            <div class="content-block">
                <h3 class="topic">Education</h3>
                <ul>
                    <li id="item1">National Central University</li>
                    <li id="item2">Wen-Hua Senior High School</li>
                    <li id="item3">Lizen Junior High School</li>
                </ul>
            </div>
            <div class="content-block">
                <h3 class="topic">Major</h3>
                <ul>
                    <li id="item1">Computer Science</li>
                </ul>
            </div>
            <div class="content-block">
                <h3 class="topic">Contact Information</h3>
                <a id="item1" href="https://www.instagram.com/chris.pan.42453/" target="_blank">Instagram</a>
                <a id="item2" href="https://www.facebook.com/profile.php?id=100015205991886" target="_blank">Facebook</a>
            </div>
        </div>
        
    </body>
</html>
```



# Project1：導覽列

:::info
在許多網站中都可見到導覽列的存在，通常用來將使用者導向網頁的某一位置或是其他頁面，兼具便利性與可觀度。

請各位根據以上所學做出導覽列，且當滑鼠懸浮到連結上方的時候會變顏色，若有多餘時間也可設計這些頁面的細部內容喔！

成品外觀如下：
![](https://i.imgur.com/agYerwQ.png)
要求如下：
1. 當滑鼠移到連結上方時，文字和背景顏色都會變，如下
![](https://i.imgur.com/IfMWgIX.png)
![Uploading file..._9k7roaw0w]()
2. 點擊連結會跳到另一個頁面，如下
![](https://i.imgur.com/qkY4vRK.png)
3. 點擊返回會回到一開始的頁面

::: 
:::spoiler 點我看提示
* 提示一：背景顏色的CSS寫法：
```css=
background-color：顏色名稱
```
* 提示二：文字顏色的CSS寫法：
```css=
color：顏色名稱
```
* 提示三：當滑鼠懸浮到標籤上方的時候...
```css=
/* css選取器 */
tag_name:hover
```
:::
:::spoiler 解答
* 共有四個檔案
* 此範例須放在同一個資料夾下
* 檔名有錯html檔裡a標籤的路徑會找不到檔案
1. 檔名：css導覽列.html
```htmlembedded=
<!DOCTYPE html>
<html>
    <head>
        <title>導覽列</title>
        <style>
            .page:hover{
                color: rgb(250, 250, 250);
                background-color: black;
            }
            .page{
                color: black;
            }
        </style>
    </head>
    <body>
        <a class="page" href="page1.html">page1</a>
        <a class="page" href="page2.html">page2</a>
        <a class="page" href="page3.html">page3</a>
    </body>
</html>
```
2. 檔名：page1.html
```htmlembedded=
<!DOCTYPE html>
<html>
    <head>
        <title>page1</title>
    </head>
    <body>
        <h2>page1</h2>
        <a href="css導覽列.html">返回</a>
    </body>
</html>
```
3. 檔名：page2.html
```htmlembedded=
<!DOCTYPE html>
<html>
    <head>
        <title>page2
        </title>
    </head>
    <body>
        <h2>page2
        </h2>
        <a href="css導覽列.html">返回</a>
    </body>
</html>
```
4. 檔名：page3.html
```htmlembedded=
<!DOCTYPE html>
<html>
    <head>
        <title>page3</title>
    </head>
    <body>
        <h2>page3</h2>
        <a href="css導覽列.html">返回</a>
    </body>
</html>
```
:::