Home > Developer > Web Develop
CSS Introduction method
<Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style> .... </style></Head>
<style= "background:red;" >
<rel= "stylesheet" href= "./css/main.css"/ >
@import url ("Css/mycss.css")Base Selector
Element selector: H1 ...
Class selector:. Class
ID Selector: #id
Wildcard selector: *
Child element Selector:>
Descendant element selector: ul Li
Adjacent element selector: +
Property selector: []
Combo selector: h1,h2,h3,h4,h5{}
Compound selector: div.test{} (Note: There is no space in the middle, otherwise it will be recognized as a descendant selector),
Pseudo element
: First-letter:first-line:before:after :: Selection(the only pseudo-element introduced in CSS3)
Pseudo class
CSS2 only: Link,: visited,: hover,: Active,: Focus,: First-child,: lang, such as a limited number of pseudo-class selectors;
A number of pseudo-class selectors have been added to the CSS3:
structured pseudo-class:: Nth-child (),: Nth-last-child (),: Nth-of-type (),: Nth-last-of-type (),: Last-child,: First-of-type, : Last-of-type,
: Only-child,: Only-of-type,: Root:empty
Target Pseudo-class:: Target
State Pseudo-class:: Enabled,:d isabled,: checked,: indeterminate,:d efault
negation Pseudo-class:: Not ()
(The specific usage of the new pseudo-class in CSS3 can be found in the "CSS Efficient Development Combat" book)
Box model
in the Standard box model: the width and height of the content area are
IE Box Model: The width of the content area contains the sum of content, padding, and borders.
The Box-sizing property in CSS3 can define which box model to use.
Positioning
Static: default
Absolute (absolute positioning): positioned relative to its nearest ancestor element that has been positioned, if there are no positioned ancestor elements, its position is relative to the initial containing block. Absolute positioning makes the position of an element irrelevant to the document and therefore does not occupy space.
relative: when positioned relative to its original position, the element still occupies the original space, whether or not it is moved, when relative positioning is used.
fixed: always position the upper left corner of the viewport
Clear floating
1. Float parent Element
2. Add empty label clear
3, Overflow:hidden or auto;
4. After pseudo class {
Content: ".";
height:0;
Visibility:hidden;
Display:block;
Clear:both;
}
CSS hack--make CSS code compatible with different browsers
Common CSS Hack way:
① condition Comment
such as:<!--[if ie]> this text only appears in IE browser <! [End If]-->
② Property Prefix
such as:-webkit-o-moz-ms
③ selector Prefix
such as: *html
CSS3 Common Properties:
Border-radius,box-shadow,text-shadow,transform (rotate,scale,skew,translate), transition,animation, @font-face, Media Enquiry @media
Knowledge carding--css
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
