CSS basic knowledge study notes_html/css_WEB-ITnose

1. Explanation of basic css styles

1.1 css background
background-attachment: whether the background image is fixed or scrolls with the rest of the page
background-color: Set the background color of the element
background-image: Set the image as the background
background-position: Set the starting position of the background image
background-repeat: Set whether and how the background image repeats
background- size: Specifies the size of the background image
background-orgin: Specifies the positioning area of ​​the image
background-clip: Specifies the drawing area of ​​the background
1.2 css text
color: Text color
direction: text direction
line-height: line height
letter-spacing: character spacing
text-align: aligning elements
text-decoration: adding decoration to text
text- indent: Indent the first line of text in the element
text-transform: Letters in the element
unicode-bidi: Set the text direction
white-space: How to handle whitespace in the element
word-spacing: word spacing
text-wrap: automatic line wrapping
text-shadow: add shadow to text
1.3 css font
font-family: set font family
font-size :Set font size
font-style :Set font style
fongt-variant: Display text in small caps or normal font
font-weight: Set font thickness
1.4 css link
a:link ordinary, unvisited link
a:visited link that the user has visited
a:hover mouse pointer is above the link
a:active link that was clicked Moment
text-decoration: This attribute is mostly used to remove underlines in links
background-color: background color
1.5 css list
CSS list attributes can be placed flexibly, Change the logo, or use the image as the list item logo
list-style: abbreviation for list item
list-style-image: list item image
list-style-position: list item logo position
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 Outline
outline: Set the outline attributes
outline-color: Set the color of the outline
outline-style: Set the style of the outline
outline-width: Set the width of the outline

2. css box model

inner margin:
outside the content, inside the border
padding set all margins
padding-bottom, left, right, top individually set a certain direction Margins
Border:
can create excellent borders and can be used for any element
border-style: 10 styles are defined
border-(top, bottom, left, right)-style: define 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 rounded border
box-shadow border shadow
border-image border image
margin:
margin overall margin
margin-(top, bottom, left, right) unilateral margin
outer margin Distance merging: is a concept of superposition

3. css positioning and floating

css positioning:
position: static, relative, absolute, fixed;
top
left
right
bottom
overflow
….
css float:
float properties: left, right, none, inherit
clear property : Remove floating attributes
left, right: Remove left and right floats
both: Remove both left and right floats
inherit: Inherit clear value from parent

4.css selector

Derived selector:

li strong{    color：red；}

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

id selector:

#id { color:red; }

The id selector can be used in combination with the derived selector, but the id selector is not suitable for use in combination with id

Class selector:

.pclass{ color:red; }

Class selector can also be used in combination with derived selector

Attribute selector:
Default attribute selector:

[title]{ color:red; }   

Named attribute selector:

[title=te]{ color:red; }

In IE6 and lower versions, attribute selector is not supported
Attribute selector It must match exactly to work

Child element selector:
uses the > symbol, but it can only be positioned one level at a time

Adjacent sibling selector:
In the form of a label tag, you only need to have a simple understanding of this