CSS All content

Selector:
. class{} class Selector
#id {} ID Selector
p{} tag Selector
* {} Universal Selector

Li a{} descendant selector
div>p{} son Selector
div+p{} adjacent Selector
#i1 ~p{} Brother Selector

p[title]{} Property Selector
p[title= "article"]{} property value Selector
[title^= "article"] {} has the Title property and the title property begins with article
[title$= "article"] {} ends with article
[title*= "article"] {} contains article
[title~= "article"] {} Title can have many values, one of which is article

Div,p{} applies to each
. C1 p{} descendant Selector

Pseudo-Class selectors:
a:link{} links that have not been visited
a:visited{} visited Links
a:hover{} Move the mouse over the link
a:active{} selected Link
input:focus{} input field style when the input box gets focus

Pseudo element selector:
p:first-letter{font-size:48px;color:red;} First Letter Special format
P:before{content: "*"; color:red;} Paragraph plus * More for clear floating
P:after{content: "?  "; color:red;} Post-paragraph add? More used to clear floating


Declaration (attribute: value):
Font:
Font-family: ... Font family
font-size:14px Font Size
Font-weight:normal (default) bold (coarse) bolder (thicker) lighter (finer) 100~900 (400 equals normal 700 equals bold)
Color: #ff0000 rgb (255,0,0) Red

Text:
Text-aligh:left (Align Left) center (center) justify (justify) right (aligned)
Text-decoration:none underline overline Line-through inherit common none remove the underline of a label
text-indent:32px; Indent 32 pixels in the first row


Background:
Background color
Background-image:url (' 1.jpg '); Background image
Background-repeat:repeat default Flat layout full page no-repeat (not repeat) repeat-x repeat-y;
Background-position:right Top (20px 20px); background position
background-attachment:fixed; Fixed picture position


Border:
BORDER:2PX solid red; Border width 2 solid line red
Border-top-style:solid;
border-right-color:red;
Border-bottom-style:none; Bottom No border

border-radius:50%; Round (can turn the avatar into a circle)

Display Properties:
Display: "None"; Hide tags, general with JS use
Display: "Block"; Change to block level label
Display: "Inline"; Become inline label
Display: "Inline-block"; becomes inline block label
Visibility:hidden; Hides the label, but the hidden element still needs to occupy the same space as it did before it was hidden. That is, although the element is hidden, it still affects the layout.



CSS Box Model:
margin outer margin
padding inner margin
Border border
Content contents
Order: top Right bottom left
Common Center: margin:0 Auto;
(not to be continued)


Float Property:
Float:left; Float left
Float:right; float Right
Float:none; Do not float


Clear (solve the problem after floating)
Clear:left; Floating element not allowed on left
Clear:right; Floating elements are not allowed on the right
Clear:both; Floating elements are not allowed on both sides
Clear:none; The default value, which allows floating elements to appear on both sides.
Floating is generally cleared in the following ways:
. c1:after{
Clear:both;
Content: "";
height:0;
Visibility:hidden;
Display:block;
}


Overflow Overflow property:
overflow:visible; Default value, content is not trimmed
Overflow:hidden; Content will be trimmed, trimmed out of hidden
Overflow:scroll; The contents are trimmed, the trimmed scroll bars are displayed
Overflow:auto; If the content is trimmed, a scroll bar appears
Overflow-x: ...;
Overflow-y: ...;


Position positioning Properties
position:static; Default value, no positioning
position:relative; Relative (original position) positioning
Position:absolute; Absolute positioning
position:fixed; Fixed can be used to do back top


Z-index Custom Modal Box properties:
z-index:999; Large values are overlaid on a small number of labels

CSS All content