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

This article mainly introduces CSS layout commonly used text typesetting related properties is what, has a certain reference value, interested friends can refer to, I hope you read this article after a great harvest, the following let Xiaobian take you to understand.

First, set text font, color, size, etc. Use font, etc.

font-style setting italic, e.g. font-style:italic;

font-weight Set the text thickness, such as font-weight:bold;

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

line-height setting line spacing, such as line-height:150%

color Set the text color (note not font-color), such as color:red;

font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica, Arial, sans-serif;

Paragraph layout: Use margin, padding and text-align.

Use of Chinese paragraphs

Label (can also be other containers), left and right (equivalent to indentation), after the paragraph blank, can be used margin or padding. For example:

sample code

p{

margin:18px6px6px18px;

/* Up, right, down, left, clockwise from 12:00 */

}

Text alignment is text-aligned, such as:

sample code

p{

text-align:center;/* Center alignment */

}

There are also left, right and justify alignments.

3. Vertical text: Use writing-mode.

The writing-mode attribute has two values, lr-tb, which is the default left-right, top-down, and tb-rl, which is top-down, right-left.

For example:

sample code

p{

writing-mode:tb-rl;

}

It can be combined with direction.

4. Bullet problem: use list-style

Bullets in CSS include disc (solid dot), circle (open circle), square (solid square), decimal (Arabic numeral), lower-roman (lowercase Roman numeral), upper-roman (capital Roman numeral), lower-alpha (lowercase English letter), upper-alpha (capital English letter), none (none). For example, set the bullet symbol of a list (ul or ol) as a box, such as:

sample code

li{

list-style:square;

}

In addition, list-style has some values, such as small pictures as bullets, and url ("picture address") can be written directly under list-style. But Mb5u.com strongly discourages such an approach. It is recommended that you set the background of the picture as li.

V. Initial sinking effect

Fake object: first-letter with font-size, float can make the initial sinking effect.

For example:

sample code

p:first-letter{

padding:6px;

font-size:32pt;

float:left;

}

VI. Text indentation: use text-indent

text-indent can indent the first line of a container by a certain unit. For example, Chinese paragraphs generally have two Chinese characters before each paragraph. It could be written:

sample code

p{

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

}

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

7. Fixed width Chinese character truncation: use text-overflow (display ellipsis effect)

The background language can truncate the contents of fields from the database, such as 12 Chinese characters (followed by ellipses). However, sometimes you need to filter html tags, etc., and CSS control does not have this problem. For example, apply the following style to a list:

sample code

li{

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

}

8. Fixed width Chinese character (word) folding line: use word-break

For example, if you want to display a number of 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 name (i.e., one word is on top and another word is broken to the next line). You can use word-break. For example:

sample code

Nanjing Shanghai Shanghai Nanjing Shanghai

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

9. Chinese phonetic notation: use ruby label and ruby-align attribute

For example, Zhuyin, you can use ruby-align to set the alignment. This is seen in the CSS manual, and you can refer to the ruby-align item for details.

Thank you for reading this article carefully. I hope that Xiaobian's "What are the commonly used text typesetting related attributes in CSS layout?" This article is helpful to everyone. At the same time, I hope that everyone will support you a lot and pay attention to the industry information channel. More relevant knowledge is waiting for you to learn!

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.