Basic CSS knowledge points

Basic style and usage:

Css unit:

1. attribute values of element positioning:

1. Position: A relatively basic attribute.

Usage: XML element name {position: [absolute | relative | static]}

Absolute: defines a brand new container in a piece of text. When the position value of the XML element is defined as absolute, even the part contained in the xml will be viewed as a rectangular container. The rectangular container is independent of the original position, and a quota is favorable for other windows.

Relative: the offset of the element modified by this attribute Relative to the original position in the document. The relative positioning element provides the basis for positioning its child elements. It follows the elements defined in the xml document in the previous order and goes down.

Static: Default Value of position. An element located in this way cannot be set as or twice, nor can it provide a positioning sentence for its child element. In the order defined in the xml document, he will sort down the elements following the previous one.

1. Top, left, width, heigh

Usage: XML element {attribute: attribute value}

Attribute Value format: value, percentage, automatic. Top and left indicate the coordinates in the upper left corner of the element's position. If the position is absolute at this time, it indicates that the coordinates are located at the origin point in the upper left corner of the top-level element of the browser window. If it is relative, it indicates that its position is defined based on the origin point in the upper left corner of the original position. If it is static, neither of them works. Width and height indicate the Width and height of the element.

2. Length Value

1) absolute length unit: pc (pica) 12 point pt (point) 1/72 inch mm (millimeter)

Cm (centimeter) in (inch)

2) relative length unit: px (pixe1) indicates a point on the screen. ex indicates the height of the letter x in the font.

Em indicates the unit of the font height.

3) unit of percentage length: A special unit. The percentage value is the percentage of the corresponding attribute to the element of this element.

3. color value

1) hexadecimal: #336699 (in the format) r-g-B

2) RGB: Each numerical term of RGB (0,255)

3) color name: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

4. URL value: background-image list-style

 

Text display: whether the text is displayed in the XML document. If so, the style of the text is displayed.

Syntax: XML element {display: property value}

Property value:

1. Block: indicates that the text defines a rectangular area on the page and is displayed as a block. The number and size of Characters in the text since the block size. Its position is left aligned by default.
2. Line: displays text in rows on the page. The element word that uses him as the attribute value does not contain line breaks. It only adds new content and extensions to the current row. If the current row does not show any more, the broken line is displayed in the next line.
3. List-item: indicates that the text is displayed as a list on the page. It is similar to block display, except that a project symbol appears before the text. The default appearance of the Project symbol in the list is disc (solid circle ). Used to set the project symbol attribute to list-style-type. Value:
   Disc (solid circle) circle (hollow circle) square (square) decimal (decimal number) lower-roman (lower case Rome number) upper-roman (upper case Rome number) lower-alpha (lower case English letter) upperalpha (uppercase letters)
4. None indicates that the text is not displayed on the page.

Tag name # ID

 

Font display mode:

1. Font-family is used to set a font type. It is actually the font name. If the font contains spaces, the attribute values must be enclosed in double quotation marks.
2. Font-style: used to set the font style. Normal, italic, and oblique (another italic format)
3. Font-variant: Used to scale down normal text by half and then display it in uppercase. Attribute Value: normal, small-caps
4. Font-weight: used to set the contrast and brightness of the font. Normal, bold, bolder, lighter, 100, 200, 300 ,...... , 900. 900 of them are the thickest words.
5. Font-size: Set the font consignment. Unit: pt (lbs ).
6. Font

Note: If the sub-tag does not specify the text font, It inherits the font attributes and attribute values of the sub-tag.

 

Text control:

1) text-align left right center justify (align left and right)

2) text-indent is mainly used to define the number of text indentations in the first line of the element, in px or pt. Mainly used for block-level elements

3) text-transform: Mainly used to control the case-insensitive conversion of letters. Attribute values: uppercase, lowercase, capitalize, and none

4) text-decoration is mainly used to set some related features and add some interesting modifications. Attribute values: none, underline, overline, line-through, and blink)

5) vertical-align is mainly used to set the vertical alignment of text. Attribute values: baseline, sub, super, top, text-top, Middle, bottom, and text-bottom. Syntax: XML element {vertical: keyword, percentage} or XML element {vertical-align: keyword, percentage}

6) line-height: used to set the line spacing between texts. Syntax: XML element {line-height: Value}

7) letter-spacing controls the interval between characters. Syntax: XML element {letter-spacing: Value}

 

Border mode:

1. Border-style: Set the text to have a text box. Properties: none, dotted, dash, solid, double, groove, and ridge), insert (3D embedded border), outset (3D embedded Border)
2. Border-top-with: Syntax: XML element {border-top-with: Value}
3. Border-right-with: Syntax: XML element {border-right-with: Value}
4. Border-left-with: Syntax: XML element {border-left-with: Value}
5. Border-bottom-with: Syntax: XML element {border-bottom-with: Value}
6. Border-right: Syntax: XML element {border-right: Value}
7. Border-bottom: Syntax: XML element {border-bottom: Value}
8. Border-left: Syntax: XML element {border-left: Value}
9. Border-color: Set the border color. Syntax: XML element {border-color: color}. The color can be set to one, two (up and down, left and right), and four

 

Edge style: in pixels

1. Margin-top: Syntax: XML element {margin-top: Value}
2. Margin-right: Syntax: XML element {margin-right: Value}
3. Margin-bottom: Syntax: XML element {margin-bottom: Value}
4. Margin-left: Syntax: XML element {margin-left: Value}

 

Color and background style:

1. Foreground color: color
2. Background color:

• Background-color: Keyword: transparent (transparent) or color value
• Background-image: Syntax: XML element {Background-image: URL ("index.gif ")}
• Background-repeat: this parameter is mainly used to set how the image overwrites the Background when the size of the displayed image is smaller than the range of the provided Background. Keywords: repeat, repeat-x, repeat-y, no-repeat.
• Background-attachment: used to determine whether the Background image is rolled together with the text. Keywords: scroll and fixed.
• Background-position: used to determine the position of the Beijing image relative to the foreground content. Syntax: XML element {Background-position: Value | percentage | keyword }. Keywords: top, bottom, center, left, right

 

Set the mouse:

Syntax: XML element {cursor: keyword }. Keywords: auto, help, wait, text, hand, move, default, ne-resize, and nw-resize

 

Cascade mode: Syntax: the larger the integer of the XML element {z-index or auto}, the closer it is to the top layer. Smaller, closer to the underlying layer.