ML簡介與CSS3樣式表

XML簡介

成都創(chuàng)新互聯(lián)擁有十余年的建站服務經(jīng)驗,在此期間,我們發(fā)現(xiàn)較多的客戶在挑選建站服務商前都非常的猶豫。主要問題集中:在無法預知自己的網(wǎng)站呈現(xiàn)的效果是什么樣的?也無法判斷選擇的服務商設計出來的網(wǎng)頁效果自己是否會滿意?成都創(chuàng)新互聯(lián)業(yè)務涵蓋了互聯(lián)網(wǎng)平臺網(wǎng)站建設、移動平臺網(wǎng)站制作、網(wǎng)絡推廣、按需定制開發(fā)等服務。成都創(chuàng)新互聯(lián)網(wǎng)站開發(fā)公司本著不拘一格的網(wǎng)站視覺設計和網(wǎng)站開發(fā)技術相結合,為企業(yè)做網(wǎng)站提供成熟的網(wǎng)站設計方案。

XML是由W3C于1998年2月發(fā)布的一種可擴標記語言,是一種用于標記數(shù)據(jù)文件使其具有結構性的標記語言,它被設計用來傳輸和存儲數(shù)據(jù)。在電子計算機中,標記指計算機所能理解的信息符號,通過此種標記,計算機之間可以處理包含各種的信息比如文章等。它可以用來標記數(shù)據(jù)、定義數(shù)據(jù)類型,是一種允許用戶對自己的標記語言進行定義的源語言。它非常適合互聯(lián)網(wǎng)傳輸,提供統(tǒng)一的方法來描述和交換獨立于應用程序或供應商的結構化數(shù)據(jù),使用XML也可以簡化互聯(lián)網(wǎng)的文檔信息傳輸。

XML在語法方面和HTML是一樣的,和HTML不同的是XML是設計用來傳輸和存儲數(shù)據(jù),而HTML是設計用來顯示數(shù)據(jù),它們都是標準通用標記語言的子集。XML的標簽是沒有預先定義的,需要自己自行定義標簽,所以才被稱為可擴展標記語言。

在XML發(fā)布后同年的8月18日,W3C發(fā)布了XSLT的草案,1999年11月16日則正式發(fā)布XSLT1.0推薦版本。XSMLT是eXtensibleStylesheetLanguageTransformation(擴展樣式表轉(zhuǎn)換語言)的縮寫。

XSMLT主要是用于將XML文檔轉(zhuǎn)換成可以被瀏覽器解析的文檔,例如HTML、XHTML。轉(zhuǎn)換成瀏覽器解析的文檔之后能讓我們更加直觀地在瀏覽器頁面上查看XML文檔的數(shù)據(jù),并且能使用CSS增加樣式效果,例如:

ML簡介與CSS3樣式表

這樣使用XSMLT轉(zhuǎn)換后要比起直接閱讀XML文檔要更加清晰直觀,這就是XSMLT主要的作用。

但是現(xiàn)在XSMLT已經(jīng)很少使用了,幾乎淘汰了,而且XML也由于過于笨重,在一些需要輕量級的數(shù)據(jù)傳輸方面也逐漸比較少使用了,但是XML目前仍在一些數(shù)據(jù)結構復雜的情況下使用。

文檔結構定義DTD  and  Schema介紹:

DTD:

文檔類型定義(Document Type Definition)是一套為了進行程序間的數(shù)據(jù)交換而建立的關于標記符的語法規(guī)則。它是標準通用標記語言和可擴展標記語言1.0版規(guī)格的一部分,文檔可根據(jù)某種DTD語法規(guī)則驗證格式是否符合此規(guī)則。文檔類型定義也可用做保證標準通用標記語言、可擴展標記語言文檔格式的合法性,可通過比較文檔和文檔類型定義文件來檢查文檔是否符合規(guī)范,元素和標簽使用是否正確。文件實例提供應用程序一個數(shù)據(jù)交換的格式。使用各類文檔類型定義是為了讓標準通用標記語言、可擴展標記語言文件能符合規(guī)定的數(shù)據(jù)交換標準,因為這樣,不同的公司只需定義好標準文檔類型定義,就都能依文檔類型定義建立文檔實例,并且進行驗證,如此就可以輕易交換數(shù)據(jù),防止了實例數(shù)據(jù)定義不同等原因造成的數(shù)據(jù)交換障礙,滿足了網(wǎng)絡共享和數(shù)據(jù)交互。

ML簡介與CSS3樣式表

內(nèi)部聲明代碼示例:

ML簡介與CSS3樣式表

外部聲明代碼示例:

ML簡介與CSS3樣式表

HTML里面開頭的DOCTYPE就是引入了一個文檔類型定義文檔:

ML簡介與CSS3樣式表

Schema:

Schema是基于XML的DTD代替者,Schema是更加地嚴格的文檔結構定義。Schem是2001年5月2日成為W3C標準,Schem要更加完善功能也更加強大,也就是類似于DTD的一個升級版。

ML簡介與CSS3樣式表

思維導圖:

ML簡介與CSS3樣式表

CSS3樣式表

CSS3簡介:

CSS3是CSS技術的升級版本,CSS3語言開發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個模塊實在是太龐大而且比較復雜,所以,把它分解為一些小的模塊,更多新的模塊也被加入進來。這些模塊包括: 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等。

CSS3完全向后兼容,所以沒有必要修改的設計來讓它們繼續(xù)運作。網(wǎng)絡瀏覽器也還將繼續(xù)支持CSS2。CSS3主要的影響是將可以使用新的可用的選擇器和屬性,這些會允許實現(xiàn)新的設計效果(譬如動態(tài)和漸變),而且可以很簡單的設計出現(xiàn)在的設計效果(比如說使用分欄)。

ML簡介與CSS3樣式表

樣式在HTML中的書寫方式:

樣式有三種書寫方式,第一種是直接在style屬性上寫,style里有很多的樣式子屬性,不同的字屬性使用分號分開,示例:

ML簡介與CSS3樣式表

運行結果:

ML簡介與CSS3樣式表

這種寫法適合用于個別標簽需要單獨樣式的情況下,如果好幾個標簽都需要同樣的樣式的話,使用這種寫法就會導致很多重復的代碼,不利于網(wǎng)頁的優(yōu)化,所以第二種寫法就是在<style>標簽里聲明樣式屬性,之后只要是該樣式里定義的標簽就會統(tǒng)一使用<style>里聲明的樣式,示例:

ML簡介與CSS3樣式表

運行結果:

ML簡介與CSS3樣式表

第三種寫法是在css文件里聲明樣式,這種方式好處是可以共享更多的網(wǎng)頁,因為只需要使用<link>標簽引用這個文件就可以使用文件里聲明的樣式了。示例:

創(chuàng)建一個后綴為.css的文件,將樣式屬性的聲明寫在文件里:

ML簡介與CSS3樣式表

然后在HTML文件里使用<link>標簽引用這個文件:

ML簡介與CSS3樣式表

運行結果:

ML簡介與CSS3樣式表

思維導圖:

ML簡介與CSS3樣式表

樣式選擇器:

并不是所有的標簽都需要使用同一個樣式,而且不是全部標簽都得使用樣式,那么同樣的標簽要使用不同的樣式就需要使用到樣式選擇器了。

在這里介紹幾種較為常用的樣式選擇器:

  1. element選擇器,直接寫標簽的名稱,也就是上面使用的那種方式,示例:

ML簡介與CSS3樣式表

運行結果:

ML簡介與CSS3樣式表

  1. .class選擇器,要使用這個選擇器的標簽需要使用class屬性引用這個選擇器的名稱,也叫做類樣式,示例:

ML簡介與CSS3樣式表

運行結果,只有使用class屬性引用了選擇器的標簽才會使用這個選擇器里的樣式,這些選擇器都可以寫在css文件里:

ML簡介與CSS3樣式表

  1. #id選擇器,要使用這個選擇器的標簽需要使用id屬性來引用這個選擇器的名稱,示例:

ML簡介與CSS3樣式表

運行結果:

ML簡介與CSS3樣式表

在這里要說明一下.class選擇器與#id選擇器的區(qū)別:id是唯一的是不可重復的,一個頁面只可以使用一次,class則可以多次引用,一個頁面內(nèi)可以使用多次。雖然你重復地使用#id選擇器瀏覽器也可以正常解析,有些IDE也不會報語法錯誤,但是當你需要用JavaScript通過id來控制div時就會出現(xiàn)錯誤。

id相當于是一個唯一的標識,用于區(qū)分不同的結構和內(nèi)容,就象×××或名字,如果一個屋子有2個人同名,就會出現(xiàn)混淆。class則是一個樣式,可以套在任何結構和內(nèi)容上,就象一件衣服。

所以從概念上說就是不一樣的:id是先找到結構/內(nèi)容,再給它定義樣式;class是先定義好一種樣式,再套給多個結構/內(nèi)容。

當我們使用#id選擇器時,應當遵循規(guī)范的語法不重復地去使用,要明白這兩個選擇器的區(qū)別。

錯誤寫法示例:

ML簡介與CSS3樣式表

運行結果:

ML簡介與CSS3樣式表

  1. *選擇器,這個選擇器表示給所有的標簽都加上這個選擇器里的樣式:

ML簡介與CSS3樣式表

運行結果:

ML簡介與CSS3樣式表

  1. element,element選擇器,使用逗號隔開可以給多個標簽定義樣式,示例:

ML簡介與CSS3樣式表

運行結果:

ML簡介與CSS3樣式表

  1. element element選擇器,例如div p,選擇給div內(nèi)部所有的p標簽定義樣式,示例:

ML簡介與CSS3樣式表

運行結果:

ML簡介與CSS3樣式表

  1. element+element選擇器,例如div+p,選擇緊接著在div標簽后的那個p標簽(僅第一個有效),示例:

ML簡介與CSS3樣式表

運行結果:

ML簡介與CSS3樣式表

  1. [attribute]選擇器,[]里寫屬性名稱,例如[title],只要寫有括號里定義的屬性名稱就會使用此選擇器的樣式,示例:

ML簡介與CSS3樣式表

運行結果:

ML簡介與CSS3樣式表

這個選擇器也可以自己定義屬性的名稱,不一定要使用html里的屬性名稱,只要標簽里的屬性名稱和選擇器上定義的屬性名稱相同就可以了,示例:

ML簡介與CSS3樣式表

運行結果:

ML簡介與CSS3樣式表

  1. [attribute=value]選擇器,只要標簽里屬性的名稱與值和選擇器里定義的屬性名稱和值相同,就會使用這個選擇器里的樣式,示例:

ML簡介與CSS3樣式表

運行結果:

ML簡介與CSS3樣式表

思維導圖:

ML簡介與CSS3樣式表

CSS3選擇器參考:

ML簡介與CSS3樣式表

ML簡介與CSS3樣式表

新聞名稱:ML簡介與CSS3樣式表
本文地址:http://www.muchs.cn/article34/gjgppe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供營銷型網(wǎng)站建設云服務器、微信公眾號品牌網(wǎng)站設計、搜索引擎優(yōu)化網(wǎng)站策劃

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

手機網(wǎng)站建設