在HTML5培訓過程中,你有沒有遇到過這樣的問題呢?css選擇器 #, 句點的的區別搞不懂,今天,粵嵌HTML5課程老師就來解析一下它們的區別吧!
一、理解CSS的樣式組成
CSS里的樣式表是有規則組成的,每條規則有三個部分組成:
1、選擇器(如下面例子中的:“body”),告訴瀏覽器文檔的哪個部分受規則影響;
2、屬性(如實例中的font-family、color等),規定了布局的什么方面被設置了;
3、值(如實例中的Arial,sans-serif,#333333等),給出了式樣屬性的值。
二、CSS式樣中不同符號的區別
#是ID選擇器 .是class選擇器 *是通配符號
比如*{margin:0;padding:0;所有的元素都會沿用這個屬性樣式}(還有一種情況是IE hack)比如 .b{margin:0;*margin:10px;}這里IE看到的是margin:10px,其他的瀏覽器看到的會是前面那個margin:0;
先來看段代碼吧~
body{font-family: Arial,sans-serif;color: #333333;line-height: 1.166; margin: 0px; padding: 0px;}#masthead{margin: 0;padding: 10px 0px;border-bottom: 1px solid #cccccc; ;}.feature img{float: left;padding: 0px 10px 0px 0px; margin: 0 5px 5px 0;}
#號對應id
點號對應class
不加對應html 標簽
歸納成一句話就是:Class可以反復使用而ID在一個頁面中僅能被使用一次。有可能在很大部分瀏覽器中反復使用同一個ID不會出現問題,但在標準上這是錯誤的使用,而且很可能導致某些瀏覽器的現實問題。
在實際應用的時候,Class可能對文字的排版等比較有用,而ID則對宏觀布局和設計放置各種元素較有用。想了解更多HTML5技術,可以點擊在線咨詢了解粵嵌HTML5培訓,或者來粵嵌實地參觀哦!