前端 CSS基礎知識

css文件

目錄css基礎選擇器

id選擇器

萬用字元選擇器

css設定字型

css文字屬性

css引入方式

css復合選擇器

css元素顯示模式

css的背景

背景影象固定

復合寫法

css3背景顏色半透明效果

css三大特性

優先順序層疊樣式表(cascading style sheets，縮寫為css），是一種樣式表語言，用來描述 html 或 xml（包括如 svg、mathml、xhtml 之類的 xml 分支語言）文件的呈現。css 描述了在螢幕、紙質、音訊等其它**上的元素應該如何被渲染的問題。

css主要用於html頁面中的：

html負責結構呈現，css負責樣式。

css規則由兩個主要部分構成：選擇器和一條或多條宣告。

test css. hello.

css選擇器可以分為：

復合選擇器

把某一類標籤全部選擇出來，參考上面的**。

用來選擇乙個或多個標籤，用.表示。

test css. hello.

注意：

用來選擇唯一的有特定id的html元素，用#表示。

hello

css使用*表示選擇頁面中的所有元素，包括,等。

例如清除所有元素標籤的內外邊距：

css font屬性可以用來定義字型、大小、粗細和文字樣式(斜體)等。

屬性font-family定義字型。注意：

屬性font-size定義字型大小。注意：

你好嗎你好嗎你好嗎 qweqwe

效果如下：

你好嗎你好嗎你好嗎

qweqwe

這是之前一直在用的方式，將css**單獨放到乙個標籤中，寫在html檔案內部。

新建乙個.css，把所有css**放進去(不需要標籤)

在html頁面中使用標籤引入.css檔案。

復合選擇器就是由2個或以上的基礎選擇器，通過不同的方式組合而成的。

ol li

ol a

ol的li ol的li test ol的li

.n**>a

son grandson

此時只有son沒有下劃線且為紅色。

選擇多組標籤，定義相同的樣式。

ul>li, 
div a

son grandson

注意要按順序寫：

/* 未訪問過的鏈結 */ a:link /* 已經訪問過的鏈結 */ a:visited /* 滑鼠懸停的鏈結 */ a:hover /* 滑鼠正在按下沒有鬆開的鏈結 */

a:active

選擇獲得焦點(游標)的表單元素，一般來說，標籤才能獲取游標。

input:focus

html元素可以分為塊元素和行內元素。

是最典型的塊元素，常見的還有：預設的background-color值是transparent，即透明的。

div

background-image的特點是比標籤更方便控制位置，所以一般用於：

div

背景預設是平鋪的，可以設定background-repeat的值為no-repeat,repeat,repeat-x,repeat-y，來使得背景不平鋪、平鋪、僅在水平方向平鋪、僅在垂直方向平鋪。

div

引數表示：x座標和y座標，可以使用方位名詞或者精確單位。

引數值說明

方位名詞

垂直方向有top

精確單位

浮點數字+單位標誌符或百分比

方位名詞

如果是方位名詞，則

精確單位

如果是精確單位，則

混合單位

如果是混合單位，則一定是第乙個是x軸，第二個是y軸，例如background-position: center 10px;指水平居中，y軸方向偏移10畫素。

設定background-attachment的值為scroll或fixed來使背景影象隨著頁面滾動而滾動或固定。

background-attachment: fixed;

背景的復合寫法沒有規定順序，一般來說按照如下順序來寫：

.logo

只對背景顏色有效。

background: rgba(1, 1, 1, 0.3)

最後乙個引數是alpha透明度，1表示不透明。

當相同選擇器設定同乙個屬性時，會產生衝突，靠後的樣式會覆蓋其他樣式。例如下面的**，test會顯示粉色。

test

div

子標籤會繼承父標籤的某些樣式：

例如之前在標籤中設定字型樣式，如果子標籤沒有設定相關樣式，則直接繼承的樣式。

i am p i am div

body div

li

此時標籤、標籤、標籤都繼承了標籤的行高，而標籤行高為14px*1.5=21px，標籤行高為27px，標籤行高為30px。

當乙個元素被多個選擇器選擇，會產生優先順序。

選擇器權重

繼承或*

(0, 0, 0, 0)

元素選擇器

(0, 0, 0, 1)

類選擇器、偽類選擇器

(0, 0, 1, 0)

id選擇器

(0, 1, 0, 0)

行內樣式style=""

(1, 0, 0, 0)

!important重要的

無窮大

i am div i am p i am p i am p i am p i am p

body p .test #demo3

#demo, #demo2, #demo3

標籤顏色從上到下依次為：紅、藍、黃、綠、黑、粉。

優先順序的4位數字不會產生進製，可以理解為類選擇器永遠大於元素選擇器

從左往右判斷優先順序，如果當前位數值相同，則繼續判斷下一位

不管父元素有多高的權重，子元素繼承的權重為(0, 0, 0, 0)

由於瀏覽器有一些預設樣式，例如標籤藍色、下劃線的樣式，標籤字型和加粗的樣式，此時由於繼承的權重為(0, 0, 0, 0)，是無法覆蓋預設樣式的，必須是權重(0, 0, 0, 1)以上的選擇器

復合選擇器會產生權重的疊加，例如：

前端 CSS基礎知識

前端知識體系 CSS相關 CSS基礎知識強化

Web前端基礎知識整理 CSS篇

前端 02CSS基礎知識1

前端 CSS基礎知識

前端知識體系 CSS相關 CSS基礎知識強化

Web前端基礎知識整理 CSS篇

前端 02CSS基礎知識1

相關推薦