二、CSS基礎

標籤：visit   float   內容   瀏覽器   pad   color   span   idt   定義   

二、css基礎

1、css層疊樣式表

　　(1)、行內樣式表(style屬性)

　　<p style="">

　　(2)、內部內建樣式表(style元素)

　　<style type="text/ess">　　　　body {background-color #FF0000;}　　　　.boss{}　　　　#id{}　　</style>

 

(3)、外部參考樣式表(引用一個樣式表檔案)，推薦

<link rel="stylesheet" type="text/css" href="css/style.css"/ >

 

 

2、選取器ID、類、屬性

 

ID選取器:

　　#idName{}樣式唯一;

類別選取器:

　　.className{}樣式共用;

標籤選取器

　　html內建的標籤;

 

優先順序：ID>類>標籤選取器

　.name a{}   

　　　　name類下標籤進行樣式修改

　　a,p{}

　　　　a、p兩種標籤樣式同時修改

 

3、常見的樣式屬性

　　width height border

　　font color

　　background

 

4、div+css頁面配置

a、外邊距屬性:margin，盒子與盒子之間的間距,比如盒子有個自己定義的勢力範圍

　　magin: 上 右 下 左:4個值

　　magin: 上 左/右 下:3個值

　　magin: 上/下 左/右:2個值

　　magin: 上/下/左/右:1個值

　　div左右置中 margin:10px auto

b、內間距屬性:padding，標籤內容(月餅)在盒子內部的間距

　　使用和margin一致

c、 浮動屬性float，可以理解成在水面浮動盒子，會相互佔據空間

　　文檔流預設為從上往下

　　以左邊開始文檔流預設為從上往下，以左邊開始(一般會用div容器進行布局)

　　float

d、清除浮動屬性

　　清除跟隨浮動的影響

　　clear

 

5、CSS標籤中的連結：

　　a:link {color:#FF0000;} /* 未被訪問的連結 */

　　a:visited {color:#00FF00;} /* 已被訪問的連結 */

　　a:hover {color:#FF00FF;} /* 滑鼠指標移動到連結上 */

　　a:active {color:#0000FF;} /* 正在被點擊的連結 */

 

6、初始化瀏覽器樣式

　　html,body{magin:0;padding:0}

二、CSS基礎