css（cascading style sheets,層疊樣式表），作用是美化html網頁。
/*注釋*/ 注釋語法
2.1.1、樣式表分類
1、內聯樣式表
和html聯合顯示，控制精確，但是可重用性差，冗餘多。
例：內聯樣式表
2、內嵌樣式表
作為乙個獨立區域內嵌在網頁裡，必須寫在head標籤裡邊。
3、外部樣式表
新建乙個css檔案，用來放樣式表。如果要在html檔案中呼叫樣式表，需要在html檔案中點右鍵→css樣式→附加樣式表。一般用link連線方式。
有些標籤有些預設的邊距，一般寫樣式表**的時候都會先去除(也可以設定其他樣式)，如下：
2.1.2、選擇器
1、標籤選擇器。用標籤名做選擇器。
2、class選擇器。都是「.」開頭。
3、id選擇器。以「#」開頭
4、復合選擇器。
1）、用「，」隔開，表示並列。
2）、用空格隔開，表示後代。
3）、篩選「.」。
2.2.1、背景與前景
/*背景色，樣式表優先順序高*/
background-image:url(路徑); /*設定背景（預設）*/
background-attachment:fixed; /*背景是固定的，不隨字型滾動*/
background-attachment:scroll; /*背景隨字型滾動*/
background-repeat:no-repeat; /*no-repeat,不平鋪；repeat,平鋪；repeat-x,橫向平鋪；repeat-y,縱向平鋪*/
background-position:center; /*背景圖居中，設定背景圖位置時，repeat必須為「no-repreat」*/
background-position:right top; /*背景圖放到右上角（方位可以自己更改）*/
background-position:left 100px top 200px; /*離左邊100畫素，離上邊200畫素（可以設為負值）*/
字型font-family:"新宋體"; /*字型。常用微軟雅黑、宋體。*/
font-size:12px; /*字型大小。常用畫素12px、14px、18px。還可以用「em」，「2.5em」即：預設字型的2.5倍。還可以用百分數*/
font-weight:bold; /*bold是加粗，normal是正常*/
font-style:italic; /*傾斜，normal是不傾斜*/
color:#03c; /*顏色*/
text-decoration:underline; /*下劃線，overline是上劃線，line-through是刪除線,none是去掉下劃線*/
text-align:center; /*（水平對齊）居中對齊，left是左對齊，right是右對齊*/
vertical-align:middle; /*（垂直對齊）居中對齊，top是頂部對齊，bottom是底部對齊。一般設定行高後使用。*/
text-indent:28px; /*首行縮排量*/
line-height:24px; /*行高。一般為1.5~2倍字型大小。*/
display:none; /*none，不顯示；inline-block,顯示為塊，不自動換行，寬高可設；block，顯示為塊，自動換行；inline，效果同span標籤，不自動換行，寬高不可設。*/
visibility:hidden; /*可視性。hidden，隱藏但是佔空間；visible，顯示。*/
2.2.2、邊界和邊框
border（**邊框、樣式等）、margin（表外間距）、padding（內容與單元格間距）
border:5px solid blue; /*四邊框：5畫素寬、實線、藍色（相當於以下三行）*/
border-width:5px;
border-style:solid;
border-color:blue;
border-top:5px solid blue; /*上邊框：5畫素寬、實線、藍色（分寫同上）*/
border-bottom:5px solid blue; /*下邊框：5畫素寬、實線、藍色（分寫同上）*/
border-left:5px solid blue; /*左邊框：5畫素寬、實線、藍色（分寫同上）*/
border-right:5px solid blue; /*右邊框：5畫素寬、實線、藍色（分寫同上）*/
margin:10px; /*四邊外邊框寬度為10畫素。auto，居中。*/
margin-top:10px; /*上邊外邊框寬度為10畫素；其他三邊邊框類似*/
margin:20px 0px 20px 0px; /*上-右-下-左，四邊外邊框順時針順序*/
padding:10px; /*內容與邊框的四邊間距為10畫素*/
padding-top:10px; /*內容與邊框的上間距為10畫素；其他三邊間距類似*/
padding:20px 0px 20px 0px; /*上-右-下-左，內容與邊框的四邊間距順時針順序*/
2.2.3、列表與方塊
width、height、（top、bottom、left、right）只有在絕對座標情況下才有用
list-style:none; /*取消序號*/
list-style:circle; /*序號變為圓圈，樣式相當於無序*/
list-style-position:outside; /*序號在內容外*/
list-style-position:inside; /*序號跟內容在一起*/
2.2.4、格式與布局
1、position：fixed
鎖定位置（相對於瀏覽器的位置），例如有些**的右下角彈窗例：a
顯示如下
2、position：absolute
1）、外層沒有position:absolute（或relative）;，那麼div相對於瀏覽器定位，如下圖中b（距離瀏覽器的右邊框50畫素，距離瀏覽器的下邊框20畫素）。
2）、外層有position:absolute（或relative）;，那麼div相對於外層邊框定位，如下圖中bb（距離d的右邊框50畫素，距離d的下邊框20畫素）。
**：cbd
bb3、position：relative
相對於預設位置的移動。如下圖，a在用relative移動前的位置，aa為用relative移動後的位置，aa距原位置上部間距50畫素，距原位置左邊距20畫素。
**：a
aa顯示如下
4、分層（z-index）
在z軸方向分層，可以理解為分成一摞紙，層數越高越靠上。
在上面relative的示例中，我們看到aa蓋住了a，這是因為後寫**的會蓋住前面的，那麼在不改變**順序的情況下如何讓a蓋住aa，如下：aaa
顯示如下
5、float：left，right
overflow:hidden; //超出部分隱藏；scroll,顯示出滾動條；
截斷流附：overflow:hidden; /*超出範圍時隱藏；scroll，超出範圍時出滾動條。*/
cursor:pointer 滑鼠指到上面時的形狀。
半透明效果
透明區域
//樣式表中**：
.box
opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)
總結 關於CSS樣式表的基礎知識
寫在前面 大三了，人老了，呆在學校的時間也不長了，暑假要開始走進社會的大熔爐磨練自己了。曾經的讀書方式是把知識點記錄在紙上，看著用過的本子一天天的厚起來心裡就會有一種莫名的興奮，可現在馬上就要離開學校了，又不能帶很多東西，古人有云 出門千里不帶書 所以我就把平時積累的一些東西再次整理一下，做乙個總結...
總結 關於CSS樣式表的基礎知識
一 使用css樣式控制頁面的表現 行內樣式 內嵌式鏈結式 匯入樣式 二 css選擇器 標記選擇器 如 li選擇器，用於宣告頁面中所有標記的樣式風格 類別選擇器 class error 注意 class類別選擇器的另一種更為直觀的使用是直接在標記宣告後按類別名稱來區別該標記。如 h3.first cl...
CSS樣式表基礎知識 樣式表的分類及選擇器
一 css基本概念 css cascading style sheet，疊層樣式表 作用是美化html網頁。注釋區域 此為注釋語法 二 樣式表的分類 1 內聯樣式表 和html聯合顯示，控制精確，但是可重用性差，冗餘多 例 內聯樣式表 以上就是乙個簡單的內聯樣式表，用在中的標籤中，相當於style附...