前面的學習我們僅僅使用HTML選擇器(在HTML頁面里為html標簽,如 P)
現在我們學習使用clss和id定義屬于自己的選擇器。
這樣,同樣的html元素可以通過class或ID使用不同的表現。
在CSS里,使用點號(.)創建class選擇器,使用hash符號(#)創建ID選擇器。
例子:
html頁面通過id和class屬性調用CSS,像下面這樣:
id和class的不同指出在于一個頁面同一個ID只能只有一次,而class可以無限制使用。
同樣,你可以在html選擇器后面使用一個選擇器來指定特殊HTML元素,比如p.jam{值}將作用到帶有'jam'class屬性的段落。
現在我們學習使用clss和id定義屬于自己的選擇器。
這樣,同樣的html元素可以通過class或ID使用不同的表現。
在CSS里,使用點號(.)創建class選擇器,使用hash符號(#)創建ID選擇器。
例子:
#top {
background-color: #ccc;
padding: 1em
}
.intro {
color: red;
font-weight: bold;
}
background-color: #ccc;
padding: 1em
}
.intro {
color: red;
font-weight: bold;
}
html頁面通過id和class屬性調用CSS,像下面這樣:
<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>
<p class="intro">Mmm mm mmmmm</p>
</div>
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>
<p class="intro">Mmm mm mmmmm</p>
</div>
id和class的不同指出在于一個頁面同一個ID只能只有一次,而class可以無限制使用。
同樣,你可以在html選擇器后面使用一個選擇器來指定特殊HTML元素,比如p.jam{值}將作用到帶有'jam'class屬性的段落。
标签:CSS基礎教程
推薦設計
優秀海報設計精選集(8)海報設計2022-09-23
充滿自然光線!32平米精致裝修設計2022-08-14
親愛的圖書館 | VERSE雜誌版版式設計2022-07-11
生活,就該這麼愛!2022天海報設計2022-06-02
最新文章
10個CSS簡寫/優化技巧CSS教程2013-06-04
css的margin縮寫方式CSS教程2012-05-23
CSS網頁布局時常犯的幾種CSS教程2009-09-28
CSS浮動屬性Float詳解CSS教程2009-09-17