學習CSS提示教程(5)自訂類別

來源:互聯網
上載者:User
css|技巧|教程

  上一節:單獨調用

  自訂類別

  今天講的有一個新知識“類別”。其實,這知識並不陌生!回想一下,在 HTML 標籤中,有個屬性叫 class,當時沒有解釋這個屬性是幹什麼用的。其實,不是不解釋,而是解釋了也不會用,所以就暫時沒有說,等到了今天。這個 class 屬性,所以將之解釋為“類別”屬性,它有什麼作用呢?它能夠讓我們在不同的標籤中使用相同的 CSS 設定,舉個例子如下: 我們在讀書的時候,常常看到課本上有重點的地方,用紅色或其它顏色標明。如果,今天我們的網頁上,也想將一些比較重要的地方用“紅色、粗體字”來顯示,你會怎麼做呢?:

原始代碼 “<font color="Red"><b>網頁教學網</b></font>”
顯示結果 網頁教學網

  使用CSS實現重點突出

  用上面的那種方法是相當不錯的!簡單用易懂!不過,試想一種情形...若是在我們的網頁中有 1000 多個所謂的“重點”,今天你突然想把重點通通換成“紅色、粗體字”,那你該怎麼辦呢?這時,我們就講用CSS來幫我們解決難題吧!而且,我們的“自訂類別”也就用上了!

樣式文法 <style type="text/css">
.important { color:red ; font-weight:bold }
</style>
應用方式 “<font class="important">網頁教學網</font>”

  首先,我們在在CSS表中自己做一個叫做 important 的類別,然後利用 class 屬性,套用在網頁中,不難吧!以後若是要將“紅色”改成“藍色”,那麼只要改類別裡的設定就行了!不管網頁中有幾萬個“重點”,都不用怕了!

  自訂類別的用法

  看過了自訂類別的大概用法後,再來做詳細的解說,如何自訂類別?自訂類別方法很簡單,方法和一般的CSS聲明沒什麼區別!唯一的不同是,CSS聲明是針對某個標籤的;而自訂類別則是不針對某個標籤,而是要自己命名!

樣式文法 <style type="text/css">
.important { color:red ; font-weight:bold }
</style>

  以上為例,.important { color:red ; font-weight:bold }就是我們自訂的類別,其中的{}部份和一般的 CSS 聲明方法一模一樣!差別就在前面的.important,沒錯!important 就是我們自定的名稱,有了名稱,才能調用。注意!前面記得在自訂名稱前加一個小點“.”,這樣就完成了自訂的一個類別!這個類別可以利用class 來調用!套用到任何標籤中!

  下一節:文字屬性



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。