CSS Application Basics Tutorial (3) Application supplement

Source: Internet
Author: User
Tags mixed range
css| Basic Tutorials
Application of selection characteristics

Before you talk about the character of the picker, the attributes of the CSS inheritance should be mentioned. The so-called inherited attribute is that the tag being wrapped inside will have the style properties of the external tag. The most typical application of inherited features is usually the style of a preset whole page, and the parts to be designated as other styles are set in individual elements. This feature provides web designers with a more ideal space to play.

Next, we will talk about the application of selection characteristics! In fact, this part should be a way of declaring, but after you have read the basic statement and application of Chapter Two, you will have a more conceptual point to talk about the picker here. In the CSS application or design, there are several elements of the relationship or nature to set the display of the specific nature of the method, is the selection of the characteristics of the application, allows you to control and application more flexible.

First, the previous selection: according to the declaration of the Post-label relationship to show the specific nature of the method. The previous selection is that when the browser displays the content specified by the HTML source code, it takes into account the former relationship of the element label, and displays the specified style declaration. That is to say, the statement will work as long as the label in the HTML source code is in the same order as before.
Element A (label a) element B (label B) element C (label c) ... {Style Rule} to be aware of, the previous selection's statement is similar to the collective declaration, but the element tags of the collective declaration are separated by commas, and the element labels are separated by spaces when the selection is declared with the preceding text, and the two declarations are mixed. Element a element B, element c element D element E, ... {style rules} so that you can declare the style rules of the previous selection of the array by declaring them collectively.
Category selection: A method for using the same group style rules for single or several labels. Category (class) allows different element tags to apply the same set of style properties or the same element label to different groups of styles. The first is how to get different elements to apply the same set of style properties, as the following example describes. <HTML>
<HEAD>
<STYLE>
<--
. Blue {Color:blue}
-->
</STYLE>
</HEAD>
<BODY>
...
&LT;H1 class= "Blue" >...</H1>
...
<p class= "Blue" ... </P>
...
</BODY> Note that the class name is available at the point in front of the declaration. For the same element tags to apply to different groups of styles, you can also apply the category attribute to set. <HTML>
<HEAD>
<STYLE>
<--
P.blue {Color:blue}
p.red {color:red}
-->
</STYLE>
</HEAD>
<BODY>
...
<p class= "Blue" >...</P>
...
<p class= "Red" >...</P>
...
</BODY> Note that the same is the point in the declaration, class name can be taken. Flexible use of category features, you can make your style settings more mobile Yo!
Third, ID selection: Similar to category selection, the difference is in the "uniqueness." The use of ID attributes 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 over a single or several element labels, but the id attribute may appear only once in a file. As you can see in the following example. <HTML>
<HEAD>
<STYLE>
<--
#blue {Color:blue}
-->
</STYLE>
</HEAD>
<BODY>
...
<p id= "Blue" >...</P>
...
</BODY> can see that the declared way is to use the Well font size "#". This "uniqueness" of IDs is the key to allowing JavaScript or VBScript to control the elements.
Through the above introduction of the selection features of the Declaration and use, you can make your style settings more mobile and change. In fact, you can familiarize yourself with the basic Declaration and application methods introduced in the previous chapter, and then apply the selection features described in this chapter to familiarize yourself with the use of style sheets step by step.

The application of the link quasi-iconicity property

Remember the basic syntax of HTML, in the body tag can use link, ALink, Vlink properties to control the linked or linked font color? You can now use CSS to control these properties, called "Quasi-category" (Pseudo Class). You can use it as a generic category to declare its style rules, and in practice, these quasi categories do not have to be set to the category (class) in the HTML source code, as the category picker above. The declarations and applications of the quasi categories are described below.

General Declaration method: The quasi category is declared with a colon. As long as you add the following statement to the <STYLE>...</STYLE> schema, the linked text in the page will be explicit in the style you set! a:link {Style Rule}
a:active {Style Rule}
a:visited {Style Rule}
a:hover {style rule}a:link used to set style rules for not-visited links. A:active the style rules used to set the link in action. A:visited is used to set style rules for visited links. A:hover is used to set the style rule when the mouse moves over the link. The hover is not supported by NC4, and the other three features have the support of both browsers.
If you are using more than IE4 browser, from the site link you can know the beauty of hover role, with simple style settings can be achieved in the past to write a long set of the same effect. This link-like category can also be used in combination with the Category Picker feature mentioned above.


Comparison of D i v with s p a n

Although style sheets can be applied to any label, the use of DIV and span elements greatly expands the application level of HTML. The two elements of DIV and SPAN are very similar to each other in application, with the end tag used, which is the < div>...</div> and <SPAN>...</SPAN>. Two properties that can be applied are similar to event handling, and can be written in conjunction with the previously mentioned picker feature. Neither also imposes a display function on the page content, which can be said to use a very wide range of element tags.

The difference between div and span is that the DIV element is defined as a chunk (block) and is a complete paragraph block between <DIV>...</DIV>. The SPAN element is defined as the same axis (in-line),<span>...</span> applied to a small range of settings. The two can be mixed with each other, because they are independent of each other. Also, you can use these two elements to flexibly adjust the content of your Web page with other properties.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.