css 指層疊樣式表（cascading style sheets）， 是一種標記語言，屬於瀏覽器解釋型語言，可以直接由瀏覽器執行，不需要編譯。
html只負責網頁的內容，標籤盡量只負責語意不負責樣式。css 主要負責網頁的樣式，給網頁進行布局，解決了內容與表現分離的問題。
css 可以重複使用，避免**冗餘。但依賴於html。
在 html 標籤上使用 style 屬性進行宣告。此宣告只作用於當前 html 標籤。
擁有最高優先順序。
<在 head 標籤中使用 style 標籤宣告。此宣告一般宣告當前網頁的公共樣式或者給某個標籤的單獨樣式。 在 head 標籤中使用 link 標籤引入外部宣告好的 css 檔案。解決了不同網頁間樣式重複使用的問題。p style
="color: blue;size: 34px"
>這是個內聯樣式
p>
<注意：內聯樣式的優先順序最高。而內部樣式表和外部樣式表，若給同一標籤定義樣式，則誰後宣告就執行誰。link
rel="stylesheet"
type
="text/css"
href
="css/style.css"
/>
<標籤名會給當前網頁內所有該標籤增加相同的樣式。style
type
="text/css"
>
p style
>
<
link
rel="stylesheet"
type
="text/css"
href
="style.css"
/>
<
link
rel="stylesheet"
type
="text/css"
href
="style.css"
/>
<
style
type
="text/css"
>
p style
>
<#標籤的id屬性值head
>
<
style
type
="text/css"
>
/*標籤選擇器
*/p
style
>
head
>
<
body
>
<
p>這是個黃色
p>
body
>
給某個指定的標籤新增樣式。id 屬性不要以數字開頭，乙個 id 值最好只賦值一次。
<.類選擇器名head
>
<
style
type
="text/css"
>
/*id選擇器
*/#red
style
>
head
>
<
body
>
<
p id
="red"
>這是個紅色
p>
body
>
給不同的標籤新增相同的樣式。類名的第乙個字元不能使用數字。
<* 選擇所有的 html 標籤新增相同的樣式。head
>
<
style
type
="text/css"
>
/*類選擇器
*/.ppp
style
>
head
>
<
body
>
<
p class
="ppp"
>這是個紅色
p>
<
p class
="ppp"
>這是個紅色
p>
body
>
/*選擇器1,選擇器2,...全部選擇
*/*
給不同選擇器新增相同樣式。
<選擇器1 子標籤選擇器 ...head
>
<
style
type
="text/css"
>
/*組合選擇器
*/.ppp,#qqq
style
>
head
>
<
body
>
<
p class
="ppp"
>這是個紫色
p>
<
p id
="qqq"
>這是個紫色
p>
body
>
<標籤名【屬性名=屬性值】head
>
<
style
type
="text/css"
>
/*子標籤選擇器
*/.ggg a
#bbb a
style
>
head
>
<
body
>
<
p class
="ggg"
><
a href
="#"
>這是綠色
a>
p>
<
p id
="bbb"
><
a href
="#"
>這是黑色
a>
p>
body
>
給具備某屬性的標籤新增樣式。
注意：使用*選擇器給整個頁面新增基礎樣式
使用類選擇器給不同標籤新增基礎樣式
使用標籤選擇器給某類標籤新增基礎樣式
使用id選擇器、屬性選擇器、內聯樣式給某個具體的標籤新增個性化樣式
邊框設定
border:5px solid red;
字型設定
font-size:10px; 設定字型大小
font-family:"黑體"; 設定字型
font-weight:bold; 設定字型加粗
字型顏色設定
color:顏色;
背景顏色設定
background-color：顏色;
背景設定
background-img:url(路徑)
background-repeate:no-repeate; 設定不重複
background-size:cover; 設定平鋪
高和寬的設定
width:
height:
浮動設定
float:left|right
行間距設定
line-height
塊級標籤，主要用來進行網頁布局，會將其中的子元素內容作為乙個獨立的整體存在。
預設寬度是頁面的寬地，但是可以設定。沒有預設高度，但是可以撐開。
如果子元素設定了百分比的高或者寬，佔據的是div的百分比，不是整個頁面的。
css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括：邊距，邊框，填充（內邊距），和實際內容。
外邊距：margin
用來設定元素與元素之間的距離，上下左右均可單獨設定。
margin:0px auto; 上下外邊距為0，左右居中
邊框：border
用來設定元素邊框的大小、形式和顏色。上下左右均可單獨設定。
內邊距：padding
設定內容和邊框之間的距離，上下左右均可單獨設定。
內容：設定寬度和高度即可改變內容區域的大小。
position:relative
相對元素原有位置移動指定的距離，可以使用top、left、right、bottom來進行上下左右的偏移。
相對的是自己原本的位置，不改變其他元素位置。
注意，在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其它框。
position:absolute
可以使元素根據參照元素或已定位的父元素來進行移動。
絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於
絕對定位的元素會覆蓋在其他框。
position:fixed
將元素固定在頁面的某個位置，不會隨著滾動條的移動而改變位置。
元素的位置相對於瀏覽器視窗是固定位置。
元素的定位與文件流無關，所以它們可以覆蓋頁面上的其它元素
z-index屬性指定了乙個元素的堆疊順序（哪個元素應該放在前面，或後面）
具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
CSS基礎學習筆記
個人理解 距被控制的元素越近，優先順序越高 css基礎語法 選擇器 即需要改變樣式的 html 元素宣告 屬性和值 即css 規則格式為 selector property value porperty2 value 值的不同寫法和單位 值為單詞 風格 空格和大小寫 css高階語法 繼承及其問題 擺...
CSS基礎學習筆記
1.css樣式優先順序 元素上的樣式 style中嵌入的樣式 外部樣式檔案，其實不太準確，應當是當嵌入式出現在外部樣式的後面時，按照style出現的順序來渲染的，後面出現的會覆蓋前面的。同乙個樣式檔案中，元素選擇器越精確優先順序越高，id選擇器 100 類選擇器 10 元素選擇器 1 根據權值 累計...
CSS基礎學習筆記
初學css所以就以部落格的形式記錄下來，權當是個記事本了。css規則由倆個主要部分構成 選擇器，以及一條或多條宣告 selector 其中選擇器通常是你需要改變的html元素，例如 p 或 h1 這些 每條宣告由乙個屬性和乙個值組成 其中屬性 property 是希望您設定的樣式屬性。每個屬性都有乙...