CSS skills and mistakes summary, CSS skills mistakes Summary
4.14
CSS background attribute Abbreviation:
Combination of background-position attributes :[Left|Center|Right] | [Top|Bottom] (No underline in the middle after the combination)
Background-attachmentAttribute to set whether the background image is fixed or scrolled with the rest of the page
Abbreviated order of background attributes: background-color | background-image | background-repeat |Background-attachment| Background-position
4.15
Rounded corner Frame: Border-radius and border-image of css3
Border-radius: Top, right, bottom, left (four attribute values)
Border-image: Url (), cropping location, repetition
Eg: border-image: url (), 25% 25% 25% 25%/25px round;
↑
Horizontal and vertical Border Width
Mountain corner(Using border features ):
Reference: http://www.jsann.com/post/CSS_to_achieve_the_principle_of_the_Peak_Point.html
Shadow: Box-shadow
Box-shadow: 3px 3px 6px #666;
↑
Horizontal shadow position vertical shadow position shadow width color
Opacity:
Rgba also sets the color and opacity.
Background-color: rbga (0.8, 0)
Last is transparency, 80%
Parallax scroll:
The background image is shifted horizontally by 20% relative to the window size. When the window size is adjusted horizontally, the background image position changes to produce a moving effect.
Background-position: 20% 0;
Set the scene to 40%
Foreground: Set to 150%
The larger the value, the faster you want to move, the more deeply you feel.
Link application Style:
Pseudo-class sequence of a: Lord Vader Hates Furry Animals
A: link, a: visited, a: hover, a: focus, a: active
[If they are not defined in this order, the priorities of the two are the same. The link and visited styles will overwrite the other three.]
Link underline Of:
1. border
2. Images
Code reference:
<Style type = "text/css">
. Box {
Width: 45%;
Margin-top: 2em;
Padding: 30px 10px;
Border-radius: 1em;
Color: #000;
Position: left;
}
/* Yellow to white after jump, id can also be added before the pseudo-class selector, gif is stopped after only one play */seek to be resolved
/* # Comment3: target {
Background-image: url ("fade.gif ");
}*/
. Box: target {
/* Background-image: url ("fade.gif ");*/
}
A: link {
Color: red;
}
A: visited {
Color: gray;
}
A: link, a: visited {
Text-decoration: none;
}
A: hover, a: focus, a: active {
Text-decoration: underline;
Border-bottom-style: solid; // underline type
Color: darkblue;
}
</Style>
</Head>
<Body>
<H1> Comments <Div class = "box" id = "comment1">
<H2> Comment #1 <P> Lorem ipsum dolor sit amet </p>
<A href = "# comment2"> comment2 </a>
</Div>
<Div class = "box" id = "comment2">
<H2> Comment #2 <P> Mauris sit amet nisl in eros porta faucibus. </p>
<A href = "# comment3"> comment3 </a>
</Div>
<Div class = "box" id = "comment3">
<H2> Comment #3 <P> viverra in, massa. Sed a sem. </p>
<A href = "# comment1"> comment1 </a>
</Div>
======================================
Color: foreground color (font color)
Background-color: background color
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
