web前端核心--css3初篇

CSS3概述:

CSS是一種網頁控制技術,全稱(Cascading Style Sheet,層疊樣式表)採用CSS技術,可以有效地對頁面佈局、字體、顏色、背景和其他效果實現更加精準的控制。網頁最初是用HTML標籤定義頁面文檔及格式的,如標題標籤<h1>、段落標籤<p>等,但是這些標籤無法滿足更多的文檔樣式需求。爲了解決這個問題W3C在1997年頒佈HTML4標準的同時,同時公佈了CSS。目前,被廣泛使用CSS3版本。

CSS3的主要新特性:

1. 功能強大的選擇器:

選擇器是CSS3中一個重要的內容,使用它可以大幅度開發人員書寫或修改樣式時的工作效率。選擇器的使用可以避 免在標籤添加大量的class和id屬性,並且可以讓設計師更方便地維護樣式表。CSS3的選擇器不必使用多餘的類、id或者JavaScript的腳本。

2. 半透明效果的實現:

RGBA和HSLA不僅可以設定色彩,還能設定元素的透明度。另外,還可以使用opacity屬性定義元素的不透明度。

3.多欄佈局

在CSS3讓網頁設計師不必使用多個<div>標籤就能實現多欄佈局。瀏覽器能解決多欄佈局屬性並生成多欄,讓文本實現紙質的多欄結構。

4. 多背景圖

CSS3允許背景屬性設置多個屬性,如background-image、background-repea、background-size、background-position 、background-originand、background-clip.等,這樣就可以在一個元素上添加多層背景圖片。如果要設計複雜的網頁效果(如圓角、背景重疊等),就不再用爲HTML文檔添加多個無用的標籤了,使用改屬性還可以優化網頁文檔結構。

5. 文字陰影

text-shadow在css2中就已經存在,但並沒有被廣泛應用。CSS3採用了改特性,並重新進行了定義。改屬性提供了一種的、跨瀏覽器的方案使文字看起來更醒目。

6.開放字體類型

@font-face是最被期待的CSS3特性之一。它在CSS2中就已經被引入了,但是它在網站上仍然沒有像其他CSS3屬性那樣被廣泛普及,這主要受阻於授權和版權問題,潛入的字體很容易從網站上下載到,這是字體廠商的主要顧慮。

7.圓角邊框

border-radius屬性可以實現不使用背景圖片也能給HTML元素添加圓角。它可能是現在使用最多的CSS3屬性。改屬性之所以這麼受歡迎,主要是因爲使用比較美觀,而且不會與設計和可用性產生衝突。它不同於添加JavaScript或多個HTML標籤,僅需添加一些CSS屬性。這個方案簡潔而有效,可以讓開發人員免於花費更多的時間來尋找精巧的瀏覽器方案和基於JavaScript的圓角。

8. 邊框圖片

border-image屬性允許在元素的邊框上設定圖片,這使得原本單調的邊框樣式變得豐富起來。改屬性給設計師提供了一個很好的工具,使用它可以方便地定義和設計元素邊框樣式,比background-image屬性和一些乾燥的默認邊框樣式更好用。有了border-image屬性以後,可以明確地定義一個邊框應該如何縮放或平鋪。

9.盒子陰影

box-shadow屬性可以爲HTML元素添加陰影而不需要使用額外的標籤或背景圖片。

10. 媒體查詢

在CSS3中加入Media Queries 模板,在改模板中允許添加媒體查詢表達式,用以指定媒體類型,然後根據媒體類型來選擇應該使用的樣式。簡單地來說,就是允許在不改變內容的情況下,在樣式表中選擇一種頁面的佈局以精確地適合不同的設備,從而改善用戶體驗。

最常用的css語法格式是css文件鏈接到HTML文件。
在HTML頁面的<head>標籤中添加如下代碼:

<link href="css/stylesheet.css"type="text/css" rel="stylesheet">

其中href爲CSS文件的地址,type表示所鏈接文件的類型,rel表示所鏈接文件與改HTML文件的關係。type和rel屬於的屬性值是不需要用戶改變的。上面鏈接css文件必須寫在<head></head>標籤之間。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章