web前端學習之CSS

2021-10-24 15:34:17 字數 1163 閱讀 4835

書寫樣式和引入方法

css(cascading style sheets):全程為層疊樣式表,它主要用於定義html內容在瀏覽器內的顯示樣式,如文字大小、顏色、加粗等等。

使用css樣式的好處是通過定義某個樣式,可以讓不同的網頁位置有著統一的字型、字型大小或者顏色等等。

換言之,使用css可以有效的減少我們書寫的**量,降低工作量,減少重複,使得**更加的整潔乾淨。

css樣式由選擇器和宣告組成,而宣告又由屬性和值組成。

選擇器是css和html之間的橋梁

選擇器的語法:選擇器

使用標籤名進行操作

在通用選擇器中,一般在頁面初始化時去掉文字初始化樣式以及去掉標籤預設的樣式

(1)需要給指定標籤新增乙個id = 『屬性值』

(2)在style樣式中寫 # 屬性值 然後加樣式

(3)id具有唯一性乙個元素只能起乙個id值

(4)id選擇器一般使用在巨集觀模組中最大的塊當中

(1)需要給指定標籤新增乙個class = 『屬性值』

(2)在style樣式中寫 . 屬性值 然後加樣式

(3)class選擇器有多重性,乙個元素可以起多個class值

對於潛在存在的某個功能,需要游標劃入後啟用,這時使用偽類選擇器

寫法:./# +選擇器名:hover{}

當多個元素有同乙個樣式名稱時,為了區分開則新增乙個該樣式前方的元素名稱

選擇作為某元素後代的元素,使用時需要用空格隔開,每個空格結合符可以解釋為「… 在 … 找到」、「… 作為 … 的一部分」、「… 作為 … 的後代」,但是要求必須從右向左讀選擇器。

同樣是選擇作為後代的某元素,使用時用》隔開

要注意的是,子選擇器會繼承,在使用時會加入某元素的屬性

分組選擇器用逗號隔開即可,要注意的是,分組選擇器不是一種真正意義上的選擇器,而是一種選擇器的寫法,當多個物件需要定義相同的屬性、樣式時,可以使用分組選擇器,使得**變得簡潔。

向文字的第乙個字母新增乙個特殊樣式使用first-letter偽元素

root選擇器設定html文件的背景顏色

empty選擇器指定空的p元素的背景顏色

*選擇器選擇所有元素,並設定它們的背景色。

內聯寫法:在偶然間需要在某一處增加一兩個屬性的時候,可以使用此寫法

內部寫法:滿足初學者快婿書寫和檢視的過程

外部寫法:官方標配

web前端之CSS簡介

css 指層疊樣式表 cascading style sheets 樣式定義如何顯示 html 元素 樣式通常儲存在樣式表中 把樣式新增到 html 中,是為了解決內容與表現分離的問題 外部樣式表可以極大提高工作效率 外部樣式表通常儲存在 css 檔案中 多個樣式定義可層疊為一 樣式表允許以多種方式...

web前端基礎之css

w3c 值描述 none 此元素不會被顯示。block 此元素將顯示為塊級元素,此元素前後會帶有換行符。inline 預設。此元素會被顯示為內聯元素,元素前後沒有換行符。inline block 行內塊元素。區別 w3c overflow 屬性規定當內容溢位元素框時發生的事情 visible 預設值...

web前端 之 CSS盒模型

盒模型包括margin border padding content 由外向裡 盒模型包括標準模型和ie模型 如下圖所示 注意他們的高寬度包含的內容 標準模型高度和寬度指的是content的高度和寬度 ie模型高度和寬度指的是content padding border加起來的高度和寬度 標準模型 ...