CSS basic learning notes and css learning notes

CSS basic learning notes and css learning notes
1.css basic style

1.1 css background
Background-attachment: whether the background image is fixed or scrolled along the rest of the page
Background-color: sets the background color of an element.
Background-image: Set the image as the background
Background-position: Set the starting position of the background image.
Background-repeat: sets whether or not the background image is repeated.
Background-size: Specifies the size of the background image.
Background-orgin: Specifies the location of the image.
Background-clip: Specifies the plotting area of the background.
1.2 css text
Color: text color
Direction: Text direction
Line-height: Row height
Letter-spacing: Character spacing
Text-align: align
Text-decoration: add modifier to text
Text-indent: the first line of text in the indent Element
Text-transform: letters in the element
Unicode-bidi: Set the text direction
White-space: white space Processing Method in the element
Word-spacing: word spacing
Text-wrap: automatic line feed
Text-shadow: Add a shadow to text.
1.3 css font
Font-family: Set the font family
Font-size: Set the font size
Font-style: Set the font style
Fongt-variant: displays text in small or normal font
Font-weight: Set the font width
1.4 css Link
A: link is a common, unaccessed link.
A: The access link of the visited user
A: The hover mouse pointer is above the link.
A: The time when the active link is clicked.
Text-decoration: This attribute is mostly used to remove the underline in the link.
Background-color: background color
1.5 css list
CSS list attributes can be flexibly placed or changed, or images can be used as list item flags.
List-style: abbreviated list item
List-style-image: list ITEM image
List-style-position: position of the list item flag
List-style-type: list type
1.6 css table
Table border:

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

Collapse border:

#tb{    border-collapse: collapse;}

1.7 css outlines
Outline: Set profile attributes
Outline-color: Set the outline color
Outline-style: Set the outline style
Outline-width: Set the width of the contour.

2.css Box Model

Padding:
External content, inside the border
Set all margins for padding
Padding-bottom, left, right, and top separately set margins in a certain direction
Border:
You can create excellent borders and use them for any element.
Border-style: 10 styles are defined.
Border-(top, bottom, left, right)-style: defines a unilateral 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 rounded border
Box-shadow border shadow
Border-image border image
Margin:
Overall margin of margin
Margin-(top, bottom, left, right) Unilateral margin
Margin merge:Is a concept of superposition.

3.css positioning and floating

Css positioning:
Position: static, relative, absolute, fixed;
Top
Left
Right
Bottom
Overflow
....
Css floating:
Float attributes: left, right, none, inherit
Clear property: remove floating Property
Left, right: Remove left and right floating
Both: both sides of the float are removed
Inherit: inherits the clear value from the parent level.

4.css Selector

Derivative selector:

li strong{    color：red；}

Specify the strong tag effect in the list items. The defined effect will not be overwritten.

Id selector:

#id {    color:red;}

The id selector can be used in combination with the derived selector. The id selector cannot be used in combination with the id.

Class selector:

.pclass{    color:red;}

The class selector can also be used in combination with the derived selector.

Attribute selector:
Default attribute selector:

[title]{    color:red;}   

Attribute selector with name:

[title=te]{    color:red;}

Attribute selectors are not supported in IE6 and earlier versions.
The attribute selector must be completely matched to take effect.

Child element selector:
Use> symbol, but can only be located at the first level

Adjacent sibling selector:
Tag + tag form, as long as you have a simple understanding