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 是希望您設定的樣式屬性。每個屬性都有乙...