SS3在CSS2基礎上,增強或新增了許多特性, 彌補了CSS2的眾多不足之處,使得Web開發變得更為高效和便捷。
比如說,同樣是一個頭像,可能在低版本的瀏覽器中,頭像方的;在高版本的瀏覽器中,頭像是圓的。
參考鏈接:
由于CSS3普遍存在兼容性問題,為了避免因兼容性帶來的干擾,瀏覽器的建議版本為:
在查看CSS參考手冊時,需要注意以下符號:
比如說,{1,4}表示可以設置一至四個參數。
下面講CSS3的基礎知識。本文講一下 CSS3 選擇器的內容。
我們之前學過 CSS 的選擇器,比如:
``` div 標簽選擇器
.box 類名選擇器
#box id選擇器
div p 后代選擇器
div.box 交集選擇器
div,p,span 并集選擇器
div>p 子代選擇器
* : 通配符
div+p: 選中div后面相鄰的第一個p
div~p: 選中的div后面所有的p
```
CSS3新增了許多靈活查找元素的方法,極大的提高了查找元素的效率和精準度。CSS3選擇器與 jQuery 中所提供的絕大部分選擇器兼容。
屬性選擇器的標志性符號是 []。
匹配含義:
^:開頭 $:結尾 *:包含
格式:
比如說,我們用屬性選擇器去匹配標簽的className,是非常方便的。
這里我們用class屬性來舉例。代碼舉例:
```html <!DOCTYPE html>
CSS3-屬性選擇器
簡介
E[attr]
E[attr~=attr]
E[attr|=attr]
E[attr*=val]
E[attr^=val]
E[attr$=val]
```
最后來張表格:
得小時候剛學電腦時還是使用MS-DOS作業系統,家人幫我買了一本厚重的參考書,里頭收錄所有DOS指令,非常詳盡,而這本書也對我產生不小影響,我知道學習任何東西都必須要有正確的參考手冊,才能夠讓學習過程更全面扎實。雖然網路上有許多教學文件,但礙于篇幅都只能夠以最短捷徑來幫你達到目的,對于一些較為復雜的內容來說,這些快速教學并不能讓你「真正」學會,因此最好還是準備參考手冊。
本文要推薦的「HTML Reference」網站很不一樣,這個線上參考手冊收錄完整HTML語法教學,依照英文字母順序排列,使用者可以很在這里檢索某個HTML標簽詳細使用方法,很多可能不在我們平常會經常使用的范圍(例如一些語法設定方式),但如果你想知道語法要怎么寫才正確,或者想從基礎開始學習HTML程式碼,請記得將這網站加入書簽。
我記得早先在學習制作HTML網頁時也有「首頁制作百寶箱」可以參考,HTML Reference大概就是比較進階、內容較新較全面的首頁百寶箱吧!不僅如此,網站還提供實際范例供使用者參考,也能一鍵點擊快速復制語法,對學習來說絕對大有幫助。雖然HTML語法不是每個人都會碰到,但書到用時方恨少,假如你的工作與它相關,不妨找時間惡補一下。
網站名稱:HTML Reference
網站鏈結:http://htmlreference.io/
使用教學
第一步
HTMLReference.io網站分成幾個部分,最上方Collections收錄一些主題,包括常用的基本元素、表單、列表、HTML5語意標簽(Semantic)和表格,中間有個搜尋功能可快速查詢你要找的語法,最重要的就是底下依照英文開頭排序的所有HTML語法,點擊可開啟詳細介紹。
第二步
Collection 會依照語法類別個別匯整,例如說到表單就會用到form、input、textarea、button 這些標簽語法,相信大家不陌生,但你可能不知道每個語法有這么多種數值可以設定,這個網站最好的地方就在于它會把所有可以使用的設定參數列出來,并提供你實際使用范例和說明。
如果你已經開始使用HTML5,對于一些語意標簽應該不陌生,HTML Reference 也將這些標簽說明及范例列在 Semantic Collection。
第三步
回到HTML Reference 首頁,前面有提到首頁列出所有HTML 語法標簽,依照字母排列,當然使用者也能透過搜尋功能來快速查找,例如下圖是a 也就是超鏈結語法的使用教學,可以看到目標鏈結(href)參數是必須,網站還列出幾種不同的寫法和用法。
比較可惜的是網站目前只有提供英文版,可能要有一些基礎的英文能力才能比較容易理解,但按照網站編排方式,就算沒有看說明應該也能從范例略知一二。
第四步
HTML Reference網站提供的范例、語法都能快速一鍵復制,只要把滑鼠游標移動上去,點選后就能自動復制,非常方便!記得以前在學習寫網頁時都要去手動復制參考資料上的范例或語法教學,不但很浪費時間,還必須注意有沒有弄錯段落,在這里就不會遇到相同問題。
nicode 聯盟(Unicode Consortium)
Unicode 聯盟(Unicode Consortium)開發了 Unicode 標準(Unicode Standard)。他們的目標是使用標準的 Unicode 轉換格式(即 UTF,全稱 Unicode Transformation Format)取代現有的字符集。
Unicode 標準是一個成功的創舉,在 HTML、XML、Java、JavaScript、E-mail、ASP、PHP 中都得到實現。Unicode 標準也得到許多操作系統和所有現代瀏覽器的支持。
Unicode 聯盟與領先的標準開發組織合作,這些組織有 ISO、W3C 和 ECMA。
Unicode 字符集
Unicode 可以由不同的字符集實現。最常用的編碼是 UTF-8 和 UTF-16:
字符集 | 描述 |
---|---|
UTF-8 | UTF8 中的字符可以是 1 到 4 字節長。UTF-8 可以代表 Unicode 標準中的任何字符。UTF-8 向后兼容 ASCII。UTF-8 是電子郵件和網頁的首選編碼。 |
UTF-16 | 16 位 Unicode 轉換格式是一種可變長度的 Unicode 字符編碼,能夠編碼整個 Unicode 指令表。UTF-16 主要用于操作系統和環境,如 Microsoft Windows、Java 和 .NET。 |
提示:Unicode 的前 128 個字符(與 ASCII 一一對應)使用一個與 ASCII二進制值相同的八位組進行編碼,使有效的 ASCII 文本在進行 UTF-8 編碼時也是有效的。
提示:所有的 HTML 4 處理器支持 UTF-8,所有的 HTML 5 和 XML 處理器支持 UTF-8 和 UTF-16!
HTML5 標準:Unicode UTF-8
因為 ISO-8859 中字符集大小是有限的,且在多語言環境中不兼容,所以 Unicode 聯盟開發了 Unicode 標準。
Unicode 標準覆蓋了(幾乎)所有的字符、標點符號和符號。
Unicode 使文本的處理、存儲和運輸,獨立于平臺和語言。
HTML-5 中默認的字符編碼是 UTF-8。
下面列出了一些 HTML5 支持的 UTF-8 字符集:
字符集 | 十進制 | 十六進制 |
---|---|---|
C0 控制與基本的 Latin(C0 Controls and Basic Latin) | 0-127 | 0000-007F |
C1 控制與 Latin-1 的補充(C1 Controls and Latin-1 Supplement) | 128-255 | 0080-00FF |
Latin 擴展 A(Latin Extended-A) | 256-383 | 0100-017F |
Latin 擴展 B(Latin Extended-B) | 384-591 | 0180-024F |
如果 HTML5 網頁使用不同于 UTF-8 的字符,則需要在 <meta> 標簽中指定,如下:
實例
<meta charset="ISO-8859-1">
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。