CSS基本語法 和 樣式規則

一、CSS簡介
CSS(Cascading  Style  Sheet)層疊樣式表，它是用來美化頁面的一種語言，之前提到的W3C規範中的“樣式”。
作用：
1、美化界面。
2、頁面布局。
基本語法：
選擇器{
樣式規則
}
樣式規則：
屬性名1：屬性值1;
屬性名2：屬性值2;
屬性名3：屬性值3;
。。。
選擇器:是用來選擇標簽的，選出來以後給標簽加樣式。
從Hello World說起，
<p style="background-color:#FFF;color:#000;font-size:30px;">Hello World!</p>
這樣寫可以實現將原本的白底黑字Hello World! 改成樣式為 黑底白字的效果。但是這樣寫有一定的缺點：
缺點1：內容、樣式、行為三者未分離，代碼糅雜，不符合W3C規範，難以維護。
缺點2：代碼冗餘，不可複用。
二、如何引入CSS？
1）行內樣式
即上述的一般形式，由於其存在的缺點，介紹下一種樣式。
2）內嵌樣式，給p標簽加樣式，加在head標簽中
<style type="text/css">
p{
background-color:#FFF;
color:#000;
font-size:30px;
}
</style>
當本頁面的p標簽都需要相同的樣式時，這樣寫大大降低了代碼量，並讓其他編程人員一眼分辨出來CSS樣式。
3）鏈接樣式（鏈入式）
在head標簽中加入
<link href="../css/my.css" type="text/css" rel="stylesheet"/>
將CSS文件和html文件分開來放，這樣增加了代碼的重用性，但是每個瀏覽器都要單獨讀取css文件中的樣式，比較慢，如果追求速度，內嵌樣式會更好。
4）導入樣式
<style type="text/css">
@import url("路徑名");
</style>
四種樣式的優先級：
如果一個頁面中四種樣式同時存在，這四種都會對標簽起作用，但是重複樣式的屬性值，只有最後一個有效。如果內嵌樣式和導入樣式放在一起，則內嵌樣式起作用。
如果內嵌樣式和導入樣式分成兩個style定義，則在CSS樣式中的最後一個style起作用。
附：css中注釋的格式，沒有單行注釋，所有的注釋均是/*注釋內容*/






開發者漲薪指南


48位大咖的思考法則、工作方式、邏輯體系