day03-CSS
2022-10-29 21:01:02
CSS
1.css介紹
css指的是層疊樣式表（cascading style sheets）
官方檔案：https://www.w3school.com.cn/css/index.asp
- 為什麼需要css？
- 在沒有css之前，我們想要修改html元素的樣式需要為每個html元素單獨定義樣式屬性，費心費力。所以css就出現了。
- 使用css將html頁面的內容與樣式分離，提高web開發的工作效率（針對前段開發）
-
css快速入門-例子
建立html檔案完成如下網頁顯示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css快速入門</title> <!-- 1.在head標籤類出現了<style type="text/css"> </style> 2.表示要寫css內容 3.div{}表示對div元素進行樣式的指定，div就是一個選擇器（元素/標籤選擇器） 4.width:300px;...等表示對div樣式的具體指定，可以有多個 5.如果有多個使用分號;分開即可，最後的屬性後面可以不用分號（建議寫上） 6.當執行頁面時，div就會被div{}渲染，修飾 7.在偵錯css時，可以通過修改顏色或者大小來看樣式是否生效 8.css的註解是/* */,快捷鍵是ctrl+/ --> <style type="text/css"> div { width: 300px; height: 100px; background-color: beige; } </style> </head> <body> <div>hello,北京</div> <br/> <div>hello,上海</div> <br/> <div>hello,天津</div> <br/> </body> </html>
3.6表格細線
設定邊框 : border: 1px solid black
將邊框合併: border-collapse: collapse;
指定寬度： width
設定邊框： 給 td, th 指定即可 border: 1px solid black;
- table, tr, td 表示組合選擇器
- 就是 table 和 tr 還有 td ,都用統一的樣式指定, 可以提高複用性
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格細線</title> <style type="text/css"> /* 設定邊框 : border: 1px solid black 將邊框合併: border-collapse: collapse; 指定寬度： width 設定邊框： 給 td, th 指定即可 border: 1px solid black; 1. table, tr, td 表示組合選擇器 2. 就是 table 和 tr 還有 td ,都用統一的樣式指定, 可以提高複用性 */ table, tr, td { width: 300px; border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <table> <tr> <td align=center colspan="3">星期一菜譜</td> </tr> <tr> <td rowspan=2>素菜</td> <td>青草茄子</td> <td>花椒扁豆</td> </tr> <tr> <td>小蔥豆腐</td> <td>炒白菜</td> </tr> <tr> <td rowspan=2>葷菜</td> <td>油悶大蝦</td> <td>海蔘魚翅</td> </tr> <tr> <td>紅燒肉</td> <td>烤全羊</td> </tr> </table> </body> </html>
3.7列表去修飾
屬性list-style的值為none時，表示去掉預設的修飾
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表去修飾</title> <style type="text/css"> ul { list-style: none; } </style> </head> <body> <ul> <li>三國演義</li> <li>紅樓夢</li> <li>西遊記</li> <li>水滸傳</li> </ul> </body> </html>
4.css三種使用方式
-
方式1：在標籤的style屬性上設定css樣式
問題分析：
- 標籤多了，樣式多了，程式碼量龐大
- 可讀性差，維護麻煩
- css程式碼沒有複用性
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在標籤的style屬性上設定css樣式</title> </head> <body> <div style="width: 300px;height: 100px;background-color: beige">hello,北京</div> <br/> <div style="width: 300px;height: 100px;background-color: beige">hello,上海</div> <br/> <div style="width: 300px;height: 100px;background-color: beige">hello,天津</div> <br/> </body> </html>
-
方式2：在head標籤中，使用style標籤來定義需要的css樣式
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在head標籤中，使用style標籤來定義需要的css樣式</title> <style type="text/css"> div { width: 300px; height: 100px; background-color: beige; } span { border: 1px solid red; } </style> </head> <body> <div>hello,北京</div> <br/> <div>hello,上海</div> <br/> <span>hello,span</span> <br/> </body> </html>
-
方式3：把css樣式寫成單獨地css檔案，在通過link標籤引入（推薦使用）
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>引入外部的css檔案</title> <!-- rel：代表relation，關聯的意思 --> <!-- type="text/css" 這個屬性可以不寫 --> <!-- href表示要引入的css檔案的位置，可以是web的完整路徑，也可以是相對路徑--> <!-- 推薦使用第三種方式--> <link rel="stylesheet" type="text/css" href="./mycss.css"> </head> <body> <div>hello,北京~</div> <br/> <div>hello,上海</div> <br/> <span>hello,span</span> <br/> </body> </html>div { width: 200px; height: 100px; background-color: brown; } span { border: 1px dashed blue; }
5.css選擇器
5.1css元素選擇器
- 最常見的css選擇器是元素選擇器。換句話說，檔案的元素就是最基本的選擇器
- css元素/標籤選擇器通常是某個html元素，比如p、h1、a等
- 元素選擇器會修飾所有的對應的元素
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素選擇器</title> <style type="text/css"> h1 { color: red; } p { color: blue; } </style> </head> <body> <h1>一隻大貓咪</h1> <p>一隻小貓咪</p> </body> </html>
5.2ID選擇器
元素選擇器會修飾所有的對應的元素，但是假如希望某一個html元素使用特定的樣式，而這個元素已經用了元素選擇器修飾，這時候就可以使用id選擇器來進行特殊的指定
- id選擇器可以為標有特定id的html元素指定特定的樣式
- id選擇器以#來定義
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>id選擇器</title> <!-- 1.使用id選擇器，需要現在要修飾元素指定id屬性，id值是自己指定的 2.id是唯一的，不能重複 3.在<style>標籤中指定id選擇器時，前面需要有#id值 --> <style type="text/css"> #css1 { color: #ff7d44; } #css2 { color: #8A2BE2FF; } </style> </head> <body> <h1 id="css1">Hello，北京</h1> <h1 id="css2">hello，上海</h1> </body> </html>
5.3class選擇器(類選擇器)
假如html檔案中有三個div標籤：
如果使用元素選擇器的話，所有的div元素都會受到影響；
如果使用id選擇器的話，可以唯一地修飾其中某一個div元素；
但是如果想要修飾其中兩個div，這時就不能用id選擇器，因為id選擇器只能唯一地修飾一個div元素，也不能使用元素選擇器，這時候就需要使用class類選擇器。
class類選擇器可以在許多元素（不一定是相同的元素）當中，挑選出其中的一部分來進行修飾。
唯一修飾使用id選擇器，部分修飾使用類選擇器，全部修飾使用元素選擇器
-
class型別選擇器，可以通過class屬性選擇去使用這個樣式
-
基本語法
.class 屬性值{屬性:值;}
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>類選擇器</title> <!-- 1.選擇class選擇器，需要在被修飾的元素上，設定class屬性，屬性值(名稱)自己定義 2.class屬性的值（名稱）可以重複 3.需要在style標籤中指定類選擇器的具體樣式，開頭需要使使用.類選擇器名稱 --> <style type="text/css"> .css1 { color: pink; } .css2 { color: #25d2be; } </style> </head> <body> <h1 class="css1">Hello，北京</h1> <h1 class="css1">Hello，world</h1> <h2 class="css2">ni hao</h2> <h1 class="css2">hello，上海</h1> </body> </html>
5.4組合選擇器
-
組合選擇器可以讓多個選擇器共用同一個css樣式程式碼
-
語法格式
選擇器1,選擇器2,選擇器n{屬性:值;}
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>組合選擇器</title> <style type="text/css"> .class01, #id01 { width: 300px; height: 100px; border: 2px solid paleturquoise; color: #ff7d44; } </style> </head> <body> <h1 class="class01">Hello，北京</h1> <h1 id="id01">hello，上海</h1> </body> </html>
5.5優先順序說明
行內樣式優先順序 > id選擇器優先順序 > class選擇器優先順序 > 元素選擇器優先順序
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>選擇器的優先順序說明</title> <style type="text/css"> #id01 { color: purple; } #id02 { color: blue; } .class01 { color: red; } div { color: black; } </style> </head> <body> <h3>選擇器的優先順序說明</h3> <!--行內樣式的優先順序高於id選擇器--> <div style="color: #25d2be" id="id01">一隻貓貓在睡覺</div> <!--id選擇器的優先順序高於類選擇器--> <div id="id02" class="class01">兩隻貓貓在睡覺</div> <!--類選擇器的優先順序高於元素選擇器---> <div class="class01">三隻貓貓在睡覺</div> </body> </html>
6.練習