Basic CSS knowledge points (01) and css knowledge points 01

Basic CSS knowledge points (01) and css knowledge points 01

1. Style Sheet

Inline style sheet:
Style = ""
Internal style sheet:
<Style type = "text/css"> </style>
External style sheet:
<Link rel = "stylesheet" type = "text/css" href = "">

Priority: inline style sheet> internal style sheet> external style sheet> default browser settings

2. Selector
Selector {property: value ;......}

1. Tag selector:
H1 {}

2. id selector:
# Red {color: red ;}
<P id = "red"> </p>

Div # red {}

3. class selector:
. Center {text-align: center ;}
<H1 class = "center"> <P class = "center"> </p>
(01)
Div. red {}
(02)
. Important {font-weight: bold ;}
. Warning {font-style: italic ;}
. Important. warning {background: silver ;}

<P class = "important warning"> This paragraph is a very important warning. </p>

4. Attribute selector:
[Title]
{
Color: red;
}
<H2 title = "Hello County"> Hello World (02)
A [href] [title] {color: red ;}

1. Attribute and value selector:
[Title = w3school]
{
Color: red;
}
<H2 title = "w3school"> Hello World

2. Attribute and value selector (multiple values ):
[Title ~ = W3school]
{
Color: red;
}
<H2 title = "w3school"> Hello World <H2 title = "hello w3school"> Hello World

3. Form selector:
Input [type = "text"]
{
Width: 150px;
}

5. Diversity

1. Derivative selector:
Li strong {}: all strong elements under the li tag

Note: div # red {} td. center {} differs from div # red {} td. center.

2. Child element selector:
H1> strong {}: it can only be strong under the child element of the li tag, but not other strong.

3. Adjacent sibling selector:
H1 + p {}: select the p that appears immediately after the h1 element. The h1 and p elements share the same parent element.

4. Group selector:
H1, h2, h3,... {}: these h tags share some attributes.

5. pseudo class
Selector: pseudo-class {property: value}
Note: details will be provided later.

3. CSS background

Attribute description
The background short attribute is used to set the background attribute in a declaration.
Whether the background image of the background-attachment is fixed or scrolled along the rest of the page.
Background-color sets the background color of the element.
Background-image sets the image as the background.
Set the start position of the background image.
Background-repeat specifies whether or not the background image is repeated.

4. CSS text

Attribute description
Set text color
Direction sets the text direction.
Line-height: Set the Row height.
Letter-spacing: Set the Character spacing.
Align text in the text-align element.
Text-decoration adds modifier to text.
The first line of text in the text-indent element.
Letters in the text-transform control element.
Unicode-bidi sets the text direction.
White-space: Set the processing method of the white space in the element.
Word-spacing.

5. CSS font

Attribute description
Font short attribute. The function is to set all font attributes in a declaration.
Font-family: Set the font family.
Font-size: Set the font size.
Font-style: Set the font style.
Font-variant displays text in small or normal font.
Font-weight: Specifies the font width.

6. CSS links

A: link-common, unaccessed link
A: visited-the user's accessed Link
A: hover-The mouse pointer is above the link
A: active-time when the link is clicked

When you set styles for different states of a link, follow these order rules:
A: hover must be located after a: link and a: visited
A: active must be located after a: hover

The text-decoration attribute is mostly used to remove the underline in the link.

7. CSS list attributes (list)

Attribute description
List-style short attribute. Set all attributes used for the list to a declaration.
List-style-image sets the image as a list item flag.
List-style-position sets the position of the list item flag in the list.
List-style-type sets the type of the list item flag.

8. CSS Table attributes (Table)

Attribute description
Border
Border-collapse sets whether to merge the table border into a single border.
Border-spacing is used to set the distance between the borders of cells.
Caption-side sets the table title position.
Empty-cells sets whether to display empty cells in the table.
Table-layout sets the algorithms for displaying cells, rows, and columns.

9. Box Model

Margin: margin
The outer margin merge means that when two vertical outer margins meet, they form an outer margin. The height of the merged margin is equal to the larger of the two merged margins.
Padding: padding
Border: border
Border-style, border-color, and border-width
Content

10. CSS position)

1. relative)
1. Document Stream occupation
2. It is based on the location in the original document stream
3. Frame-based
2. absolute location (absolute)
1. Exit Document Stream
2. It is based on the browser window
3. Frame-based
3. fixed
Location relative to window
4. float)
1. Exit Document Stream
2. It will squeeze out the content
Clear:
Clear the influence of the floating element on the following elements
5. Mix relative and absolute
1. When an element is used as a container, it is set to relative. If its internal element is absolute, the internal element is container-based.