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

This article introduces you to achieve CSS page layout Chinese layout of the nine skills are, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Do you know anything about CSS page layout in Chinese? here are 9 tips for CSS page layout in Chinese.

9 skills of CSS Page layout in Chinese typesetting

CSS page layout Chinese typesetting is different from the English typesetting introduced abroad, because of the particularity of Chinese characters, so there are some places that need everyone's attention. Today's jzxue.com article may be helpful to everyone's control of typesetting.

How to set the font, color and size of the text-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)

All of the above can be written in a single line of font attribute (except that the color attribute needs to be written separately):

Font:italicbold12px/150% "LucidaGrande", Verdana,Lucida,Arial,Helvetica, Arial, sans-serif

Second, how to control paragraph typesetting-using margin,text-align

Use of Chinese paragraphs

Tags, left and right (equivalent to indentation), and the white space after the front of the paragraph, can be used with margin. For example:

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

Text is aligned with text-align, such as:

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

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

PS. Speaking of margin, I am used to defining margin:0; for all tags when writing CSS because sometimes there is a page typesetting problem caused by the default margin value, but I can't find the reason (pay special attention to tags such as ul/ol/p/dt/dd)

III. 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:

P {writing-mode:tb-rl;}

Can be combined with direction typesetting.

IV. 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:

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. Note that if the left outer patch (margin-left) of an item list is set to zero, the bullets for list-style-position:outside (default is outside) will not be displayed. Unfortunately, the above bullets don't seem to set the size, and dots and squares are always the same. And cannot set alignment in the vertical direction.

5. Drop caps-use: first-letter

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

For example:

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

VI. Indent the first line-use 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:

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. About Chinese phonetic alphabet-use ruby tags and ruby-align attributes

For example, you 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.

8. Truncation of fixed width Chinese characters-using text-overflow

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:

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

However, you can only handle the truncation of text on one line, not multiple lines.

IX. Fixed width Chinese characters (words) line 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:

Nanjing Shanghai Shanghai Shangnan Shanghai Nanjing Shanghai div >

It is worth noting that the spaces cannot be replaced (at least one soft space).

On the realization of CSS page layout Chinese layout of the nine skills are shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.