前端 | HTML入門基礎知識-css層疊樣式表

<code>拿什麼拯救你,我的HTML。
                                                                                                                   奧斯特洛夫斯基-菜雞/<code>

CSS-網頁的美容師

html 標籤 屬性使用比較混亂 比如如下:

<code>

<

font

color

=

"red"

size

=

"+3"

>

此文字可以變為紅色

font

>

/<code>

要想改動文字為紅色,你需要添加若干font 這些沒有意義的標籤,是任何地方!!! 比如要給一個 h1 標題添加紅色,同樣添加 font標籤 。 這樣對於頁面結構完全沒有用處。


前端 | HTML入門基礎知識-css層疊樣式表

CSS的出現,拯救了混亂的HTML,當讓更加拯救了我們web開發者。 讓我們的網頁更加豐富多彩。

CSS的最大貢獻就是: 讓 HTML 從樣式中解脫苦海, 實現了 HTML 專注去做 結構呈現。 而樣式交給 CSS 後,你完全可以放心的早點洗洗睡了!

而且。。。。。 CSS 做的很出色,如果JavaScript是網頁的魔法師,那麼CSS它是我們網頁的美容師,不信,你看:


前端 | HTML入門基礎知識-css層疊樣式表

ps: 你和 Angelababy 只差了一個妝容的距離。。。

再來個更直觀的認識吧:


前端 | HTML入門基礎知識-css層疊樣式表


前端 | HTML入門基礎知識-css層疊樣式表

這夠明顯吧。。咳咳。。好了

總結 :沒有不好看的網頁,只有不會CSS的前端

網頁添加 CSS和不添加CSS 的對比:

帶有css的頁面

前端 | HTML入門基礎知識-css層疊樣式表

沒有 css 的網頁


前端 | HTML入門基礎知識-css層疊樣式表

CSS簡介

<code>1

.CSS

(

Cascading

Style

Sheets

)通常稱為

CSS

樣式表或層疊樣式表(級聯樣式表),主要用於設置

HTML

頁面中的文本內容(字體、大小、對齊方式等)、圖片的外形(寬高、邊框樣式、邊距等)以及版面的佈局等外觀顯示樣式。 2

.CSS

HTML

為基礎,提供了豐富的功能,如字體、顏色、背景的控制及整體排版等,而且還可以針對不同的瀏覽器設置不同的樣式。/<code>

CSS樣式規則

使用HTML時,需要遵從一定的規範。CSS亦如此,要想熟練地使用CSS對網頁進行修飾,首先需要了解CSS樣式規則,具體格式如下:

<code>選擇符{
    屬性 : 屬性值;
    屬性 : 屬性值;
}/<code>


前端 | HTML入門基礎知識-css層疊樣式表

選擇符表示要定義樣式的對象,可以是元素本身,也可以是一類元素或者制定名稱的元素. 屬性:屬性是指定選擇符所具有的屬性,它是css的核心,css2共有150多個屬性 屬性值:屬性值包括法定屬性值及常見的數值加單位,如25px,或顏色值等。

說明:

1)每個CSS樣式由兩部分組成,即選擇符和聲明,聲明又分為屬性和屬性值;

2)屬性必須放在花括號中,屬性與屬性值用冒號連接。

3)每條聲明用" ; "結束。

4)當一個屬性有多個屬性值的時候,屬性值與屬性值不分先後順序

5)在書寫樣式過程中,空格、換行等操作不影響屬性顯示。

上述是CSS的基本介紹,歡迎隨時與我交流探討。


分享到:


相關文章: