學習筆記 CSS基礎

2022-07-20 07:09:09 字數 4923 閱讀 2307

css 指層疊樣式表(cascading style sheets), 是一種標記語言,屬於瀏覽器解釋型語言,可以直接由瀏覽器執行,不需要編譯。

html只負責網頁的內容,標籤盡量只負責語意不負責樣式。css 主要負責網頁的樣式,給網頁進行布局,解決了內容與表現分離的問題。

css 可以重複使用,避免**冗餘。但依賴於html。

在 html 標籤上使用 style 屬性進行宣告。此宣告只作用於當前 html 標籤。

擁有最高優先順序。

<

p style

="color: blue;size: 34px"

>這是個內聯樣式

p>

在 head 標籤中使用 style 標籤宣告。此宣告一般宣告當前網頁的公共樣式或者給某個標籤的單獨樣式。

在 head 標籤中使用 link 標籤引入外部宣告好的 css 檔案。解決了不同網頁間樣式重複使用的問題。

<

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

>

標籤名會給當前網頁內所有該標籤增加相同的樣式。

<

head

>

<

style

type

="text/css"

>

/*標籤選擇器

*/p

style

>

head

>

<

body

>

<

p>這是個黃色

p>

body

>

#標籤的id屬性值

給某個指定的標籤新增樣式。id 屬性不要以數字開頭,乙個 id 值最好只賦值一次。

<

head

>

<

style

type

="text/css"

>

/*id選擇器

*/#red

style

>

head

>

<

body

>

<

p id

="red"

>這是個紅色

p>

body

>

.類選擇器名

給不同的標籤新增相同的樣式。類名的第乙個字元不能使用數字。  

<

head

>

<

style

type

="text/css"

>

/*類選擇器

*/.ppp

style

>

head

>

<

body

>

<

p class

="ppp"

>這是個紅色

p>

<

p class

="ppp"

>這是個紅色

p>

body

>

* 選擇所有的 html 標籤新增相同的樣式。

/*

全部選擇

*/*

選擇器1,選擇器2,...

給不同選擇器新增相同樣式。

<

head

>

<

style

type

="text/css"

>

/*組合選擇器

*/.ppp,#qqq

style

>

head

>

<

body

>

<

p class

="ppp"

>這是個紫色

p>

<

p id

="qqq"

>這是個紫色

p>

body

>

選擇器1 子標籤選擇器 ...

<

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