CSS的基礎學習

2022-06-11 13:36:13 字數 1569 閱讀 7016

css學習

--------學習資源

css語法檢查

配置css的方法:

1.行內式

行內式通過直接設定元素的style屬性來引入css

行內式優點:元素的樣式簡單明瞭

缺點:**不易維護

2.內嵌式

通過在head標籤中加入style標籤來引入css

缺點:不能被多個頁面重複使用

3.鏈結式

通過link標籤來引入css檔案

優點:頁面在載入元素的同時也會載入其樣式

缺點:增加了http請求

4.匯入式

通過在head標籤中加入style標籤及@import來引入css

缺點:匯入式會在整個頁面載入完畢後,再載入css檔案,這樣會導致頁面在開啟時,先顯示的是無樣式的頁面,閃爍一下之後,頁面才有了樣式

css選擇符和宣告:

css語法基礎

css樣式規則選擇符

選擇符可以是html元素名稱,類名或id

css樣式規則宣告

宣告是你要設定的css屬性(例如顏色)及其值

乙個選擇符要配置多個屬性可以用分號(;)

例:body將網頁配置成黃底藍字

如果需要更多的顏色就可以參考的」網頁安全調色盤」

body將網頁配置成淺黃底中藍字

配置內聯css:  

通過修改style實現

但是如果在body內文字

就會覆蓋了body的全域性樣本。如果有10個段落都需要以這種方式配置,就會造成大量冗餘**,因此並不高效

配置嵌入css:

嵌入樣式應用於整個網頁文件,這種樣式要放到網頁head部分的裡

例子

class選擇符:

class選擇符配置一類css規則,並將其應用於網頁的乙個或多個區域,配置一類樣式時,要將選擇符配置成類名。在類名前新增句點符號(.)。類名必須以字母開頭,可包含數字,連字型大小和下劃線但是不能有空格,以下**配置名為feature的一類樣式

.feature

一類的樣式可以應用於任何元素。這是使用class屬性做到的

例:123456

id選擇符:

class用於網頁上多次響應使用,而id在每個網頁上只能使用一次。配置id時記得在前面新增#號

#content

123456

後代選擇符:

用後代選擇符在容器元素的上下文配置乙個元素。

例如:將main元素中的段落配置成綠色文字

main p

span元素

元素在網頁中定義乙個上下不留空的內聯區域。以標記開頭,以結尾。適合格式化乙個包含在其他區域(比如

,或)中的區域。

css的層疊(區域性優先,作用範圍越小越優先)

例如匯入的.css中body

但是同時又在html的head中定義

顯示的頁面為黃底藍字

css學習 css基礎

子選擇器 parent child 子選擇器是指選擇parent的範圍內的第乙個子元素。這裡parent和child均是偽 可以是class用.classname,也可以是標籤ul li,也可以是id pid cid 後代選擇器 parent child 後代選擇器是指 選擇parent範圍內的所欲...

CSS的基礎學習

css css 指層疊樣式表 cascading style sheets 層疊的意思是 多重樣式定義被層疊為一。層疊樣式表 他的作用,就是設定我們的html標籤的展示樣式,因為html自帶的屬性,比較匱乏,不能滿足我們對樣式的要求,另一方面,我們想要解耦,html標籤,他既要定義網頁元素,又要展示...

css基礎學習

1.class和id 1 同一id在乙個頁面內只能應用一次,而class則是 用於描述多次出現的元素。2 class的定義方法 指定標籤 類名 id的定義方法 指定標籤 id名 class的應用方法 指定標籤 class 類名 id的應用方法 指定標籤id id名 2.css的引用 1 內部樣式 段...