Web前端開發(fā)技術(shù)課件T-第二章_第1頁
Web前端開發(fā)技術(shù)課件T-第二章_第2頁
Web前端開發(fā)技術(shù)課件T-第二章_第3頁
Web前端開發(fā)技術(shù)課件T-第二章_第4頁
Web前端開發(fā)技術(shù)課件T-第二章_第5頁
已閱讀5頁，還剩61頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

第2章CSS3基礎(chǔ)HTML設(shè)計時既關(guān)注頁面的內(nèi)容，又關(guān)注頁面的格式，但隨著頁面內(nèi)容越來越多，如果想通過設(shè)置HTML元素的屬性來設(shè)置頁面格式的話，頁面將變得凌亂和復雜，這種情況下CSS被設(shè)計出來，用CSS來格式化HTML頁面，使得頁面的內(nèi)容和格式進行了徹底分離，CSS現(xiàn)在已經(jīng)發(fā)展到第3版本，簡稱CSS3。本章主要介紹CSS3的基礎(chǔ)知識，包括CSS3概述、選擇器、盒模型、樣式、定位等內(nèi)容。CSS3概述CSS(CascadingStyleSheet，層疊樣式表)是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。1996年底，CSS初稿已經(jīng)完成，同年12月，層疊樣式表的第一份正式標準（CascadingstyleSheetsLevel1）完成，成為w3c的推薦標準。1998年5月出版的CSS規(guī)范第二版。2001年5月W3C開始進行CSS3標準的制定,到目前為止該標準還沒有最終定稿。CSS3概述2.1.2CSS3的特點1.豐富的樣式定義CSS3提供了豐富的文檔樣式外觀，以及設(shè)置文本和背景屬性的能力2.易于使用和修改CSS3可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個專門的CSS3文件中，以供HTML頁面引用。CSS3概述3.多頁面應用CSS3樣式表理論上可以不屬于任何頁面文件，在任何頁面文件中都可以將其引用。4.層疊簡單地說，層疊就是對一個元素多次設(shè)置同一個樣式，將使用最后一次設(shè)置的屬性值。5.頁面壓縮樣式的聲明單獨放到CSS3樣式表中，多頁面共享，則大大壓縮單個頁面的大小。CSS3概述2.1.3CSS3的語法格式CSS3由一條一條的規(guī)則組成，每條規(guī)則又由一個或多個選擇器加一個或多條聲明組成。每條聲明則是由屬性和屬性值組成。屬性和屬性值之間由冒號隔開。聲明部分用大括號{}包裹，每條聲明之間使用；分號隔開寫：h1{color:red;font-size:14px;}寫法也可以這樣：h1{color:red;font-size:14px;}CSS3概述2.1.4CSS3的類型CSS3按照所放位置不同，分為內(nèi)聯(lián)樣式、內(nèi)部樣式、外部樣式表和導入樣式表。1.內(nèi)聯(lián)樣式表內(nèi)聯(lián)樣式表是直接在HTML元素內(nèi)插入style屬性來定義要顯示的樣式，這是最簡單的樣式定義方法。不過，利用這種方法定義樣式時，效果只可以控制該元素及其子元素，其語法如下：如：<bodystyle="color:#FF0000;">…</body>2.內(nèi)部樣式表內(nèi)部樣式表是在HTML的<head>元素中插入一個<style>元素，在<style>元素中書寫CSS3樣式規(guī)則。在內(nèi)部樣式表中定義的樣式就應用到頁面中：CSS3概述外部樣式表外部樣式表是在HTML文檔外面定義好CSS3文件，然后在HTML頁面中使用<link>元素把CSS3文件引入，具體如下：<linkhref="樣式表地址"rel="stylesheet"type="text/css"/>

導入樣式表輸入樣式表是指書寫CSS3文件時用CSS3的@import聲明將一個外部樣式表文件導入進來，也可以使用@import聲明將一個CSS3文件輸入到網(wǎng)頁文件的<style></style>標簽對中，被導入的CSS3文件中的樣式規(guī)則定義語句就成了<style></style>標簽對中的語句。<style>

@importurl(http://……)

</stypel>CSS3概述2.1.5CSS3性質(zhì)1.級聯(lián)在編寫CSS3代碼的時候，可能在不同地方對HTML元素的同一屬性添加了不同的樣式。2.繼承當給祖先元素設(shè)置了某些規(guī)則后，該祖先元素的所有后代子元素都將繼承這個屬性。CSS3概述3.層疊CSS3為什么叫層疊樣式表，最大的原因就是CSS3的層疊特性。CSS3層疊性表現(xiàn)為：相同屬性的不同值，按內(nèi)聯(lián)樣式>內(nèi)部樣式>外聯(lián)樣式>缺省值（瀏覽器內(nèi)置）的優(yōu)先級順序覆蓋，不相同的屬性直接疊加（合并）在一起，并作用于該元素。CSS3概述4.優(yōu)先如果元素必須指定要以某些樣式進行渲染，則可以用!important來指定樣式。!important是CSS3的一種語法，定義在樣式屬性后面，代表這個屬性不會被覆蓋，最終生效的屬性一定是!important標注的屬性。如例2-1.CSS3概述2.2選擇器選擇器是CSS3的非常重要的語法點，選擇器主要是用來選中想要設(shè)置CSS3樣式的元素，有元素選擇器、類選擇器、id選擇器、偽類選擇器等等。為了演示元素選擇器、類選擇器、id選擇器等的作用，先建立一個HTML文件例2-2作為基礎(chǔ)文件，然后逐步在其基礎(chǔ)上使用選選擇器，演示各種選擇器的具體效果。例2-2.

選擇器2.2.1CSS元素選擇器元素選擇器是通過元素名來選擇想要設(shè)置樣式的元素，如果對上面例2-2的HTML5腳本文件設(shè)置如下CSS樣式：ul{height:30px;}div{width:400px;height:50px;border:1pxsolid#ccc;padding:10px;}

選擇器2.2.2CSS通配符選擇器通配符選擇器用來選擇所有元素，*選擇器表示選擇所有元素。在2.2.1節(jié)基礎(chǔ)上增加如下樣式設(shè)置：*{color:white;}其運行效果如圖2-3所示。

選擇器2.2.3CSS類名選擇器在CSS中類選擇器常用來選擇一類該設(shè)置相同樣式的元素，在使用類選擇器時，需把需要設(shè)置相同樣式的多個元素的class屬性設(shè)置為相同的值。類選擇器格式是：“.類名”。在2.2.1節(jié)基礎(chǔ)上增加如下樣式設(shè)置：.important{font-weight:bold;color:yellow;}其運行效果如圖2-4所示.

選擇器2.2.4id選擇器id選擇器可以為標有特定id的HTML元素指定樣式。id選擇器以"#id名稱"來定義。在2.2.1節(jié)基礎(chǔ)上增加如下樣式設(shè)置：#first{color:blue;}其運行效果如圖2-5所示。

選擇器2.2.5后代選擇器如果想F選擇器選擇的元素是E選擇器選中元素的后代，不管是不是直接后代元素，都可以寫作：EF{}。其中E和F之間有空格，在2.2.1節(jié)基礎(chǔ)上增加如下樣式設(shè)置如：div.items{font-size:30px;}

選擇器2.2.6子元素選擇器如果想F選擇器選擇的元素是E選擇器選中元素的子元素，都可以寫作：E>F{}。其中E和F之間用>號連接，在2.2.1節(jié)基礎(chǔ)上增加如下樣式設(shè)置：.clearfix>.items{background-color:white;}其運行效果如圖2-2所示。

選擇器如果想F選擇器選擇的元素是E選擇器選中元素的后一個兄弟元素，且相鄰，可以寫作：E+F{}，其中E和F之間是用+號隔開。在2.2.1節(jié)基礎(chǔ)上增加如下樣式設(shè)置：.active+.items{background-color:white;}其運行效果如圖2-7所示：

選擇器2.2.8通用兄弟選擇器如果想F選擇器選擇的元素是E選擇器選中元素的兄弟元素，且F所選元素在后，可以寫作：E~F{}，其中E和F之間是用~號隔開。在2.2.1節(jié)基礎(chǔ)上增加如下樣式設(shè)置：.active~.items{background-color:white;}其運行效果如圖2-8所示。

選擇器2.2.9群組選擇器如果想把F選擇器選擇的元素和E選擇器選中元素都設(shè)置相同的樣式則使用群組選擇器，可以寫作：E,F{}，其中E和F之間是用,號隔開。在2.2.1節(jié)基礎(chǔ)上增加如下樣式設(shè)置：.first,.last{background-color:white;}其運行效果如圖2-9所示。

選擇器2.2.10屬性選擇器屬性選擇器是使用HTML元素屬性當作選擇器關(guān)鍵字的選擇器。

常見的屬性選擇器包括以下幾類：E[attr]:只使用屬性名，但沒有確定任何屬性值E[attr="value"]:指定屬性名，并指定了該屬性的屬性值E[attr~="value"]:指定屬性名，并且具有屬性值，此屬性值是一個詞列表，并且以空格隔開，其中詞列表中包含了一個value詞，而且等號前面的~不能不寫E[attr^="value"]:指定了屬性名。并且有屬性值，屬性值是以value開頭的E[attr$="value"]:指定了屬性名，并且有屬性值，且屬性值是以value結(jié)束的E[attr*="value"]:指定了屬性名，并且有屬性值，且屬性值中包含了value為了演示各種屬性選擇器，先建立一個HTML文檔例2-3，后面各種屬性選擇器都是在其基礎(chǔ)上進行講解。

選擇器1．E[attr]選擇含有attr屬性的元素E，則使用寫作：E[attr]{}，在例2-3基礎(chǔ)上添加如下語句：.demoa[id]{background:blue;color:yellow;}其運行效果如圖2-11所示。

選擇器2．E[attr="value"]選擇含有值為value的attr屬性的元素E，則使用寫作E[attr="value"]{}。在案例2-3基礎(chǔ)上添加如下語句：.demoa[id="first"]{background:blue;}其運行效果如圖2-13所示。

選擇器3．E[attr~="value"]在案例2-3基礎(chǔ)上添加如下語句：.demoa[title~="website"]{background:orange;}其運行效果如圖2-15所示。

選擇器4．E[attr^="value"]在案例2-3基礎(chǔ)上添加如下語句：.demoa[href^="sites"]{background:#eee;}其運行效果如圖2-16所示。

選擇器5．E[attr$="value"]在案例2-3基礎(chǔ)上添加如下語句：.demoa[href$="png"]{background:#070707;}其運行效果如圖2-17所示：

選擇器6．E[attr*="value"]在案例2-3基礎(chǔ)上添加如下語句：.demoa[title*="site"]{background-color:violet;}其運行效果如圖2-18所示。

選擇器2.2.11偽類選擇器同一個標簽，根據(jù)其不同的種狀態(tài)，有不同的樣式，這就叫做“偽類”。偽類用冒號來表示。為了演示偽類選擇器的功能，先建立一個HTML文檔例2-4，所有的偽類選擇器都是在其基礎(chǔ)上進行演示。

選擇器1．超級鏈接動態(tài)偽類超級鏈接的動態(tài)偽類只有當用戶和網(wǎng)站交互的時候才能體現(xiàn)出來，因為超級鏈接分為幾種狀態(tài)，link：鏈接沒有被訪問時的樣式，visited：鏈接被訪問以后的樣式，hover：鼠標懸浮時的樣式，active：鼠標點中激活的瞬間的樣式，在例2-4基礎(chǔ)上添加如下語句：.demoa:link{color:gray;}.demoa:visited{color:yellow;}.demoa:hover{color:green;}.demoa:active{color:blue;}其運行效果如圖2-20所示。

選擇器2．:nth選擇器在有的頁面中，同樣的元素出現(xiàn)多個，:nth選擇器可按序選擇哪些元素來設(shè)置樣式。:first-child用來選擇某個元素的第一個子元素，:last-child用來選擇某個元素的最后一個子元素。在案例2-4基礎(chǔ)上添加如下語句：.demoli:first-child{background:green;}.demoli:last-child{background:green;}其運行效果如圖2-24所示。

選擇器7．偽元素偽元素選擇器可以選擇邏輯意義上滿足條件的元素部分。::first-line:選擇元素的第一行，這個選擇器主要是用在文字排版，用于把頁面的首行文字渲染出不同效果。::first-letter:選擇文本塊的第一個字母，這個選擇器主要是用在文字排版，可以用來強調(diào)第一個字符。::before和::after：主要用來在元素的前后插入內(nèi)容。如在例2-3上添加：li:first-child::after{content:"hello";color:black;}其運行效果如圖2-27所示。

選擇器8．UI元素狀態(tài)偽類選擇器UI元素狀態(tài)偽類選擇器主要是指可選擇元素不同狀態(tài)下的選擇器。UI元素狀態(tài)偽類主要指type=text時的enable和disabled，type=radio和type=checkbox的checked和unchecked等。例2-5是對UI元素狀態(tài)偽類的演示。

選擇器2.3盒模型在CSS3中，所有通過CSS3進行布局的HTML元素都可以看成一個“盒子”，通過設(shè)置盒子的屬性對元素進行大小和位置的控制。盒模型element表示元素的內(nèi)容區(qū)。width和height屬性定義內(nèi)容區(qū)域的寬高。padding定義元素的內(nèi)邊距，即內(nèi)容區(qū)離邊框的距離。border定義元素的邊框。margin定義元素與其他元素的距離。盒模型2.3.1外邊距盒子的外邊距margin，他是完全透明的。margin包含了上下左右四條邊，開發(fā)者可以單獨設(shè)置每一條邊的邊距。margin-top：上邊距；margin-buttom：下邊距；margin-left：左邊距margin-right：右邊距。開發(fā)者也可以直接使用簡寫屬性margin同時設(shè)置四條邊的寬度。盒模型元素在父元素內(nèi)居中對齊的設(shè)置如下：margin:0pxauto；像上面這樣設(shè)置margin上下值為0，左右值為自動推算，從而元素盒子在父元素中居中對齊。居中對齊的必要條件：塊元素并且必須固定寬度。盒模型2.3.2內(nèi)邊距盒子的內(nèi)邊距padding，與外邊距不同，padding不一定完全透明，可以設(shè)置背景顏色和圖片。與margin類似，padding包含了上下左右四條邊，開發(fā)者可以單獨設(shè)置每一條邊的邊距。padding-top：上部填充padding-bottom：下部填充padding-left：左部填充padding-right：右部填充開發(fā)者也可以直接使用簡寫屬性padding同時設(shè)置四條邊的寬度。盒模型2.3.3邊框盒子的邊框Border，元素的border屬性設(shè)置與margin、padding類似，也分為上下左右四個邊界，可以通過設(shè)置四個邊界的數(shù)值，來進行元素邊框的粗細。border屬性分別為border-top（上邊界）、border-bottom（下邊界）、border-left（左邊界）、border-right（右邊界）。如果Border屬性的四邊寬度、顏色均一致，那么可以將border屬性進行簡寫。盒模型2.3.4圓角邊框盒子的邊界半徑，也就是圓角，邊界半徑由屬性border-radius進行控制，這是一個簡寫屬性，同上面提到過的margin、padding等一樣，可以有一個、兩個、三個或四個值進行設(shè)置。同樣也可以對盒子的每一個角的半徑進行單獨設(shè)置。border-top-left-radius：左上角border-top-right-radius：右上角border-bottom-left-radius：左下角border-bottom-left-radius：右下角邊界半徑可以使用px、em等長度單位，也可以使用百分數(shù)。盒模型2.3.4圓角邊框盒子的邊界半徑，也就是圓角，邊界半徑由屬性border-radius進行控制，這是一個簡寫屬性，同上面提到過的margin、padding等一樣，可以有一個、兩個、三個或四個值進行設(shè)置。同樣也可以對盒子的每一個角的半徑進行單獨設(shè)置。border-radius具體開發(fā)實例如例2-6所示。盒模型2.3.5盒子陰影在盒子的組成成分之外，CSS3給盒子添加了陰影。盒子的陰影由box-shadow屬性控制，陰影的輪廓與盒子邊界border的輪廓一樣。該屬性的正規(guī)語法如下：none|[inset?&&[<offset-x><offset-y><blur-radius>?<spread-radius>?<color>?]]inset：默認陰影在邊框外。使用inset后，陰影在邊框內(nèi)（即使是透明邊框），背景之上內(nèi)容之下。offset-x,offset-y：這是頭兩個長度值，用來設(shè)置陰影偏移量，相對于border外邊線開始計算。offset-x設(shè)置水平偏移量，如果是負值則陰影位于元素左邊。offset-y

設(shè)置垂直偏移量，如果是負值則陰影位于元素上面。如果兩者都是0，那么陰影位于元素后面。這時如果設(shè)置了

blur-radius或spread-radius則有模糊效果。具體開發(fā)實例如例2-7所示。盒模型2.4樣式CSS3的核心是對各種HTML元素的樣式設(shè)置，使得頁面生動活潑，滿足展示的各種需求。樣式2.4.1長度單位CSS3樣式中設(shè)置盒子寬度、高度和字體大小都要用到長度單位，故先介紹長度單位：絕對單位：1in=2.54cm=25.4mm=72pt=6pc各種單位的含義：in：英寸Inches(1英寸=2.54厘米)cm：厘米Centimetersmm：毫米Millimeterspt：點Points，或者叫英鎊(1點=1/72英寸)pc.皮卡Picas(1皮卡=12點)相對單位：px：像素，具體大小和屏幕分辨率相關(guān)；em：相對默認字體大小的比值，1em默認相當于16個px；%：百分比，相對父元素文字的大小樣式2.4.2字體屬性頁面需要顯示出各種的字體以適應各種需求，為了演示字體樣式的設(shè)置，先建立一個HTML文件例2-8，然后介紹各種不同的字體樣式，對例2-8進行設(shè)置不同的字體樣式后，得到整體效果圖如圖2-33。樣式1．color字體顏色2．font-size字號大小3．font-family字體4．font-weight字體粗細5．font-style字體風格6.font-variant字體變形7.font屬性簡寫樣式8.自定義網(wǎng)頁字體@font-face

在設(shè)計頁面時，經(jīng)常由于場景需要用到漂亮的藝術(shù)字體，此時@font-face就派上用長了，@font-face的作用是允許Web開發(fā)人員自己定義web頁面的字體，瀏覽器從服務端下載并使用自定義字體，使頁面顯示字體不依賴用戶的操作系統(tǒng)字體環(huán)境。@font-face語法自定義字體語法：@font-face{font-family:<webFontName>;src:<source>[<format>][,<source>[<format>]]*;[font-weight:<weight>];[font-style:<style>];}

其中：webFontName:引入的自定義字體名稱，source:字體路徑，format:字體格式，用于幫助瀏覽器識別字體格式，truetype|opentype|truetype-aatembedded-opentype|svg…；weight:字體是否粗體，style:字體樣式。【例2-9】

自定義Web字體和使用字體開發(fā)實例樣式2.4.3CSS常用文本屬性頁面中文本要進行排版，以滿足不同場景需求，此時就需要使用到文本的一些屬性，如文本的對齊方式、行高、縮進等。在演示文本屬性的設(shè)置之前，先建立一個演示所需的基礎(chǔ)HTML文件如例2-10。樣式1.文本對齊屬性(text-align)text-align屬性用來設(shè)定文本的對齊方式。2.文本修飾屬性(text-decoration)text-decoration屬性是設(shè)定文本劃線的屬性。3.文本縮進屬性(text-indent)text-indent屬性設(shè)定文本首行縮進。4.行高屬性(line-height)line-height屬性用于設(shè)置行間距，就是行與行之間的距離（一行文字的高度），即字符的垂直間距，一般稱為行高。5.文本溢出容器處理(text-overflow)text-overflow設(shè)置當文本溢出元素框時處理方式。6.轉(zhuǎn)換大小寫(text-transform)text-transform屬性的作用是進行文本進行字母大小寫轉(zhuǎn)換。樣式7.文本陰影(text-shadow)text-shadow屬性為文本設(shè)置陰影。利用該屬性可以制作一些藝術(shù)效果的字體，是前端開發(fā)技術(shù)中重要的一個屬性。text-shadow:offset-xoffset-y

blur-radiuscolor；其中：offset-x為陰影水平位移，offset-y為垂直位移，這點跟box-shadow一致，并且這兩個值必須有，缺一不可。允許負值，offset-x負值向左偏移，offset-y向上偏移。blur-radius，模糊半徑，可選值。假如沒有指定，那么該值的初始值為0，數(shù)值越大的值，那么它的模糊半徑就越大。例2-13利用多層陰影制作藝術(shù)字的示例。樣式2.4.4CSS背景屬性1.背景顏色屬性(background-color)background-color屬性用于為HTML元素設(shè)定背景顏色，相當于HTML中bgcolor屬性語法：background-color:color，其中color可以為rgb()，rgba()、預定義的顏色或者樣色數(shù)值。【例2-14】設(shè)置背景顏色開發(fā)實例樣式2.背景圖片屬性(background-image)background-image屬性用于為HTML元素設(shè)定背景圖片，相當于HTML中background屬性。3.背景重復屬性(background-repeat)background-repeat屬性和background-image屬性連在一起使用，決定背景圖片是否重復。4.背景附著屬性(background-attachment)background-attachment屬性和background-image屬性連在一起使用，決定圖片是跟隨內(nèi)容滾動，還是固定不動。5.背景位置屬性(background-position)background-position屬性和background-image屬性連在一起使用，決定了背景圖片的最初位置。6.背景尺寸(background-size)background-size屬性規(guī)定背景圖片的尺寸。7．背景定位(background-origin)background-origin屬性規(guī)定背景圖片的定位區(qū)域，用于指定在繪制背景時，從邊框的左上角開始或者從內(nèi)容的左上角開始。8．背景裁剪(background-clip)background-clip屬性規(guī)定背景圖片的裁剪到的區(qū)域。樣式10．背景使用漸變在CSS3中背景圖片設(shè)置，除了可以使用URL引入已有圖片外，還可以使用漸變函數(shù)構(gòu)建圖片來設(shè)置背景。1）線性漸變線性漸變是指沿著某條直線朝一個方向產(chǎn)生漸變效果。語法：background:linear-gradient(direction,color1,color2[stop],color3...);【例2-16】

顏色線性漸變開發(fā)實例樣式2）徑向漸變徑向漸變：指從一個中心點開始沿著四周產(chǎn)生漸變效果。語法：background:radial-gradient(shapesizeatposition,start-color,...,color[stop]...,last-color);【例2-17】徑向漸變開發(fā)實例。樣式2.4.5列表樣式列表是頁面常見的元素，既可以作為直接展示的要素，也可以作為導航或者布局的基礎(chǔ)。列表的樣式主要有項目符號類型、項目符號位置、圖片作為項目符號等屬性。1．項目符號類型（list-style-tpye）在CSS中，不管是有序列表還是無序列表，都統(tǒng)一使用list-style-type屬性來定義列表項符號。語法：list-style-type：disc|circle|square|decimal|…樣式2．圖片作項目符號（list-style-image）不管是有序列表，還是無序列表，都有它們自身的列表項符號。但是默認的列表項符號表現(xiàn)形式單調(diào)，如果想自定義列表項符號，那么在CSS中我們可以使用list-style-image屬性來自定義列表項符號。自定義列表項符號，實際上就是列表項符號改為一張圖片，而引用一張圖片就要給出它的引用路徑。語法：list-style-image：none|URL，其中URL圖片的路徑。3.項目符號位置（list-style-image）list-style-position屬性設(shè)置在何處放置列表項標記。語法：list-style-position：inside|outside.樣式4．列表樣式簡寫list-style）list-style是設(shè)置列表項目相關(guān)內(nèi)容，依次寫出list-style-image，list-style-position，list-style-type的取值，也可只寫其中1個或者2個取值。語法：list-style：[list-style-image]||[list-style-position]||[list-style-type]【例2-19】列表樣式開發(fā)實例樣式2.4.6表格樣式表格作為頁面中展示數(shù)據(jù)的主要元素，表格的樣式直接影響應用程序的界面直觀性和美觀度，表格樣式屬性主要有表格邊框、表格尺寸、表格背景顏色、單元格對齊方式等。1．表格邊框如需在CSS中設(shè)置表格邊框，請使用border屬性。如需給table、th、td等元素設(shè)置邊框，可以通過設(shè)置border屬性來實現(xiàn)。如下邊代碼設(shè)置了邊框：table,th,td{border:1pxsolidblack;}【例2-20】表格邊框設(shè)置開發(fā)實例樣式2．表格尺寸、背景通過width和height屬性定義表格的寬度和高度。這本質(zhì)就是設(shè)置table元素這個盒子的高度和寬度。

border屬性用于設(shè)置表格的邊框顏色，background-color屬性用于設(shè)置單元格內(nèi)的顏色，color屬性用于設(shè)置表格內(nèi)文字的顏色。具體設(shè)置，見本節(jié)最后示例。3．單元格內(nèi)邊距和對齊方式如需控制表格中內(nèi)容與邊框的距離，請為td和th元素設(shè)置padding屬性。text-align和vertical-align屬性設(shè)置表格中文本的對齊方式，text-align屬性設(shè)置水平對齊方式，比如左對齊、右對齊或者居中。具體設(shè)置，見本節(jié)最后示例。4．表格綜合示例為了演示表格的各種屬性設(shè)置，【例2-21】表格的綜合開發(fā)實例樣式2.5定位若希望頁面中各元素在頁面上擺放合理、美觀，且不隨頁面縮放而發(fā)生位置的變化，那么就需要使用到CSS3的定位技術(shù)。2.5.1定位概述CSS使用position屬性和float屬性對元素進行定位，利用這些屬性，可以建立列式布局，將布局的一

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論