:[Tutorial] HTML+CSS zero-based introductory tutorial (9)-Picture material template recommendation免费ppt模版下载-道格办公

We have learned the basics of HTML together, I think you should know How to write basic HTMl code, then starting today, let’s learn the basic part of CSS together, if you don’t know the basic knowledge of HTML, please go to the bottom of the article and click [Related Articles] to learn . If you have anything, you can leave a message in the background to exchange and learn.

CSS text - font property

CSS font properties define the font family, size, boldness, style (such as italics), and variations (such as small caps) of text.

font shorthand property Sets all font properties in one declaration.
This shorthand property is used to set two or more aspects of an element's font at once.

Use keywords such as icon to appropriately set the font of an element to match an aspect of the user's computer environment.

Note that if these keywords are not used, at least the font size and font family must be specified.
The following attributes can be set in order:
font-style font-variant < code class='syntax brush-html' >font-weight font-size/line-height font-family

The following code:

.ex2{font:italic bold 12px/20px 
arial,sans-serif;}

< p > displayed on the page as F2E.TMING

Some attributes can also be written in font, as follows:
caption icon menu small-caption status-bar

CSS text - font-family propertyfont-family specifies the font family of the element. 
font-family can save multiple font names as a "fallback" system.
If the browser does not support the first font, it will try the next one.
There are two types of font family names:
1) The specified series name: the name of the specific font, such as: 'times', 'courier', 'arial'.
2) Common font family names: eg: 'serif', 'sans-serif', 'cursive', 'fantasy', 'monospace'
p{ font-family:'Times New Roman',Georgia,
Serif; }
< p >Tip: Separate each value with a comma, and always provide a class name as a last resort.

CSS text - font-size attributefont-size attribute can set the font size.
The font-size attribute has 3 values: (commonly used)
1) length
Set font-size to a fixed value. Such as: p{font-size:14px;}
2) %
Sets the font-size to a percentage value based on the parent element. Such as: p{font-size:50%;}
3) inherit
 specifies that the font size should be inherited from the parent element. Such as: p{font-size:inherit;}

CSS Text - font-style propertyThe font-style property defines the style of the font.
The font-size attribute has 4 values:
1) normal
Default value. Browsers display a standard font style. For example: p.normal{font-style:normal;} 
The page is displayed as < strong >F2E.TMING
2) italic
The browser will display an italic font style. For example: p.italic{font-style:italic;}
The page is displayed as < strong >F2E.TMING
3) oblique
The browser will display an italic font style. For example: p.oblique{font-style:oblique;}
The page is displayed as < strong >F2E.TMING
4) inherit
 specifies that the font style should be inherited from the parent element. For example: p.inherit{font-style:inherit;}
The page is displayed as < strong >F2E.TMING

CSS text - font-weight propertyThe font-weight property sets the thickness of the text. 
Use the bold keyword to make text bold. 
The keywords 100 ~ 900 specify 9 levels of boldness for the font.
If a font has these boldness levels built in, the numbers map directly to the predefined levels, with 100 corresponding to the thinnest font variant and 900 the thickest font variant.
The number 400 is equivalent to normal, and 700 is equivalent to bold. 
p{font-weight:100;}p.normal{font- weight:normal;}p.thick{font-weight:bold;}p.thicker{font- weight:900;}
 displayed on the page as 
F2E.TMING
F2E.TMING
F2E .TMING
F2E.TMING
Tips: If you set the boldness of an element to bolder, the browser will set A font with a thicker inherited value is bolded. In contrast, the keyword lighter causes the browser to move the boldness down instead of up.

CSS Text - font-variant propertyThe font-variant property can set small caps. 
Small caps are not normal uppercase letters nor lowercase letters, this alphabet uses different sizes of uppercase letters. 
p{font-variant:small-caps;} appears on the page as aaaaa

CSS Text - text-decoration PropertyThe text-decoration property specifies the decoration to add to the text.
The text-decoration attribute has 4 values:
1) none
Default. Define the text of the standard. Such as: p.none{text-decoration:none;} 
The page is displayed as < strong >F2E.TMING
2) underline
Defines a line under the text. Such as: p.underline{text-decoration:underline;}
The page is displayed as < strong >F2E.TMING
3) overline
Defines a line over the text. For example: p.overline{text-decoration:overline;}
The page is displayed as < strong >F2E.TMING
4) line-through
Defines a line through the text. Such as: p.line-through{text-decoration: line-through;}
page Shown as F2E.TMING on
5) blink
Defines the blinking text. For example: p.blink{text-decoration:blink;}
The page is displayed as < strong >F2E.TMING
6) inherit
 Specifies that the value of the text-decoration attribute should be inherited from the parent element. For example: p.inherit{text-decoration:inherit;}
The page is displayed as < strong >F2E.TMING

CSS text - text-underline-position attributetext-underline-position attribute line position in the text. This property has 2 values:
1) below
default. below the text. Such as: p.below{text-underline-position :below;text-decoration:underline;} 
The page is displayed as F2E.TMING
2) above
Above the text. Such as: p.above{text-underline-position :above;text-decoration:underline;} 
The page is displayed as F2E.TMING

CSS text - text-shadow propertytext-shadow property adds a shadow effect to the text. 
Syntax: p{text-shadow: h-shadow v-shadow blur color;}  
h-shadow Required. The position of the horizontal shadow. Negative values are allowed. 
v-shadow Required. The position of the vertical shadow. Negative values are allowed. 
blur Optional. Blurred distance. 
color Optional. The color of the shadow. 
p{ text-shadow: 5px 5px 5px #FF0000; }

The page is displayed as < strong >F2E.TMING

CSS Text - text-transform propertyThe text-transform property controls the case of the text. This property has 4 values:
1) none
Default. Defines standard text with lowercase and uppercase letters. Such as: p{text-transform:none;} 
The page is displayed as  flash
2) capitalize
Every word in the text begins with a capital letter. Such as: p{text-transform:capitalize;}
 displayed on the page as  Flash
3) uppercase
Define only uppercase letters. Such as: p{text-transform:uppercase;}
 displayed on the page as  FLASH
4) lowercase
Define no uppercase letters, only lowercase letters. Such as: p{text-transform:lowercase;}
 displayed on the page as  flash

CSS text - line-height propertyThe line-height property sets the distance between lines (row height). 
Note:Negative values are not allowed.
1) normal
Default. Set reasonable line spacing. Such as: p{line-height:normal;} , displayed on the page as
flash
flash
2) number
Set the number, this number will be multiplied by the current font size to set the line spacing. Such as: p{line-height:1.2;}, displayed on the page as
flash
flash
3) length
Define only capital letters. Such as: p{line-height:20px;}, displayed on the page as
flash
flash
4) %
A percentage line spacing based on the current font size. Such as: p{line-height: 100%;}, displayed on the page as
flash
flash

CSS Text - letter-spacing propertyletter-spacing property increases or decreases the space between characters (character spacing). 
Note:Negative values are allowed, which will squeeze the letters together more tightly.
p{ letter-spacing:2px; }
 displayed on the page as flashflash p{ letter-spacing:-5px; }
 displayed on the page as flashflash

CSS text - word-spacing propertyletter-spacing property increases or decreases the space between words (that is, word spacing). 
Note:Negative values are allowed, which will squeeze the letters together more tightly.
p{ word-spacing:25px; }
Displayed on the page as< strong >flash flash

Related articles

[Tutorial] HTML+CSS zero-based introductory tutorial (1)

[Tutorial] html+css zero-based introductory tutorial (2)

[Tutorial] HTML+CSS zero-based introductory tutorial (3)

[Tutorial] HTML+CSS zero-based introductory tutorial (4)

[Tutorial] HTML+CSS zero-based introductory tutorial (5)

[Tutorial] html+css zero-based introductory tutorial (6)

[Tutorial] html+css zero-based introductory tutorial (7)

[Tutorial] HTML+CSS zero-based tutorial (8)

          

                        
                            
                        
                        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/Tutorial%20HTMLCSS%20zerobased%20introductory%20tutorial%209.html