Home > Developer > Web Develop
can be named Style.css. As follows:
<title> Display </title>
<link rel= "stylesheet" type= "Text/css" href= "Style.css"/>
CSS rules consist primarily of selectors and declarations. A declaration consists of a property and a value. A rule can have multiple declarations. Of course selectors can also have multiple intermediate commas separated
In this example, H1 is a selector, color and font-size are attributes, and red and 14px are values.
h1{color:red; font-size:14px;}
h1,h2,h3,h4,h5,h6{
Color:green;
}
To look concise, a statement takes up one line
Separated by "Colon:" between the property and the value
Remember when a statement is finished, there must be a semicolon ";"
The selector and the declaration are separated by a "space"
Declare we wrap it in curly braces "{}"
If the value does not know how much appropriate, can be directly online search
4 CSS Selector Introduction4.1CSS element Selector
also known as the type selector, is an element of HTML, such as P,A,H1. It can even be HTML itself.
H1{font-family:sans-serif;}
4.2CSS Selector Grouping
Group multiple elements together
H1,H2, H3, H4, H5, h6 {color:blue;}
Class 4.3 selector
In the HTML file
Thisheading is very important.
<pclass= "Important" >
Thisparagraph is very important.
</p>
In the CSS file
If you only want to change the H1 element
H1.important{color:blue;}
If you want all the same classes to be changed
*.important {color:red;}
Of course, you can also omit the asterisk "*"
But be sure to pay attention to the point in front of the class "."
4.4 ID Selector
In the HTML file
<pid= "Intro" >this is a paragraph of introduction.</p>
In the CSS file
#intro {font-weight:bold;}
First create an ID name in the HTML file, and then in the CSS file, add a pound "#" to the ID name
4.5 Property Selector
Attributes that apply to an element, such as the attribute href of a element
a[href]{color:red;}
This will make the font of the link appear red
4.6 descendant selector (contains selectors)
Descendant selectors can select elements as descendants of an element
In the HTML file
<p>thisis a <em>important</em> paragraph.</p>
In the CSS file
h1em {color:red;}
The effect is that only the upper important turns red
4.7 Pseudo-Class
For example, in HTML
<body>
<p>sometext</p>
<p>sometext</p>
</body>
In the CSS
p:first-child{
color:red;
}
The effect is that only the first "some text" turns red
4.8 Pseudo-elements
In the HTML file
<body>
<p>
Youcan use The:first-letter pseudo-element to add a special effect to the firstletter of a text!
</p>
</body>
In the CSS file
P:first-letter
{
Color: #ff0000;
Font-size:xx-large
}
The first letter "Y" turns red and becomes larger.
Finally, give advice to everyone, W3shcool for the website development Beginners have a relatively large introductory training
The basics of getting started with CSS tutorial
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
