CSS基礎（一）：開篇

時間 2019-12-10

標籤 css 基礎開篇欄目 CSS 简体版

原文原文鏈接

背景php

HTML是一種超文本標記語言，用來定義文檔的結構和內容，例如標題、段落和列表等等，而文檔內容如何渲染、如何展現，這就須要樣式來修飾了。CSS正是能夠與HTML很好地結合。若是將HTML比做水，那麼CSS就是水杯，用怎樣形狀的水杯來裝水，水就顯示不同的形狀。css

什麼是CSS？html

CSS 指層疊樣式表 (Cascading Style Sheets)，定義如何顯示 HTML 元素，是爲了解決文檔內容與表現分離的問題，一般是統一存儲在樣式表中，使用外部樣式表能夠方便管理，提升工做的效率，具備繼承性和層疊性的特色。瀏覽器

CSS繼承性緩存

它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。可是，並非全部的屬性都會自動傳給它的後代，例如邊框Border，邊距Margin，補白Padding等等。網絡

例如定義了body的樣式工具

<!DOCTYPE HTML>
<html>
<head>
<title>開篇一 | CSS繼承</title>
</head>
<style type="text/css">
    body{height:100px;color:red;border: 1px solid #CCC;}
</style>
<body>
<p>
    字體顏色顯示爲紅色，可是沒有邊框
</p>
</body>
</html>

能夠獲得的效果是body有1px的灰色實線邊框，p標籤裏面的字體爲紅色，可是沒有邊框，因此border屬性沒有被繼承。性能

CSS層疊性學習

CSS樣式在針對同一元素配置同一屬性時，依據層疊規則（權重）來處理衝突，選擇應用權重高的CSS選擇器所指定的屬性，通常也被描述爲權重高的覆蓋權重低的，所以也稱做層疊。字體

例如定義了樣式

<!DOCTYPE HTML>
<html>
<head>
<title>開篇一 | CSS層疊</title>
</head>
<style type="text/css">
    body{height:100px;border: 1px solid #CCC;}
    .main{color:red;font-size: 18px;}
    .main p{color:#000;font-weight: bold;}
</style>
<body>
<div class="main">
<p>
    字體顏色顯示爲黑色，字號爲加粗18px
</p>
</div>
</body>
</html>

能夠獲得的效果是p標籤裏面的字體爲黑色，字號爲加粗18px，.main選擇器中的color屬性被.main p中的color屬性覆蓋。

實際上由CSS的繼承性和層疊性，是能夠獲得p標籤組合的css樣式爲

p{color:#000;font-size: 18px;font-weight: bold;}

更多關於權重高低請參考

CSS代碼規範

1.使用Reset但並不是全局Reset

全局Reset不只僅由於它是緩慢和低效率的方法，並且還會致使一些沒必要要的元素也重置了外邊距和內邊距。

*{ margin:0; padding:0; }

2.良好的命名規範

ID和class的命名儘量短，並符合語義。多個單詞的拼接用 '-' 符號連接，儘可能使用小寫字母。

3.代碼縮寫

CSS代碼縮寫能夠提升你寫代碼的速度，精簡你的代碼量。

li{
    font-family:Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    line-height: 1.4em;
    padding-top:5px;
    padding-bottom:10px;
    padding-left:5px;
}

能夠縮寫成

li{
    font: 1.2em/1.4em Arial, Helvetica, sans-serif;
    padding:5px 0 10px 5px;
}

4.利用CSS繼承

若是頁面中父元素的多個子元素使用相同的樣式，那最好把他們相同的樣式定義在其父元素上，讓它們繼承這些CSS樣式。這樣你能夠很好的維護你的代碼，而且還能夠減小代碼量。那麼原本這樣的代碼：

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

就能夠簡寫成：

#container{ font-family:Georgia, serif; }

5.使用多重選擇器

你能夠合併多個CSS選擇器爲一個，若是他們有共同的樣式的話。這樣作不但代碼簡潔且可爲你節省時間和空間。如：

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

能夠合併爲

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6.適當的代碼註釋

代碼註釋可讓別人更容易讀懂你的代碼，且合理的組織代碼註釋，可以使得結構更加清晰。

7.給你的CSS代碼排序

若是代碼中的屬性都能按照字母排序，那查找修改的時候就能更加快速。

/*** 樣式屬性按字母排序 ***/
div{
    background-color:#3399cc;
    color:#666;
    font:1.2em/1.4em Arial, Helvetica, sans-serif;
    height:300px;
    margin:10px 5px;
    padding:5px 0 10px 5px;
    width:30%;
    z-index:10;
}

8.保持CSS的可讀性

書寫可讀的CSS將會使得更容易查找和修改樣式。

/*** 每一個樣式屬性寫一行 ***/
div{
    background-color:#3399cc;
    color:#666;
    font: 1.2em/1.4em Arial, Helvetica, sans-serif;
    height:300px;
    margin:10px 5px;
    padding:5px 0 10px 5px;
    width:30%;
    z-index:10;
}
 
/*** 全部的樣式屬性寫在同一行 ***/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }