Css basics (3) and css Basics

Css basics (3) and css Basics
InheritanceInheritance is a rule that allows styles to be applied not only to a specific html Tag Element, but also to its descendants. For example, the following code: If a color is applied to a p tag, this color setting applies not only to the p tag, but also to all the child element text in the p tag. Here the child element is a span tag. CSS contains some styles that cannot be inherited, such:

border:1px solid red;

Special: Different css styles are set for the same tag. the browser determines which CSS style to use based on the tag weight. The label has a weight of 1, the class selector has a weight of 10, and the ID selector has a weight of up to 100. Inheritance also has the lowest value.

P {color: red;}/* weight: 1 */p span {color: green;}/* weight: 1 + 1 = 2 */. warning {color: white;}/* the weight is 10 */p span. warning {color: purple;}/* the weight is 1 + 1 + 10 = 12 */# footer. note p {color: yellow;}/* with a weight of 100 + 10 + 1 = 111 */

  CascadeMeaning: Multiple CSS styles can exist for the same element in an HTML file. If a style with the same weight exists, the final style is determined based on the order of these css styles and will be applied. Style priority: inline style sheet (inside the label)> embedded style sheet (in the current file)> external style sheet (in an external file ). In special cases of importance, you need to use the following code to raise some styles to the highest weight:

p{color:red!important;}

! Important must be written in front of the semicolon. Style priority: Default style of the browser <webpage maker style <style set by the user Text Layout-font, font size, and colorGeneral Font:

Body {font-family: "Microsoft Yahei";}/* better compatibility */body {font-family: "";}

Font size color:

body{font-size:12px;color:#666}

Text Layout-bold, italic, and underline

Bold: span {font-weight: bold;} italic: a {font-style: italic;} underline: span {text-decoration: underline;} text-decoration refers: text decoration. If the property value is none, no underline is displayed by default. none: Specify text without decoration underline: Specify text decoration with underline overline: Specify text decoration with line-through blink: the decoration of the specified text is flickering.

Text Layout-strikethrough, indent, line spacing (line height)

Strikethrough:. oldPrice {text-decoration: line-through;} adds strikethrough indentation to the text: p {text-indent: 2em;} 2em, which means twice the size of the text. Row Spacing: p {line-height: 1.5em;} sets the row spacing of a paragraph to 1.5 times.

  Section layout-text spacing, letter spacing, and alignmentSpacing of Chinese characters and letters:

P {letter-spacing: 50px;} (Chinese text and letter spacing) p {word-spacing: 50px;} (letter and letter spacing) Alignment: p {text-align: center;} center p {text-align: left;} center left p {text-align: right;} center right