css全稱cascading style sheet層疊樣式表,是專用用來為html標籤新增樣式的。
樣式指的是html標籤的顯示效果,比如換行、寬高、顏色等等
層疊屬於css的三大特性之一,我們將在後續內容中介紹
表指的是我們可以將樣式統一收集起來寫在乙個地方或者乙個css檔案裡
在沒有css之前,我們想要修改html標籤的樣式則需要為每個html標籤單獨定義樣式屬性,如下
doctype htmlview code>
<
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
>
這麼做的缺點是
#於是css應運而生,很好地解決了以上三個問題#2、**耦合度高:html語義與樣式耦合到一起
#3、擴充套件性差:當某一類樣式需要修改時,我們需要找到所有設定了該樣式標籤進行修改
doctype html1、如何使用css之css的語法>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
style
>
h1,p
style
>
head
>
<
body
>
<
h1>天淨沙·秋思
h1>
<
p>錦瑟無端五十弦,一弦一柱思華年。
p>
<
p>莊生曉夢迷蝴蝶,望帝春心託杜鵑。
p>
<
p>滄海月明珠有淚,藍田日暖玉生煙。
p>
<
p>此情可待成追憶,只是當時已惘然。
p>
body
>
html
>
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...