This article is a learning note, part of which is taken from Mr. Li Xiaofeng's CSS design guide.
CSS rules
A css rule is actually a CSS command. This command selects the HTML element and then sets the style of the selected element.
The following is a simple CSS rule that sets the section background color to green.
Example_1
P {background-color: green}
CSS rule naming
A css rule consists of two parts: Selector and declaration.
Selector: Specifies the elements to be selected.
Declaration: It is composed of attributes and values. Attributes indicate the styles that affect elements. Values are actually a state of attributes.
In the preceding example, we can see that a rule is selected from left to right: selection character, left curly braces, attributes, colons, values, and right curly braces.
Extended Example_1
①: Multiple statements are written in one rule.
P {color: green; font-size: 45px; font-weight: bold}
The HTML code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> HTML 5 Template </title>
<Meta charset = "UTF-8">
<Link href = "style.css" rel = "stylesheet" type = "text/css">
</Head>
<Body>
<P> How CSS Works </p>
</Body>
</Html>
Running effect:
PS: separated by semicolons
②: Use commas to combine multiple delimiters
H1, h3, p {color: green; font-size: 45px; font-weight: bold}
HTML code:
<Body>
<H1> multiple selector combinations
<H3> Title 3
<P> How CSS Works </p>
</Body>
Running Effect
③: Apply multiple rules to the same selector.
H1, h3, p {color: green; font-size: 45px; font-weight: bold}
Now we want to set the background color of Section p to blue. We can add another rule.
P {background-color: blue}
Running Effect
What types of delimiters are available?
1. Select an element based on the ancestor or compatriot element.
Ii. Select elements based on the values of ID and Class attributes.
3. Whether or not the attribute-based feature selection element is available
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
