Summary of Javaweb Basic-CSS Learning

Key memory: Four combinations of three basic selectors
　　1.CSS: Cascading Style Sheets
　　Equivalent to Skin
Improved maintainability, style and content separation (note format */*)

　　2.CSS combined with HTML four ways: inline, embedded, external
1. There is a style "property" on each label to control sytle= "Key:value;key:value" <div style= "" >
2. Use the style tag: <style type= "Text/css" >div{key:value}</style> written on the head
3. Use the statement in the style tag, similar to the 2 "compatibility poor"
@import url{css file path};
4. Using the link header tag to introduce external files <link rel= "stylesheet" type= "Text/css" href= ""/> Separated "recommended"
　　

CSS priority: top-to-bottom, from outside to inside priority (nearest principle)

　　3. CSS selector: which tag to work on
three basic selectors　　
1. Tag Selector: Use tag name as selector name (top 2)
2. Class selector "most commonly used": Each HTML tag has a class attribute, using this value as the selector.
How to use: div.haha{}. haha{} (all class values are haha)
3.id selector "for JS": Each HTML tag has an id attribute, using this value as the selector.
How to use: div#haha{} #haha {} (all ID values are haha)
Priority of the base selector: (inline nearest style highest) >id>class> label

Different points:

1. The ID selector can only be used once in the document. Unlike class selectors, in an HTML document,
The ID selector can only be used once, and only once. The class selector can be used more than once.
2. You can use the class selector word list method to set multiple styles for an element at the same time. We can set multiple styles for one element at a time
But it can only be implemented with the method of the class selector, the ID selector is not possible (the ID word list cannot be used).
<span class= "Stress bigsize" > can be set to two simultaneously.

three types of expansion selectors 　　
1. Associate Selector: You can set the style in nested tags
style div p{}, such as:<div><p></p></div> set P label
. Food>li. First span
Summary:> acts on the first generation of descendants of the element, and the space acts on all descendants of the element.
2. Combo selector: Set different labels to the same style
like:<div></div> <p></p> set the same style div,p{}
3. Pseudo-Element selector: Provides some well-defined style "for understanding"
What's even more interesting is the pseudo-class selector, which is called a pseudo-class selector, which allows you to set a style for a label that doesn't exist in HTML
such as hyperlinks (LV ha):
Status: The original state hover state click Status after click
: link:hover:active:visited
a:hover{color:red;}
style operation in header style a:link{} a:hover{}

　　 4.CSS Box Model (now mainstream is div+css)
　　 before we explain the CSS layout, we need to know some knowledge in advance,
In CSS, tag elements in HTML are broadly divided into three different types: block elements, inline elements, and inline block elements.
important concept border: border (set up and down around Border-top border-bottom border-left border-right)
Properties: Width (that is, thickness) style (style) color
Padding : padding (div text content distance border value) (four directions ibid.)
Property: Length
Margin : Margin (the distance from the div to the outside) also ibid.
remember the margin (margin), padding (padding), and border (border) when you talk about the box model
setting the margin in the upper and lower left and right four directions is set in a clockwise direction (the default order when not set separately)
　　 5.CSS of the layout of the floating "for understanding, with less"
　　 float
two attribute values: Left text flow flows to the right of the object (self-living, behind Div right) to the left
　　 positioning of the 6.CSS layout
　 position
two attribute values: Absolute: Drag the object out of the document stream (float on top, back up), then use up or down to position
relative: objects are not overlapping (not dragged), still using up and down positioning
　　 7. Case study: Picture and text mixed image signature

Summary of Javaweb Basic-CSS Learning