CSS Common Properties

CSS Common Properties

☛ about CSS Properties personal advice to see the manual more detailed and convenient, I am here to classify several common properties and simply take a few common attribute values, only for the same as I just learn the front end as a primer.

1. Font style

The abbreviation of the font, the notation is font:font-style| | Font-variant | | font-weight| | font-size| | /line-height| | Font-family, be sure to write in order.

Italic font (font-style): Normally normal | | Common Italic Italic | | Special font with no italic variable oblique

Small Capital Letter T (Font-varian): normal Regular | | Small Caps Font Small-caps

Weight of the font (font-weight): Normally normal | | Commonly used boldface Bold | | Extra Coarse Bolder | | Fine Body Lighter | | Direct numeric representation (value 100-900)

Font size (font-size): Here only the description can be expressed in several word root units (px, EM, REM)

Line height of the font (line-height): can be used with length px| | Percent (font-based height size) | | Specify the row height with a value (product factor)

Font family (font-family): Specifies that the text uses a font or font sequence, the value is wrapped in single quotation marks, and the default is Arial.

Demo:body{font-family:helvetica,verdana,sans-serif;}

/* Note */: In order of precedence. separated by commas. As in the font definition, if you don't have a Helvetica font on your computer, but you have Verdana, you'll see your text in Verdana.

@font-face Embedded fonts (extra-curricular extensions)

@font-face is able to load the server-side font file, allowing the browser to display fonts that are not installed on the user's computer.

Grammar:

@font-face {

font-family: custom font name;

Src:url (the relative or absolute path of the font file on the server) format (font type);

}

Cases:

@font-face {/* The wording 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 styles for fonts:

Caption: Using text fonts (such as buttons, menus, etc.) for system controls with captions (CSS2)

Icon: Font (CSS2) using icons tags

Menu: Using the font of the menus (CSS2)

Message-box: Text font using the Info dialog box (CSS2)

Small-caption: Using the font of the Gizmo (CSS2)

Status-bar: Using the font of the window's status bar (CSS2)

2. Text Style

Text Colors color

Color name 16 basic colors are aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,tealwhite,and yellow.

(hex) Color control (6 digits) in the form of a #336699. A fast counting method that supports some hex values. For example, #336699可以被称为 #369.

RGB value RGB values range from 0 to 255,r for Red, g for Green, and b for blue. demo:{Color:rgb (51,204,0)}

Text indent text-indent, value is a value in EM, 1em equals the width of a word.

Text horizontal alignment Text-align:left (left-aligned) | | Center (center Alignment) | | Right (justified) | | Justify (Justify)

Text Vertical alignment vertical-align:sub (subscript for vertical alignment) | | Super (superscript of vertical aligned) | | There are other manuals to see.

Text spacing letter-spacing, with the value normal and the value in PX.

Text wrapping Word-wrap:normal (allow content to open or overflow) | | Break-word (the content will be wrapped within the boundary.) If required, the word is allowed to break within words)

Underline controls Text-decoration:none (no underscore, default), underline (underscore), Blink, overline (underline), Line-through (strikethrough)

The case of the text text-transform: capitalize the first letter capitalize | | Convert to uppercase Uppercase | | Convert to lowercase lowercase

3. List Style List-style

List-style-image:url (/dot.gif); Picture symbols, selecting images as the guide symbol for list items

List-style-position: List symbol location

Outside (default, list and symbol close)

Inside (list indent, with symbol in)

List-style-type: Symbol type (here are some of the most commonly used, if you need Japanese flat fake piece of fake or what can be looked up manual)

No number (none) Arabic numerals (decimal) solid circle (disc) hollow Circle (Circle) solid Square (square)

lowercase English letter (lower-alpha) Capital English letter (upper-alpha) lowercase roman numerals (lower-roman) uppercase Roman numerals (Upper-roman)

4. Background style background

The abbreviation of the background style, the notation is {background-color| | background-image| | background-repeat| | background-attachment| | Background-position;}

Background: Background color background image background tiling way background positioning to follow the order. Example background: #F00 URL (header_bg.gif) no-repeat fixed left top;

Background color

Perspective background background:transparent;

Background picture backgroung-image:url (picture file path);

Background tiling mode background-repeat:repeat (all tiles, default) | | No-repeat (Uneven shop) | | Repeat-x (horizontal tiling) | | Repeat-y (Tile vertically)

Round (background image automatically scales until fit and fills the entire container) | | Space (the background image is tiled with the same spacing and fills the entire container or a direction)

Background picture scrolling Background-attachment:scroll default value. The background image moves as you scroll through the rest of the page.

Fixed the background image does not move when the rest of the page scrolls. Inherit specifies that the settings for the Background-attachment property should be inherited from the parent element.

Background positioning Background-position: Left and Right alignment (Left| | center| |) Up/down alignment (top| | bottom);

You can also write the alignment as a value (or Percent%): the left value (%) Top Value (%)

The size of the background background-size

Background-size:auto; Auto, default to picture size

BACKGROUND-SIZE:PX or percent, if only one value is set, the second value is set to "Auto".

Background-size:cover; The background image is more likely to be out of the container than to zoom to a full overlay container.

Background-size:contain; Extend the image image to the maximum size so that its width and height are fully adapted to the content area. But not beyond the container

background-size:100px 100%; Wide-height ratio change

Starting position of the background background-origin

notation {Background-origin:padding-box background starts after border (default) | | Border-box Background chart starting from a border | | Content-box background starting from content}

5. Border Style border

Abbreviation for border line: {border:border-width border-style border-color;}

Demo: The same four-sided border: {border:1px solid #00F};

If you want a single side, which direction you choose: {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 dashed line) | | Dashed (dotted line, common)

Solid (solid line, commonly used) | | Double (solid line) | | Groove (Light solid line) | | Ridge (Dark solid line) | | Inset (upper left deep right bottom shallow solid line) | | Outset (solid line on the left top shallow right down deep)

♜ the width of the border line Border-width, the value is a value in px.

The color of the ♜ border line is Border-color, and the value is the color of the English word or hexadecimal color.

♜inherit: Specifies that the settings for the border property should be inherited from the parent element.