Common css styles and css styles

Common css styles and css styles

Font-family: font name

You can use multiple names separated by commas (,), and the available fonts are used in sequence in the browser.

P {font-family: ' ', '', 'arial ';}

Font-size: font size

Length: Specifies the text size with the length value. Negative values are not allowed.

Percentage specifies the text size by percentage. The percentage value is based on the font size of the parent object and negative values are not allowed.

p { font-size:14px;}

Font-weight control font width

Normal font, equivalent to 400 digits

Bold, equivalent to 700 digits

100 ~ 900 define characters from fine to rough

p { font-weight:bold;}

Font-style controls whether the font is skewed

Normal indicates that the text font style is normal.

Italic specifies that the text font style is italic. For special fonts without italic design, if you want to use italic appearance, oblique will be applied.

The oblique specifies that the text font style is a skewed font, so that the text is skewed manually, instead of selecting the italics in the font.

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

Font (abbreviation of font style)

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

 

Color text color

• English words, such as red, yellow, green...
• Hexadecimal representation, starting with #, and a combination of six hexadecimal characters or numbers, for example: # FFFFFF, #000000...
• RGB mode, red 0-255, green 0-255, blue 0-255, for example: RGB (234, 33)
• RGBA mode, for example: RGBA (0.5, 0, 50%), the last A indicates that the transparency is.

Text-decoration text decoration line

None is the default value. Define standard text

Underline defines a line in the text

Overline defines a line in the text

Line-through defines a line passing through the text

Blink defines flickering text

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

Text-shadow text shadow

H-shadow is required. The position of the horizontal shadow. Negative value allowed

V-shadow is required. The position of the vertical shadow. Negative value allowed

Blur is optional. Fuzzy distance

Optional. Shadow color

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

 

Width: auto | length

Height: auto | length

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

Margin: auto | length

Margin-top: Set the margin above

Margin-bottom: Set the margin below

Margin-left: Set the margin on the left.

Margin-right: Set the margin on the right.

Abbreviation type:

Margin: right margin of the top margin, left margin of the bottom margin

Margin: margin between top and bottom

Margin: Top margin, left margin, and bottom margin

div { width:300px; height:100px; margin:10px;}div { width:300px; height:100px; margin:0 auto;}

Padding: length

Padding-top: top padding

Padding-bottom: Set the bottom padding

Padding-left: Set the padding on the left

Padding-right: Set the padding on the right

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

Transparency opacity: <number>

Decimal number between 0.0 and 1.0

Compatible with all browsers:

Div {filter: alpha (opacity = 50);}/* IE6-IE8 */div {opacity: 0.5;}/* modern browser */