Chapter 3 CSS Application Supplement

Application of Selector Characteristics

Before talking about the characteristics of the selector, it is necessary to mention the characteristics inherited by CSS. The so-called inherited characteristics mean that the tags wrapped inside will have the style properties of the external tags. The most typical application of the inheritance feature is to preset the style of the entire web page, and the parts that need to be designated as other styles can be set in individual elements as needed. This feature can provide web designers with more ideal space to play. Next, let’s talk about the application of selector characteristics! In fact, this part should be regarded as a way of declaration, but after you have read the basic declaration and application in Chapter 2, you will have a better idea when talking about the selector here. When applying or designing CSS, there are several ways to set and display specific properties based on the relationship or properties of elements. This is the application of selector properties, which allows you to be more flexible in control and application. 1. Context selector: A method to display specific properties based on the context relationship of a statement label. The context selector means that when the browser displays the content specified by the HTML source code, it will consider the context of the element tag and display the specified style statement. That is to say, as long as the order of the tags in the HTML source code is consistent, this statement will take effect! Element A (Tag A) Element B (Tag B) Element C (Tag C) ... {Style Rules} It should be noted that the declaration of the context selector is very similar to the collective declaration, but the element tags of the collective declaration must be separated. Separate with commas, and use spaces to separate element tags when declaring with context selectors; you can mix these two declaration methods. Element A Element B, Element C Element D Element E, ... {style rules} In this way, you can use collective declaration to declare the style rules of the array context selector. 2. Category selector: A method to allow a single or several tags to use the same set of style rules. Class allows different element tags to apply the same set of style properties or the same element tag to apply different sets of style properties. The first thing I will introduce is how to apply the same set of style properties to different elements, as written in the example below.  ...  

...

　...　

...

　...Pay attention to the small dot in front of the declaration , the CLASS name can be chosen arbitrarily. When you want the same element tag to apply different sets of style attributes, you can also apply category attributes to set it. ...

...

　 ...

...

Please note the same small point when declaring that the CLASS name can be arbitrary. Flexible use of category features can make your style settings more flexible! 3. ID selector: Similar to category selector, the difference is in "uniqueness". The use of the ID attribute is very similar to the category attribute, but each ID in the file is unique. In other words, the category attribute can be applied repeatedly to a single or several element tags, but the ID attribute can only appear once in a document. Just write it as the example below. 　...　P ID=" blue">...

　...As you can see, the declaration method is to use the pound sign 『#』. The "uniqueness" of ID is the key to allowing javaScript or VBScript to control elements. Through the declaration and use of the selector characteristics introduced above, you can make your style settings more flexible and changeable. In fact, you can first familiarize yourself with the basic declaration and application methods introduced to you in the previous chapter, and then apply the selector features discussed in this chapter to become familiar with the use of style sheets step by step.

Connect applications with similar features

Still remember the basic syntax of HTML? In the BODY tag, you can use the link, alink, and vlink attributes to control the font color of the linkable or linked font? Nowadays, CSS can also be used to control these properties, called pseudo classes. You can treat it as a general category and declare its style rules. In fact, these pseudo-categories do not need to set the pointed category (CLASS) in the HTML source code like the category selector mentioned above. The declaration and application of pseudo categories are introduced below. General declaration method: pseudo categories are declared with colons. As long as you add the following statement to the structure, the link text on the page will be displayed according to the style you set! A:link { style rule }A:active { style rule }A:visited { style rule }A:hover { style rule }A:link is used to set style rules for unvisited links. A:active is used to set the style rules of active links. A:visited is used to set style rules for visited links. A:hover is used to set the style rules when the mouse moves over the link. Among them, hover is not supported by NC4, but the other three features are supported by both major browsers. If you are using a browser of IE4 or above, you can know the beauty of hover function from the link on this website. With simple style settings, you can achieve the same effect that you used to have to write a long list of settings. This link pseudo-category can also be used in conjunction with the category picker feature described above. Comparison between

ＤＩＶＶ and ＳＰＡＮ It greatly expands the application level of HTML. The two elements DIV and SPAN are very similar in application, and they must be added with an end tag when used, that is, < DIV>...

and ... . The two applicable properties and event handling are also very similar, and both can be written in conjunction with the selector feature mentioned earlier. Neither of them imposes display functions on the page content. It can be said that they are very widely used element tags. The difference between DIV and SPAN is that the DIV element is defined as a block, and between

...

is a complete paragraph block. The SPAN element is defined as in-line, and ...< /SPAN> is applied to settings within a small range. The two can be mixed with each other because they are independent of each other. Therefore, you can use these two elements, combined with other properties, to flexibly adjust the content displayed on your web page.

The above is the supplementary content of Chapter 3 CSS Application. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!