Common CSS attributes, css

Common CSS attributes, css
Common CSS attributes☛For more details about CSS attributes, I suggest you read the manual. Here I will classify several common attributes and retrieve several common attribute values, it is only intended for beginners like me who are just learning the frontend.1. Font StyleThe abbreviation of the font, writtenFont: font-style | font-variant | font-weight | font-size |/line-height | font-family, Be sure to write the Italic (font-style) of the font in order ): normal | italic in common italic | small uppercase letter t (font-varian) of oblique, a special font without italic variables ): normal | font-weight ): normal | bold | bolder | fine-body lighter | font-size ): here we will only introduce the line-height (line-height) of the (px, em, rem) font in several root units: the length px can be used | percentage (based on the font height) | use a numeric value (product factor) to specify the font-family of rows: Specify the text to use a certain font or font sequence. The values are enclosed in single quotes. The default value is. demo: body {font-family: helveti Ca, verdana, sans-serif;}/* Note */: sort by priority. Separated by commas. As defined in the font above, if you do not have the helvetica font on your computer but have verdana, your text will be displayed in verdana.@ Font-face embedded font (extra-curricular extension)@ Font-face: it can load server-side font files so that browsers can display fonts that are not installed on users' computers. Syntax: @ font-face {font-family: Custom font name; src: url (relative or absolute path of the font file on the server) format (font type);} example: @ font-face {/* This method is compatible with all browsers */font-family: bgg; src: url ('fonts/fontawesome-webfont.eot '), /* IE9 + */url ('fonts/fontawesome-webfont.eot? # Iefix ') format ('embedded-opentype'),/* IE6-IE8 */url ('fonts/fontawesome-webfont.woff ') format ('woff '), /* chrome, firefox */url ('fonts/fontawesome-webfont.ttf ') format ('truetype'),/* chrome, firefox, opera, Safari, Android, iOS 4.2 + */url ('fonts/fontawesome-webfont.svg ') format ('svg');/* iOS 4.1 + */} p {font-family: bgg}★Other less-used font styles: caption: Use the text font (such as buttons, menus, etc.) of the Title System Control (CSS2) icon: Use the font of the icon label (CSS2) menu: Use the font of the menu (CSS2) message-box: Use the text font of the Information dialog box (CSS2) small-caption: Use the font of the widget (CSS2) status-bar: use the font of the window Status Bar (CSS2)2. Text StyleText color ● color names 16 basic colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, tealwhite, and yellow. ● hex color control (six digits), in the format of #336699. Supports quick counting of some hex values. For example, #336699 can be called #369. ● The RGB value ranges from 0 to 255. R indicates red, G indicates green, and B Indicates blue. Demo: {color: rgb (51,204, 0)} text indent text-indent, the value is a value in em, 1em is equal to the width of a word. text horizontal align: left | center | right (right) | justify (center) vertical-align: sub (subscript of vertical alignment text) | super (superscript of vertical alignment text) | for other information, see the manual text spacing letter-spacing, the values are normal and px values. text wrap word-wrap: normal (allow content to be exceeded or exceeded) | break-word (content will be wrapped within the boundary. If necessary, the word can be broken internally. The underline controls text-decoration: none (no underline, default), underline (underline), blink, overline (upper line), line-through (strikethrough) text case text-transform: initial capital capitalize | converts to uppercase | converts to lowercase3. list style list-styleList-style-image: url (/dot.gif); image type, select the image as the guiding symbol list-style-position: list symbol position outside (default value, list and symbol closeness) inside (list indent, separated from symbol) list-style-type: symbol type (Here we list several common, you can check the manual if you need to take a picture of whether or not you want to take a picture. Do not enter (none) the Arabic numerals (decimal) the solid circle (disc) the hollow circle (circle) the solid square (square) lower-case English letters (lower-alpha) upper-case English letters (upper-alpha) lower-case roman numerals (lower-roman) upper-case roman numerals (upper-roman)4. background style backgroundAbbreviation of the background style, written{Background-color | background-image | background-repeat | background-attachment | background-position ;}Background: Specifies the background color. The background image is tiled. example: background: # F00 url(header_bg.gif) no-repeat fixed left top; background color perspective background: transparent; background image backgroung-image: url (image file path ); background-repeat: repeat (all tiled, default) | no-repeat (not tiled) | repeat-x (horizontally tiled) | repeat-y (vertically tiled) round (the background image is automatically scaled until it is adapted and filled with the entire container) | space (the background image is tiled with the same spacing and filled with the entire container or in a certain direction). The background image is rolled back to attachment: the default value of scroll. The background image will move along with the rest of the page. Fixed the background image does not move when the rest of the page is rolling. | Inherit specifies that the background-attachment attribute settings should be inherited from the parent element. Background-position: left-right alignment (left | center |) top-up alignment (top | bottom); you can also write the alignment as a value (or % ): background-sizebackground-size: auto; specifies the size of the background at the top of the Left value (%). It is automatic. The default value is image size: background-size: px or percentage, if only one value is set, the second value is set to "auto ". Background-size: cover; scales the background image to completely overwrite the container, and the background image may exceed the container. Background-size: contain; Extend the image size to the maximum size so that its width and height fully adapt to the content area. But it does not exceed the container's background-size: 100px 100%; the width ratio changes the start position of the background. The background-origin method {background-origin: padding-box background starts after the border (default) | border-box background image starting from the border | content-box background starting from the content}5. border style borderAbbreviation of border line:{Border: border-width border-style border-color ;}Demo: the borders on the four sides are the same: {border: 1px solid # 00F}. If you want to separate an edge, select the direction: {border-[left | right | top | bottom]: border-width border-style border-color ;}♜Border line style border-style: none (no border line, default) | hidden (hidden border line) | dotted (dotted line) | dashed (linear line, common) solid (solid line, common) | double (double line) | groove (light solid line) | ridge (dark solid line) | inset (solid line with upper left and lower right) | outset (solid line with lower left and lower right)♜Border line width border-width. The value is a value in px.♜Border Line color border-color. The value is an English word or hexadecimal color.♜Inherit: specifies that the border attribute settings should be inherited from the parent element.