CSS 介紹與講解

2021-10-12 06:49:35 字數 4177 閱讀 6207

一 什麼是css

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

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

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

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

二 為何要用css

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

這麼做的缺點是

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

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

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

css全稱層疊樣式表,是專門用來為html標籤新增樣式的。樣式指的是html標籤的顯示效果,比如換行,高度,顏色等等。層疊屬於css的三大特點之一,我們將在後續內容中介紹。在沒有css之前,我們想要修改html標籤的樣式則需要為每個html標籤單獨定義樣式屬性,如下

"utf-8"

>

<

/head>

"center"

>

"pink" size=

"5">天淨沙·秋思<

/font>

<

/h1>

"center"

>

"pink" size=

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

/font>

<

/p>

"center"

>

"pink" size=

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

/font>

<

/p>

"center"

>

"pink" size=

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

/font>

<

/p>

"center"

>

"pink" size=

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

/font>

<

/p>

<

/body>

<

/html>

這麼做的缺點是

#1、記憶困難:需要記憶每個標籤的所有樣式相關屬性,如果標籤沒有某個樣式相關的屬性,那麼設定了也沒有效果

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

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

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

"utf-8"

>

h1,p

<

/style>

<

/head>

/h1>

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

/p>

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

/p>

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

/p>

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

/p>

<

/body>

<

/html>

css語法

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

css語法可以分為兩部分:

#1、選擇器

#2、宣告

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

行內式

#1、行內式

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

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

>我是乙個非常了不起的人<

/p>

內嵌式:

#2、嵌入式

嵌入式是將css樣式集中寫在網頁

<

/head>標籤內的的

<

/style>標籤對中。格式如下:

"utf-8"

>

p <

/style>

<

/head>

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

/p>

<

/body>

<

/html>

匯入式與連線式必需要有css檔案

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

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

p

匯入式

#3、匯入式

"utf-8"

>

/*形式一:*//

*@import

"css/mystyle.css";*

//*形式二:*

/ @import url(

"css/mystyle.css");

<

/style>

<

/head>

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

/p>

<

/body>

<

/html>

連線式(推薦使用的方式)"utf-8"

>

"stylesheet" href=

"css/mystyle.css"

>

<

/head>

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

/p>

<

/body>

<

/html>

匯入式與連線式的區別:

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

1、>標籤屬於xhtml,@import是屬於css2.

1特有的,對於不相容css2.

1的瀏覽器來說就是無效的

2、匯入式的缺點:

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

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

css連線樣式的注意點:

#!!!注意點!!!

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

type

="text/css"代表文字型別的css

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

="text/css"

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

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

能省略就行了

行內式是最大的,其他的嵌入式或者是匯入式和外鏈式的優先順序,是看位置來決定的,會有覆蓋效果,好比我們在超市拿東西,最先拿到的那個東西我們要把他放在最下面,最後拿到的東西肯定會把最先拿到的那個東西給覆蓋了。所以我們最後看到的東西就是最後放上去的東西。

/

*這是注釋內容*

/

CSS動畫講解

css3 2d 轉換 internet explorer 10,firefox,和 opera支援transform 屬性.chrome 和 safari 要求字首 webkit 版本.注意 internet explorer 9 要求字首 ms 版本.語法 div 屬性 內容 translate ...

BuChain 介紹 視屏講解

本模組主要講解buchain的基本架構 功能特性以及獨特優勢。1.buchain 介紹 本模組主要講解buchain的系統機制,其中包括了共識原理和獎勵機制。1.共識和獎勵 本模組主要講解buchain中用到的演算法 dpos bft 演算法的基本特性,以及選擇該演算法的原因。1.共識演算法一 2....

CSS工程化簡單介紹 PostCSS介紹與外掛程式使用

css工程化在不同公司有不同做法,主要關注四個方面 組織 的組織,怎麼劃分模組,怎麼更方便合作 優化 怎樣寫更好,團隊合作中為什麼要這麼做 構建 的壓縮 上線等等 維護css postcss解析轉化 css postcss解析轉化階段可以做的事 模組化,加字首,相容性等等 postcss本身只有解析...