Home > Developer > Web Develop
1,CSS Basic selector:
When linking an external CSS file in an HTML file, the code is required: <link href = "12-1.css" type= "Text/css" rel= "Styleshee"/>
(1) HTML basic selector: Sets the uniform format for all the same tags in the page.
(2) class selector: Special effects on some individual tags in the same tag, class names can be named in HTML. Basic syntax:. class{property: Property Value}
(3) ID selector: must be unique in an HTML page. Basic syntax: #IDname {property: Property value}
2.CSS Composite selector:
(1) Property selector: Sets the style for the HTML element of the specified property: [Title ~=hello]{color:red;}
(2) Intersection selector: Tag Selector. class selector/id selector. eg:h1.class{}
(3) Set selector: The style set is valid for each selector in the set selector. eg:h1,h2,class{border-color:red;}
Wildcard selector: Displayed as an asterisk (*), the selector can match any element, as if it were a wildcard character.
(4) Descendant selector: The HTML markup for a particular location is declared in a nested manner. Eg:div p{border-color:red;} .......<body><div> descendant selector <p> effects </p></div>
(5) Descendant selector: Shrinks the range relative to the descendant selector. eg:h1>strong{color:red;} ...
(6) Adjacent brother selector: eg:h1+p{margin-top:50px;} Increases the top margin of the paragraph that appears immediately after the H1 element.
(7) Pseudo-class selector: A:link a:visited has visited a:hover hover a:active activity
3.CSS Common Properties:
(1) Font properties: font-size: Set Font size font-family: Set Font type font-weight: (Normal,lighter,bold,bolder) Font-style: (Normal,itali C,oblique) (2) Text properties: Text-indent: Set the first line indent distance of text line-height: Define the line spacing letter-spacing: Define the character spacing Text-decoration: (Underline,overline, Line-through,none) Set Dash text-align: (left,center,right,justify) Set content alignment(3) List properties:
(4) Color and Background properties: Color,background-color,background-image,background-repeat (Repeat-x,repeat-y,repeat, No-repeat) Set image cross-portrait repeat background-position set background image position
(5) block attribute: width,height,float,clear (prevents floating elements from appearing next to the owning object), Padding,margin
(6) Layer properties: Mainly used for locating boxes. Position,top,left,width,height,z-index (decision on the level of coverage), Clip,overflow
(7) Mouse properties: Cursor:pointer set mouse to hand shape
(8) Filter Properties
4. Applying CSS in an HTML document
(1) Inline: Use the Style property directly on HTML tags to decorate individual markers
(2) Inline: Write the CSS code between the
(3) Link: Implement CSS code and HTML code separation, you can link a CSS file to different HTML pages. <link href= "14-1.css" type= "Text/css" rel= "stylesheet" >
(4) Import:<style> <[email protected] URL (14-1.css)--></style>
5.CSS Conflict Issues
inline > Inline > External style
In multiple external styles, the post-occurrence style takes precedence over the first-appearing style
In style, selector priority: ID selector >class style > marker style
6. Box model
(1) box Border properties: Border-color,border-width,border-style. Set different property values for different borders, in turn, upper right and left, clockwise.
(2) box padding padding: The property is in order to the upper right bottom left, clockwise direction.
(3) Box margin properties: Margin
7. Floating and positioning of the box
(1) Standard flow: block-level elements and inline elements
(2) The positioning principle of the box: 1) Horizontal positioning between elements within rows: the horizontal spacing between elements in two rows is determined by the right margin of the left element plus the left margin of the right element.
2) vertical positioning between block-level elements: the distance between two block-level elements is larger than the other.
3) positioning between nested boxes
4) position between boxes when margin is negative: The block set to negative value moves in the opposite direction, even above the other block.
8. Float float: Floating elements will float as upward as possible, but will not float into the standard flow
9. Positioning of the box: Position property Positioning: Static (default property value, layout according to the standard flow), relative (so that the box offsets the specified distance from its original standard position), absolute (the box position is offset by its containing box), Fixed (when dragging the scroll bar of a browser window, the position of the object remains the same)
10. The Classic Div+css layout page
CSS Cascading Style Sheets
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
