前端入門教程 五 CSS樣式初見

2021-09-20 07:52:29 字數 3718 閱讀 1823

css全稱cascading style sheet層疊樣式表,是專用用來為html標籤新增樣式的。

樣式指的是html標籤的顯示效果,比如換行、寬高、顏色等等

層疊屬於css的三大特性之一,我們將在後續內容中介紹

指的是我們可以將樣式統一收集起來寫在乙個地方或者乙個css檔案裡

在沒有css之前,我們想要修改html標籤的樣式則需要為每個html標籤單獨定義樣式屬性,如下

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

head

>

<

body

>

<

h1 align

="center"

>

<

font

color

="pink"

size

="5"

>天淨沙·秋思

font

>

h1>

<

p align

="center"

>

<

font

color

="pink"

size

="5"

>錦瑟無端五十弦,一弦一柱思華年。

font

>

p>

<

p align

="center"

>

<

font

color

="pink"

size

="5"

>莊生曉夢迷蝴蝶,望帝春心託杜鵑。

font

>

p>

<

p align

="center"

>

<

font

color

="pink"

size

="5"

>滄海月明珠有淚,藍田日暖玉生煙。

font

>

p>

<

p align

="center"

>

<

font

color

="pink"

size

="5"

>此情可待成追憶,只是當時已惘然。

font

>

p>

body

>

html

>

view code

這麼做的缺點是

#

#2、**耦合度高:html語義與樣式耦合到一起

#3、擴充套件性差:當某一類樣式需要修改時,我們需要找到所有設定了該樣式標籤進行修改

於是css應運而生,很好地解決了以上三個問題

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

style

>

h1,p

style

>

head

>

<

body

>

<

h1>天淨沙·秋思

h1>

<

p>錦瑟無端五十弦,一弦一柱思華年。

p>

<

p>莊生曉夢迷蝴蝶,望帝春心託杜鵑。

p>

<

p>滄海月明珠有淚,藍田日暖玉生煙。

p>

<

p>此情可待成追憶,只是當時已惘然。

p>

body

>

html

>

1、如何使用css之css的語法

css語法可以分為兩部分:

#1、選擇器

#2、宣告

宣告由屬性和值組成,多個宣告之間用分號分隔,如下圖

2、如何使用css之css的四種引入方式

#

1、行內式

"color: red;font-size: 50px;text-align: center

">egon是乙個非常了不起的人

#2、嵌入式#

3、外部樣式表之匯入式#

4、外部樣式表之鏈結式(企業開發中使用這種方式)

#

1、行內式

行內式是在標籤的style屬性中設定css樣式。這種方式沒有體現出css的優勢,不推薦使用。

"color: red;font-size: 50px;text-align: center

">egon是乙個非常了不起的人

#2、嵌入式

嵌入式是將css樣式集中寫在網頁標籤內的的標籤對中。格式如下:

egon是乙個非常了不起的人

#新建外部樣式表,然後使用匯入式和鏈結式引入

首先在與html檔案同級目錄下有乙個css資料夾,該資料夾下新建乙個外部樣式表mystyle.css,內容為p #

3、匯入式

egon是乙個非常了不起的人

#egon是乙個非常了不起的人

#匯入式與鏈結式的區別:

1、標籤屬於xhtml,@import是屬於css2.1特有的,對於不相容css2.1的瀏覽器來說就是無效的

2、匯入式的缺點:

匯入式會在整個網頁裝載完後再裝載css檔案,因此這就導致了乙個問題,如果網頁比較大則會兒出現先顯示無樣式的頁面,閃爍一下之後,再出現網頁的樣式。這是匯入式固有的乙個缺陷,使用者體驗差。

使用鏈結式時與匯入式不同的是它會在網頁檔案主體裝載前裝載css檔案,因此顯示出來的網頁從一開始就是帶樣式的效果的,它不會象匯入式那樣先顯示無樣式的網頁,然後再顯示有樣式的網頁,這是鏈結式的優點。

#!!!注意點!!!

1、style標籤必須放到head內 ,type="

text/css

"代表文字型別的css

2、type屬性其實可以不用寫,預設就是type="

text/css

"3、設定樣式時必須按照固定的格式來設定,key:value;

其中;不能省略,最後乙個屬性其實可以省略,但我們可以簡單地統一記成不

能省略就行了

詳細解釋

詳細了解

3、css注釋

/*

這是注釋

*/

文章出處:

(創意共享4.0許可證)

CSS入門教程

css是 cascading style sheets 的簡稱,中文翻譯為 串接樣式表 也有人翻譯為 樣式表 css用以作為網頁的排版和風格設計,在web標準建站中,對css的熟悉和使用是相當重要的乙個內容。css的作用是彌補html的不足,讓網頁的設計更為靈活。這個文章只是為您介紹css的基礎應用...

CSS入門教程

css是 cascading style sheets 的簡稱,中文翻譯為 串接樣式表 也有人翻譯為 樣式表 css用以作為網頁的排版和風格設計,在web標準建站中,對css的熟悉和使用是相當重要的乙個內容。css的作用是彌補html的不足,讓網頁的設計更為靈活。這個文章只是為您介紹css的基礎應用...

CSS入門教程

一說學程式設計,大家都下意識覺得要 吃苦 熬夜 哪有那麼複雜,一定是你看錯了教程.這是我剛錄的教程,挑乙個陽光的午後,關掉手機,用6個小時,看看十八哥如何把乙個公司的保安教會html的.001.了解html 002.開發環境準備 003.認識html的組成結構 004.網頁布局之切切豆腐 005.c...