HTML and CSS Summary

1. CSS: Used to control the appearance of Web pages, including the positioning of content and images, using different colors.
2. CSS is available in four ways: 1. Inline style 2. Internal style sheet 3. external style sheet 4. Browser defaults (default values), descending in order of precedence. Highest Embedding Priority!
3. Methods for external referencing of CSS:<link rel="stylesheet" href="test-css.css" type="text/css">
4. CSS also gives a different value to the same property of a tag, then the previous value is overwritten.
5. CSS Syntax: selector {declaration 1; Declaration 2} where declaration includes property = value. Eg: p{color="red";fontsize="14px"} p{color:rgb(143,12,12);fontsize="14px"} quotation marks are required when a value includes several words. For example, some font values.
6. Selectors are grouped with ","; "*" To select all labels.
7. Derived selectors: a sub-label under a label. Method: Use a space between the parent label and the Child label. Eg: h1 p{....} the CSS style is set to the P tag under H1.
8. "#" Definition id.eg: #id名. “.” Defines the class selector. eg.center
9. The difference between ID and class: ID can only be used once, class can be referenced multiple times.
10. Both class and ID can have derived usages. The .center li Li tag under the label of eg meaning Class=center
11. "[]" defines the property. Eg:, or, alternatively, you can have values that can be [title] [title=wsschool] [title~=hello] [title|hello] included without values. (The last two types are included, but the previous one applies to the space connection's property value, and the latter applies to the hyphen connection's property value.) Attribute selectors are used for maintenance of other people's Code

Common Properties

1. Backgroud
2. Backgroud-image
3. Backgroud-repeat
4. Backgroud-position
5. Text-align
6. Word-spacing
7. Letter-spacing
8. Text-transform: Convert case
9. Text-decoration: Text decoration with values of: Underline,overline,bink,line-through
10. Border-width
11. Border-style
12. Border-color: There are three ways to represent colors. Eg: border-color{red} , border-color{rgb()} ,border-color{#16位制颜色}
13. White-space: The format in which the text is processed. The values are: Pre,nowrop (no wrapping), pre-wrap (leave blank, do not wrap), pre-line (leave blank, line wrap)
14. List-style-type
15. List-style-image: Given URL
16. List-style-position
17. Border-collapse: Border Merge
18. padding: Inner margin, can have the effect of opening elements
19. Content: Used to insert contents into pseudo-elements
20. attr: Get Properties?

Pseudo class

1. Pseudo-classes are used for setting when the state of an element changes. Often used to click links when the link color changes, but must pay attention to the order! A:link;a:visited;a:hover;a:active

Pseudo element

1. Pseudo-elements set the style for specific content in the element tag. Commonly used are first-letter,first-line,before (adding content before an element), after (adding content after the element). Eg: p:before{content:url(logo.gif)} the effect is to add a picture before the original content of the P tag.

Spring (picture replacement text) technology

1. A meaning: Replace text with an image to show it, which adds effect.
2. The second meaning:

Priority (weight)

<p style>Priority priority <style></style> LINK.CSS tab priority is the lowest style (a), id (b), class attribute and Pseudo-class (c), element and pseudo-element (d) "! Important "priority is highest in all.

Css3

1. Border-radius: Rounded border
2. Border-radius: Browser kernel:-moz-;-webkit-,-o-Note declaration.
3. box-shadow:10px (shadow right margin) 20px (shadow Bottom margin) 5px (Blur)
4. Boder-image:url ("") Round/stretch
5. Backgroud-size
6. Backgroud-origin:
7. Text-shadow
8. Word-wrap:

Box model

1. : padding: cannot be negative, percent is relative to the parent element's Wdith value, not the height value, only given three values when represented on, around, down.
2. Border: No style is displayed. Transparent is transparent.
3. Margin: There can be negative values, and negative values may overwrite other elements. The default value is typically 0, but some browsers set a predetermined style for some elements, so it's best to *{margin=0;} and then set it up separately for the element you want. The Margin{0,auto},auto is centered relative to the parent element. When you set the margin value in a child element, the margin is passed to the parent element to be displayed instead of being displayed in the child element. The workaround is to set the padding value for the parent element instead of setting the margin value for the child element.

HTML and CSS Summary