了解css技術(shù)基礎(chǔ)之
用css控制樣式
CSS有助于實(shí)現(xiàn)負(fù)責(zé)任的Web設(shè)計(jì)，CSS能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。
CSS樣式一般指CSS（層疊樣式表），層疊樣式表(英文全稱(chēng)：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。
CSS能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。
超鏈接是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的鏈接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同網(wǎng)頁(yè)上的不同位置。還可以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序。在網(wǎng)頁(yè)中能成為超鏈接的元素可以是一段文本或者是一個(gè)圖片。當(dāng)瀏覽者選擇已經(jīng)鏈接的文字或圖片后，鏈接目標(biāo)將顯示在瀏覽器上，并且根據(jù)目標(biāo)的類(lèi)型打開(kāi)或運(yùn)行。
1、改變超鏈接的基本樣式
網(wǎng)頁(yè)上使用的超鏈接通常是文字或者圖片，以下是在網(wǎng)頁(yè)中實(shí)現(xiàn)文字超鏈接和圖片超鏈接的代碼：
< a href ="http://m.bestlifestyleonline.com" >浙江網(wǎng)盛生意寶股份有限公司< /a >
< a href ="" >< img src="picture.jpg" / >< /a>
A:link：設(shè)置超鏈接在未被訪問(wèn)前的樣式
A:active：設(shè)置超鏈接在被用戶激活（在鼠標(biāo)單擊與釋放之間發(fā)生的事件）時(shí)的樣式。
A:vistited：設(shè)置超鏈接在其鏈接地址已被訪問(wèn)過(guò)時(shí)的樣式。
A:hover：設(shè)置超鏈接在其鼠標(biāo)懸停時(shí)的樣式。
分別為超鏈接的每個(gè)狀態(tài)設(shè)置樣式：
A:link{color:green}設(shè)置超鏈接未被訪問(wèn)前文字顏色為綠色
A:vistited{color:orange}設(shè)置超鏈接已訪問(wèn)過(guò)時(shí)文字顏色為橘色
A:hover：{color:blue}設(shè)置超鏈接在其鼠標(biāo)懸停時(shí)文字的顏色為藍(lán)色
A:active：{color:red}設(shè)置超鏈接在被用戶激活時(shí)文字顏色為紅色。
若對(duì)超鏈接的四種狀態(tài)都設(shè)置為同一種樣式，則只需設(shè)置a標(biāo)簽的樣式即可。
A{color:#000000}設(shè)置超鏈接在任何狀態(tài)下都是黑色。
若設(shè)置a標(biāo)簽的css屬性后，再設(shè)置其偽類(lèi)屬性，則可以改寫(xiě)該狀態(tài)下超鏈接的屬性。舉例：
設(shè)置a標(biāo)簽的文字顏色為黑色后，再設(shè)置a：hover的文字顏色為藍(lán)色，則可以使鼠標(biāo)滑過(guò)超鏈接時(shí)，文字為藍(lán)色，其余三個(gè)狀態(tài)仍為黑色。
在默認(rèn)情況下，文字作為超鏈接時(shí)會(huì)帶有下劃線，用于提示該文字可鏈接。若要消除該超鏈接的下劃線，就要將text-decoration屬性設(shè)置為none。
A{text-decoration:none}
2、豐富超鏈接的表現(xiàn)形式
網(wǎng)頁(yè)中的超鏈接往往具有非常豐富的表現(xiàn)形式，綜合應(yīng)用文字和圖片能使超鏈接的樣式產(chǎn)生多種變化。
超鏈接背景圖的巧妙運(yùn)用：為了提高用戶的注意，提高點(diǎn)擊率，在網(wǎng)頁(yè)中的超鏈接常使用一些引人矚目的圖片來(lái)修飾。通常將這些圖片作為背景插入到超鏈接中。
超鏈接翻轉(zhuǎn)效果：除了能給a標(biāo)簽設(shè)置背景圖也能給超鏈接的偽類(lèi)設(shè)置背景圖。若給a:hover設(shè)置背景圖，那么當(dāng)鼠標(biāo)滑過(guò)該超鏈接就能使圖片產(chǎn)生翻轉(zhuǎn)效果。
網(wǎng)頁(yè)中的列表是一個(gè)非常有用的元素。列表通常是帶圓點(diǎn)或者編號(hào)的短句，用于列出條款、說(shuō)明等。列表用于包含內(nèi)容相同或者相近的元素。使用css樣式能改變列表的排列方式、列表符的形式和位置等屬性。使用css樣式設(shè)置列表后，能使列表發(fā)生很多變化。在實(shí)際應(yīng)用中，列表常被用于設(shè)置導(dǎo)航菜單、相冊(cè)和文章標(biāo)題等。列表在制作標(biāo)準(zhǔn)HTML頁(yè)面時(shí)使用頻率非常高。
1、列表的類(lèi)型
?
列表包含三種類(lèi)型，分別是無(wú)序列表、有序列表和定義列表。在實(shí)際運(yùn)用中，常使用無(wú)序列表來(lái)實(shí)現(xiàn)導(dǎo)航和新聞列表的設(shè)置。使用有序列表實(shí)現(xiàn)條文款項(xiàng)的表示。使用定義列表來(lái)制作圖文混排的排版模式。列表對(duì)于制作有于義的HTML文檔非常重要。
無(wú)序列表是指列表為圓點(diǎn)或者其他圖形，而非數(shù)字的列表。無(wú)序列表由< ul >< /ul >標(biāo)簽包含多個(gè)< li >< /li >標(biāo)簽。標(biāo)簽ul的作用是說(shuō)明其包含的列表是無(wú)序的，每組li標(biāo)簽用于包含一個(gè)列表項(xiàng)目。
有序列表是指列表符為數(shù)字的列表。有序列表由< ol >< /ol >標(biāo)簽包含多個(gè)< li >< /li >標(biāo)簽。標(biāo)簽< ol >的作用是說(shuō)明其包含的列表是有序的。每組li標(biāo)簽用于包含一個(gè)列表項(xiàng)目。
定義列表有別于有序列表和無(wú)序列表。定義列表由< dl >< /dl >標(biāo)簽包含< dt >< /dt >和< dd >< /dd >標(biāo)簽。標(biāo)簽< dl >的作用是說(shuō)明其包含的列表是一個(gè)定義列表。標(biāo)簽dt包含的內(nèi)容是一個(gè)概念。標(biāo)簽dd包含的內(nèi)容是該概念的解釋。
2、改變列表符的樣式
?
css中提供了list-style-type、list-style-images、list-style-position屬性來(lái)改變列表符的樣式。由于定義列表在默認(rèn)情況下沒(méi)有列表符。所以上述三個(gè)屬性對(duì)定義列表來(lái)說(shuō)是無(wú)效的。
使用自帶的列表符：有序列表和無(wú)序列表都有默認(rèn)的列表符。Css中的list-style-type屬性中包含多個(gè)值可用于改變默認(rèn)的列表符。以下是使用list-style-type屬性的通用語(yǔ)法：
list-style-type：type
用背景圖片改變列表符：很多網(wǎng)頁(yè)的新聞列表或者文章列表都帶有非常小的列表符。使用css中的list-style-images屬性能將一張小圖片替換默認(rèn)的列表符。
改變列表符的位置：css提供的list-style-position屬性用于改變列表符和列表的相對(duì)位置。該屬性包含兩個(gè)值，分別是inside和outside。默認(rèn)情況下，list-style-position的屬性為outside，這兩個(gè)值分別表示：outside：列表項(xiàng)目標(biāo)記放置在文本外，且環(huán)繞文本不根據(jù)標(biāo)記對(duì)齊。
Inside：列表項(xiàng)目標(biāo)記放置在文本以內(nèi)，且環(huán)繞文本根據(jù)標(biāo)記對(duì)齊。
表單用于網(wǎng)頁(yè)中發(fā)送數(shù)據(jù)。常見(jiàn)的表單應(yīng)用有用戶注冊(cè)、用戶登錄和提交報(bào)名表格等。以前設(shè)計(jì)師通常用表格來(lái)設(shè)計(jì)表單。表單樣式單調(diào)?，F(xiàn)在配合css控制表單元素能制作出樣式外觀非常精美的表單。使用css樣式能控制表單的邊框、背景色和背景圖，適當(dāng)運(yùn)用這些元素能創(chuàng)建出多種樣式的表單。
1、了解表單元素
一個(gè)表單由三個(gè)基本元素組成：第一個(gè)是表單標(biāo)簽< form >< /form >，它包含了處理表單數(shù)據(jù)所用CGI程序的URL以及數(shù)據(jù)提交到副武器的方法；第二個(gè)是表單域，它包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選按鈕、下拉選擇框和文件上傳框等；第三個(gè)是表單按鈕框，它包含提交按鈕、復(fù)位按鈕和一般按鈕，表單按鈕用于將數(shù)據(jù)傳送到服務(wù)器上或者取消輸入。
form標(biāo)簽和fieldset標(biāo)簽：表單標(biāo)簽就是form標(biāo)簽。Form標(biāo)簽的功能是用于申明標(biāo)單，定義采集數(shù)據(jù)范圍，里面包含的數(shù)據(jù)將被提交到副武器或者電子郵件里。通常，網(wǎng)頁(yè)設(shè)計(jì)師會(huì)將form標(biāo)簽作為一個(gè)容器來(lái)安放表單域。但在標(biāo)準(zhǔn)HTML文檔里，應(yīng)該使用語(yǔ)義明晰的< fieldset >< /fieldset >標(biāo)簽來(lái)安放整個(gè)表單。
使用< fieldset >< /fieldset >標(biāo)簽?zāi)軐?duì)表單的相關(guān)信息進(jìn)行分類(lèi)。fieldset標(biāo)簽中可以包含legend標(biāo)簽，用于插入表單的標(biāo)題為表單進(jìn)行分類(lèi)。
表單域和表單按鈕：常用的表單域有文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選按鈕、下拉選擇框和文件上傳框等。
2、使用css美化表單元素
css中沒(méi)有對(duì)表格元素特定的屬性，但是使用css的其他屬性也能夠美化表單元素。
在網(wǎng)頁(yè)中包含大量的文字信息，統(tǒng)稱(chēng)為文本。文本的樣式由文字樣式和段落樣式構(gòu)成。css提供了豐富的屬性來(lái)控制文字樣式和段落樣式。
網(wǎng)頁(yè)制作包括XHTML頁(yè)面和CSS樣式表，Dreamweaver是最常用的網(wǎng)頁(yè)制作軟件，其編輯CSS樣式的能力是Dreamweaver其中的一個(gè)功能。
網(wǎng)盛生意寶，是一家專(zhuān)業(yè)從事互聯(lián)網(wǎng)信息服務(wù)、電子商務(wù)、專(zhuān)業(yè)搜索引擎和企業(yè)應(yīng)用軟件開(kāi)發(fā)的高新企業(yè)。為您提供網(wǎng)站制作服務(wù)。
互聯(lián)網(wǎng)時(shí)代，越來(lái)越多的企業(yè)或個(gè)人選擇擁有自己的網(wǎng)站，網(wǎng)盛是一家專(zhuān)業(yè)從事互聯(lián)網(wǎng)信息服務(wù)、電子商務(wù)、專(zhuān)業(yè)搜索引擎和企業(yè)應(yīng)用軟件開(kāi)發(fā)的高新企業(yè)。
專(zhuān)注服務(wù)于成長(zhǎng)型企業(yè)-互聯(lián)網(wǎng)品牌營(yíng)銷(xiāo)，助力企業(yè)微營(yíng)銷(xiāo)。
多年專(zhuān)注于營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，服務(wù)超過(guò)10萬(wàn)余家企業(yè)。具有價(jià)值的網(wǎng)絡(luò)營(yíng)銷(xiāo)服務(wù)平臺(tái)，專(zhuān)業(yè)為企業(yè)營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、讓您擁有屬于自己的營(yíng)銷(xiāo)型網(wǎng)站。
浙江網(wǎng)盛生意寶股份有限公司（股票代碼：002095，以下簡(jiǎn)稱(chēng)生意寶）是一家專(zhuān)業(yè)從事互聯(lián)網(wǎng)信息服務(wù)、電子商務(wù)、專(zhuān)業(yè)搜索引擎和企業(yè)應(yīng)用軟件開(kāi)發(fā)的高新企業(yè)。公司總部位于“電子商務(wù)之都”杭州，從化工行業(yè)B2B起家，目前已發(fā)展成為國(guó)內(nèi)領(lǐng)先的行業(yè)電子商務(wù)運(yùn)營(yíng)商和綜合B2B運(yùn)營(yíng)商。
