Web應(yīng)用系統(tǒng)安全開發(fā)課件：使用CSS規(guī)定網(wǎng)頁布局

Web應(yīng)用系統(tǒng)安全開發(fā)

使用

C

S

S

規(guī)定網(wǎng)頁布局2.2.1

CSS語法基礎(chǔ)1.

概述?CSS(Cascading

Style

Sheet)層疊樣式表，是一種用來表現(xiàn)HTML文件樣式的計算機語言，是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計語言。?相對于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁的布局、字體、顏色、背景和其它

效果進行像素級的精確控制，并且擁有對網(wǎng)頁對象和模型樣式編輯的能力，能夠進行初步交互設(shè)計，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計語言。?CSS能夠根據(jù)不同使用者的理解能力，簡化或者優(yōu)化寫法，有較強的易讀性。網(wǎng)頁上使用CSS樣式表的三種方法：(1)外聯(lián)式(Linking)：外聯(lián)式也叫外部樣式，就是將網(wǎng)頁鏈接到外部樣式表。

<link

rel="stylesheet"type="text/css"href="mystyle.css"/>(2)嵌入式(Embedding)：嵌入式也叫內(nèi)頁樣式，就是在網(wǎng)頁上創(chuàng)建嵌入的樣式表。<style

type="text/css">body{background-color:red}p{margin-left:20px}</style>(3)內(nèi)聯(lián)式(Inline)：內(nèi)聯(lián)式也叫行內(nèi)樣式，就是應(yīng)用內(nèi)嵌樣式到各個網(wǎng)頁元素。<p

style="color:red;margin-left:20px">這是一個段落。</p>優(yōu)先級：內(nèi)聯(lián)式>嵌入式>外聯(lián)式>瀏覽器默認(rèn)設(shè)置選擇器：指向您需要設(shè)置樣式的HTML元素；選擇器通常是一個，也可以是多個；若是多個，則相互間用逗號分開。聲明塊：包含一條或多條用分號分隔的聲明；每條聲明都包含一個CSS

屬性名稱和一個值，以冒號分隔；多條CSS聲明用分號分隔，聲明塊用花括號括起來。選擇器1，選擇器2，選擇器3，…{屬性1:值1;屬性2:值2;屬性3:值3…}2.

語法CSS規(guī)則由選擇器、樣式屬性和屬性值組成，其格式如下：四種CSS選擇器：(1)通配選擇符“*”：代表所有對象，即頁面上所有對象都會應(yīng)用該樣式，一般用于網(wǎng)頁字體、字體大小、字體顏色、網(wǎng)頁背景等公共屬性的設(shè)置。*

{background-color:yellow;}選擇器也能選取另一個元素中的所有元素。div*{background-color:yellow;}(2)標(biāo)簽選擇符：即用HTML中標(biāo)簽名稱作為選擇符，則頁面中所有同類標(biāo)簽都會應(yīng)用該樣式。p{background-color:yellow;}(3)

id選擇符：為HTML標(biāo)簽添加id屬性，CSS樣式中以“#”加上id名稱作為選擇符，則頁面中id值相同的所有標(biāo)簽都會應(yīng)用該樣式。#sidebar

{font-style:italic;text-align:right;margin-top:5px;}(4)

class選擇符：為HTML標(biāo)簽添加class屬性，CSS樣式中以“.”加上class名稱作為選擇符，則頁面中class值相同的所有標(biāo)簽都會應(yīng)用該樣式。.important

{color:red;}2.2.2

使用CSS實現(xiàn)網(wǎng)頁的美化與

輪廓1.

基本屬性(1)背景background用于設(shè)置所有的背景屬性，可以設(shè)置如下屬性，見下表所示。(2)文本效果在css中常見的文本效果屬性見下表所示。(3)字體在CSS中常見的字體屬性見下表所示。(4)鏈接鏈接可以使用任何CSS屬性(例如color、font-family、background等)來設(shè)置樣式?？梢愿鶕?jù)鏈接處于什么狀態(tài)來設(shè)置鏈接的不同樣式，四種鏈接狀態(tài)分別是：1)a:link－－正常的、未被訪問的鏈接2)a:visited－－用戶訪問過的鏈接3)a:hover－－用戶將鼠標(biāo)懸停在鏈接上時4)a:active－－鏈接被點擊時下面的代碼表示設(shè)置鏈接的四種狀態(tài)：a:link{color:#FF0000;}/*未被訪問的鏈接*/a:visited{color:#00FF00;}/*已被訪問的鏈接*/a:hover{color:#FF00FF;}/*鼠標(biāo)指針移動到鏈接上*/a:active{color:#0000FF;}/*正在被點擊的鏈接*/(5)列表list-style，在一個聲明中設(shè)置所有的列表屬性，可以按順序設(shè)置如下屬性：1)list-style-type屬性指定列表項標(biāo)記的類型；2)list-style-image屬性將圖像指定為列表項標(biāo)記；3)list-style-position屬性指定列表項標(biāo)記(項目符號)的位置。比如list-style-type屬性指定列表項標(biāo)記的類型，以下代碼顯示了一些可用的列表項標(biāo)記：ul.a{list-style-type:circle;}ul.b{list-style-type:square;}ol.c{list-style-type:upper-roman;}

ol.d{list-style-type:lower-alpha;}(6)表格1)表格邊框如需在CSS中設(shè)置表格邊框，請使用border屬性。下面代碼為table、th以及td設(shè)置了黑色邊框：table,th,td{border:1px

solid

black;}下面代碼為table、th以及tdtable

{border-collapse:collapse;}table,th,

td{border:1px

solid

black;}2)合并表格邊框border-collapse設(shè)置是否將表格邊框折疊為單一邊框。設(shè)置了單一邊框：下面代碼將表的寬度設(shè)置為100％，將<th>元素的高度設(shè)置為50px：table

{3)表格寬度和高度表格的寬度和高度由width和height屬性定義。width:100%;}

th{height:50px;}4)表格文本對齊text-align和vertical-align，設(shè)置表格中文本的對齊方式。text-align：設(shè)置水平對齊方式，比如左對齊、右對齊或者居中；vertical-align：設(shè)置垂直對齊方式，比如頂部對齊、底部對齊或居中對齊。圖展示了框模型：2.

框模型?所有

HTML

元素都可以視為方框。在

CSS

中，在談?wù)撛O(shè)計和布局時，會使用術(shù)語“盒模型”或“框模型”。?CSS

框模型實質(zhì)上是一個包圍每個

HTML

元素的框。它包括：外邊距、邊框、內(nèi)邊距以及實際的內(nèi)容。下?元素

-

框的內(nèi)容，其中顯示文本和圖像。?內(nèi)邊距

-

清除內(nèi)容周圍的區(qū)域。內(nèi)邊距是透明的。?邊框

-

圍繞內(nèi)邊距和內(nèi)容的邊框。?外邊距

-

清除邊界外的區(qū)域。外邊距是透明的。(1)內(nèi)邊距padding定義元素邊框與元素內(nèi)容之間的空白區(qū)域，它接受長度值或百分比值，但不允許使用負(fù)值。(2)邊框border規(guī)定元素邊框的樣式(border-style)、寬度(border-width)和顏色(border-color)，可以應(yīng)用于任何

元素。p{border:3pxsolid

red;}(3)外邊距margin會在元素外創(chuàng)建額外的“空白”，它接受任何長度單位、百分?jǐn)?shù)值甚至負(fù)值，并且還可以設(shè)置為“auto”。p{margin:10px20px30px40px;}3.

定位?position規(guī)定元素的定位類型，可能的值為?absolute：生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。元素的位置通過"left","top","right"以及"bottom"屬性進行規(guī)定。?fixed：生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過"left","top","right"以及"bottom"屬性進行規(guī)定。?relative：生成相對定位的元素，相對于其正常位置進行定位。因此，"left:20"會向元素的左側(cè)位置添

加20像素。?static：默認(rèn)值，沒有定位，元素出現(xiàn)在正常的流中。?CSS有三種基本的定位機制：普通流、浮動和絕對定位。?float實現(xiàn)元素的浮動定位，可能的值為?left：元素向左浮動?right：元素向右浮動?none：默認(rèn)值，元素不浮動，并會顯示在其在文本中出現(xiàn)的位置實例2-54.

布局(1)CSS多列通過