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