# 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> ``` :::