4. Add page base styles

1, the background
1. The background color

Background color: The background-color property fills the background with a solid color.

Syntax: background-color: color value;Copy the code

2. Background image

Background-image: The background-image property allows you to specify an image to be displayed in the background. It can also be used with background-color, and places that are not covered by the image will be filled with the background color.

Syntax format: background - image: url (path) | none;Copy the code

3. Background tile

Background tile: Background-repeat Needs to add properties to control the direction and size of the image to be added because the background is set to fill the entire screen by default.

Syntax: background-repeat: attribute value;Copy the code
  • Repeat: Tiled in both horizontal and vertical directions.
  • No-repeat: not tiled, i.e. the background image is displayed only once.
  • Repeat -x: tiled horizontally only.
  • Repeat -y: tile only in the vertical direction.
  • Round: Automatically zooms in and out until it fits the entire screen.
  • Space: Tiled at the same spacing to fill the entire container or in one direction.
4. Background scroll

Background scroll: Background-attachment This property determines the state of the image as the user scrolls the page.

Syntax format :background-attachment: attribute value;Copy the code
  • Scroll: Moves with the background image on a page.
  • Fixed: The background image will not move as the page scrolls.
  • Inherit: Its parent element.
5. Background image positioning

Background position: This property controls the position of the background image within an element.

Syntax format: background-position:x y;Copy the code

  • Xpx Ypx: when represented in pixels, the first value represents the left end of the horizontal starting point reference page and the second value represents the top of the vertical starting point reference page.

  • X% Y%: Indicates the position of the background as a percentage, with the first value representing the left end of the horizontal starting reference page and the second value representing the top of the vertical starting reference page.

  • Keywords in the X and Y directions: Keywords are used to represent the location of the background. Keywords in the horizontal direction are left, center and right.

    Vertical direction keywords: top, center, bottom.

6. Background compound properties

Background Is a compound attribute of other background attributes. It can consist of one or more values separated by Spaces. There is no order between attributes.

2, text,
1. Text color

The color property sets not only the color of the text, but also the foreground color of other elements on the page.

Syntax: color: color value;Copy the code
2. Horizontal alignment
Syntax: text-align: attribute value:Copy the code
  • Left: aligns the text to the left. This value is the browser default.
  • Right: Arrange the text to the right.
  • Center: Center the text.
  • Justify: Enables text alignment at both ends.
3. Indent text

The text-indent property sets the indentation of the text

Text-indent: indent length;Copy the code
4, and line height

The line-height property sets the line height

Line-height: attribute value;Copy the code
  • Normal: indicates the default row height.
  • Length value: Use length to indicate line height, for example, 20px
  • Percentage: indicates the line height as a percentage, for example, line-hright:150%. Equivalent to 1.5 line spacing.
  • Value: The line height is expressed by the product factor, for example: line-hreght:1.5; Also means 1.5 line spacing.
5. Align vertically

Vertical-align is used to set vertical alignment on web pages, but in browsers it only works on table cells. The usual h1~ H6, P, div tags are not used.

Vertical-align: indicates the attribute value.Copy the code

“Middle”, “top”, “bottom”, “justify”

6. Text decoration
text-decoration:none:
Copy the code
  • None: The default, the standard text of the definition.
  • Underline: Sets the underline of the text.
  • Overline: sets the underline of text.
  • Line-through: sets the deletion line of text.
  • Blink: Sets text blinking. This value is valid only in Firefox, not In Internet Explorer.
3, fonts,
1. Font type
Font-family: arial, sans-serif... For example: font-family: lishu, black,宋体; Separated by commasCopy the code
2. Font size
The font - size: value;Copy the code

Font size is usually expressed in px, but also in other units such as in, cm, mm, pt, PC,

3. Font style
Font style:normal Standard font style ITALic font style Oblique font style;Copy the code
4, font thickness
Font-weight: attribute value;Copy the code
  • Normal: The default value that defines a standard font.
  • Bold: Bold font.
  • Bolder: A bolder font.
  • Lighter: lighter font.
  • You can also use 100 to 900.
5. Font compound properties

Font costs and properties Use the font property to set all the properties of a font at once, separated by English Spaces.

Note the sequence of font attributes in the set: “Font style — font thickness — Font size — font type”

Font: font-size: 16px; Font :normal bold 20px official script;Copy the code
4. Hyperlink styles

The basic syntax for the pseudo-class style is “Tag name: pseudo-class name {declaration; } “.

  • A: Link: hyperlink style without standalone access.
  • A: Visited: Hyperlink style after standalone access.
  • A :hover :hover over its hyperlink style.
  • A: Active: Click on the unreleased hyperlink style.

See the summary of pseudo-class selectors in the first CSS style summary article for details. I don’t want to say too much here.

5, list
1. List symbols

The list-style type attribute sets the type of the list item token.

The syntax is as follows:

List-style: indicates the attribute value.Copy the code

Common attribute values are as follows:

  • None: indicates the unmarked symbol.
  • Disc: solid circle, default type.
  • Cricle: Hollow circle.
  • A square is a solid square.
  • Decimal: a number.

2. Picture symbols

The list-style-image attribute is a tag that replaces a list item with an image. The list-symbol attribute will not work when an image symbol is used.

The syntax is as follows:

The list - style - image: | url (image path)Copy the code

3. List position

The list-style-position property sets where to place the list item marker. It has two values,

Inside: Place the tag within the text, and align the surrounding text according to the tag.

Outside: The default value, to the left of the text, around which the text is aligned according to the markup.

4. Comprehensive setting of lists

Liat-style also has a shorthand attribute like the background attribute.

List-style: Image position type Is set based on the sequence.

The syntax is as follows:

List-style: attribute value attribute value attribute value;Copy the code

Because the comprehensive setting is the combination of three attributes will not put the picture, hey hey 😊

5, tables,
1, border

The border-collapse property sets whether the borders of the table are merged into a single border.

  • Separete: default value. The borders will separate. Border-spacing and empty-cells properties are not ignored.
  • Collapse: Borders may be merged into a single border. Border-spacing and empty-cells properties are ignored.
  • Inherit: specify that border-collapse should be inherited from the parent element.

The border-spacing property specifies the spacing between cell boundaries in the delimited border model. Of the two length values specified, the first is the horizontal interval and the second is the vertical interval.

  • Xlength Ylength: Specifies the distance between borders of adjacent cells. Use px and cm units. You can’t use negative values,
  • Inherit: Specifies that the value of the border-spacing attribute should be inherited from the parent element.

Empty-cells sets whether empty cells in the table are displayed.

  • Hide: Does not draw a border around empty cells.
  • Show: Draws a border around an empty cell, default.
  • Inheritage: Specifies that the value of the empty-cells attribute should be inherited from the parent.

The table-layout property displays algorithm rules for the cells, rows, and columns in a table.

  • Automatic: the default. Column widths are set by cell contents.
  • Fixed: Column width is set by table width and column width.
  • Inherit: Specifies that the values of the table-layout property should be inherited from the parent element.

Caption -side property sets the position of the table title. This property specifies where the table title is placed relative to the table box.

  • Top: default value. Set the table title above the table.
  • Bottom: Position the table title below the table.
  • Inherit: Specifies that the value of the Caption -side property should be inherited from the parent element.

Because I feel that this form is rigid and the appearance is not too beautiful, so I will not do the code picture demonstration, the above are my summary of CSS style knowledge points, if there are mistakes, please correct. 😊 😊

The code and text links are placed in the comments section, which can be downloaded and used by those who need them. In 😁 😁