css起源
在web早期（1990-1993），html是一個很局限的語言。幾乎完全由用於描述段落，超連結，列表和標題的結構化元素組成。隨著全球資訊網的出現（使用者互動體驗的加強）對html的要求越來越大，人們迫切需要html增加新的元素，去完成一個特定的功能。
隨著HTML的成長，為了滿足頁面設計者的要求，HTML添加了很多顯示功能。但是隨著這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。於是CSS便誕生了。
CSS為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。
css概念
CSS ：層疊樣式表 (Cascading Style Sheets)(階層式樣式表)
CSS特點
1)豐富的樣式定義
CSS提供了豐富的文檔樣式外觀，以及設定文本和背景屬性的能力；允許為任何元素建立邊框，以及元素邊框與其他元素間的距離，以及元素邊框與元素內容間的距離；允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。
2)便於使用和修改
CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個專門的CSS檔案中，以供HTML頁面引用。總之，CSS樣式表可以將所有的樣式聲明統一存放，進行統一管理。
3)多頁面應用
CSS樣式表可以單獨存放在一個CSS檔案中，這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬於任何分頁檔，在任何分頁檔中都可以將其引用。這樣就可以實現多個頁面風格的統一。
4)層疊
簡單的說，層疊就是對一個元素多次設定同一個樣式，這將使用最後一次設定的屬性值。例如對一個網站中的多個頁面使用了同一套CSS樣式表，而某些頁面中的某些元素想使用其他樣式，就可以針對這些樣式單獨定義一個樣式表應用到頁面中。這些後來定義的樣式將對前面的樣式設定進行重寫，在瀏覽器中看到的將是最後面設定的樣式效果。
5)頁面壓縮
在使用HTML定義頁面效果的網站中，往往需要大量或重複的表格和font元素形成各種規格的文字樣式，這樣做的後果就是會產生大量的HTML標籤，從而使分頁檔的大小增加。而將樣式的聲明單獨放到CSS樣式表中，可以大大的減小頁面的體積，這樣在載入頁面時使用的時間也會大大的減少。另外，CSS樣式表的複用更大程式的縮減了頁面的體積，減少下載的時間。
* 樣式表書寫位置*
內嵌式寫法
<head><style type=”text/css”></style></head>
外鏈式寫法
寫在head裡，<link rel=”stylesheet” href=”1.css”>
<head><link rel="stylesheet" href="css/base.css" /></head>
行內樣式表（直接在標籤裡面寫）
<li style="float: left;margin-left: 50px;"> <img src="img/logo.png" style="margin-top: 5px;"/></li>
三種寫法特點:
內嵌式寫法，樣式只作用於當前檔案，沒有真正實現結構表現分離。
外鏈式寫法，作用範圍是當前網站，誰調用誰生效，範圍廣，真正實現結構表現分離。
行內樣式表，作用範圍僅限於當前標籤，範圍小，結構表現混在一起。 （不推薦使用）
css基本寫法
選取器：{
屬性：值；
屬性：值
}
選取器
選取器可以參考選取器
css屬性
css屬性有很多，具體可以看 css參考手冊
常用的基本屬性:
width:20px; 寬
height:20px; 高
background-color:red; 背景顏色
font-size:24px; 文字大小
text-align:left | center| right 內容的水平對齊
text-indent:2em; 首行縮排
color:red; 文字顏色
background-color 背景顏色
background-image 背景圖片
background-repeat repeat(預設) | no-repeat | repeat-x | repeat-y 背景平鋪
background-position left | right | center | top | bottom 背景定位
background-attachment 背景是否滾動 scroll | fixed
………等等 基礎選取器
標籤選取器
寫法：標籤{屬性：值;}
html { width: 100%; height: 100%; overflow: hidden; }body { width: 100%; height: 100%; overflow: hidden; background: #060C19;} p{ font-size: 20px; color: red;}
特點：標籤選取器定義之後，會將頁面所有的元素都執行這個標籤樣式。
類別選取器
寫法：.自訂類名(屬性:值;)
特點: 誰調用，誰生效.
一個標籤可以多個類別選取器。
多個標籤可以調用同一個類別選取器
類別選取器命名規則：
不能用純數字或者數字開頭來定義類名。
不能使用特殊符號(_ 除外)來定義類名。
不推薦使用漢字來定義類名。
不推薦使用標籤名、屬性、屬性值來定義類名。
.name { color: white; font-weight: bold; font-size: 60px; text-align: center; letter-spacing: 5px; } .btnDiv { text-align: center; min-width: 500px; margin-top: 60px; }
id選取器
寫法：#自訂名{屬性:值;}
特點:誰調用，誰生效。
一個標籤只能調用一個id選取器。
一個id選取器在一個頁面只能調用一次。
#superContainer { height: 100%; position: relative; -ms-touch-action: none; touch-action: none}
複合選取器
兩個或兩個以上的基礎選取器通過不同的方式串連在一起
交集選取器
標籤+類(id)選取器{屬性:值;}
特點:即是某個標籤，而且這個標籤調用了類（id）選取器
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div.box{ color: red; font-size: 20px; } </style> </head> <body> <div class="box"> 內容1 </div> <div> 內容2 </div> <p class="box"> 內容3 </p> </body></html>
後代選取器
選取器+空格+選取器{屬性:值;}
後代選取器的基本要求：包含(嵌套)關係。
特點: 父在前,子在後。
無限制隔代。
只要能代表這個標籤，可以是標籤選取器、類別選取器、id選取器自由組合。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div p{ color: red; font-size:20px ; } </style> </head> <body> <div> <p>子標籤1</p> <font>子標籤2</font> </div> </body></html>
子代選取器
選取器>選取器{屬性:值;}
特點：選擇的是直接下一代.有限制隔代。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div>p{ color: red; font-size:20px ; } </style> </head> <body> <div> <p>子標籤1</p> <font>子標籤2</font> <span><p>子標籤3</p></span> </div> </body></html>
並集選取器
選取器+,+選取器+,+選取器{屬性:值;}
html,body,div,span{ margin: 0; padding: 0; }
標籤的分類
塊元素
典型代表：div,h1-h6,p,ul,li
特點:
- 獨佔一行
- 可以設定寬高
- 嵌套（包含）下，子塊元素寬度（沒有定義情況下）和父塊元素寬度預設一致。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>塊級標籤</title> </head> <body> <div>aaa</div> <p>bbb</p> <h1>ccc</h1> </body></html>
行內元素
典型代表： span ,a, ,strong , em, del, ins
特點：
- 在一行上顯示
- 不能直接設定寬高
- 元素的寬和高就是內容撐開的寬高。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>行內元素</title> </head> <body> <span>span標籤</span> <a href="#">超連結</a> </body></html>
行內塊元素(內嵌元素)
典型代表 input img
特點：
- 在一行上顯示
- 可以設定寬高
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>行內塊元素</title> </head> <body> <input type="text" placeholder="使用者名稱" /> <input type="password" placeholder="密碼" /> <img src="img/34.jpg" width="100px"/> </body></html>
通過display屬性轉換元素
display: none;//此元素不會被顯示。display: block;//此元素將顯示為區塊層級元素，此元素前後會帶有分行符號。display: inline;//預設。此元素會被顯示為內嵌元素，元素前後沒有分行符號。display: inline-block;//將元素轉換為行內塊元素
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>轉換元素</title> <style type="text/css"> input{ display: block; } div{ display: inline-block; } p{ display: inline; } </style> </head> <body> <div>aaaa</div> <div>bbbb</div> <input type="text" placeholder="使用者名稱" /> <input type="password" placeholder="密碼" /> <img src="img/34.jpg" width="100px"/> <p>段落標籤</p> </body></html>
css三大特性
層疊性
當多個樣式作用於同一個（同一類）標籤時，樣式發生了衝突，總是執行後邊的代碼(後邊代碼層疊前邊的代碼)。和標籤調用選取器的順序沒有關係。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .box1{ font-size: 40px; color: blue; } .box{ font-size: 16px; color: red; } </style> </head> <body> <div class="box box1"> aaa </div> </div> </body></html>
繼承性
繼承性發生的前提是包含（嵌套關係）
1）文字顏色可以繼承
2）文字大小可以繼承
3）字型可以繼承
4）字型粗細可以繼承
5）文字風格可以繼承
6）行高可以繼承
總結：文字的所有屬性都可以繼承。
◆特殊情況：
h系列不能繼承文字大小。
a標籤不能繼承文字顏色。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ font-size: 40px; color: red; } </style> </head> <body> <div class="box"> <span>aaaa</span> </div> </body></html>
權重和優先順序
從CSS代碼存放位置看權重優先順序：內嵌樣式 > 內部樣式表 > 外聯樣式表。從選取器看權重優先順序：important > 內嵌樣式 > ID > 類 > 標籤 | 偽類 | 屬性選擇 > 偽對象 > 繼承 > 萬用字元。important的權重為1,0,0,0ID的權重為0,1,0,0類的權重為0,0,1,0標籤的權重為
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
