css的定義方法是：
選取器 { 屬性:值; 屬性:值; 屬性:值;}
選取器是將樣式和頁面元素關聯起來的名稱，屬性是希望設定的樣式屬性每個屬性有一個或多個值。程式碼範例：
p{ width:100px; height:100px; color:red }
1、外聯式：通過link標籤，連結到外部樣式表到頁面中。
<link rel="stylesheet" type="text/css" href="css/main.css">
2、嵌入式：通過style標籤，在網頁上建立嵌入的樣式表。
<style type="text/css"> p{ width:100px; height:100px; color:red } ......</style>
3、內聯式：通過標籤的style屬性，在標籤上直接寫樣式。
<p style="width:100px; height:100px; color:red ">......</p>
常用的應用文本的css樣式：
color 設定文字的顏色，如： color:red;
font-size 設定文字的大小，如：font-size:12px;
font-family 設定文字的字型，如：font-family:'微軟雅黑';
font-style 設定字型是否傾斜，如：font-style:'normal'; 設定不傾斜，font-style:'italic';設定文字傾斜
font-weight 設定文字是否加粗，如：font-weight:bold; 設定加粗 font-weight:normal 設定不加粗
font 同時設定文字的幾個屬性，寫的順序有相容問題，建議按照如下順序寫： font：是否加粗 字型大小/行高 字型；如： font:normal 12px/36px '微軟雅黑';
line-height 設定文字的行高，如：line-height:24px;
text-decoration 設定文字的底線，如：text-decoration:none; 將文字底線去掉
text-indent 設定文字首行縮排，如：text-indent:24px; 設定文字首行縮排24px
text-align 設定文字水平對齊，如text-align:center 設定文字水平置中
css顏色值主要有三種表示方法：
1、顏色名表示，比如：red 紅色，gold 金色
2、rgb表示，比如：rgb(255,0,0)表示紅色
3、16進位數值表示，比如：#ff0000 表示紅色，這種可以簡寫成 #f00
常用的選取器有如下幾種：
標籤選取器，此種選取器影響範圍大，建議盡量應用在層級選取器中。
舉例：
*{margin:0;padding:0}div{color:red} <div>....</div> <!-- 對應以上兩條樣式 --><div class="box">....</div> <!-- 對應以上兩條樣式 -->
通過id名來選擇元素，元素的id名稱不能重複，所以一個樣式設定項只能對應於頁面上一個元素，不能複用，id名一般給程式使用，所以不推薦使用id作為選取器。
舉例：
#box{color:red} <p id="box">....</p> <!-- 對應以上一條樣式，其它元素不允許應用此樣式 -->
通過類名來選擇元素，一個類可應用於多個元素，一個元素上也可以使用多個類，應用靈活，可複用，是css中應用最多的一種選取器。
舉例：
.red{color:red}.big{font-size:20px}.mt10{margin-top:10px} <div class="red">....</div><h1 class="red big mt10">....</h1><p class="red mt10">....</p>
主要應用在選擇父元素下的子項目，或者子項目下面的子項目，可與標籤元素結合使用，減少命名，同時也可以通過層級，防止命名衝突。
舉例：
.box span{color:red}.box .red{color:pink}.red{color:red}<div class="box"> <span>....</span> <a href="#" class="red">....</a></div><h3 class="red">....</h3>
多個選取器，如果有同樣的樣式設定，可以使用組選取器。
舉例：
.box1,.box2,.box3{width:100px;height:100px}.box1{background:red}.box2{background:pink}.box2{background:gold}<div class="box1">....</div><div class="box2">....</div><div class="box3">....</div>
常用的偽類別選取器有hover，表示滑鼠懸浮在元素上時的狀態，虛擬元素選取器有before和after,它們可以通過樣式在元素中插入內容。
.box1:hover{color:red}.box2:before{content:'行首文字';}.box3:after{content:'行尾文字';}<div class="box1">....</div><div class="box2">....</div><div class="box3">....</div>
盒子模型解釋
元素在頁面中顯示成一個方塊，類似一個盒子，CSS盒子模型就是使用現實中盒子來做比喻，協助我們設定元素對應的樣式。盒子模型如下：
把元素叫做盒子，設定對應的樣式分別為：盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。
設定邊框
設定一邊的邊框，比如頂部邊框，可以按如下設定：
border-top-color:red; /* 設定頂部邊框顏色為紅色 */ border-top-width:10px; /* 設定頂部邊框粗細為10px */ border-top-style:solid; /* 設定頂部邊框的線性為實線，常用的有：solid(實線) dashed(虛線) dotted(點線); */
上面三句可以簡寫成一句：
border-top:10px solid red;
設定其它三個邊的方法和上面一樣，把上面的'top'換成'left'就是設定左邊，換成'right'就是設定右邊，換成'bottom'就是設定底邊。
四個邊如果設定一樣，可以將四個邊的設定合并成一句：
border:10px solid red;
設定內間距padding
設定盒子四邊的內間距，可設定如下：
padding-top：20px; /* 設定頂部內間距20px */ padding-left:30px; /* 設定左邊內間距30px */ padding-right:40px; /* 設定右邊內間距40px */ padding-bottom:50px; /* 設定底部內間距50px */
上面的設定可以簡寫如下：
padding：20px 40px 50px 30px; /* 四個值按照順時針方向，分別設定的是 上 右 下 左 四個方向的內邊距值。 */
padding後面還可以跟3個值，2個值和1個值，它們分別設定的項目如下：
padding：20px 40px 50px; /* 設定頂部內邊距為20px，左右內邊距為40px，底部內邊距為50px */ padding：20px 40px; /* 設定上下內邊距為20px，左右內邊距為40px*/ padding：20px; /* 設定四邊內邊距為20px */
設定外間距margin
外邊距的設定方法和padding的設定方法相同，將上面設定項中的'padding'換成'margin'就是外邊距設定方法。
盒子模型的尺寸
按照下面代碼製作頁面：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子的真實尺寸</title> <style type="text/css"> .box01{width:50px;height:50px;background-color:gold;} .box02{width:50px;height:50px;background-color:gold;border:50px solid #000} .box03{width:50px;height:50px;background-color:gold;border:50px solid #000;padding: 50px;} </style></head><body> <p class="box01">1</p> <br /> <p class="box02">2</p> <br /> <p class="box03">3</p></body></html>
頁面顯示效果如下：
通過上面的頁面得出結論：盒子的width和height設定的是盒子內容的寬和高，不是盒子本身的寬和高，盒子的真實尺寸計算公式如下：
盒子寬度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
思考題：
1.在布局中，如果我想增大內容和邊框的距離，又不想改變盒子顯示的尺寸，應該怎麼做？
課堂練習
請製作圖中所示的標題：
margin相關技巧
1、設定元素水平置中： margin:x auto;
2、margin負值讓元素位移及邊框合并
外邊距合并
外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并後的外邊距的高度等於兩個發生合并的外邊距的高度中的較大者。解決方案如下：
1、使用這種特性
2、設定一邊的外邊距，一般設定margin-top
3、將元素浮動或者定位
margin-top 塌陷
在兩個盒子嵌套時候，內部的盒子設定的margin-top會加到外邊的盒子上，導致內部的盒子margin-top設定失敗，解決方案如下：
1、外部盒子設定一個邊框
2、外部盒子設定 overflow:hidden
3、使用虛擬元素類：
.clearfix:before{ content: ''; display:table;}
當子項目的尺寸超過父元素的尺寸時，需要設定父元素顯示溢出的子項目的方式，設定的方法是通過overflow屬性來設定。
overflow的設定項：
1、visible 預設值。內容不會被修剪，會呈現在元素框之外。
2、hidden 內容會被修剪，並且其餘內容是不可見的，此屬性還有清除浮動、清除margin-top塌陷的功能。
3、scroll 內容會被修剪，但是瀏覽器會顯示捲軸以便查看其餘的內容。
4、auto 如果內容被修剪，則瀏覽器會顯示捲軸以便查看其餘的內容。
5、inherit 規定應該從父元素繼承 overflow 屬性的值。
元素就是標籤，布局中常用的有三種標籤，塊元素、內嵌元素、內聯塊元素，瞭解這三種元素的特性，才能熟練的進行頁面配置。
塊元素
塊元素，也可以稱為行元素，布局中常用的標籤如：p、p、ul、li、h1~h6、dl、dt、dd等等都是塊元素，它在布局中的行為：
支援全部的樣式
如果沒有設定寬度，預設的寬度為父級寬度100%
盒子佔據一行、即使設定了寬度
內嵌元素
內嵌元素，也可以稱為行內元素，布局中常用的標籤如：a、span、em、b、strong、i等等都是內嵌元素，它們在布局中的行為：
支援部分樣式（不支援寬、高、margin上下、padding上下）
寬高由內容決定
盒子並在一行
代碼換行，盒子之間會產生間距
子項目是內嵌元素，父元素可以用text-align屬性設定子項目水平對齊，用line-height屬性值設定垂直對齊
解決內嵌元素間隙的方法
1、去掉內嵌元素之間的換行
2、將內嵌元素的父級設定font-size為0，內嵌元素自身再設定font-size
內聯塊元素
內聯塊元素，也叫行內塊元素，是新增的元素類型，現有元素沒有歸於此類別的，img和input元素的行為類似這種元素，但是也歸類於內嵌元素，我們可以用display屬性將塊元素或者內嵌元素轉化成這種元素。它們在布局中表現的行為：
支援全部樣式
如果沒有設定寬高，寬高由內容決定
盒子並在一行
代碼換行，盒子會產生間距
子項目是內聯塊元素，父元素可以用text-align屬性設定子項目水平對齊，用line-height屬性值設定子項目垂直對齊
這三種元素，可以通過display屬性來相互轉化，不過實際開發中，塊元素用得比較多，所以我們經常把內嵌元素轉化為塊元素，少量轉化為內聯塊，而要使用內嵌元素時，直接使用內嵌元素，而不用塊元素轉化了。
display屬性
display屬性是用來設定元素的類型及隱藏的，常用的屬性有：
1、none 元素隱藏且不佔位置
2、block 元素以塊元素顯示
3、inline 元素以內嵌元素顯示
4、inline-block 元素以內聯塊元素顯示
請製作圖中所示的菜單：
文檔流
文檔流，是指盒子按照html標籤編寫的順序依次從上到下，從左至右排列，塊元素佔一行，行內元素在一行之內從左至右排列，先寫的先排列，後寫的排在後面，每個盒子都佔據自己的位置。
浮動特性
1、浮動元素有左浮動(float:left)和右浮動(float:right)兩種
2、浮動的元素會向左或向右浮動，碰到父元素邊界、浮動元素、未浮動的元素才停下來
3、相鄰浮動的塊元素可以並在一行，超出父級寬度就換行
4、浮動讓行內元素或塊元素自動轉化為行內塊元素
5、浮動元素後面沒有浮動的元素會佔據浮動元素的位置，沒有浮動的元素內的文字會避開浮動的元素，形成文字饒圖的效果
6、父元素內整體浮動的元素無法撐開父元素，需要清除浮動
7、浮動元素之間沒有垂直margin的合并
清除浮動
父級上增加屬性overflow：hidden
在最後一個子項目的後面加一個空的p，給它樣式屬性 clear:both（不推薦）
使用成熟的清浮動樣式類，clearfix
.clearfix:after,.clearfix:before{ content: "";display: table;}.clearfix:after{ clear:both;}.clearfix{zoom:1;}清除浮動的使用方法：.con2{... overflow:hidden}或者<div class="con2 clearfix">
關於定位
我們可以使用css的position屬性來設定元素的定位類型，postion的設定項如下：
定位元素特性
絕對位置和固定定位的塊元素和行內元素會自動轉化為行內塊元素
定位元素層級
定位元素是浮動的正常的文檔流之上的，可以用z-index屬性來設定元素的層級
典型定位布局
1、固定在頂部的菜單
2、水平垂直置中的彈框
3、固定的側邊的工具列
4、固定在底部的按鈕
relative 產生相對定位元素，元素所佔據的文檔流的位置不變，元素本身相對文檔流的位置進行位移
absolute 產生絕對位置元素，元素脫離文檔流，不佔據文檔流的位置，可以理解為漂浮在文檔流的上方，相對於上一個設定了相對或者絕對或者固定定位的父級元素來進行定位，如果找不到，則相對於body元素進行定位。
fixed 產生固定定位元素，元素脫離文檔流，不佔據文檔流的位置，可以理解為漂浮在文檔流的上方，相對於瀏覽器視窗進行定位。
static 預設值，沒有定位，元素出現在正常的文檔流中，相當於取消定位屬性或者不設定定位屬性
inherit 從父元素繼承 position 屬性的值
屬性解釋
background屬性是css中應用比較多，且比較重要的一個屬性，它是負責給盒子設定背景圖片和背景顏色的，background是一個複合屬性，它可以分解成如下幾個設定項：
background-color 設定背景顏色
background-image 設定背景圖片地址
background-repeat 設定背景圖片如何重複平鋪
background-position 設定背景圖片的位置
background-attachment 設定背景圖片是固定還是隨著頁面捲軸滾動
實際應用中，我們可以用background屬性將上面所有的設定項放在一起，而且也建議這麼做，這樣做效能更高，而且相容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，這裡面的“#00ff00”是設定background-color；“url(bgimage.gif)”是設定background-image；“no-repeat”是設定background-repeat；“left center”是設定background-position；“fixed”是設定background-attachment，各個設定項用空格隔開，有的設定項不寫也是可以的，它會使用預設值。
舉例：
下面這些例子使用下面這張圖片做為背景圖：
1、“background:url(bg.jpg)”，預設設定一個圖片地址，圖片會從盒子的左上方開始將盒子鋪滿。
2、“background:cyan url(bg.jpg) repeat-x”，橫向平鋪盒子，盒子其他部分顯示背景顏色“cyan”。
3、“background:cyan url(bg.jpg) repeat-y”，縱向平鋪盒子，盒子其他部分顯示背景顏色“cyan”。
4、“background:cyan url(bg.jpg) no-repeat”，背景不重複，背景和盒子左上方對齊，盒子其他部分顯示背景顏色“cyan”。
5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重複，背景和盒子左中對齊，盒子其他部分顯示背景顏色“cyan”。
6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重複，背景和盒子右中對齊，也就是背景圖片的右邊對齊盒子的右邊，盒子其他部分顯示背景顏色“cyan”。
相關代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test background</title> <style type="text/css"> .backshow{ width:320px; height:160px; border:3px solid #333; float:left; margin:10px; } .bg1{background:cyan url(bg.jpg);} .bg2{background:cyan url(bg.jpg) repeat-x;} .bg3{background:cyan url(bg.jpg) repeat-y;} .bg4{background:cyan url(bg.jpg) no-repeat;} .bg5{background:cyan url(bg.jpg) no-repeat left center;} .bg6{background:cyan url(bg.jpg) no-repeat right center;} </style></head><body> <p class="backshow bg1"></p> <p class="backshow bg2"></p> <p class="backshow bg3"></p> <p class="backshow bg4"></p> <p class="backshow bg5"></p> <p class="backshow bg6"></p></body></html>
例子說明：
代碼中使用到的背景圖片，可以直接在頁面上的背景圖片上點右鍵另存下來，命名為：“bg.jpg”，並且和網頁檔案存在同一個目錄下。
關於背景圖片的background-position的設定，設定背景圖片水平位置的有“left”、“center”、“right”，設定背景圖片垂直位置的有“top”、“center”、“bottom”，水平和垂直的屬性值兩兩組合，就可以把背景圖設定到對齊盒子的四個角或者四個邊的中心或者盒子的正中心位置。還可以設定具體的像素值來把背景圖片精確地定位到盒子的某個位置，特別是對於背景圖片尺寸大於盒子尺寸的這種情況，我們可以用數值定位，截取大圖片的某一塊做為盒子的背景。
比如說，我們想把下邊的盒子用右邊的圖片作為背景，並且讓背景顯示圖片中靠近底部的那朵花：
用上面中間那張圖片作為左邊那個比它尺寸小的盒子的背景，如果不設定background-position，預設背景圖的左上方會和盒子的左上方對齊，如果設定，可以用兩個數值定位背景圖，上面右邊的實現效果設定為：“background:url(location_bg.jpg) -110px -150px”，第一個數值表示背景圖相對於自己的左上方向左位移110px，負值向左，正值向右，第二個數值表示背景圖相對於自己的左上方向上位移150px，負值向上，正值向下。
實現原理：
對應代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test background</title> <style type="text/css"> .backshow{ width:320px; height:160px; border:3px solid #333; float:left; margin:10px; } .bg{width:94px; height:94px; border:3px solid #666; background:url(location_bg.jpg) -110px -150px; } </style></head><body> <p class="bg"></p></body></html>
經過對前面知識點的鞏固和加深，我們可以使用前面學習到的知識來製作實際開發中碰到的一些典型的布局，以此來達到綜合應用知識的目的。
1、特徵布局：翻頁（所需知識點：盒模型、內嵌元素
2、特徵布局：導航條01（所需知識點：盒模型、行內元素布局
3、特徵布局：導航條02（所需知識點：盒模型、浮動、定位、字型對齊）
4、特徵布局：圖片列表（所需知識點：盒模型、浮動）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
