High style sheet priority
I. background and prospects
Background-color: # f90;/* Background color. The style sheet has a high priority */
Background-image: URL (PATH);/* set the background image */
Background-Attachment: fixed;/* The background is fixed and does not scroll with the font */
Background-Attachment: Scroll;/* The background scrolls with the font */
Background-repeat: No-Repeat;/* No-repeat, repeat, repeat-X, repeat-y, not tiled, horizontally tiled ,*/
Background-position: center;/* the center of the background image. When setting the background image position, the repeat must be "no-repreat "*/
Background-position: Right top;/* place the background image in the upper right corner (you can change its orientation )*/
Background-position: Left 100px top 200px;/* 100 pixels to the left and 200 pixels to the top (which can be set to a negative value )*/
Font
Font-family: "" ";/* font. It is often used by and. */
Font-size: 12px;/* font size. Commonly used pixels are 12px, 14px, and 18px. You can also use "em", "2.5em", that is, 2.5 times the default font. You can also use the percentage */
Font-weight: bold;/* Bold is bold, normal is normal */
Font-style: italic;/* skew, normal is not skewed */
Color: # 03c;/* color */
Text-Decoration: underline;/* underline. overline indicates the upper line, line-through indicates the strikethrough, and none indicates the underline */
Text-align: center;/* (horizontal alignment) center alignment, left alignment, right alignment */
Vertical-align: middle;/* (vertical alignment) center alignment, top alignment, and bottom alignment */
Text-indent: 28px;/* indent of the first line */
Line-Height: 24px;/* The Row Height. Generally, it is 1.5 ~ 2 times the font size. */
2. Border and border: border (Table border, style, etc.), margin (outer table spacing), and padding (content and cell spacing)
Border: 5px solid blue;/* four borders: 5 pixels wide, solid line, blue (equivalent to the following three lines )*/
Border-width: 5px;
Border-style: solid;
Border-color: blue;
Border-top: 5px solid blue;/* Top border: 5 pixels wide, solid line, blue (same as above )*/
Border-bottom: 5px solid blue;/* Bottom Border: 5 pixels wide, solid line, blue (same as above )*/
Border-left: 5px solid blue;/* Left Border: 5 pixels wide, solid line, blue (same as above )*/
Border-Right: 5px solid blue;/* Right Border: 5 pixels wide, solid line, blue (same as above )*/
Margin: 10px;/* the width of the border on the four sides is 10 pixels */
Margin-top: 10px;/* the width of the top outer border is 10 pixels */
Margin: 20px 0px 20px 0px;/* the upper-right-bottom-left and the outer border of the four sides are clockwise */
Padding: 10px;/* the spacing between the content and the four sides of the cell is 10 pixels */
Padding-top: 10px;/* the spacing between content and cells is 10 pixels */
Padding: 20px 0px 20px 0px;/* Top-right-bottom-left, clockwise order of the content and the four sides of the cell */
Iii. List and square
Width, height, (top, bottom, left, right) are only useful in absolute coordinates.
List-style: none;/* cancel sequence number */
List-style: circle;/* the sequence number is changed to a circle, and the style is equivalent to disorder */
List-style-image: URL (image address);/* sequence number of the image */
List-style-position: Outside;/* sequence number out of content */
List-style-position: Inside;/* sequence number with content */
Iv. Format and Layout
1. Fixed: Lock location (relative to the browser location). For example, some websites have pop-up windows in the lower right corner.
Example:
<Head>
<Title> 123 </title>
<Style type = "text/CSS">
#
{
Border: 5px solid blue;
Width: 100px;
Height: 100px;
Margin: 10px;
Background-color: #0f3;
Left: 30px;
Bottom: 20px;
Position: fixed;
}
</Style>
</Head>
<Body>
<Div id = "A">
</Div>
</Body>
Shown below
2. Absolute
1) if the outer layer does not have position: absolute (or relative);, the DIV is located relative to the browser, for example, center B (50 pixels from the right border of the browser and 20 pixels from the bottom border of the browser ).
2) the outer layer has position: absolute (or relative);, then the DIV is located relative to the outer border, such as BB (50 pixels from the Right Border of D, 20 pixels from the bottom border of D ).
Code:
<Head>
<Title> 123 </title>
<Style type = "text/CSS">
. B
{
Border: 5px solid blue;
Width: 100px;
Height: 100px;
Margin: 10px;
Background-color: #0f3;
Right: 50px;
Bottom: 20px;
Position: absolute ;/**/
}
</Style>
<Style type = "text/CSS">
. C
{
Border: 2px solid red;
Width: 400px;
Height: 200px;
}
</Style>
<Style type = "text/CSS">
. D
{
Border: 2px solid red;
Width: 400px;
Height: 200px;
Position: absolute;
}
</Style>
</Head>
<Body>
<Div class = "C"> C
<Div class = "B"> B
</Div>
</Div>
<Div class = "D"> d
<Div class = "B"> BB
</Div>
</Div>
</Body>
3. Relative
Move relative to the default position. For example, a is in the position before moving with relative, AA is in the position after moving with relative, AA is 50 pixels away from the top of the original position, and 20 pixels away from the left of the original position.
Code:
<Head>
<Title> 123 </title>
<Style type = "text/CSS">
#
{
Border: 5px solid blue;
Width: 100px;
Height: 100px;
Margin: 10px;
Background-color: #0f3;
Position: fixed;
}
</Style>
<Style type = "text/CSS">
# Aa
{
Border: 5px solid blue;
Width: 100px;
Height: 100px;
Margin: 10px;
Background-color: #0f3;
Left: 20px;
Top: 50px;
Position: relative;
}
</Style>
</Head>
<Body>
<Div id = "A">
</Div>
<Div id = "AA"> AA
</Div>
</Body>
Shown below
4. layer (Z-index ). Layered in the Z axis, it can be understood as a page of paper, the higher the layers, the closer to the top.
In the above relative example, we can see that AA covers a, because the code written later will cover the previous one, so how to make a cover AA without changing the code order, as follows:
<Head>
<Title> 123 </title>
<Style type = "text/CSS">
.
{
Border: 5px solid blue;
Width: 100px;
Height: 100px;
Margin: 10px;
Background-color: #0f3;
Position: fixed;
Z-index: 2;/* modify it here. By default, all layers are 1st */
}
</Style>
<Style type = "text/CSS">
. AA
{
Border: 5px solid blue;
Width: 100px;
Height: 100px;
Margin: 10px;
Background-color: #0f3;
Left: 20px;
Top: 50px;
Position: relative;
}
</Style>
</Head>
<Body>
<Div class = "A">
</Div>
<Div class = "AA"> AA
</Div>
</Body>
Shown below
140918 ● style sheet
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
