CSS 基礎選擇器

2021-10-16 05:08:39 字數 2996 閱讀 9955

css 是層疊樣式表 ( cascading style sheets ) 的簡稱.

有時我們也會稱之為css樣式表或級聯樣式表。

css也是一種標記語言

css作用:美化頁面,讓html頁面更漂亮,讓頁面布局更簡單,結構樣式相分離css 規則由兩個主要的部分構成:選擇器以及一條或多條宣告.

css必須作用在html上才會有效,不能單獨執行

"en">昨晚熬夜太晚,手機突發發錯震動的聲音,開啟一開是一位小姐姐對我說,明天約你看電影,來嗎

css樣式都包含在一般寫到標籤裡面,在style標籤裡面書寫樣式。

選擇器分類

基礎選擇器:標籤選擇器;類選擇器;id選擇器;萬用字元選擇器

復合選擇器:後代選擇器;子選擇器;並集選擇器;偽類選擇器

標籤選擇器: 就是通過標籤名字來找元素

語法:
作用:給頁面上面指定的標籤設定樣式 .

缺點:如果大量使用標籤選擇器,那麼頁面上很多的元素就會是同一效果,不能差異化設定.

"en">"box">這是紅色

"box">我也想變成紅色

命名規範

不能是中文

不能是標籤名字 div span a等,因為有標籤選擇器

不能是點+數字

多類名使用

每乙個標籤都有class的屬性,它的屬性值我們通常稱為類名class屬性的值有多個每乙個類名需要使用空格分隔.

注意點:如果多個類名同時作用於乙個標籤,並且樣式是設定一樣的 ,要觀察css**的書寫順序,寫在後面會把寫在前面的樣式給覆蓋掉.

html元素以 id 屬性來設定 id 選擇器,css 中 id 選擇器以「#" 來定義id選擇器能保證該名字唯一,常用在js中實現.

注意:在乙個網頁中不能出現兩個名字相同的id,不能多次使用,類選擇器可以一次定義多次使用.

在 css 中,萬用字元選擇器使用*定義,它表示選取頁面中所有元素(標籤)

字型屬性:用於定義字型系列、大小、粗細、和文字樣式(如斜體)

font-family字型型別設定字型型別,網頁中常用的字型型別有宋體 微軟雅黑 黑體等.

font-size:字型大小設定文字的大小的 要加單位 通常單位是px 一般是給body標籤設定文字大小 它可以控制這個網頁裡面所有的文字大小 .

font-weight字型粗細設定字型是否加粗.取值為:400或者 normal 將加粗的文字設定為正常,700 或者 bold 將正常的文字設定為加粗的效果.

font-style字型風格設定字型風格,取值為:normal(不傾斜 預設值) italic(傾斜)

字型復合寫法

font

: font-style font-weight font-size/line-height font-family

例如:font

: italic 700 30px '楷體'

;

說明:一次可以同時設定多個針對於字型的屬性,每乙個屬性要用空格分隔.

注意事項:font-style與font-weight 可以省略不寫font-size與font-family 必須要寫,否則font屬性將不起作用.

line-height:行間距

文字顏色:css text(文字)屬性可定義文字的外觀,比如文字的顏色、對齊文字、裝飾文字、文字縮排、行間距等.

文字對齊

text-align

文字裝飾屬性

text-decoration

文字縮排

text-indent

行間距

line-height

1行內樣式表(行內式) 內部樣式表(內嵌樣式表)是寫到html頁面內部. 是將所有的 css **抽取出來,單獨放到乙個標籤中.

2.內部樣式表(嵌入式) 行內樣式表(內聯樣式表)是在元素標籤內部的 style 屬性中設定 css 樣式。適合於修改簡單樣式.

3.外部樣式表(鏈結式)

第一步:先要建立乙個以***x.css為副檔名的檔案

第二步:在對應的html檔案中 需要使用

優點:乙個css檔案可以被多個html檔案所引用

特點:乙個html檔案可以使用link引入多個css檔案

CSS選擇器之基礎選擇器

選擇器 選擇符 就是根據不同需求把不同的標籤選出來這就是選擇器的作用。簡單來說,就是選擇標籤用的。標籤選擇器 又稱元素選擇器,指用html標籤作為選擇器,為頁面中某類標籤設定css樣式。缺點 不能差異化設定樣式,只能選擇全部的當前標籤。語法 基礎選擇器之標籤選擇器title 標籤選擇器 寫上標籤名 ...

CSS 選擇器之基礎選擇器

id選擇器 選擇具體的id屬性值的元素 元素選擇器 選擇具有相同標籤名稱的元素 類選擇器 選擇具有相同的class屬性值的元素。id選擇器,是根據標籤的id屬性值選擇對應的標籤的。格式 id值舉例 定義兩個p標籤,且標籤的id屬性值不同,然後用css定義p標籤的內容如何顯示。google瀏覽器中開啟...

CSS 基礎選擇器

css cascading style sheet,層疊式樣式表,即乙個標籤可以同時被多種選擇器選擇,標籤選擇器 id選擇器 類選擇器。這些選擇器都可以選擇上同乙個標籤,從而影響樣式。基礎選擇器 1.標籤選擇器,就是標籤的名字。追光者如果說你是遙遠的星河 耀眼得讓人想哭我是追逐著你的眼眸總在孤單時候...