Css learning notes, Han shunping css notes

Css learning notes, Han shunping css notes
I. CSS background: background color: background-color: #00ff00, yellow, rob (0, 0), transparent background image: background-image: url (...) Whether the background is repeated: background-repeat: repeat, no-repeat, repeat-y, repeat-x place background image: background-position: center, 50px 100px, 10% 20% fixed background image: background-attachment: fixed

II. CSS Text Example text color: red, #00ff00, rgb (0, 0) Character spacing: letter-spacing:-0.5em, 20px line spacing: line-height: 110%, 30px, 2 alignment: text-align: center, left, right Modify text: text-decoration: overline, line-through, underline, blink, none indent text: text-indent: 1cm letter control: text-transform: uppercase, lowercase, capitalize text line: white-space: nowrap word spacing: word-spacing: 30px,-0.5em

III. CSS font instance text font: font-family: Arial, Verdana, Sans-serif font size: font-size: 200% font style: font-style: normal, italic, oblique font family: font-variant font width: font-weight: normal, bold, 900

4. CSS border style: border-style: dotted, dashed, solid, double, groove, ridge, inset, outset border width: border-width: thick, 5px 10px 1px [must be used with border-style] border color: border-color: yellow bottom border attribute: border-bottom border color: border-bottom-color bottom border style: border width under border-bottom-style: border-bottom-width (border-top, border-left, border-right)

5. left margin of CSS margin: margin-left [right, top, bottom] margin: 2 cm 4 cm 3 cm 4 cm
6. CSS padding-bottom [left, right, top] padding: 0.5, 2.5
7. CSS list instances of different types unordered list tags: list-style-type: disc, circle, square, none different types of ordered list tags: list-style-type: decimal, lower-roman, upper-roman, lower-alpha, upper-alpha image list item mark: list-style-image: url () Placement list location: list-style-position: inside, outside
8. table instance table layout: table-layout: automatic, fixed: empty unit in the table: empty-cells: hide MERGE table border: border-collapse: collapse, blank between borders of the separate table: border-spacing: 10px 50px table title location: caption-side

9. Draw a line around the outline element: outline: #00ff00 dotted thick; contour color: outline-color contour width: outline-width contour style: outline-style

10. CSS size and height: auto, 160px, 50 width: width maximum height: max-height maximum width: max-width minimum width: min-width line spacing: line-height
11. CSS classification is displayed as an inline element: display: inline: not displayed: display: none floating attribute: float: right element visibility: visible, hidden changes the cursor: help, wait, text, auto, default ,.... clear the side of an element: clear: right
12. CSS positioning relative positioning: position: relative left: 20px relative normal position move to the right 20px absolute positioning: position: absolute fixed positioning: position: fixed element shape: clip: rect (0px, 20px, 20px, 20px) the scroll bar shows the overflow content in the element: overflow: scroll // hidden hide // image arrangement in auto text: vertical-align: text-top, text-bottom

13. pseudo-class hyperlink: a: linka: visiteda: hovera: activehover must be after link and visited, and active must use focus after hover: input: in the focus input box, obtain the first child element of focus first-child: li: first-child, p: first-childfirst-line first-letter