css進階學習 選擇符_基礎教程

來源:腳本之家  責任編輯:小易  

一、“無”的哲學佛家講究“因果報應”,有果必有應。此段看似與主題沒有血緣關系,實際講的是“因”。我個人比較喜歡老子的道家思想,并喜歡以其思想解釋學習與工作中遇到的一些問題。例如我之前寫過的“中國古代道家思想與網頁重構的思考”一文。老子有云:“天下萬物生于有,有生于無”。具體解釋就是:天下萬物都是由看得見的具體事物(“有”)產生的,而看得見的具體事物(“有”)又是由看不見的,無形無狀的東西(“無”)產生的,這個看不見的“無”也就是“道”,或叫做“根”、“母”。我們看武俠片,經常聽到“無招勝有招”這句話,這也是道家“無”之思想之體現。因為你心中沒有招式,你才能有無限的可能,生成其他的招式以克敵,即所謂以不變應萬變;相反,如果你心中牢記一套“華山劍法”,當你與人交手時,勢必按照此套路走,要是遇到相克之劍法,結局就是一敗涂地!盁o招”是一種境界,是你功夫修煉到一定程度才能領悟到的。我們這代人應該都看過李連杰主演的《倚天屠龍記魔教教主》,其中張三豐老頭教完張無忌太極拳后問他“記住了沒?張無忌一句“全忘記了!讓人印象深刻。這就是“無”的境界。這種境界我是深有體會的。例如每逢大考之前,我總是把以前做過的題目全部忘掉,這樣,考試時就能思如泉涌;反而是強記題目的做法限制了發揮。這就好比發射炮彈,炮管里提前預裝了重型炸蛋,結果戰斗開始時,發現需要的是煙霧彈,此時,反而被預裝的炸蛋給阻塞限制了。打籃球也有這種體會,如果心中記得的是動作,我要這么走,然后這么做,往往表現不佳。反而是腦中什么想法也沒有,全靠下意識行動,那真是所向披靡,得分如探囊取物?梢,要想發揮更大,就需要“無”,把一些“限制的東西”通通去掉。沒有限制才能發揮出最大的潛能。站在最簡單,最原始的那個點上,你才能自由馳騁,應變自如。二、名字的本質是什么我們有沒有思考過這么一個問題:名字的本質是什么?這個問題其實不難,名字本質上就是一個符號,用來區分人與人的。與符號一樣,名字本身就蘊含著很多的信息。舉個例子,我的名字:張鑫旭。其中蘊含的信息有:我老爸也姓張,我是上午太陽剛剛升起的時候出生的,我五行缺金。一個名字,如果其蘊含的信息越多,則這個名字就越獨特,也就是說,越不可能被別人使用;相反如果這個名字很普通,例如李娜、張艷之類,就會被大規模的重用,OK,這其實沒什么大不了的,我們的唯一身份標識不是名字,而是身份證,但是,對于CSS樣式的命名,沖突與否可不是拉便便,擦個屁股就沒事的。對于CSS,為了避免樣式沖突,我們總會給其賦予相當特殊的命名,或是在選擇符上添加HTML標記,或是使用層級。所謂一朝怕蛇咬,十年怕井繩。一旦我們經歷過樣式沖突帶來的讓人吐血的麻煩后,我們可能就會時時在避免沖突上狠做文章,所謂過猶不及,結果又是一個爛攤子,本如花似玉的黃花小閨女變成個臃腫的肥妞。例如下面人人網的CSS命名:我想我們都希望寫出精簡高效的CSS代碼,如果CSS重用性越高,想必就越高效。這如人的名字一樣,如果名字越普通,越沒有含義,越容易被重用,所以CSS要想重用性高,就需要命名簡單。但是,簡單的命名越容易造成樣式沖突,例如.more{}。從這點上來說,重用性與樣式沖突時兩個對立的矛盾體。不過,萬幸的是,這種矛盾并不是不可調和的。記住一些準則/方法,CSS既可以有高度的重用性,又不會有樣式沖突的困擾。下面就將介紹這些命名方法。三、面向屬性的命名方法我們習慣在CSS命名的時候摻雜語義,這樣可以讓代碼更易懂。例如淘寶首頁“免費注冊”按鈕上的class名稱:help-guest-regist上面的class命名語義就很明顯,獨眼龍看告示—一目了然,”help-guest-regist”就是”幫助-顧客-很nice,很人性化的命名。作為在單一的首頁上使用,我是很難挑出什么毛病來的。但是,從道家“無”的哲學思想來看,語義其實是對自身的一種束縛,越是語義強烈的命名越是沒有重用性(尤其是內容語義的)。舉個實際點的例子,例如人人網的右側邊欄的標題:/zxx:一般找這類反例我就喜歡找人人網還有新浪,基本上一找一個準。人人網雖然外表長得跟facebook類似,但是就CSS而言,差距不是一兩個檔次的。這個標題的class名是”side-item-header”,樣式如下圖所示:現在一切ok,現在設想下,如果頁面中間的模塊有個標題,其樣式也是:{padding:0 0 8px;text-align:right;}那你發現前面已經有一模一樣的CSS樣式后,你會怎么辦。把中間的標題也用”side-item-header”這個class嗎?這里”side”就是表示“邊”的意思,這就意味著這個樣式用在非側邊欄就是不合理的。你能做的估計即使新命名一個class,就像是”body-item-header”,明明是同樣的CSS屬性,結果卻不能重用(即使使用標識符組合并CSS,這里的命名也是沒有重用的)?梢娒缓侠頃蟠笙拗颇愕腃SS重用性。如何命名才能讓CSS發揮最大的重用性潛力呢?答案就是“面向屬性的命名”。這種命名就是要讓你把頁面啊設計啊什么的通通塞到馬桶里沖走,不要管頁面什么位置,什么內容,there is noting,這兒什么都沒有,既然什么都沒有,也就沒有了任何限制,于是CSS可以自由出入于任何地方,無限重用,而且不用擔心沖突,因為“面向屬性的命名”就是針對自身屬性的一種命名方式,只會overwrite,不會沖突。相比很多同行都用過這樣的命名方式,只是不夠系統,不夠大膽、徹底,多淺嘗輒止,比如像是開心網,還有時光網的CSS代碼的前面一部分樣式命名:我在“CSS樣式分離之再分離”一文中就展示過這種命名了,分離為什么可以讓樣式的重用性放大至最大,就是因為分離后樣式的命名就是樣式本身。就拿上面人人網的標題樣式舉例,人人網的做法是:side-item-header{padding:0 0 8px;text-align:right;}要是我,我會對其進行分離。在實際項目時,text-align:right;這個屬性早就在CSS通用樣式庫里面了,而padding:0 0 8px;則會以padding-bottom:8px;的形式放在網站通用樣式庫里了(詳細請參見我的“我是如何對網站CSS進行架構的”一文)。最后,CSS命名與樣式會如下:tr{text-align:right;}pb8{padding-bottom:8px;}而這里分離出來的樣式又可以被其他地方使用。是不是有點“吸星大法”的感覺。當然,如果網站本身的架構不是對每個側欄內容進行模塊化處理的話,說實話,這里標題的分離還是有點危險的。想想看,如果那天產品經理說底部padding值要改成10像素,啊哦,如果你的網站架構不合理,含這類標題的模塊到處塞,會改到你急火攻心,吐血三升而亡的。所以,對于分離,我反復強調,“千萬不要對網站通用的元素進行分離”。所以,記住精簡高效的CSS命名準則之一:對于網站非通用元素,如果樣式簡單(1~2個屬性),對其分離并使用面向屬性的命名方法。四、精簡高效CSS命名之“三無原則”此“三無原則”就是:無ID,無層級,無標簽CSS命名就應該最簡單、最直接,直搗黃龍。沒有HTML標簽,沒有層級,這些通通滾蛋,不要。為什么不要,有三大原因:1.限制重用我們會使用層級(#test.test),會使用標簽(ul.test),可能是習慣(沒多想),或是為了避免沖突。但是,我跟你說,從今以后,這種寫法讓他見鬼去吧(如果不是為了改變CSS優先級的話)。正如開篇論述的哲學觀點,你限制越多,越抑制了CSS的重用性。例如#test.test{}這種寫法,里面的CSS重用性多大,完全限死在了id為test的元素下,哪有重用性可言;又如ul.test,我勒個去,這個ul標簽十有八九就是裝飾用的,往這兒一放,同樣CSS樣式的div標簽可以用嗎?哭爹喊娘,眼淚汪汪也不管用啊。所以,相信我,層級啊,標簽啊什么的,通通見鬼去吧。要知道,層級啊,標簽啊作用是什么,是用來提高CSS優先級,把那個字母長的讓人發毛的”!important”干掉的。2.CSS文件大小這瓜子雖小,吃多了也是可以填飽肚子的。所以,你的CSS名稱不要像老太太的裹腳布一樣,搞得又臭又長,如下圖所示的人人網那個冗長的CSS命名吧:你看名稱的字節數已經比屬性還大了,要是這些名稱都在15字符以內,乖乖,這個CSS文件可以小個1~2K絕對沒有問題的。你看下圖這樣子的命名,這樣子的CSS排版是不是更舒服,更簡潔。3.降低了渲染效率來個例子考考大家(以后我面試別人可能就會考這題),HTML如下:ul>現在要給這里的ul標簽一個樣式,比如說padding-left:25px;那么下面四種寫法哪個渲染速度最快?test.test{},ul.test{},#test ul{} 以及.test{}。如果單純的ul與.test PK,我還真拿不定誰的渲染速度更快些。但是,一旦牽扯到層級與標簽,我100%確定,.test這種最直接的命名方式渲染效率是最高的。要知道,CSS渲染元素和使用JavaScript獲取頁面元素那是完全不一樣的。如果是使用JavaScript獲取DOM元素,則#test ul{}速度是最快的,先id獲取,再tag獲取,這些可都是JavaScript內置的方法。但是,CSS的渲染方式則是屬于外太空系的了,《高性能網站進階指南》一書曾提到CSS的渲染方式是“從右往左”渲染的,就拿#test ul{}舉例,先渲染頁面上所有的ul標簽,再去尋找id為test的元素,所以,出現#test div{}這種寫法的人都是傻×的,頁面先渲染id為test的元素?非也!先渲染頁面上所有的div,再去尋找其老爸有沒有id為test的元素。由于這種渲染差異最大就200~300毫秒(補充:這里的差異不是說單純一個樣式的差異,而是這些寫法泛濫的頁面的全部渲染,其渲染差異數據可以參見“翻譯-不同CSS技術及其CSS性能”一文),我們人一般是感覺不到的。所以,長久以來,也都不以為然。但是,我是絕對容不下這種寫法的,還有,要是讓我看到類似于ul#test{}這樣子的命名,不好意思,面試肯定過不了。所以,CSS命名,只要出現了層級,出現了標簽,就是一次額外的渲染,層級越多,渲染的開銷也就越大,這就是為什么一些前輩的文章會建議要盡量避免過深的層級。這也是為什么要“無層級”,“無標簽”。對于原則第一條“無ID”,其實與性能沒有多大關系,只是一般ID都與JavaScript有奸情,如果再..www.anxorj.tw防采集請勿采集本網。

在我最早開始寫css的時候,其代碼上的高自由度就一直很令我困惑。這就是說,同一個設計,如果讓不同的人來實現,最終的代碼一定是有差異的。但這存在一個問題,如果不同的人通過不同的方法以及代碼風格,都從外觀上實現了一樣的設計,將很難評價誰做得更好。想來也是,既然都實現了設計,達到了目的,css這種沒有程序邏輯的代碼中,又能找出什么來說明誰做得更出色呢?

即:以師德為核心開展教育,努力使學生達到本科層次學術水平和小學教師的專業化水平,具備教育能力、教學能力、組織管理能力、活動指導能力、教學研究能力、學習發展能力,和講、寫、算、創、教、用、作、

而如今,我認同的觀念是,css這種描述性語言,仍然有著代碼上的質量評判。評判標準就是可維護性(Maintainability)和性能(Performance),用比較通俗的話說,好的css,要對開發者的工作友好(dev-friendly),也要對瀏覽器友好(browser-friendly)。 本文將說明如何從css選擇符的角度來提高css代碼質量。

吉他的學習是一個系統的,長期的過程,重要的是從基礎學習,并且要懂得堅持,具體方法如下: 1、按53231323的撥弦順序練習,堅持每天練習,不能中途而廢。2、學習一些基本的樂理知識,把每天需要

關鍵選擇符與瀏覽器的樣式規則匹配原理

HTML5本身就包含了HTML與CSS,它是一個技術的統稱。HTML5包含“HTML、CSS、JS”,比較推薦使用《HTML5布局之路》進行學習,入門HTML與CSS會快很多,這本書上的東西也能夠解決你的第2~4點問題 第

css選擇符的概念,在之前的新手學習css優先級的開頭部分也有提到,是指每一條樣式規則中,描述把樣式作用到哪些元素的部分,也即{}之前的部分。在本文,還要額外介紹一個概念:關鍵選擇符(Key selector)。關鍵選擇符就是在每一條樣式規則起始的{之前的最后一個選擇符,如下圖:

1、教育的基本規律有兩條,一條反映的是社會發展與教育的辯證關系,另一條反映的是人的發展與教育的辯證關系。2、教育,教化培育,以現有的經驗、學識推敲于人,為其解釋各種現象、問題或行為,

css選擇符將確定后面的屬性定義要作用到哪些元素,因此存在一個瀏覽器根據css選擇符來應用樣式到對應元素的匹配過程。關于瀏覽器的樣式匹配系統,David Hyatt在Writing Efficient CSS for use in the Mozilla UI一文中提到了以下內容:

許多有趣的問題都能得到解釋鑒于關注這個話題的盆友增多,在此增加幾本進階類的書籍供大家選擇(5)《發展心理學》有兩本書都蠻不錯(a.發展心理學(豆瓣))(b.發展心理學(豆瓣))(6)《人格心理學》

The style system matches a rule by starting with the rightmost selector and moving to the left through the rule's selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch.

意思是說,瀏覽器引擎在樣式匹配時,以從右向左的順序進行。在具體匹配某一條樣式規則時,這個從右向左的過程會一直持續,直到讀取完整個選擇符序列并完成匹配,或因某一個地方的不匹配而取消(然后轉到另一條樣式規則)。

至于為什么瀏覽器會選擇這樣的匹配順序,你可以看看Stack Overflow上的相關討論。大致上解釋一下的話,由于最右邊的關鍵選擇符直接表示了樣式定義應作用的元素,所以從右向左的順序更利于瀏覽器在初始匹配的時候就確定有樣式定義的元素集合,并更快地在找某一個元素的樣式時避開大多數實際沒有作用到的選擇符。

更好的css選擇符,是讓瀏覽器在樣式匹配過程中減少匹配查詢次數,以更快的速度完成樣式匹配,從而優化前端性能。這其中,也必須參考瀏覽器的對于樣式從右向左的匹配順序。

css選擇符的正確使用方式更特定

更具體的關鍵選擇符

關鍵選擇符是瀏覽器引擎在樣式匹配時最先讀取到的部分,因此,如果你在某一條樣式規則中使用更特定、具體的選擇符,可以幫助減少瀏覽器的查找匹配次數。

比如說下邊這樣的選擇符:

.content .note span{}

最后一個span是關鍵選擇符,而span這個標簽,在網頁中使用是非常多的。瀏覽器從span開始讀取選擇符,就可能會為因此在樣式匹配上做了一些額外工作。

如果你確定只是想為具體處于那一個位置的span元素定義樣式,更好的做法是為span命名class,比如命名為span.note_text,然后簡單寫為:

.note_text{}

使用class選擇符

class選擇符(類選擇符)是最利于性能優化的選擇符。相對于class,ID的缺點是只允許定義給一個元素,無法重用。而此外,它在使用上沒有任何比class更好的地方。很多時候,你很難確定某一個元素是否是唯一的。另外,使用class來定義樣式,而保留ID給javascript,一直是一個較好的實踐。如果可以,不使用ID來定義樣式。

而相對于class,標簽在html中的重復性要更大,因此同樣可能讓瀏覽器在樣式匹配時做更多的額外工作。如果可以,除css樣式清零(reset)外,不使用標簽選擇符(也叫元素選擇符)。

縮短選擇符序列

繼承寫法(準確地說,這里指css關系選擇符中的包含選擇符)是css中很常用的寫法。繼承寫法的初衷是,如果有兩個元素,都是同樣的標簽或有相同的class命名,加入父元素的選擇符組成選擇符序列,就可以避免在不需要的時候兩個元素的樣式互相影響。比如.confirm_layer .submit_btn就是指,class名為submit_btn,且有一個class名為confirm_layer的父元素的元素,才應用樣式。

但是,避免元素樣式相互影響,并不代表可以隨意地使用繼承選擇符。前面提到,瀏覽器會從右向左讀取整個選擇符序列,直到讀取完畢并匹配完成,或者因不匹配而取消。因此,短的選擇符序列更有利于瀏覽器更快地完成匹配過程。相對的,冗長的選擇符序列則認為是低效的,比如:

.header ul li .nav_link{}

建議寫為:

.header .nav_link{}

一般來說,不超過3層的繼承層級就可以滿足實際中的開發要求。因此,應減少不必要的繼承層級,使用更短的選擇符序列。

此外,較長的選擇符序列還有一個問題。有較長選擇符的樣式規則,css優先級的計算值也較大,因此,如果在以后需要寫新的樣式來覆蓋掉它,就需要寫更長的選擇符(或者使用ID)以獲得更高的css優先級。這對性能和代碼可讀性都是不利的。

避免鏈式選擇符

鏈式選擇符(Chaining selectors)是對單個元素同時寫了多個選擇符判定的情況。比如p.name是指class名為name,且標簽是p的元素,才應用樣式。這些判定組合可以是ID選擇符,標簽選擇符,class選擇符的任意組合。

但是,鏈式選擇符是過度定義(over qualified)的,不利于重用,也不利于性能優化。如:

a#author{}

建議寫為:

#author{}

這里的a是不必要的。一個ID只對應一個元素,沒有必要再強調這個元素的標簽是什么(同理,class也不必)。另外有

.content span.arrow{}

建議寫為:

.content .arrow{}

這里的span.arrow中的span也是不必要的。一方面,這為瀏覽器在樣式匹配時增加了一項額外工作:檢查class名為arrow的元素的標簽名是不是span,也因此降低了性能。另一方面,如果去掉了這個限定,.arrow的樣式定義,就可以用在更多的元素上,也就有著更好的重用性。否則,就還得告訴別人,使用這個的時候只能用在span標簽上。

同理,多個class的鏈式寫法,如

.tips.succuss{}

建議更改命名,寫為:

.tips_succuss{}

這樣可以幫助瀏覽器減少額外的樣式匹配工作。

此外,IE6還存在一個鏈式選擇符的問題,多個class選擇符寫在一起時,例如.class1.class2.class3,正常情況是只有同時有這全部的class的元素,才應用樣式。但IE6只認最后一個,也就是符合.class3這個選擇符的元素,就應用樣式。

例外情況

前面所述的選擇符的寫法的建議,只是從瀏覽器渲染性能優化,及代碼的重用性方面分析得到的理論結果。在實際使用中,你并不需要嚴格按照這些內容來做。例如,如果你確實是準備為class名為intro的元素內的所有a標簽元素都加上某樣式,那么.intro a這樣的選擇符是明智的。

結語

關于高效的css選擇符的指南,你還可以閱讀google developer中的Use efficient CSS selectors。

如今,現代瀏覽器在樣式匹配上也逐漸有了更多的優化(參考CSS Selector Performance has changed!),有些方面的內容我們已經不再需要再擔心了。但是,這并不意味著不需要考慮寫合理的css選擇符了。css選擇符性能優化是依然存在的事,你的選擇符應該更好地體現你的意圖,而不是隨心所欲地使用。更重要的是,以這樣一種稍細膩的,經過思考的想法來寫css選擇符,并不是一件困難的事。只要你想,形成這樣的一種習慣,你就可以自然地在這方面做得更好,何樂而不為呢?

CSS之入門篇—推薦新手關于CSS樣式表一.在學習css之前你應該掌握哪些基礎知識1.什么是網頁,什么是超文本語言(html)。2.會使用Dreamweaver等常用的網頁編輯器。Dreamweaver是現今最好的網站編輯工具之一,而Dreamweaver8增加的對CSS的支持更是你容易得來使用CSS,用它來給制作網頁的CSS樣式表會更簡單、更方便。本教程教你如何利用Dreamweaver8在頁面中加入CSS,你不用死記硬背的記代碼標記,也不用去看很厚的CSS手冊,你就可以輕松自如的在網頁中運用CSS。不過首先你要對CSS有一定的了解。因此,本教程的前面4章為CSS理論知識,主要是對CSS的全面介紹,希望讀者看后對CSS的語法、結構、應用有一個全面的了解;后面4章為DW實戰,主要是教你如何利用Dreamweaver8靈活運用CSS在網頁中。閱讀此文前,你需要對HTML有一定的了解,并會使用Dreamweaver。二.認識CSSCSS就是Cascading Style Sheets,中文翻譯為“層疊樣式表”,簡稱樣式表,它是一種制作網頁的新技術。網頁設計最初是用HTML標記來定義頁面文檔及格式,例如標題、段落、表格、鏈接等,但這些標記不能滿足更多的文檔樣式需求,為了解決這個問題,在1997年W3C(The World Wide Web Consortium)頒布HTML4標準的同時也公布了有關樣式表的第一個標準CSS1,自CSS1的版本之后,又在1998年5月發布了CSS2版本,樣式表得到了更多的充實。W3C把DHTML(DynamicHTML)分為三個部分來實現:腳本語言(包括JavaScript、Vbscript等)、支持動態效果的瀏覽器(包括Internet Explorer、Netscape Navigator等)和CSS樣式表。注意:CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的瀏覽器支持,有些效果需要更高版本的瀏覽器支持。三.怎樣使用CSS如果你使用的是Dreamweaver MX 2004以上的版本,在定義文字字體、顏色、大小等屬性的時候,查看一下代碼你會發現有這樣的一部分在head區域:STYLE2 {font-size:16pt;font-family:"Courier New",Courier,monospace;font-weight:bold;color:#FF3300;}那么恭喜你,你已經使用了CSS設計網頁。那么除了這種調用CSS的方法外,還有別的嗎?回答是“當然有了”,下面是系統介紹標記加注法(in-line):如果只有一個HTML標記需要設定樣式,則可在該標記內,加上屬性style="以個別修訂樣式。頁面內嵌法:body { background:white;color:black;}->外部調用法:雙表法調用樣式表:import url(css/style01.css);1.基本語法CSS的定義是由三個部分構成:選擇符(selector),屬性(properties)和屬性的取值(value);靖袷饺缦拢簊elector {property:value}(選擇符 {屬性:值})選擇符是可以是多種形式,一般是你要定義樣式的HTML標記,例如BODY、P、TABLE…,你可以通過此方法定義它的屬性和值,屬性和值要用冒號隔開:body {color:black}選擇符body是指頁面主體部分,color是控制文字顏色的屬性,black是顏色的值,此例的效果是使頁面中的文字為黑色。如果屬性的值是多個單詞組成,必須在值上加引號,比如字體的名稱經常是幾個單詞的組合:p {font-family:"sans serif"}(定義段落字體為sans serif)如果需要對一個選擇符指定多個屬性時,我們使用分號將所有的屬性和值分開:p {text-align:center;color:red}(段落居中排列;并且段落中的文字為紅色)為了使你定義的樣式表方便閱讀,你可以采用分行的書寫格式:p{text-align:center;color:black;font-family:arial}(段落排列居中,段落中文字為黑色,字體是arial)2.選擇符組你可以把相同屬性和值的選擇符組合起來書寫,用逗號將選擇符分開,這樣可以減少樣式重復定義:h1,h2,h3,h4,h5,h6 { color:green }(這個組里包括所有的標題元素,每個標題元素的文字都為綠色)p,table{ font-size:9pt }(段落和表格里的文字尺寸為9號字)效果完全等效于:p { font-size:9pt }table { font-size:9pt }3.類選擇符用類選擇符你能夠把相同的元素分類定義不同的樣式,定義類選擇符時,在自定類的名稱前面加一個點號。假如你想要兩個不同的段落,一個段落向右對齊,一個段落居中,你可以先定義兩個類:p.right {text-align:right}p.center {text-align:center}然后用不在不同的段落里,只要在HTML標記里加入你定義的class參數:這個段落向右對齊的這個段落是居中排列的這個段落向右對齊的這個段落是居中排列的注意:類的名稱可以是任意英文單詞或以英文開頭與數字的組合,一般以其功能和效果簡要命名。類選擇符還有一種用法,在選擇符中省略HTML標記名,這樣可以把幾個不同的元素定義成相同的樣式:center {text-align:center}(定義.center的類選擇符為文字居中排列)這樣的類可以被應用到任何元素上。下面我們使h1元素(標題1)和p元素(段落)都歸為“center”類,這使兩個元素的樣式都跟隨“.center”這個類選擇符:這個標題是居中排列的這個段落也是居中排列的注意:這種省略HTML標記的類選擇符是我們經后最常用的CSS方法,使用這種方法,我們可以很方便的在任意元素上套用預先定義好的類樣式。4.ID選擇符在HTML頁面中ID參數指定了某個單一元素,ID選擇符是用來對這個單一元素定義單獨的樣式。ID選擇符的應用和類選擇符類似,只要把CLASS換成ID即可。將上例中類用ID替代:這個段落向右對齊定義ID選擇符要在ID名稱前加上一個“#”號。和類選擇符相同,定義ID選擇符的屬性也有兩種方法。下面這個例子,ID屬性將匹配所有id="intro"的元素:intro{font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent}(字體尺寸為默認尺寸的110%;粗體;藍色;背景顏色透明)下面這個例子,ID屬性只匹配id="intro"的段落元素:p#intro{font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent}注意:ID選擇符局限性很大,只能單獨定義某個元素的樣式,一般只在特殊情況下使用。5.包含選擇符可以單獨對某種元素包含關系定義的樣式表,元素1里包含元素2,這種方式只對在元素1里的元素2定義,對單獨的元素1或元素2無定義,例如:table a{font-size:12px}在表格內的鏈接改變了樣式,文字大小為12象素,而表格外的鏈接的文字仍為默認大小。6.樣式表的層疊性層疊性就是繼承性,樣式表的繼承規則是外部的元素樣式會保留下來繼承給這個元素所包含的其他元素。事實上,所有在元素中嵌套的元素都會繼承外層元素指定的屬性值,有時會把很多層嵌套的樣式疊加在一起,除非另外更改。例如在DIV標記中嵌套P標記:div { color:red;font-size:9pt}這個段落的文字為紅色9號字(P元素里的內容會繼承DIV定義的屬性)注意:有些情況下內部選擇符不繼承周圍選擇符的值,但理論上這些都是特殊的。例如,上邊界屬性值是不會繼承的,直覺上,一個段落不會同文檔BODY一樣的上邊界值。另外,當樣式表繼承遇到沖突時,總是以最后定義的樣式為準。如果上例中定義了P的顏色:div { color:red;font-size:9pt}p {color:blue}這個段落的文字為藍色9號字我們可以看到段落里的文字大小為9號字是繼承div屬性的,而color屬性則依照最后定義的。不同的選擇符定義相同的元素時,要考慮到不同的選擇符之間的優先級。ID選擇符,類選擇符和HTML標記選擇符,因為ID選擇符是最后加上元素上的,所以優先級最高,其次是類選擇符。如果想超越這三者之間的關系,可以用!important提升樣式表的優先權,例如:p { color:#FF0000!important }blue { color:#0000FF}id1 { color:#FFFF00}我們同時對頁面中的一個段落加上這三種樣式,它最后會依照被!important申明的HTML標記選擇符樣式為紅色文字。如果去掉!important,則依照優先權最高的ID選擇符為黃色文字。7.注釋你可以在CSS中插入注釋來說明你代碼的意思,注釋有利于你或別人以后編輯和更改代碼時理解代碼的含義。在瀏覽器中,注釋是不顯示的。CSS注釋以"/*"開頭,以"*/"結尾,如下:定義段落樣式表*/p{text-align:center;文本居中排列*/color:black;文字為黑色*/font-family:arial/*字體為arial*/}定義段落樣式表*/p{text-align:center;文本居中排列*/color:black;文字為黑色*/font-family:arial/*字體為arial*/}前面我們了解了CSS的語法,但要想在瀏覽器中顯示出效果,就要讓瀏覽器識別并調用。當瀏覽器讀取樣式表時,要依照文本格式來讀,這里介紹四種在頁面中插入樣式表的方法:[u]鏈入外部樣式表[/u]、[u]內部樣式表[/u]、[u]導入外表樣式表[/u]和[u]內嵌樣式[/u]。1.鏈入外部樣式表鏈入外部樣式表是把樣式表保存為一個樣式表文件,然后在頁面中用標記鏈接到這個樣式表文件,這個標記必須放到頁面的區內,如下:上面這個例子表示瀏覽器從mystyle.css文件中以文檔格式讀出定義的樣式表。rel=”stylesheet”是指在頁面中使用這個外部的樣式表。type=”text/css”是指文件的類型是樣式表文本。href=”mystyle.css”是文件所在的位置。media是選擇媒體類型,這些媒體包括:屏幕,紙張,語音合成設備,盲文閱讀設備等。一個外部樣式表文件可以應用于多個頁面。當你改變這個樣式表文件時,所有頁面的樣式都隨之而改變。在制作大量相同樣式頁面的網站時,非常有用,不僅減少了重復的工作量,而且有利于以后的修改、編輯,瀏覽時也減少了重復下載代碼。樣式表文件可以用任何文本編輯器(例如:記事本)打開并編輯,一般樣式表文件擴展名為.css。內容是定義的樣式表,不包含HTML標記,mystyle.css這個文件的內容如下:hr {color:sienna}p {margin-left:20px}body {background-image:url("images/back40.gif")}定義水平線的顏色為土黃;段落左邊的空白邊距為20象素;頁面的背景圖片為images目錄下的back40.gif文件*/2.內部樣式表內部樣式表是把樣式表放到頁面的區里,這些定義的樣式就應用到頁面中了,樣式表是用標記插入的,從下例中可以看出標記的用法:..內容來自www.anxorj.tw請勿采集。


  • 本文相關:
  • css基礎 css選擇符
  • 大家看了就明白了css樣式中類class與標識id選擇符的區別小結
  • css選擇符說明
  • lesson01_08 圖像地圖
  • 第2天:什么是名字空間
  • css網頁布局入門教程9:用css設計網站導航——橫向導航
  • fif互動幫助手冊系列-html手冊 flash版
  • 第3天:定義語言編碼
  • ie里button設置border:none屬性無效解決方法
  • 第8天:css布局入門
  • css入門教程篇
  • css清除浮動方法匯總
  • css網頁布局入門教程5:二列寬度自適應
  • CSS是什么?它是一種軟件嗎?要學的話是要再下載過來的嗎?
  • css的書寫規范,有哪些注意點
  • 零基礎學web前端開發要學多久?求教
  • 零基礎初學者學習編程語言應該學習哪一種?
  • 小學教育和教育學有什么區別?哪個更容易進入學校就業?
  • 吉他零基礎怎么自學入門,就是一點也不會的那種
  • 0基礎如何自學html和css
  • 教育的基本規律.
  • 我對心理學比較感興趣,自學如何才能系統的學好心理學呢?求解謝謝
  • css入門最基礎教程
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全經驗交流基礎教程vml相關首頁css/html基礎教程css基礎 css選擇符大家看了就明白了css樣式中類class與標識id選擇符的區別小結css選擇符說明lesson01_08 圖像地圖第2天:什么是名字空間css網頁布局入門教程9:用css設計網站導航——橫向導航fif互動幫助手冊系列-html手冊 flash版第3天:定義語言編碼ie里button設置border:none屬性無效解決方法第8天:css布局入門css入門教程篇css清除浮動方法匯總css網頁布局入門教程5:二列寬度自適應純css繪制三角形(各種角度)網頁顏色搭配技巧 文字字體、字號iframe背景透明的設置方法html滾動條樣式base href 使用方法詳解用好href的target屬性html label標簽的使用教程iframe的使用用法utf8和unicode編碼究竟是什么關系詳細分析css float 屬性以及posicss的color顏色使用說明css進階學習 選擇符簡單談談margin負值的作用前端獲取http狀態碼400的返回值實例css濾鏡效果(一)html的全局架構標簽input文本框樣式代碼實例css網頁布局入門教程9:用css設計網站導航css pointer控制在firefox下顯示手型的代css濾鏡基礎教程
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.anxorj.tw All Rights Reserved
    陕西快乐10分下载