Add font and color styles ------- CSS and font styles ------- css

Add font and color styles ------- CSS and font styles ------- css
Controls the font, style, and color of text by using CSS.

1. Basic operations:

 

 1 body{ 2     font-family: Verdana, Geneva, Tahoma, sans-serif 3 } 4  5 body{ 6     font-size: 14px 7 } 8  9 body{10     color: silver11 }12 13 body{14     font-weight: bold15 }16 17 body{18     text-decoration: underline19 }

Note:

• Font-family: fonts used in custom pages
• Font-size: control the font size
• Color: Set the color of the text.
• Font-weight: affects the font width
• Text-decoration: adds more styles to text

 

2. Font series:

 

Series Classification:

• Sans-serif
• Serif
• Monospace
• Cursive
• Fanstasy
• Lining: it is a small decorative line at the end of the letter.

Example:

• Sans-serif:No lining, suitable for reading

 

• Serif: It looks traditional and appears to be a newspaper.

• Monospace: The font contains characters of fixed width. For example, the horizontal width of an "I" is the same as that of a "m", which is mainly used to display software code examples.

 

• Cursive

 

• Fantasy: Decorative fonts containing certain styles:

Summary features:

• The serif font looks elegant and traditional.
• The sans-serif font is clear and readable.
• Monospace is typed like a typewriter.
• The Cursive and fantasy fonts give people an interesting or well-divided feeling.

 

3. Use CSS to specify the font family:

 

 

Behind-the-scenes work of the browser:

 

1 body{2     font-family: Verdana, Geneva, Tahoma, sans-serif3 }

 

Note:

• We specified four candidate fonts for the body.
• The browser selects from left to right
• If the browser detects that the user has not customized the first font, it then checks the second font.
• Until the user's font is found
• If the first three fonts are not found, the browser uses the default sans-serif font.

Diagram:

 

4. Use of Wed Fonts

 

We all have this idea,

Pages designed by myself, with cool fonts,

If you don't want it to be in the user's hands, it all becomes the default...

Therefore, with the @ font-face rule

 

Procedure:

Sample Code:

1 @ font-face {2/* we set a name for our font */3 font-family: "JJStyle One "; 4/* the browser loads the src-specified font file until it finds a file that he can support */5 src: ur1 ("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff") 6 ur1 ("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf ") 7} 8 9 10 h1 {11/* use the specified font-family: "JJStyle One", sans-serif; 13}

Note:

• You can customize multiple fonts, but you must ensure that the corresponding font files exist on the server,
• Create a separate @ font-face rule with the unique name.

 

5. Adjust the font size

Most default fonts are not very nice,

Therefore, as a designer,

You need to know how to specify the font size.

 

Some methods to specify font-size:

Sample Code:

1 body {2/* The font height is 14 pixels */3 font-size: 14px 4} 5 6 h1 {7/* the font size is 150% relative to the other font size, here is the size relative to the body font */8 font-size: 150% 9} 10 11 h2 {12/* 1.2 times the size relative to another font */13 font-size: 1.2em; 14} 15 16 h3 {17 font-size: small18/* keywords: xx-small, x-small, small, medium, large, x-large, xx-large */19}

Suggestions for specifying the font size:

1 body {2 font-family: Verdana, Geneva, Tahoma, sans-serif; 3/* The font height is 14 pixels */4 font-size: small 5} 6 7 h1 {8 font-family: sans-serif; 9/* the font size is 150% relative to the other font, here is the size relative to the body font */10 font-size: 150% 11} 12 13 h2 {14/* 1.2 times the size relative to another font */15 font-size: 1.2em; 16}

Diagram:

 

 

 

6. Change the font width:

 

• Font-weight: bold
• Font-weight: normal

 

7. Add a style for the font:

 

Italic:

Skew:

Note:

• Generally, no matter what style you specify, the results are uncertain, sometimes italic, or skewed.
• Therefore, unless it is really important to you, you can use italics without worrying about the difference.

 

8. Color Style:

 

Method for specifying the color:

• Color name
• Specify by percentage of red/green/blue Pairs
• Hexadecimal code

 

1. Specify by name

1 body{2     background-color: silver;
3 }

2. Specify the color with the red, green, and Blue values.

1 body {2/* rgb: Abbreviation of red, green, and blue */3 background-color: rgb (80%, 40%, 0%); 4} 5 h1 {6 background-color: rgb (204,102, 0); 7}

3. Specify with hexadecimal code

1 h2{2     background-color: #cc66003 }

Note:

• The hexadecimal code starts #
• The first two digits indicate the red weight, the middle two are green, and the last two are blue.

• The calculation steps and explanations of the "CC" component of the Code are as follows:

Text Decoration:

1 em {2/* Make the <em> element have a horizontal line that passes through the text */3 text-decoration: line-through; 4} 5 6 7 em {8/* Make the <em> element have an upper line and underline */9 text-decoration: underline overline; 10} 11 12 em {13/* so that the <em> element has no decoration */14 text-decoration: none; 15} 16 17 h1, h2 {18 color: # cc6600; 19/* Add a dotted line to the drop-down box */20 border-bottom: thin dotted # aabbcc; 21}

 

 

The end --