CSS Basics Learning Notes

1.CSS Basic Style explanation

1.1 CSS Background
Background-attachment: Whether the background image is fixed or scrolled along with the rest of the page
Background-color: Setting the background color of an element
Background-image: Set the picture to the background
Background-position: Set the starting position of the background picture
Background-repeat: Set whether and how the background picture repeats
Background-size: Specify the size of the background image
Background-orgin: Specify the location area of the picture
Background-clip: The drawing area of the specified background
1.2 css Text
Color: Text Colors
Direction: Text Direction
Line-height: Row Height
Letter-spacing: Character Spacing
Text-align: Aligning elements
Text-decoration: adding adornments to Text
Text-indent: Indent the first line of text in an element
Text-transform: Letters in an element
Unicode-bidi: Setting text orientation
White-space: How whitespace is handled in an element
Word-spacing: Word Spacing
Text-wrap: Wrap Line
Text-shadow: Adding a shadow to text
1.3 CSS Fonts
font-family: Set Font family
Font-size: Setting the font size
Font-style: Setting font style
Fongt-variant: Display text in small uppercase font or normal font
Font-weight: Setting the weight of a font
1.4 CSS Links
A:link Common, inaccessible links
a:visited user has visited the link
A:hover the mouse pointer is over the link
A:active the moment the link was clicked
Text-decoration: This attribute is mostly used to remove underscores in links
Background-color: Background color
1.5 CSS List
CSS List properties can be flexibly placed, changed, or marked as a list item
List-style: Abbreviated list items
List-style-image: List item image
List-style-position: List Item flag location
List-style-type: List Type
1.6 CSS Tables
Table border:

#tb,th,td,tr{    border: 1px solid blue;}

Collapse border:

#tb{    border-collapse: collapse;}

1.7 css Outlines
Outline: Setting profile properties
Outline-color: Set the color of the outline
Outline-style: Setting the style of the outline
Outline-width: Sets the width of the contour

2.CSS Box Model

Inner margin:
Outside the content, inside the border
Padding setting all margins
Padding-bottom, left, right, top individually set the margin of a direction
Border:
Creates a well-performing border and can be used with any element
Border-style: 10 Styles defined
border-(top,bottom,left,right)-style: Defining a single-sided style
Border-width: Border Width setting
border-(top,bottom,right,left)-width single border width
Border-color Border Color
border-(top,left,bottom,right)-color single border color
CSS3 Border :
Border-radius Round Corner border
Box-shadow Border Shadow
Border-image Border Picture
Outer margin:
Margin overall margins
margin-(top,bottom,left,right) unilateral margin
Margin Merging: a concept of superposition

3.CSS positioning and floating

CSS positioning:
Position:static, relative, absolute, fixed;
Top
Left
Right
Bottom
Overflow
....
CSS floating:
Float Property: Left,right,none,inherit
Clear property: Remove Floating property
Left,right: Remove left and right floating
Both: the left and right side floats are removed
Inherit: Inherit from parent to clear value

4.css Selector

Derived selectors:

li strong{    color：red；}

Specifically, the strong label effect in the list item has been defined so that the effect is not overwritten.

ID selector:

#id {    color:red;}

The ID selector can be used in combination with a derived selector, and the ID selector does not work with the ID combination

Class selector:

.pclass{    color:red;}

Class selectors can also be combined with derived selectors

Property selector:
Lack of provincial-only selector:

[title]{    color:red;}   

Property selector with a name:

[title=te]{    color:red;}

Attribute selectors are not supported in IE6 and lower versions
The property selector must match exactly before it works

Child element Selector:
Use of > symbols, but only a first-level positioning

Adjacent sibling selector:
Label + Label form, this as long as a simple understanding can be

CSS Basics Learning Notes