1.3 Basic CSS Selector

One, Tag Selector Second, category selector Third, ID selector The selector (selector) is a very important concept in CSS, and all markup styles in the HTML language are controlled by different CSS selectors. Users only need to select different HTML tags through the selector, and give a variety of style declarations to achieve a variety of effects. To understand the concept of selectors, a "map" can be used as an analogy. You can see some "legends" on the map, such as a blue line on a river, a road with a red line, a capital city with a black dot, and so on. Essentially, this is a correspondence between "content" and "form of expression". On the Web page, there is also such a correspondence, such as H1 title in blue text, H2 title in red text. So in order to make CSS rules correspond to HTML elements. You must define a complete set of rules to implement CSS's "selection" of HTML. That's why it's called a "selector." There are several different types of choices in CSS, and this section introduces the basic selector first. The so-called "basic" is relative to the "composite" selector to be described in the next section. This means that the "composite" selector is composed of a combination of basic selectors. The basic selector has tag Selector, category selector and ID selector 3, which are described in detail below. One, Tag Selector An HTML page consists of a number of different tags, which are used by CSS tag selectors to declare which tags are in which CSS style. Therefore, the name of each HTML tag can be used as the name of the corresponding tag selector. For example, the P selector is the style used to declare all <p> tags in a page. You can also use the H1 selector to declare all the CSS styles of the <style> H1{ Color : #FF0000 ;  font-size : 24px ;  } /* selector { attribute: value; ...... } */ </style> The above CSS code declares the HTML page and wipes all the If you want all Note: The CSS language has a relatively strict requirement for all properties and values, and cannot invalidate a CSS statement if the declared property does not exist in the CSS specification, or if the value of a property does not conform to the requirements of the property. Here are some typical error statements: head- Height : 48px / * Illegal attribute * / Color : Ultraviolet / * Illegal value * /   for these errors mentioned above, it is often possible to avoid the syntax hints of the CSS editor (such as Dreamweaver or expression Web) directly, but at some point you need to consult the CSS manual, or simply log in to the official website (HTTP/ www.w3.org/) for a detailed specification of the CSS. lodidance.com Back to Top Second, category selector Once the tag selector mentioned in the previous section has been declared, all of the markup in the page will change accordingly. For example, when the <p> flag is declared red, all <p> tags in the page are displayed in red. But if you want one of the <p> tags to be not red, but blue, it is not enough to rely on the tag selector, and you need to introduce a class selector. For example, if you want to have different colors for each of the 3 <p> markers in the page, you can do so by setting up a separate class selector. A complete case is shown below, the instance file is located in the Web Learning Web CSS Tutorial resource "1th \ Example 5.htm". <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   < HTML xmlns="http://www.w3.org/1999/xhtml"> < Head >   < Meta http-equiv="Content-type" Content= "text/html; Charset=utf-8 " /> < title > Web Learning Network Example 5-class selector </ title >   < style type="text/css"> . red{ color:red; /* Red */ font-size:18px; /* Text Size */ } . green{ Color:green; font-size:20px; } /* . Class class Selector { attribute: value; ...... } */ </ style >   </ Head >   < Body >   < P class="Red">class selector 1</p > < P class="green">class selector 2</ P >   < P class="green">H1 also applicable </p > </ Body >   </ HTML >   Its display effect is shown in 1. You can see that the two <p> tags show different colors and font sizes, and that any of the class selectors apply to all HTML tags, just declare them with the class attribute of the HTML tag, such as Figure 1 Class Selector Example <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   < HTML xmlns="http://www.w3.org/1999/xhtml"> < Head >   < Meta http-equiv="Content-type" Content="text/ html Charset=utf-8 " /> < title > Web Learning Network Example 6-class selector and tag Selector </ title >   < style type="text/css"> p{/* Tag Selector */ Color:blue; font-size:18px; } . special{ color:red; font-size:20px; } </ style >   </ Head >   < Body >   < P > class selector and Tag Selector 1 </ P >   < P class="Special">class selector and Tag Selector 2</ P > < P > class selector and Tag Selector 3 </ P >   </ Body >   </ HTML >   By first defining the global display scheme of the <p> tag by the tag Selector, and then using a class selector to separate the <p> tags that need to be highlighted, this greatly improves the efficiency of the Code writing, as shown in 2. Figure 22 Selector Mates In HTML markup, you can also apply multiple class class selectors to a tag at the same time to apply two categories of style styles to a single tag. This is often useful in the actual production of the site, you can properly reduce the length of the code, as shown in the following example, the sample file is located in the Web Learning Web CSS Tutorial "The 1th Chapter \07,htm". Lodidance.com < HTML >   < Head >   < title > Web Learning Network-use two classes at a time </ title >   < style type="text/css"> . one{ Color:blue; /* Color */ } . two{ font-size:22px; /* Font Size */ } </ style >   </ Head >   < Body >   < h4 > one does not use </ h4 >   < h4 class="One"> use both classes, using only the first type of </ h4 > < h4 class="Two"> use both classes at the same time, using only the second type of </h4 > < h4 class="One Two"> use both classes while using </ h4 > < h4 > one does not use </ h4 >   </ Body >   </ HTML >   As shown in effect 3, you can see that the 2nd line with the 1th class is shown in blue, and the line 3rd is still black, but the font size is larger because it uses. Two. The 4th line by "class=" ne Two "" To add two styles at the same time, get blue large font. Lines 1th and 5th do not use any style, only as a reference when comparing. Figure 3 Using two styles of CSS at the same time Back to Top Third, ID selector The ID selector is used in the same way as the class selector, except that the ID selector can only be used once in an HTML page, so it is more targeted. The ID selector in the CSS can be called directly in the HTML markup simply by taking advantage of the id attribute. Here is a practical case, the sample file is located in the Web Learning Network CSS Tutorial Resources "The 1th Chapter \08.htm". < HTML >   < Head >   < title > Web Learning Network-id selector </ title >   < style type="text/css"> #one { Font-weight:bold; /* Bold */ } #two { font-size:30px; /* Font Size */ Color: #009900; /* Color */ } </ style >   </ Head >   < Body >   < P id="One">ID selector 1</p >   < P id="Both">ID selector 2</p > < P id="Both">ID selector 3</p>   < P id="One">ID selector 3</p > </ Body >   </ HTML >   As shown in effect 4, the CSS scheme is shown in lines 2nd and 3rd. As can be seen, in many browsers, the ID selector can be used for multiple tags, that is, the ID of each tag definition is not just CSS can be called, JavaScript and other scripting languages can also be called. Because of this feature, do not use the ID selector for multiple tags. Otherwise, unexpected errors will occur. If there are two tokens of the same ID in an HTML, it will cause JavaScript to make an error finding the ID, such as the function Getelementbyld (). Figure 4 Example of an ID selector Scripting languages such as JavaScript can also wither the ID set in HTML. Therefore, the ID selector has been widely used. Web site creators in the CSS code, should develop a good writing habits, an ID at most it can give an HTML tag. As you can see in Figure 4, the last line is not shown in any CSS style style, which means that the ID selector does not support multi-styles like the class selector and makes friends like "id=" one Back to Top Click to download the 1th to 7th CSS Tutorial resource to return to the tutorial list of CSS Tutorial layout

Editor: Web Learning Network

This address: http://www.lodidance.com/css/jc/657.html