一、css簡介
- 介紹
css我們稱呼層疊樣式表(英文全稱：Cascading Style Sheets)。它是一種用來表現HTML（標准通用標記語言的一個應用）或XML（標准通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。如果html是一個人，那么CSS就相當於衣服，有了它我們可以讓HTML樣式豐富多彩。
- 語法
css語法主要由兩部分組成：選擇器和聲明。選擇器通常是您需要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成。
selector {
property1:value1
property2:value2
……
}
- 存在方式
元素內聯：直接在標簽中使用CSS
demo：
<body> <div style="background-color: red ;height: 30px"></div> </body> </html>
頁面嵌入：通過在head標簽中定義，提供后續使用
demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello</title> <style> p{ background-color: aqua ; height: 20px; } div{ background-color: red; height: auto; } </style> </head> <body> <div>wd</div> <p>name</p> <!--head中定於了p、div標簽的樣式，body中所有的div和p都會引用到其樣式--> </body> </html>
外部引入：通過外部文件，是head標簽中使用link引入，本質引入都是一樣。
<head> <link rel="stylesheet" type="text/css" href="mycss.css"> </head>
<link> 標簽定義文檔與外部資源的關系，他最常見的用途是鏈接樣式表，僅能出現在<head>標簽中。
<link>標簽的常用屬性：
href: URL 指定被連接文檔的地址
type：MIME_type 指定被連接文檔的MIME類型
rel：有很多值（詳見下圖） 指定當前文檔與被鏈接文檔的關系
- CSS樣式注釋
/*代碼塊*/
/*.c1{
height: 30px;
}*/
二、css選擇器
分類：
- 元素選擇器
- id選擇器
- class選擇器
1.標簽選擇器
通過不同的標簽定義選擇器，如p、div、span、hr、table等等，只要定義了元素選擇器，所有該標簽都會引用定義的樣式。
demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello</title> <style> p{ background-color: aqua ; height: 20px; } div{ background-color: red; height: auto; } </style> </head> <body> <div>wd</div> <p>name</p> <!--head中定於了p、div標簽的樣式，body中所有的div和p都會引用到其樣式--> </body> </html>
2.id選擇器
通過使用#+名字定義樣式，引用使用id=“名字”引用該樣式。
demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello wd</title> <style> #i1{ background-color: red; height: 50px; } </style> </head> <body> <div id="i1">python</div> <!--引用i1中的樣式--> </body> </html>
3.class選擇器
通過.+名字定義，使用class=“名字”來引用樣式
demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello wd</title> <style> #i1{ background-color: red; height: 50px; } </style> </head> <body> <div id="i1">python</div> <!--引用i1中的樣式--> </body> </html>
選擇器組合：
選擇器有多種，通過不同的組合方式能達到我們想要的樣式，常用的選擇器組合：
- 層級選擇器（空格間隔）
- 分組選擇器（逗號間隔）
- 屬性選擇器（中括號）
1.層級選擇器（空格間隔）
層級選擇器以空格間隔，用於多層標簽嵌套而給嵌套中的某個標簽應用樣式，如div span{ }，只會應用div嵌套的span標簽,.c1 span{ }只會應用於class=‘c1’下面包裹的span標簽。
demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div span{ background-color: aquamarine; height: auto; } </style> </head> <body> <div> <div>wd</div> <span>name</span> <!-- div下的span只有name，所有name會被應用div span{ }樣式--> </div> </body> </html>
2.分組選擇器（逗號間隔）
分組選擇器（組合選擇器），以逗號間隔，表示在這個組合中的任何選擇器都應用該樣式。例如.c1,#c2,div{ },表class=‘c1’或者id="c2"或者div標簽都應用此樣式。
demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1,span{ background-color: aquamarine; height: auto; } </style> </head> <body> <div class="c1"> <div>wd</div> <span>name</span> </div> </body> </html>
3.屬性選擇器
屬性選擇器通過屬性+[k='value']形式定義，其中屬性k="value"可以自己定義也可以使用標准屬性，如input[type="text"]{ },會應用於<input type=”text“>,也可以是.c1[n="wd"]{ }
demo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input[type="text"]{ background-color: aquamarine; height: auto; } </style> </head> <body> <input type="text"> <!-- 只會應用type="text"的input標簽--> <input type="checkbox"> </body> </html>
- css優先級
當一個標簽使用了多個樣式的時候，CSS有一定的優先級，若在標簽中直接定義style則優先使用，若沒有定義，優先級與在head中定義的順序有關，越往下越優先（就近原則）。
demo:
<!DOCTYPE html> <html lang="en"> <head> <style> .c1{ background-color: red ;height: 20px} .c2{ background-color: darkblue;height: 30px} </style> </head> <body> <div class="c1 c2" style="background-color: chartreuse"></div> <!--這里應用style="background-color: chartreuse樣式--> <div class="c2 c1" ></div> <!--這里應用head中最下面的c2樣式--> </body> </html>