建站工具css需求分析業(yè)務(wù)邏輯

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

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

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

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

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

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

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

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

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

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

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

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

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