Remember inline > embedded (embedded in a variety of text font, size, position, color, padding, padding the best with selectors) > external (externally-linked) use
Property and property values
- Font-family (font)
- Microsoft yahei| | Microsoft Ya-Black
- Song Body
- Arial
- Times New Roman
- Font-size-adjust: How to modify the font can make the text size unchanged, c= (A/b) s,s The actual font size should be set, C for the original font size, a for the actual use of the aspect value of the font, B indicates the original used font aspect value
- Font-size (font size)
- Color (colors) | | Background-color (background color)
- Red
- Orange
- Blue
- Green
- Yellow
- Pink
- Purple
- Navy
- Font-weight (Sets the weight of the font)
- Normal (OK, 400)
- Bold (boldface character, 700)
- Bolder (more coarse characters)
- Lighter (finer characters)
- Inherit (inherit parent element)
- 100-900 must be an integer multiple of 100
- Font-variant (set font capitalization)
- Normal (default)
- Small-caps (use small capital letters)
- Inherit (inherit parent element)
- Font-style (sets the style of the font)
- Normal (OK)
- Italic (Italic)
- Oblique (tilt body)
- Inherit (inherit parent element)
- Text-transform (Sets the case of the text)
- Capitalise (first letter capital)
- Uppercase (All caps)
- lowercase (all lowercase)
- Text-decoration (Sets the decorative effect of the text)
- Underline (underline)
- Line-through (Strikethrough)
- Overline (DASH)
- Text-indent (indent), Line-height (line spacing, row height),
- Letter-spacing (Letter (kanji) spacing), word-spacing (word spacing)
- Font-variant (font abbreviation)
- Text-align (location) | | Margin-left (right): npx| | Padding-left (right): npx
- Left
- center| | 0 auto;
- Right
- Justfify
- height| | Line-height (combined to set vertical center)
- Border
- Solid (solid line)
- Dashed (dashed line)
- Dotted (point line)
- Float (for picture wrapping)
- Vertical-align (Alignment)
- Baseline
- Top
- Middle
- Bottom
- Text-bottom
- Text-top
- Text-sub
- Text-super
- Length width
- Background image
- Background:url ()
- Background-image:url ()
- Selector Selector
- [id$=\t] Specifies the ID of the end letter T, which can be used to determine the file format
- [id^=t] The ID of the specified ID that begins with T
- [id*=t] ID in the specified ID containing the letter T
- Class selector. The t element can be named at will. T
- Pseudo-class selectors, defined, not arbitrarily named, four most basic: root, not, empty, Target;a:link, a.visited, A:hover, A.active, First-line (first line), First-letter (first letter or first character), before
- : Enabled,:d isabled
- : read-only Additional instructions readonly= "ReadOnly",: Read-write
- : Check,:d efault,: Indeterminate
- : Selection
- Examples of Use:
: Root{background-color:yellow;} --Set the background color of the Web page to yellow
Body *:not (H1) {background-color:yellow;} --Other elements in body except H1 elements set the background to yellow
: Empty{background-color:yellow;} --The display background is yellow when the content is empty: target{background-color:yellow;} --When the link jumps to the element, the background is set to yellow
- : First-child,: Last-child, Nth-child (n| | an+b| | odd| | even), Nth-last-child (n| | an+b| | odd| | Even) judge an odd even number with other elements, at which point the following method is used to resolve
- : Nth-of-type (odd| | even), Nth-last-of-type (odd| | Even)
- : Odd:even:eq (N): GT (N): ln (n)
- : Only-child substitution: Nth-child (1): Nth-last-child (1) or: Nth-of-type (1): Nth-last-of-type (1)
- : When the hover is moved to an element: When active presses the mouse is not released, when focus gets the cursor focused
- Generic sibling element selector, used for some other element after an element's style, div ~ p
- Style example
- CheckBox in outline:2px solid bule;
- OUTLINE:2PX solid bule in radio;
- Using selectors to insert content in the interface
- Before, after: content: "", none, normal
- Add a picture after the text: Content:url () is equivalent to Background-image:url (); background-repeat:no-repeat;padding-left:28px;
- The value of the ALT attribute is displayed as the caption of the image: Content:attr (alt);d isplay:block;text-align:center;margin-top:5px;
- Precede multiple headings with consecutively numbered: H1:before{content:counter (MYCOUNTER,UPPER-ALPLA) '. '; color:blue;font-size=10px;} H1{counter-increment:mycounter;counter-reset:subcounter;}
- Text-to-font-related styles
- Font Shadow: text-shadow:length length length color;
- Let text wrap: Word-break:normal, Keep-all, Break-all;
- Let long word and URL address wrap: word-wrap:normal, Break-word;
- Use server-side fonts: @font-face{font-family:webfont;src:url (' FONT/FONTIN_SANS_R_45B.OTF ') format ("OpenType"); Font-weight: normal;}
- Box-related styles
- display:inline| | block| | Inline-clock (can add width and height) | | inline-table| | list-item| | run-in| | Compact
- overflow-x:hidden;overflow-y:scroll;overflow:auto| | hidden| | scroll| | Visible;text-overflow:ellipsis;
- box-shadow;box-sizing;
- Styles related to background and borders
- Specify the background display range: background-clip:border| | padding; Specify the starting point for the background image: Background-origin:border| | Padding| | CONTENT;BACKGROUND-SIZE:NPX mpx; add-moz-or-webkit-;background-break in front, and write-moz-background-inline-policy in Firefox: bounding-box| | each-box| | continuous;
- Background-image;background-repeat;background-pisition;
- Border-radius: Specify a RADIUS | | Specify Two radius | | Specify not to show borders | | Specify Modify Border | | Draw a rounded border of four corners with different radii, preceded by-moz-or-webkit-;
- Use image border: Border-image:url () A B C D (upper right lower left)/border-width repaat| | stretch| | Round choice of two, preceded by-moz-or-webkit-;
- Type of Use
- e--element Selector
- e.c--class Selector
- E#id--id Selector
- e:a--contains a characteristic of E
- The descendant nodes of E f--e F
- E.has (f)--E containing F
- E>F--E Direct sub-node F
- E+f--e Adjacent Brother Node F
- E-f--e of any sibling node F
- E.method (F)
- e[a]--e with characteristic A
- E[a=v]--a=v's E
- E[a^=v]--a e, starting with V
- [A*=v]--a E with V
- E[a$=v]--a e at end of V
CSS property values at a glance
