Shulou(Shulou.com)06/02 Report--

This article shows you what are the nine skills of text typesetting in CSS page layout. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

We will focus on the nine techniques of text layout in CSS page layout, including how to set font, color, size, paragraph white space, first word drop, and first line indentation. Talk about some commonly used Chinese typesetting of web pages, such as Chinese character truncation, fixed-width word wrapping (word-wrap and word-break), and so on.

Nine skills of text typesetting in CSS web page layout

Learn the web standard, follow the Web standard for development and production. 51cto.com has been discussing with you a lot about layout, and the main content in the page is pictures and text. Today, I will discuss with you about the text layout in the layout of CSS pages.

How to set font, color, size, paragraph white space, first word drop, first line indentation. * talk about some commonly used Chinese typesetting of web pages, such as Chinese character truncation, fixed-width word wrapping (word-wrap and word-break), and so on. Because only write some application experience, if you need a complete introduction to CSS properties, more in-depth study, you are welcome to refer to more tutorials in 51cto.com.

First, set the font, color, size and so on to use font.

Font-style sets italics, such as font-style:italic

Font-weight sets the text thickness, such as font-weight:bold

Font-size sets the text size, such as font-size:12px; (or 9pt, refer to the CSS manual for display problems in different units)

Line-height sets line spacing, such as line-height:150%

Color sets the text color (not font-color), such as color:red

Font-family sets fonts, such as font-family: "LucidaGrande", Verdana,Lucida,Arial,Helvetica, Arial, sans-serif; (this is a common way of writing)

Second, paragraph typesetting: use margin, padding and text-align.

Use of Chinese paragraphs

Tags (which can also be other containers), left and right (equivalent to indentation), and the white space after the first paragraph can be used with margin or padding. For example:

ExampleSourceCode

P {margin:18px6px6px18px; / * is the clockwise direction of top, right, bottom, left and 12:00, respectively.

◆ text is aligned with text-align, such as:

ExampleSourceCode

P {text-align:center;/* Center alignment * /}

Alignment also includes left, right, and justify (alignment at both ends)

There are many beginners who are not very familiar with margin and padding. See the picture below.

Third, vertical text: use writing-mode.

The writing-mode property has two values, lr-tb, which are the default left-right, top-bottom, and tb-rl, which are top-bottom and right-left.

For example:

ExampleSourceCode

P {writing-mode:tb-rl;}

Can be combined with direction typesetting.

IV. The problem of bullets: using list-style

The bullets in CSS are disc (solid dot), circle (hollow circle), square (solid square), decimal (Arabic numeral), lower-roman (lowercase Roman numeral), upper-roman (uppercase Roman numeral), lower-alpha (lowercase Roman alphabet), upper-alpha (uppercase English letter), none (none). For example, set the bullets of a list (ul or ol) as squares, such as:

ExampleSourceCode

Li {list-style:square;}

In addition, list-style also has some values. For example, you can use some small pictures as bullets and write url ("picture address") directly under list-style. But 52CSS.com strongly discourages this approach. It is recommended that you set the picture as the background of li.

Fifth, the sinking effect of the first word.

Pseudo-object: first-letter combined with font-size and float can create the drop caption effect.

For example:

ExampleSourceCode

P:first-letter {padding:6px; font-size:32pt; float:left;}

VI. Text indentation: using text-indent

Text-indent can indent the first line of the container by a certain unit. For example, Chinese paragraphs are usually preceded by two Chinese characters. It can be written as follows:

ExampleSourceCode

P {text-indent:2em;/*em is the relative unit, 2em is now twice the size of a word * /}

If font-size is 12px, then text-indent:2em indents 24px.

7. Truncation of fixed-width Chinese characters: use text-overflow (display ellipsis effect)

The background language can be used to truncate the field contents from the database, for example, 12 Chinese characters (followed by an ellipsis). But sometimes you need to filter html tags, but there is no problem with using CSS to control it. For example, apply the following style to a list:

ExampleSourceCode

Li {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

8. Fixed-width Chinese characters (words) wrapping: using word-break

For example, for example, to display many place names in a fixed-width container (assuming they are separated by spaces), in order to avoid a break in the middle of the place names (that is, one word is on top and another word is broken to the next line). You can use word-break. For example:

ExampleSourceCode

Nanjing Shanghai Shanghai Shangnan Shanghai Nanjing Shanghai Nanjing Shanghai Shanghai Nanjing Shanghai Shanghai div >

9. Chinese characters Bopomofo: use ruby tags and ruby-align attributes

For example, Bopomofo zhuyin can use ruby-align to set the alignment. This is seen in the CSS manual, and you can check the ruby-align entry on your own.

What are the nine skills of text typesetting in CSS page layout? have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.