css樣式表及選擇器

2021-09-27 08:32:53 字數 3056 閱讀 1133

css樣式表及選擇器

內嵌式是將css**集中寫在html文件的head頭部標籤中,並且用style標籤定義,其基本語法格式如下:

>

type

="text/css"

>

選擇器style

>

head

>

1.在html5中可以省略,但一般都會寫上,比較規範

2.一般放在head標籤內,也可以放在其他位置

內聯樣式,又有人稱行內樣式、行間樣式、內嵌樣式。是通過標籤的style屬性來設定元素的樣式,其基本語法格式如下:

《標籤名

style

="屬性1

:屬性值1;

屬性2:屬性值2;

屬性3:屬性值3;

">

內容 標籤名

>

>

href

="css檔案的路徑"

type

="text/css"

rel="stylesheet"

/>

head

>

link單標籤,放在頭部head裡面

1.herf,定義外部樣式檔案的url,可以是相對路徑,也可以是絕對路徑

2.type,所連線文件的型別,text/css表示是乙個css檔案

3.rel 定義當前文件和所鏈結文件的關係,在這裡需要指定stylesheet,表示鏈結的是乙個樣式表檔案

樣式表優點

缺點使用情況

控制範圍

行內樣式表

書寫方便,權重高

沒有實現樣式和結構的分離

較少控制乙個標籤

內部樣式表

部分結構和樣式分離

沒有完全分離

較多控制乙個頁面的標籤

外部樣式表

完全實現樣式和結構的分離

需要引入

最多,牆裂推薦

控制整個站點

標籤的型別(顯示模式)

html標籤一般分為塊標籤和行內標籤兩種型別,它們也稱塊元素和行內元素。具體如下:

常見的塊元素有

復合選擇器是由兩個或多個基礎選擇器,通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標籤。

由兩個選擇器組成,標籤選擇器,第二個class選擇器,兩個選擇器之間不能有空格

p .p1

交集用的比較少

並集選擇器用逗號鏈結,任何形式的選擇器都可以作為並集選擇器的一部分

div,p

也稱為包含選擇器,用空格連線,子子孫孫都可以被選中

注意:把外層標籤寫在前面,內層標籤寫在後面,中間用空格分割

只包含子元素,父級標籤寫在前面自己標籤寫在後面,中間用》連線

選取標籤帶有某些特殊屬性的選擇器 我們稱為屬性選擇器

div[class^=font]

div[class$=font]

div[class*=font]

標籤名[屬性名^=屬性值]

【強制】屬性名與之後的:之間不允許包含空格,:與屬性值之間必須包含空格

​ font-size: 12px;

【強制】當包含多個選擇器時,每個選擇器宣告都必須獨佔一行

.one, .two, .three 錯誤寫法

.one, 正確寫法

.two,

.three

【建議】選擇器的巢狀層級不應該大於**

【強制】屬性定義必須另起一行

【強制】屬性定義後必須加上分號

css 可以新增背景顏色和背景,以及來進行設定。

background-color

背景顏色

background-image

背景位址

background-repeat

是否平鋪

background-position

背景位置

background-attachment

背景固定還是滾動

背景的合寫(復合屬性)

background:背景顏色 背景位址 背景平鋪 背景滾動 背景位置

語法:

background-image

: none | url (url)

none 無背景圖

語法:

background-repeat

: repeat | no-repeat | repeat-x | repeat-y

語法:

background-position

: length || length

background-position

: position || position

語法:

background-attachment

: scroll | fixed

background:背景顏色 背景位址 背景平鋪 背景滾動 背景位置

background

: color url(image.jpg) repeat-y scroll 50% 0 ;

css3支援背景半透明的寫法語法格式是:

background

:rgba

(0,0,0,0.3)

;

其引數設定如下:

a) 可以設定長度單位(px)或百分比(設定百分比時,參照盒子的寬高)

b) 設定為cover時,會自動調整縮放比例,保證始終填充滿背景區域,如有溢位部分則會被隱藏。我們平時用的cover 最多

c) 設定為contain會自動調整縮放比例,保證始終完整顯示在背景區域。

以逗號分隔可以設定多背景,可用於自適應布局 做法就是 用逗號隔開就好了。

CSS選擇器及CSS樣式表

牛腩新聞發布系統中記憶最深的就是各種 css選擇器各種 css樣式,這些選擇器之間肯定有它的優先順序,包括 css樣式也一樣,也是有它的優先順序,本文介紹一些各種 css選擇器各種 css樣式以及它們的優先順序。由兩個主要的部分構成 選擇器,以及一條或者多條宣告。部分css部分 h1html 部分z...

css樣式表 樣式表分類 選擇器

一 樣式表分三類 1.內聯樣式表。放在元素的開始標記中。只對當前元素起作用。例 結果 2.內嵌樣式表。放在頁面的中間。可以對整個頁面。你好 執行結果 3.外部樣式表。放在乙個單獨的.css樣式表檔案中。可以對整個 操作 新建乙個css檔案,用來存放樣式表 在html中呼叫樣式表,要在html中右鍵 ...

css層疊樣式表及選擇器

六 css層疊樣式表 由網頁組成 網頁的結構由html組成 網頁的樣式由css組成 1.css概念 cascading style sheets 層疊 樣式 表 css是定義html表現形式的描述性語言 2.如何設定標題文字顏色 對齊方式 背景色 h3 北京 h3 文字顏色 巢狀 font font...