CSS Beginners: Custom Categories

Css

　　Custom Category

Today, there is a new knowledge "category". In fact, this knowledge is not unfamiliar! Recall that in the HTML tag, there is a property called class, which did not explain what the attribute was for. In fact, not without explanation, but the explanation will not be used, so I did not say for the time being, until today. This class attribute, so it's interpreted as a "category" attribute, what does it do? It allows us to use the same CSS settings in different tags, for example: when we are reading, we often see the key points in the textbook, marked with red or other colors. If, today on our web page, also want to some more important places with "red, bold word" to show, what would you do? ：

Raw code	"<font color=" Red "><b> Web page tao </b></font>"
Show results	" Web Pottery Bar "

　　Use CSS to achieve focus

It's quite good to use the above Method! Simple to understand! However, imagine a situation ... If there are more than 1000 so-called "points" in our web page, you suddenly want to change the focus to "red, bold", then what should you do? At this time, we will talk about using CSS to help us solve the problem! Also, our "Custom category" is used!

Style syntax	<style type= "Text/css" > . important {color:red; Font-weight:bold} </style>
Application Mode	"<font class=" Important"> Web Teaching network </font>"

First of all, we are in the CSS table to do a class called important , and then use the class attribute, applied to the Web page, it is not difficult! In the future, if you want to change the "red" to "blue", then just change the settings in the category on the line! No matter the page has tens of thousands of "focus", do not be afraid!

　　Use of custom categories

After reading the general usage of the custom category, and then to do a detailed explanation, how to customize the category? Custom Category method is very simple, the method and the general CSS Declaration No difference! The only difference is that the CSS declaration is for a label, and the custom category is not for a label, but to name it yourself!

Style syntax

<style type= "Text/css" > . important {color:red; Font-weight:bold} </style>

For example,. Important {color:red Font-weight:bold} is our custom category, where the {} part is exactly the same as the normal CSS declaration Method! The difference is in the front . Important, that's right! Important is our custom name, with a name, in order to invoke. Attention! Remember to precede the custom name with a small dot ".", which completes a custom category! This class can be invoked using Class! Apply to any label!