:[Web front-end CSS articles] CSS text format-Picture material template recommendation免费ppt模版下载-道格办公

Hello everyone, it’s time for the weekly technology sharing column. Last week, Xiaotian took everyone to understand CSS. Today’s article Bringing you CSS text formatting.

< section >

text color

< The p>color attribute is used to set the color of the text.

Colors are most often specified via CSS:

hex value - eg: < span>#FF0000
A RGB value - eg: RGB(255,0,0)
The name of the color - eg: red

The background color of a web page refers to the selection within the main body:

body {color:red< /span>;}
h1 {color< /span>:#00ff00;}
h2 {color:rgb(255255 span>,0,0);}

< section >

< section >Text alignment

This arrangement attribute is used to set the horizontal alignment of the text.

Text can be centered or aligned to left or right, justified.

When text-align is set to 'justify', each line is expanded to equal width, and left and right margins are justified (like magazines and newspapers).

h1 {text-align: center;}
p.date {< span >text-align:right;}
p.main {text-align:justify;}

< section >

< section >Text modification

< section data-role='paragraph'>

text-decoration attribute is used to set or remove text decoration.

From a design point of view, the text-decoration attribute is mainly used to remove the underline of the link:

a {text-decoration: none;}
h1 { text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:< /span>underline;}

< section >

< section >Text conversion

< section data-role='paragraph'>

The text conversion attribute is used to specify uppercase and lowercase letters in a text.

can be used to capitalize or lowercase all words, or capitalize the first letter of each word.

p.uppercase {text-transform:< span >uppercase;}
p.lowercase {text-transform:lowercase;}
p .capitalize {text-transform:capitalize ;}

< section >

< section hm_fix='312:614'>text indent

The text-indent attribute is used to specify the indentation of the first line of text.

p {text-indent: 50px;}
/*Usually used for indenting two texts in the first line*/
p{ text-indent:2em}

< section >

< section >CSS font

< section data-role='paragraph'>

CSS font properties define font, bold, size, text style.

The

font-family attribute sets the font family of the text.

The font-family attribute should set several font names as a 'fallback' mechanism, if the browser doesn't support the first font, it will try the next one.

Note: If the name of a font family is more than one word, it must be enclosed in quotes, like Font Family: 'Arial'.

Multiple font families are specified by separating them with a comma:

p{font-family:'Times New Roman''Times New Roman', Times, serif;}

< section >

< section >font style

It is mainly used to specify the font style attribute of italic text.

This attribute has three values:

normal - display text normally
Italic - text in italics
Italic text - text slanted to one side (very similar to italics, but less supported)

p.normal {font-style< /span>:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

< section >

< section >font size

< section data-role='paragraph'>

The font-size attribute sets the size of the text.

The ability to manage text size is very important in web design. However, you cannot adjust the font size to make paragraphs look like headings, or headings to look like paragraphs.

Be sure to use the correct HTML tags for <h1> - <h6> for headings and <p> for paragraphs:

The font size value can be an absolute or relative size.

Absolute size:

Set a specified size of text
Do not allow users to change text size in all browsers
Absolute sizes are useful when you have determined the physical size of the output

Relative size:

Sizing relative to surrounding elements
lAllow users to change the text size in the browser

If you don't specify a font size, the default size is the same as a normal text paragraph, which is 16 pixels (16px=1em).

< section >

< section >Set font size in pixels

Set the size and pixels of the text, allowing you to fully control the text size:

h1 {font-size: 40px;}
h2 { font-size:30px;}
p {font-size:14px;}

< section hm_fix='321:612'>

< /section>

Use em to set font size

To avoid problems with text not resizing in Internet Explorer, many developers use em units instead of pixels.

ems are recommended by the W3C.

1em is equal to the current font size. The default text size in browsers is 16px.

So, the default size of 1em is 16px. Pixels can be converted to ems with this formula: px/16=em

h1 {font-size: 2.5em;} /* 40px/16=2.5em */
< span >h2 {font-size:1.875em< span >;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

< section >

Use percentage and EM combination

In all browser solutions, the default font size for the <body> element is set as a percentage:

body {font-size: 100%;}
h1 {font-size:2.5em;}
h2h2 {font-size:1.875em;}< /span>
p {font-size: 0.875em;}

< section >

All CSS font properties

font	Set all font properties in one declaration
font-family	Specify the font family of the text
font-size	Specify the font size of the text
font-style	Specify the font style of the text
font-variant	Display text in small caps or normal font.
font-weight	Specify the thickness of the font.

The above are the commonly used web front-end development tools mentioned in this article, use them skillfully Tools are the basic conditions for learning the Web front-end well, and students can try to install and use them by themselves. See you next time!

Recommendation at the end of the article

Runtian Education Certificate + Employment Class

The hot class is starting

Maximum discount for employment classes in some subjects 2000 元

Scan the QR code for free consultation and grab the preferential quota

▼

*Online courses can also scan QR code for consultation

If you have any questions, you can privately chat with Teacher Xiaotian

▼

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/Web%20frontend%20CSS%20articles%20CSS%20text%20format.html