Mr CSS basic skills -- selector and css Basic Skills Selector

Mr CSS basic skills -- selector and css Basic Skills Selector

We have already mentioned the understanding of CSS and the box model in the front, and discussed its purpose. For more information, see this article. Http://blog.csdn.net/lovemenghaibin/article/details/41148629

Import CSS (import namespace)

As we can say at, first of all, it is to modify the webpage, that is, to modify the elements in HTML. The reason for his convenience is that he can process each element in HTML in a centralized manner, just like our functions, but if we want to use a function, is it necessary to first import its namespace? The same is true in HTML. Of course, the methods are slightly different, but the idea is the same. Below is the centralized method.

// Intra-row style <p style = "color: # FF0000; font-size: 20px; text-decoration: underline; "> 123 </p> // link <link href =" 1.css" type = "text/css" rel = "stylesheet"> 


#, Space, and colon in CSS format

In CSS, we often see such a format
    #navigation li a:link, #navigation li a:visited{background-color:#7591a3;color:#FFFFFF;     }

What does this format mean. It is actually a CSS selector. The selector contains 1, tag selector, category selector, and ID selector.

1. Mark selector (written in HTML)
    <style>        h1{           color:red;           font-size:25px;           }   </style>
2. Category selector (written in a CSS file)



3. ID Selector


In this way, you can see the above Code. He is actually setting such a sentence in HTML. Set the color and font size of the button words in the code below.
<Span style = "font-size: 14px; "> <div id =" navigation "> <li> <a> button </a> </li> </div> </span>
If you want to replace id with class, you only need to replace # With ". navigation. Nested blocks can be expressed with spaces. For example
<span style="font-size:14px;">          <span style="font-size:18px;">#navigation li a:link</span></span>

For example, the code above is the separation of div, li, and a blocks.
Here is just a simple introduction of the basic syntax introduced, specific settings of some specific attributes, we will stay in the next blog, compare what I learned about CS, he is very similar to our class, and they are all encapsulated classes, but because all of her "classes" are encapsulated, I have to pay attention to the CSS format if I want to use them, but the advantage is that he is more thoughtful than we thought and encapsulates all the things that can be used.