Mr. Basic CSS Skills--Selector_html/css_WEB-ITnose-HTML Tutorial-php.cn

Mr. Basic CSS Skills--Selector_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:51:53

Original

1228 people have browsed it

We have already talked about the understanding of CSS and the box model before, and also talked about its uses. For details, you can read this article.

Import CSS (import namespace)

Let’s talk about it bit by bit. First of all, it is to modify web pages, that is, to modify elements in HTML. The reason why it is convenient , mainly because it can centrally process each element in HTML, just like our functions. But if we want to use a certain function, do we first have to import its namespace? It is the same in HTML, of course. The methods are slightly different, but the idea is still the same. The following is the concentration method.

    //行内样式    <p style="color:#FF0000; font-size:20px; text-decoration:underline;">123</p>      //链接式    <link href="1.css" type="text/css" rel="stylesheet">       </head>         <body>	   <h2>CSS标题</h2>	   <p>紫色，出题，下划线</p>      </body>     //内嵌式    <style type="text/css">    <!--      p{	color:#FF00FF;	text-decoration:underline;	font-weight:bold;	font-size:25px;       }      //导入样式    <style type="text/css">     <!--         @import url(1.css);     -->     </style>

Copy after login

#, space, dot 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;     }

Copy after login

What does this format mean? Let me tell you, it is actually a CSS selector, and the selector includes 1. Tag selector, category selector, and ID selector.

1. Tag selector (written in HTML)

    <style>        h1{           color:red;           font-size:25px;           }   </style>

Copy after login

2. Category selector (written in CSS file)

3. ID selector

So you will know the above code. He is actually setting up such a sentence in HTML. Set the color and font size of the button text in the code below.

<span style="font-size:14px;">		<div id="navigation">			<li><a>按钮</a></li>		</div></span>

Copy after login

If you change the id to class, you only need to change # to ".navigation". Nested blocks can be represented by spaces. For example

<span style="font-size:14px;">          <span style="font-size:18px;">#navigation li a:link</span></span>

Copy after login

For example, the above code is the separation of div block, li block and a block

Summary

Here It’s just a simple introduction, the basic syntax introduced, and the specific settings of some specific attributes. Let’s stay in the next blog and compare it with the CS things I learned. It is very similar to our class, and they are all encapsulated. Classes, just because these "classes" of hers are all encapsulated, so if I want to use them, I have to pay attention to the CSS format, but the advantage is that he is more thoughtful than we think, and encapsulates everything that can be used. .