Class
In order to define the webpage format more accurately, it is necessary to categorize the same selector and design different styles according to different categories. The basic format is as follows:
Selector. Category name {attribute: value}
Category names can be referenced in HTML identifiers:
<Identifier class = Category name> webpage content
Instance:
| The code is as follows: | Copy code |
| <Html> <Head> <Title> CSS example </title> <Style type = "text/css"> <! -- P. English {font-family: "Courier New "} P. Chinese {font-family:} --> </Style> </Head> <Body> <P id = English> </p> <P id = Chinese> Webpage Tutorial network </p> </Body> </Html> |
|
ID
ID is to send an "ID card" to the style in the HTML text block to ensure that it has unique available values in an HTML text block, this uniqueness also facilitates the use of JavaScript and other scripting languages.
The usage of ID is similar to that of Class, but it starts with "#" rather.
Instance:
| The code is as follows: | Copy code |
| <Html> <Head> <Title> CSS example </title> <Style type = "text/css"> <! -- # English {font-family: "Courier New "} # Chinese {font-family:} --> </Style> </Head> <Body> <H1 id = English> <H2 id = Chinese> Webpage Tutorial network </Body> </Html> |
|
Pseudo Class
In addition to the preceding classification methods, a pseudo-class concept is introduced to make the classification more flexible and diverse. What is the difference between a class and a pseudo class?
Generally, the selector can be set in the form of a bundle for multiple classes. Although multiple styles can be created for the same selector, however, the bundled form also limits the set class to be used by other selector. Pseudo classes are generated to solve this problem. Each pre-declared pseudo class can be referenced by all HTML identifiers, except for some block-level content settings.
Here, we only use the most common pseudo-anchor as an example. The pseudo-anchor class can specify that element a displays links in different ways ), when a mouse clicks a link, a accessed link, and an activated link, an Accessed link can be defined as a display, font size, and style of different colors.
The basic format is as follows:
. Pseudo class name {attribute: value}
Pseudo classes can be referenced by any identifier in HTML.
<Identifier class = pseudo class name> webpage content
Instance:
| The code is as follows: | Copy code |
| <Html> <Head> <Title> CSS example </title> <Style type = "text/css"> <! -- A: hover {font-size: 18pt}/* link when the mouse is clicked */ --> </Style> </Head> <Body> <A href = "#"> </Body> </Html> |
|
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
