1、需求分析（業(yè)務邏輯）利用CSS相關的屬性，我們能完成很多對文字、段落以及背景的設置，來美化我們的頁面，使其完成更多的效果，而之前的HTML基礎標簽作用是有限的，而且會產(chǎn)生很多冗余的代碼，這就用到了CSS屬性。涵蓋的核心技術點羅列CSS中文字屬性CSS中段落屬性CSS中背景屬性CSS中邊距屬性CSS中邊框?qū)傩訡SS中布局屬性和尺寸屬性CSS的基本概念CSS（cascading style sheet，層疊樣式表)是一種制作網(wǎng)頁的新技術，現(xiàn)在已經(jīng)為大多數(shù)瀏覽器所支持，成為網(wǎng)頁設計必不可少的工具之一。使用css的優(yōu)點：使網(wǎng)頁代碼更少，網(wǎng)頁下載更快實現(xiàn)了內(nèi)容與樣式的分離，使網(wǎng)站維護更快捷使網(wǎng)頁與瀏覽器

2、的兼容性更好CSS的思想就是首先指定對什么“對象”進行設置，最后給出該設置的“值”。因此，概括來說，CSS就是由三個基本部分組成的“對象”、“屬性”和“值”。 CSS的基本概念(1) CSS樣式表在對CSS有了大致的了解之后，就可以使用css對頁面進行全方位的控制。本節(jié)主要介紹如何在HTML中使用css，包括行內(nèi)樣式、內(nèi)部式、外部式等，最后探討各種方式的優(yōu)先級問題。CSS的基本概念外部樣式新建立外部樣式表文件。后綴名為.css在html文件中引入外部樣式表CSS的基本概念(2)CSS語法結構每個CSS樣式由兩個分組成：選擇器和聲明。聲明又包括屬性和屬性值。每個聲明之后用分號結束。例如：在css

3、的三個組成部分中，“對象”是很重要的，它指定了對哪些網(wǎng)頁元素進行設置，因此，它有一個專門的名稱選擇器（selector）。 選擇器是css中很重要的概念，所有html語言中的標記樣式都是通過不同的css選擇器進行控制的。用戶只需要通過選擇器對不同的html標簽進行選擇，并賦予各種樣式聲明，即可實現(xiàn)各種效果。CSS的基本概念標記選擇器 圖2-6 標記選擇器CSS的基本概念類別選擇器 圖2-7 類別選擇器CSS的基本概念ID選擇器文字屬性 圖2-9 文字屬性和段落屬性文字屬性 字體：font-family在HTML中，設置文字的字體屬性需要通過標記中的face屬性，而在css中則使用font-fa

4、mily屬性。 語法：font-family：“字體1”，”字體2“， 說明：如果在font-family屬性中定義了多種字體，在瀏覽器中瀏覽時會由前向后選擇字體。即當瀏覽器不支持“字體1”時，則會采用“字體2”；如果不支持”字體1“和“字體2”，則采用“字體3”，依此類推。如果瀏覽器不支持font-family屬性中定義的所有字體，則會采用系統(tǒng)默認的字體。文字屬性字號：font-size 在HTML中，字體的大小是由標記中的size屬性來控制的。在css里可以使用font-size屬性來自由控制字體的大小。 語法：font-size：大小的取值 說明：font-size的取值范圍如下： xx

5、-small：絕對字體尺寸，最小; x-small：絕對字體尺寸，較小; Small：絕對字體尺寸，小; Medium：絕對字體尺寸，正常默認值; Large：絕對字體尺寸，大; x-large：絕對字體尺寸，較大; xx-large：絕對字體尺寸，最大; Larger：相對字體尺寸，相對于父對象中字體尺寸進行相對增大; Smaller：相對字體尺寸，相對于父對象中字體尺寸進行相對減小; Length：可采用百分比或長度值，不可為負值，其百分比取值是基于父對象中字體的尺寸;文字屬性文字顏色：colorColor屬性用來設置指定元素的顏色，顏色值是一個關鍵字或一個16進制的RGB值。 語法：Co

6、lor：顏色取值 說明：關鍵字就是顏色的英文名稱，如red、green、blue分別表四紅、綠、藍。 用16進制數(shù)來設置顏色，是因為16進制數(shù)正好能表達0到255的數(shù)值。使用此種方法可以設置1677萬種顏色。在完全表示顏色的時 候使用#加上16進制數(shù)即可，如下所示: color: #ff0000 表示紅色；color: #000099 表示藍色。文字屬性文字加粗： font-weight在HTML里使用標記設置文字為粗體顯示，而在css中利用font-weight屬性來設置字體的粗細。 語法：font-weight：字體粗細值 說明：font-weight的取值范圍包括normal、bold、

7、bolder、lighter、number。其中normal表示正常粗細；bold表示粗體；bolder表示特粗體；number不是真正的取值，其范圍是100900，一般情況下都是整百的數(shù)字，如200、300等。文字屬性文字傾斜：font-style字體風格font-style屬性用來設置字體是否為斜體。 語法：Font-style：樣式的取值 說明：樣式的取值有三種：normal是默認的正常字體；Italic以斜體顯示字體；oblique屬于中間狀態(tài)，以偏斜體顯示。文字屬性文字復合屬性可以設置font的復合屬性，用來簡化CSS代碼。語法：font：字體取值說明：符合屬性可以取值字體風格、加粗

8、、字號、字體等，可省略部分屬性，屬性值間用空格分開。書寫是按照順序，內(nèi)容的順序為：font-style; font-weight; font-size; ; font-family。段落屬性文字修飾：text-decoration使用文字修飾屬性可以對文本進行修飾，如設置下劃線、刪除線等。語法：text-decoration：取值說明：none表示不修飾，是默認值；underline表示對文字添加下劃線；overline表示對文字添加上劃線；line-through表示對文字添加刪除線；blink表示文字閃爍效果。段落屬性文本縮進：text-indent在HTML中只能控制段落的整體向右縮進，

9、如果不進行設置，瀏覽器則默認為不縮進，而在css中可以控制段落的首行縮進以及縮進的距離。語法：text-indent：縮進值說明：文本的縮進值必須是一個長度值或一個百分比。段落屬性水平對齊 text-align使用text-align屬性可以設置文本的水平對齊方式。語法： text-align：排列值說明：水平對齊方式取值包括left、right、center和justify四種： left：左對齊； right：右對齊 center：居中對齊； justify：兩端對齊段落屬性文本行高：line-height 使用文本行高屬性可以控制段落中行與行之間的距離。語法： line-height：行

10、高值背景屬性背景復合屬性 backgroundbackground 簡寫屬性在一個聲明中設置所有的背景屬性?？梢园错樞蛟O置如下屬性，不需要的屬性可省略：background-color ：背景顏色background-image ：背影圖background-repeat ：背景圖片是否重復background-attachment ：背景圖片滾動還是固定background-position：背景圖片位置如：body background: #00FF00 url(bgimage.gif) no-repeat 0 0; 背景色 背景圖片 重復方式 位置布局屬性和尺寸屬性尺寸屬性（width和

11、height）Width寬度屬性和height高度屬性用來設置CSS中的寬度和高度是盒模型中最內(nèi)側的部分，用來顯示元素的內(nèi)容。語法： width：200px height：150px邊框?qū)傩赃吙?border上下左右邊框border-top 上邊框border-bottom 下邊框border-left 左邊框border-right 右邊框語法：邊框復合屬性border ：1px red solid （粗細 顏色 樣式）列表屬性列表屬性list-style語法：List-style:none 去掉樣式 List-style:url(1.jpg)圖片 盒子模型邊距與填充屬性邊距與填充屬性邊距屬

12、性上邊距margin-top下邊距margin-bottom左邊距margin-left右邊距margin-right邊距的復合屬性邊距的復合屬性為對4個邊距設置的略寫margin:10px 一個值的時候：四個邊都是10pxmargin:5px 10px 兩個值：上下 左右margin:5px 10px 8px 三個值：上 左右 下margin:1px 2px 3px 4px 四個值：上 右 下 左邊距與填充屬性填充屬性上填充padding-top下填充padding-bottom左填充padding-left右填充padding-right復合屬性padding邊距的復合屬性為對4個邊距設置

13、的略寫padding:10px 一個值的時候：四個邊都是10pxpadding:5px 10px 兩個值：上下 左右padding:5px 10px 8px 三個值：上 左右 下padding:1px 2px 3px 4px 四個值：上 右 下 左偽類選擇器偽類選擇器:link 定義超鏈接默認樣式:hover 定義鼠標經(jīng)過的樣式a:hover選擇器，例如： atext-decoration:none; color:#ff0000; 去掉超鏈接下劃線，超鏈接文字為紅色 a:hover color:#00ff00; 鼠標經(jīng)過超鏈接文字變?yōu)樗{色布局屬性和尺寸屬性布局屬性(float和clear)clear，該屬性的值指出了不允許有浮動對象的邊，clear: none | left | right | both；float，該屬性的值指出了對象是否及如何浮動，float: none | left | right;在下面黃色（box1）的大框里依次有紅色（box2）、深藍色（box3）兩個正方形 當前情況下，我沒有對它們設置clear屬性和float屬性，它們的位置是從上到下呈豎排順序排列的。布局屬性和尺寸屬性現(xiàn)在，我需要讓box2從豎排中脫離