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

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

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

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

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

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

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

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

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

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

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

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

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

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