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