初識css與css選擇器

2021-09-11 22:26:16 字數 1199 閱讀 2851

初識css

• css的全稱為cascading style sheet 層疊樣式表,它的主要作用是為我們的html標籤新增各種各樣的樣式和修飾效果。

• 這裡我總結的css屬於css2.0的知識點,css3.0的知識我打算在後面的文章裡面總結。

• 其實html+css部分的知識點總共站前端的知識總量的1%-2%,但是卻佔了20%-30%的重要度,所以我們一定不能輕視html和css。(這是針對最近網上有很多人學習前端忽視html和css說的…)

首先我們要介紹一下,html頁面如何引入我們的css樣式

css的引入方式一共有4種:

1.行間樣式 直接在html 的標籤裡面寫style屬性 前面兩篇裡面的更改標籤的樣式都是用的這一種方式

2.頁面級css 在head標籤裡面新增乙個style標籤

這裡的style標籤的type要不不寫,不然就要寫正確,只要書寫錯誤,這個樣式就不會生效。

3.外部css檔案 <—我們選擇這種方式

我們在外面建立乙個.css字尾的檔案,然後在html裡面引入這個外部的css檔案即可。

在head標籤裡面加上乙個link標籤。

• link標籤裡面的href屬性上寫我們建立的css檔案的位址,最好用相對位址的形式。

我們為什麼要選擇這種載入方式?

因為link載入不會阻塞html的載入,html和css屬於非同步載入

4.import方式引入(已經棄用)

在head標籤裡面寫乙個style標籤,在第一行寫上@import url();url裡面寫上css檔案的位址,可以加引號也可以不加引號。

這種引入方式有幾種缺點導致它現在被廢棄使用:

1.必須寫在第一行,若有多個則一起寫在最前面。

2.ie6的環境下,只能使用最多31次,這個數字據說是阿里的開發人員一點一點測試出來的。

3.程式讀到import的時候,會忽略掉import,等到html裡面的所有內容包括在內的所有資源全都載入完之後才載入import的css檔案,也就是說,import引入的css檔案和html的載入是同步進行的。

• 這裡有一點不得不說明的是,link標籤引入和style標籤修改樣式二者之間並沒有什麼優先順序,誰寫在前面誰就先執行,寫在後面的css檔案會覆蓋掉前面的css檔案。有時候會因為網速問題,link寫在上面,但是link還沒有載入進來,所以先執行了後面的style,這種問題是網速導致的,並不是二者本身擁有優先順序的問題。

css初識和css選擇器

一.css是什麼 css cascading style sheet 定義如何顯示html元素,給html設定樣式,顯得更為美觀.二.css的引入方式 1.行內引入 在標籤中新增乙個style是屬性,屬性值就是設定的樣式 2.內接引入 在head標籤中新增乙個style標籤,在標籤內寫要設定的樣式 ...

初識CSS 類選擇器

物以類聚人以群分,網頁中的元素也是一樣的 在頁面中總有很多元素擁有一模一樣的外觀,比如 一樣的大小,同樣的顏色 那麼我們如果繼續使用id選擇器乙個乙個去設定樣式就會很麻煩 這個時候我們可以選擇類選擇器來寫樣式 如果想給兩個h1標籤同樣適用於一種樣式的話,我們用類選擇,給兩個h1標籤新增class r...

初識CSS,基礎選擇器

css全稱 cascading style sheet 層疊樣式表 html 規定網頁上有什麼內容。css 規定網頁上這些內容的樣式。使用 html寫樣式的缺點 1.比較臃腫。2.可讀性比較差。3.不便於維護。4.對搜尋引擎不友好,搜尋引擎更關心內容 使用 css寫樣式的優點 1.比較簡潔 2.可讀...