table of Contents
1. Use of style
Using styles, we need to use other tags as styleattributes or <style>tags.
1.1 inline style
Inline style, is through the use of other labels styleto change the style attributes.
The Code ( colorchanging font color, font-sizechanging the font size):
<p style="color: red;font-size: 30px;"> 该段使用行内样式</p> Run results shown in Figure:
1.2 inline style
Inline style, is by using <style>to change the style tag.
In <head>Create tab <style>label, other labels to change the style (following code changes <p>the style tag), such as code:
<style type="text/css">
p{
color: green;
font-size: 40px;
}
</style>In <body>using the label <p>tag, such as code:
<p>该段使用内嵌样式</p>Run results shown in Figure:
1.3 link style
Link style, is through the stylemethods defined in the CSS file, separation style definitions and content to achieve a defined purpose multi-use, avoiding multiple definitions of the same style.
CSS file, the code is as follows:
p{
color: blue;
font-size: 40px;
text-align: center;
}If you want to use the content of the CSS file, we have to refer to it, and it establishes a link. In the HTML file <head>tag, add the following code:
<link rel="stylesheet" type="text/css" href="lib.css"/>Now, we have styles defined in the CSS file can be used in the tag, add the following code:
<p>该段使用链接样式</p>Run results shown in Figure:
1.4 style selector
In the inline styles, and link styles, we defined a style, but they are used only to set the default style, when we want to use a variety of styles will be inconvenient. For example, we write articles, to use a variety of styles, for instance, I use red first paragraph, second paragraph of the text to use the blue, this time, with only one style is not enough. This is what we will use the selector to solve this problem.
1.4.1 tag selector
All the above selector we use are tag selector, but is not particularly because of say, therefore, give an example, as follows:
p{
color: blue;
font-size: 40px;
text-align: center;
}1.4.2 id selector
id selector is defined when, before adding a tag selector #. Note that, id selector. Only use (only once).
By way of example, as follows:
#p1{
color: red;
font-size: 40px;
}When using the id selector, we need to set the label to be used in the idproperty.
By way of example, as follows:
<p id="p1"> 该段使用id选择器</p>
<p id="p1"> 该段也使用id选择器</p> Run results shown in Figure:
hee hee, strange, I just said that the only id selector can only use, but now twice Why we use id selectors are Haoshi it?
Do not worry, I'll explain, id selector can actually be used multiple times, but this is sub-standard. For example, each person has a unique ID number, although we may have more than one identity card, and all our ID cards are valid, but in fact a person has multiple identity card is unreasonable. So, in theory, id selector. Only use.
1.4.3 Class selectors
When we want to have a style that can be used repeatedly, and how to do it? It is played on the class selector. When the selected class definition id and a selector similar, but the #replaced ., as follows:
.p1{
color: red;
font-size: 40px;
}When using a class selector, we need to set the label to be used in the classproperty.
By way of example, as follows:
<p class="p1"> 该段使用类选择器</p>
<p class="p1"> 该段也使用类选择器</p> Run results shown in Figure:
1.5 Style priority
I shared three ways to use the style, but specific, priority three ways is kind of how it? If they use two or three at the same time, what kind of situation will happen then?
1.5.1 Testing
1. Define inline style (red)
code is as follows:
style="color: red;"2. The definition of an inline style (blue)
code is as follows:
p{
color:blue;
}3. Define the link style (green)
code is as follows:
p{
color:green;
}4. Run the code is as follows:
<p>有内嵌样式和链接样式</p>
<p style="color: red;">全都有</p>The results are as follows:
1.5.2 Conclusion
Priority: inline Style> inline style> link style
