Common CSS Styles

font-family Setting the font name

Multiple names can be used, separated by commas, and browsers use the available fonts in sequence

P {font-family: ' song Body ', ' blackbody ', ' Arial ';}

Font-size Setting the font size

length specifies the size of the text with a value that does not allow negative values

Percentage specifies the text size in percent, which is based on the size of the font in the parent object, and does not allow negative values

p {font-size:14px;}

Font-weight Controlling font weight

Normal font, equivalent to a numeric value of 400

Bold bold, equivalent to a numeric value of 700

100~900 defined by thin-to-thick characters

p {font-weight:bold;}

Font-style controls whether the font is tilted

normal specifies that the text font style is the correct font

italic specifies that the text font style is italic, and for special fonts that do not have italic design, apply oblique if you want to use italic appearance

Oblique specifies that the text font style is italic and artificially tilts the text instead of selecting italic characters in the font

p {font-style:normal;}       p {font-style:italic;}       p {font-style:oblique;}

Font (typeface style abbreviation)

Example:       p{       font-style:italic;       Font-weight:bold;       font-size:14px;       line-height:22px;       Font-family: ' The song Body ';       }             Abbreviation:       p {font:italic bold 14px/22px ' Arial ';}

Color text Colors

• English words, such as: Red,yellow,green ...

• 16 binary notation, #开头, 6 hexadecimal characters or combinations of numbers, such as: #FFFFFF, #000000 ...

RGB mode, red 0-255, Green 0-255, Blue 0-255, for example: RGB (120,33,234)

Rgba mode, for example: RGBA (255,0,0,0.5), and the last a for transparency 50%

Text-decoration Text Trim lines

None defaults. Define the standard text

Underline defines a line below the text

Overline defines a line on a text

Line-through defines a line that crosses text

Blink defining the Blinking text

h1 {text-decoration:overline;}       h2 {Text-decoration:line-through;}       h3 {Text-decoration:underline;}

Text-shadow Text Shadow

H-shadow required. The position of the horizontal shadow. Allow negative values

V-shadow required. The position of the vertical shadow. Allow negative values

Blur is optional. Blur the distance

Color is optional. The color of the shadow

h1{text-shadow:2px 2px 2px #ff0000;}

Width Width:auto | Length

Height Height:auto | Length

p {width:300px;}       p {width:50%;}       img {height:200px;}       p {height:100px;}

Margin Margin:auto | Length

Margin-top Setting the top margin

Margin-bottom Setting the margin below

Margin-left setting the margin to the left

Margin-right Setting the right margin

Abbreviated type:

Margin: Top margin right margin bottom margin left margin

Margin: top and bottom margin, left and right margin

Margin: Top margin, left and right margin, bottom margin

p {width:300px; height:100px; margin:10px;}       p {width:300px; height:100px; margin:0 Auto;}

Internal margin Padding:length

Padding-top setting the padding on the top edge

Padding-bottom Setting the padding below

Padding-left set the padding on the left side

Padding-right set the padding on the right side

p {width:300px; height:100px; padding:10px;}

Transparency Opacity: <number>

Number value is a decimal between 0.0-1.0

Compatible with full browser-wide notation:

p{Filter:alpha (opacity=50);}  /* IE6-IE8 */       p{opacity:0.5;}  /* Modern Browser */