CSS基础教程（企业内部培训）
這是上周為公司內部培訓的CSS資料，希望對初學者有所幫助。
CSS 是 Cascading Style Sheet 的縮寫。譯作「層疊樣式表單」。是用于(增強)控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言。
一、如何把樣式加入到你的網頁。
1、鏈接外部樣式。
<head>
<title>文檔標題</title>
<link rel=stylesheet href="http://www.dhtmlet.com/dhtmlet.css" type="text/css">
</head>
特點：格式與代碼分離。
2、定義內部樣式塊對象。
<html>
<head>
<title>文檔標題</title>
<style type="text/css">
<!–
body {font: 10px "Arial"}
h1 {font: 15px/17px "Arial"; font-weight: bold; color: maroon}
h2 {font: 13px/15px "Arial"; font-weight: bold; color: blue}
p {font: 10px/12px "Arial"; color: black}
–>
</style>
</head>
<body>
特點：頁面內部使用，方便，下載流量會適當減少。
3、內聯定義。
<p style="margin-left: 0.5in; margin-right:0.5in">這一行被增加了左右的外補丁<p>
特點：隨意、方便。
上面三種方式都可以達到我們需要的效果，主要看我們想達到什么效果，還要看個人習慣，如果想格式和代碼分離，就用第一種；如果是一個頁面內部的應用，用第二種和第三種方式都可以；第三種方式很隨意，但是有一點不足的地方，下面會講到。
二、語法
樣式表語法 (CSS Syntax)
元素 { 屬性:值 }
元素的寫法將在下面第三部分講到，屬性和值將在第四部分講到。
三、書寫方法
1、直接用標簽。
div{
font-size:12px;
}
<div>定義的樣式</div>
特點：不用定義額外的元素，直接可以寫CSS樣式。
2、#開頭的代表的是id。
#id{
font-size:12px;
}
<div id="text">定義的樣式</div>
特點：可以為單獨為某個元素定義的樣式。
3、.開頭的代表類
.text{
font-size:12px;
}
<div class="text">定義的樣式</div>
特點：可以為一個頁面里面多個應用此類的元素定義樣式。
4、連寫方式，中間加空格 (*)
div #text{
font-size:12px;
}
<div id="text">定義的樣式</div>
#text p{
font-size:12px;
}
特點：精準定位到某個元素。
<div id="text">定義的樣式<p>在p里面的樣式</p></div>/
上面四種寫法在我們平時用的都比較多，對于第四種是前三種的一種靈活的寫法。具體用哪種方式，大家可以根據自己的情況來定。
四、常用的屬性。
1、字體：font, font-size, font-family, font-weight, text-decoration, line-height
A. font是一個復合屬性。所有后面的這幾個屬性的值都可以放在font里面用。
B. font-size定義文字的大小。
C. font-family定義字體。
D. font-weight定義文字的粗細。
E. text-decoration定義文字的裝飾。
F. line-height定義行高。
2、文本：text-indent, vertical-align, text-align, word-break
A. text-indent，設置對象的縮進。
B. vertical-align，設置對象的上下對齊方式。
C. text-align，設置對象的左右對齊方式。
D. word-break，設置字體的強制換行。
3、背景：background, background-color, background-image, background-position, background-repeat
A. background定義背景的一個復合屬性。和上面的font一樣，可以把后面這幾個屬性的值都放在font里面用。
B. background-color定義的是背景的顏色。
C. background-image定義的是背景的圖片。
D. background-position定義背景的位置。
E. background-repeat定義背景的是否平鋪。
4、定位：position, z-index, top, right, bottom, left.
A. position定位方式。
B. z-index 定義層疊順序。
C. top, right, bottom 和left表示距離他父級的上邊，右邊，下邊和左邊的距離。
5、尺寸：width, height
A. width定義對象的寬度。
B. height定義對象的高度。
6、布局：clear, float, display
A. clear 設置不允許又浮動對象的邊。
B. float設置對象浮動及如何浮動。
C. display設置對象是否及如何顯示。
D. visibility 設置對象是否顯示。
7、外補丁：margin, margin-top, margin-right, margin-bottom, margin-left
A. margin定義外補丁的一個復合屬性。同上。
B. margin-top定義對象的上邊距離父級的外補丁。
C. margin-right 定義對象的右邊距離父級的外補丁。
D. margin-bottom 定義對象的下邊距離父級的外補丁。
E. margin-left 定義對象的左邊距離父級的外補丁。
8、邊框：border, border-top, border-right, border-bottom, border-left
同上（外補丁）。
9、內補丁：padding, padding-top, padding-right, padding-bottom, padding-left
同上（外補丁）。
10、列表：list-style, list-style-image, list-style-position, list-style-type
A.list-style是一個定義列表項目的復合屬性。
B. list-style-image定義列表項目的圖標。
C. list-style-type定義列表項目的標記。
11、其他：Cursor
這里只講cursor，就是定義鼠標的顯示樣式，可以用圖標。
12、偽類：:link, :visited, :hover, :active
:link定義鏈接未被點擊時候的樣式。
:visited定義鏈接點擊之后的樣式。
:hover定義鼠標移動到鏈接上的樣式。
:active定義鏈接被激活時候的樣式。
偽類只講這四個，因為這四個用的最多，而且很多人容易出錯，這里強調一個地方，書寫順序。在CSS里面寫這四個偽類的時候，就按上面的順序來寫，不要顛倒順序，否則可能達不到我們想要的效果。
13、偽對象：:first-letter
這里只講這一個偽對象，他的作用是定義對象的第一個字母的樣式。
14、聲明：!important
提升應用樣式的優先權。這個聲明在firefox和ie7上面支持，在ie6上面不支持。他的主要作用是用來調整不同瀏覽器顯示效果的差異。
五、單位
1、長度：Px
px象素，in英寸等。用得最多的是象素px。
2、顏色：rgb(RGB),#RRGGBB
Rgb(255,255,255)，#FFFFFF
3、Color name：red, blue
六、注意
1、html代碼和css代碼盡量小寫。
2、子隨父姓，就近原則。
總結
以上是生活随笔為你收集整理的CSS基础教程（企业内部培训）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Struts2.0实现的文件上传（单附件
- 下一篇： struts2 action间跳转传值