1. 程式人生 > 實用技巧 >CSS介紹

CSS介紹

一 什麼是CSS

CSS全稱Cascading Style Sheet層疊樣式表,是專用用來為HTML標籤新增樣式的。

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

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

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

二 為何要用CSS

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

View Code

這麼做的缺點是

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

#2、程式碼耦合度高:HTML語義與樣式耦合到一起

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

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

View Code

三 如何使用CSS

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

CSS語法可以分為兩部分:
#1、選擇器
#2、宣告
宣告由屬性和值組成,多個宣告之間用分號分隔,如下圖

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

#1、內聯式
<p style="color: red;font-size: 50px;text-align: center">Egon是一個非常了不起的人</p>

#2、嵌入式
<head>
    <style>
        p {
            color: red;
            font-size: 50px;
            text-align: center
        }
    </style>
</head>

#3、匯入式
<head>
    <style>
        /*形式一:*/
        /*@import "css/mystyle.css";*/
        /*形式二:*/
        @import url("css/mystyle.css");
    </style>
</head>

#4、外聯式(企業開發中使用這種方式)
<head>
    <link rel="stylesheet" href="css/mystyle.css">
</head>

詳細解釋

3、css註釋

/*這是註釋*/