Summary of CSS Knowledge (III.)

Last Update:2016-08-11 Source: Internet

Author: User

Tags italic font

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Common styles of CSS

1. Font style

　　1) font name (font-family)

　　　Font-family: <family-name>

Set the name of the text, you can use multiple names, or separate them with commas , and the browser uses the available fonts in order of precedence.

If the font name contains spaces or Chinese, you should enclose it in quotation marks .

Example source code:

/**/p{    font-family:"Microsoft Jas Black", "Arial";}

<!---<body>    <P  > text, which is the symbol of the bearer language. </ P > </ Body >

　　Effect:

Text, which is the symbol of the bearer language.

2) font size (font-size)

Set the size of text

　　　Font-size: <length> | <percentage>

<LENGTH>: Specifies the text size with a length value and does not allow negative values.

<percentage>: Specifies the text size in percent, and the percentage value is based on the size of the font in the parent object, and no negative value is allowed.

Example source code:

/** *. length{font-size:20px;} . Percentage {font-size:20px;} . Percentage span {font-size:60%;}

<!--HTML code -<Body>    <Pclass= "Length">Text, which is the symbol of the bearer language.</P>    <Pclass= "Percentage">Text<span>is the symbol that hosts the language.</span></P></Body>

　　Effect:

Text, which is the symbol of the bearer language.

　3) font Bold (font-weight)

Control Font Weight

Font-weight:normal | Bold | Bolder | Lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

　　　Normal: Regular font, equivalent to a numeric value of 400

Bold: bolded, equivalent to a numeric value of 700

Bolder: Defines values that are heavier than the inherited value

Lighter: Defines a value that is lighter than the inherited values

* * It is recommended to use "bold".

Example source code:

/** *. Normal{font-weight:normal;} . Bold {font-weight:bold;}

<!--HTML code -<Body>    <Pclass= "normal">This is the normal font.</P>    <Pclass= "Bold">This is bold font.</P></Body>

　　Effect:

This is the normal font.

This is bold font.

4) font italic (font-style)

　　　Controls whether the font is skewed

Font-style:normal | Italic | Oblique

Normal: Specifies that the text font style is normal

Italic: Specifies that the text font style is italic

　　Example source code:

/** *. Normal{Font-style:normal;} . Italic {Font-style:italic;}

<!--HTML code -<Body>    <Pclass= "normal">This is the normal font.</P>    <Pclass= "Italic">This is the Italic font</P></Body>

　　Effect:

This is the normal font.

This is the Italic font

5) font style abbreviation ( font )

For example:

/**/p{    font-style:italic;     Font-weight:bold;     font-size:14px;     line-height:22px;     font-family:"The song Body";}

　　After abbreviation:

/** *font:italic bold 14px/22px "Arial"}

　　6) font colors (color)

　　　Color: <color>

Color attribute values are divided into three formats:

1, English words, such as red, yellow, green ...

2, hexadecimal representation, #开头, 6 hexadecimal characters or combinations of numbers, such as: #FFFFFF

3, RGB mode, red 0-255, Green 0-255, blue 0-255, such as: rgb (12,34,56)

Rgba mode, the last a for transparency, for example: Rgba (0,0,0,0.5)

　　Example source code:

/**/{color:red;}

<!---<body>    < p  > text, which is the symbol of the bearer language. </ P > </ Body >

　　Effect:

Text, which is the symbol of the bearer language.

　7) text trim line (text-decoration)

　　　Control text Trim Lines

Text-decoration:none | Underline | Blink | overline | Line-through

Underline: Underline

Overline: Underline

Line-through: Strikethrough

Example source code:

/**/. sup{    text-decoration:overline;   /* Dash up */} . del {    text-decoration:line-through;   /* Delete Line */} . Sub {    text-decoration:underline;  /* Underline */}

<!--HTML code -<Body>    <Pclass= "sup">This is an underscore.</P>    <Pclass= "Del">This is the strikethrough.</P>    <Pclass= "Sub">This is the underline.</P></Body>

　Effect:

This is an underscore.

This is the strikethrough.

This is the underline.

8) text Shadow (Text-shadow)

　　　Controls the shaded portion of text

Text-shadow:h-shadow V-shadow blur color;

H-shadow: Required, horizontal shadow position, negative value allowed.

　　V-shadow: Required, vertical shadow position, negative value allowed.

Blur: optional, blurred distance.

Color: optional, the colors of the shadow.

Example source code:

 /*   CSS code   .shadow  { Font-size : 20px ;     Font-weight : bold ; /*  color:transparent;    */ /*   font transparent  */     Text-shadow : 3px 3px 3px #b28118 ; /*   horizontal distance vertical distance blur distance color  */}

<!---<body>     <   Class= "Shadow"> shaded Oh </p></ Body >

　　Effect:

It's a shadow!

Summary of CSS Knowledge (III.)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More