:Styling text with CSS-Picture material template recommendation免费ppt模版下载-道格办公
投稿
  1. JustNewsHome
  2. Picture material template recommendation
  3. Styling text with CSS

Styling text with CSS

Author: daogeziyuan • • Picture material template recommendation • Views 765

Styling text with CSS can be achieved through the font style property. The following are some common CSS font style properties and their usage: 1. Font family (font-family): used to set the font style of the text. You can use generic font family names (eg

1. Case description
1. Assessment knowledge points
Font style attributes
2. Practice objectives
Ø Master common CSS font styles Attributes.
Ø Proficiency in using CSS font style attributes to control font effects.
3. Demand analysis
When browsing the webpage, you will find that there are various fonts and colors in the webpage . In order to conveniently control fonts in web pages, CSS provides a series of font style attributes, mainly including: font-size, font-family, font-weight, font-style, @font-face, word-wrap attributes. In this case, the above properties are used to control the font style and compare different display effects.
4. Case analysis
1) The effect is shown in Figure 3-9.

                   

Figure 3-1 CSS font style attribute effect
2) The specific implementation steps are as follows:
a) Use tags to build the page structure, and define different classes for each tag.
b) For the first tag, set the "Microsoft Yahei" font, 18 pixels, red, italic, bold paragraph effect.
c) Set the server font, 24px, blue paragraph effect for the second <p> tag.
Second, case implementation
1, making page structure
Create a new HTML page, the specific code is as follows:
< code><!doctype html><html><head><meta charset< /span>='utf-8'> <title>CSS font style attribute</ title></head><body><p class='part1'> I set it to Microsoft Yahei, 18 pixels, oblique, bold red font </p> <p class='part2' > I am using the server font defined by the @font-face attribute, which is displayed as a 24-pixel blue font </ p></body></ html>

2, definition CSSstyle

Use the embeddedCSSstyle sheet to style the page, specificallyCSSThe code is as follows:

  • < li>
<style type='text/css'>@font-face{ font-family: ziti; /*server font name*/ src:url(font/FZJZJW.TTF); /*server font name*/ } .part1{ font-family:'Microsoft Yahei'; < span class='code-snippet_outer'> font-size:18px;  color:red;  font-style:italic;  font-weight:bold;  }.part2{ font-family:ziti; /*Set font style*/< span class='code-snippet_outer'> font-size:24px; color:blue;  }</style< /span>>

After saving, preview it in Google Chrome, the effect is as shown in the figure3-10.

Figure 3-1CSSfont style Attribute Effect

Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/Styling%20text%20with%20CSS.html

Like (810)
Reward 支付宝扫一扫 支付宝扫一扫
Lomu Real_c Columnist
48 196
single-end

Related Suggestion