Home > Developer > Web Develop
First, the classification of CSS style sheets
First of all, the CSS in the style sheet A, the external style sheet will need to put the style in a separate external file, need to use is a direct call, usually placed in a. css file. For example:/* The following section is placed in the (MY.CSS) custom name of the CSS file */
H1,h2,h3{color:blue;}
h1{font-size:18px;}
h2{font-size:35px;}
p{font-size:10px;}
Note: the. css file does not need to write header files and other content, directly start writing style content.
/* The following section is called the. css file above in HTML */
Add <link rel= "stylesheet" type= "Text/css" Url= "my.css" (Address of style sheet) in the middle of
b, embedded style sheet
Format
<style type= "Text/css" > This is an embedded style content, such as #id ={color:red;} </style>
Note: The <style > segment of the document must be written between
c, inline style sheet
For example:
This style sheet is used only for a subset of page elements, and in new web standards, it is best to put styles in a <style> or external style sheet file.
A style rule consists of a selector and a declaration block.
Ii. classification of selectors
1. Element selector, also known as type selector
For example: em{cloor:red;}
p{font-size:10px;}
That is, all of the EM elements in <body> are set to red, all the paragraph <p> font size is set to 10px.
2. Class selector (classes attribute)
Syntax format:. class Name {property: value}
such as:
<title> class Selector Use </title>
<style>
. Big {color:red}
</style>
<body>
<p class= "Big" ></p>
</body>
3. ID selector (similar to class selector, can be used to select HTML element with id attribute)
Syntax: #id名称 {property: value;}
For example: write between <style></style> #navigation {width:200px;color: #333;}
In the main program <body></body> middle can call the above navigation <div id= "navigation" ></div>
4. Include selector
For example: em{color:red}
Indicates that the font of all EM elements is set to red throughout the program;
P EM {coloe:red}
Only indicates that the <em> element font in paragraph <p> is set to red, while other possible <div> or other elements have the same font color.
5. Wildcard selector (*)
Wildcard selector for selecting all elements
For example: *{color:red;}
The entire displayed page font setting is red.
6, Pseudo-class selector (commonly used is the <a> element-related hyperlink pseudo-class selector)
A {} can be set regardless of link state
A:link {} used in a selector for an unreachable link
a:visited {} used in a selector for a link that has been visited
a:hover {} When the mouse is placed on the link selector on the access address
a:active {} When the mouse clicks the access address is the link selector
(The following four states can be combined, but the order must be written in the order above)
a:link,a:visited {color:red;}
a:hover,a:active {color:blue;}
7. Pseudo Element Selector
The standard selector cannot format the first letter or the first line of an element, and the pseudo-element can do so;
There are two types of support in the pseudo-element selector that are supported by all browsers: First-line First-letter
P:first-line {Font-weight:bold} (first line of paragraph)
P:first-letter {font-size:200%;font-weight:bold;} (The first letter of a paragraph)
Look here: One: Class selectors can be used as many times as needed within a document, while the same ID selector can only be applied once in a document;
One: For the same HTML element, multiple class selectors can be used to format, and only one ID selector can be used;
Three: the declaration of the ID selector is preferred when the class selector conflicts with the declaration of the ID selector.
CSS Basics (i)
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
