For a non-element inline style, you need to define the style selector. In general, it is the elements that this style applies to. Style selectors include: Tag selector, class selector, Id selector, Association selector, and combination selector, pseudo Selector
1. Tag Selector
Use uniform labels for specified labels;
<Head>
<Style type = "text/CSS">
Input {border-color: yellow; color: Red}
</Style>
</Head>
2. class selector
Define a named style, and set the class attribute of the element as the style when using it. You can also set multiple classes at the same time and add spaces between names.
<Head>
<Style type = "text/CSS">
. Warning {Background: yellow}
. Highlight {font-size: XX-large; cursor: help ;}
</Style>
</Head>
Here,. waringhe. Highlight defines a name for the element. This name does not apply to any element unless it is referenced.
Reference the style;
<Body>
<Table> <tr> <TD class = "highlight"> AAA </TD>
<TD class = "warning"> keleyi.com </TD>
<TD class = "Warning highlight"> CCC </TD>
</Tr>
</Table>
</Body>
Label + class selector:
The class selector can also apply the same style name to different labels based on different labels. You only need to add the label name to the front.
<Head>
<Style type = "text/CSS">
Input. accountno {text-align: Right; color: Red}
Label. accountno {font-style: italic ;}
</Style>
</Head>
3. ID selector: Set the style for the element of the specified ID.CodeAs follows:
<Head>
<Style type = "text/CSS">
# Username {font-size: XX-large ;}
</Style>
</Head>
Use the style in the body:
<Body>
<Input id = "username" type = "text" value = "AAA"/>
</Body>
The style of the element whose ID is username is {font-size: XX-large ;}
4. More selectors
(1) Association selector (the style under mutual association must be changed)
The Code is as follows:
<Head>
<Style type = "text/CSS">
P strong {background-color: yellow ;}
</Style>
</Head>
The code above indicates the style used for the content related to the P tag and the strong tag (that is, the style used for the content in the strong tag in the p tag)
<Body>
<Strong> ke leyi </strong>
<P> <strong> www.keleyi.com </strong> </P>
</Body>
We can see that only the font of the <strong> label in the above Code has not changed, and the font in <p> <strong> can use the CSS style above.
(2) combination selector: set the same style for multiple tags at the same time;
<Head>
<Style type = "text/CSS">
H1, H2, input {background-color: green ;}
</Style>
<Head>
The above Code sets the H1, H2, and input styles to {background-color: Green}. When we use these three tags, the same style appears;
The Code is as follows:
<Body>
<H1> AAAA
<Input type = "text" value = "text"/>
</Body>
(3) pseudo selector: set different styles for different states of tags, such as: A: style clicked by the visited hyperlink; A: style selected by the active hyperlink;: link: status when the hyperlink has been accessed
A: hover: The style when the mouse moves to the hyperlink
Now let's use these styles to set styles for hyperlinks. Put these styles in the CSS file, because these styles are basically fixed, as long as you introduce these styles when using hyperlinks;
The Code is as follows:
A: visited
{
Text-Decoration: None
}
A: active
{
Text-Decoration: None
}
A: Link
{
Text-Decoration: None
}
A: hover
{
Text-Decoration: underline
}
Reference the style on the HTML page;
<Head>
<Link type = "text/CSS" rel = "stylsheet" href = "link.css">
</Head>
Next we will create a hyperlink:
<Body>
<A href = "http://www.keleyi.com"> ke leyi </a>
</Body>
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
