Chinese CSS layout based on Web standards

Source: Internet
Author: User

Learn web standards over the past few months and follow the standards to design and create web pages. I have always wanted to write something and try to understand my experiences. This article is mainly intended for Chinese typographical design. It is not involved in English typographical design because it is rarely used.

First, we will introduce how to set the font, color, size, section space, and other simple applications. Later, we will introduce some simple applications, such as the first word sinking and first line indent. Finally, we will talk about some common Chinese web page la s, such as text truncation and fixed-width word inner lines (word-wrap and word-break. For more information about CSS attributes, see the CSS manual.

1. How to set text font, color, and size-Use font
Font-style: Set italic, for example, font-style: italic;
Font-weight: Specifies the text width, for example, font-weight: bold;
Font-size: Set the text size, for example, font-size: 12px; (or 9pt, refer to the CSS manual for different unit display issues)
Line-height: Set line spacing, for example, line-height: 150%;
Color sets the text color (note that it is not font-color), such as color: red;
Font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica,, sans-serif; (this is a common method)
The above data can be written in a row of font attributes (except for the color attribute, which needs to be written separately ):
Font: italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica,, sans-serif;
2. How to Control paragraph layout-use margin, text-align
Chinese section usage
You can use margin for labels, left and right (equivalent to indentation), and front and back sections. For example:
P {
Margin: 18px 6px 6px 18px;/* clockwise direction starting from X */
}
Use text-align to align text, for example:
P {
Text-align: center;/* center alignment */
}
Alignment Methods include left, right, and justify (both ends of alignment)
PS. when talking about margin, I am used to defining margin: 0 for all the labels when writing CSS; because sometimes the default margin value causes page layout problems, however, you cannot find the cause (note the ul, ol, p, dt, dd, and other labels)
3. Vertical text-use writing-mode
The writing-mode attribute has two values: lr-tb and tb-rl. The former is the default value: Left-right, top-down, and the latter is the top-down and right-left.
For example:
P {
Writing-mode: tb-rl;
}
It can be combined with direction layout.
4. Question about the project symbol -- Use list-style
In CSS, the project symbols include disc (solid dot), circle (hollow circle), square (solid square), decimal (Arabic numerals), and lower-roman (lowercase roman numerals) upper-roman (uppercase roman numerals), lower-alpha (lowercase English letters), upper-alpha (uppercase English letters), and none (none ). For example, set the project symbol of a list (ul or ol) as a square, for example:
Li {
List-style: square;
}
In addition, list-style has some values. For example, you can use some small images as the project symbol and directly write the url ("image address") under list-style. Note: If the left outer patch (margin-left) of a project list is set to zero, the list-style-position: outside (outside by default) Project symbol is not displayed. It is a pity that the above project symbol does not seem to be able to set the size, and the dot and square are always that point. And the vertical alignment cannot be set.
5. sinking the first word -- use: first-letter
Pseudo object: first-letter can be used with font-size and float to create a sinking effect.
For example:
P: first-letter {
Padding: 6px;
Font-size: 32pt;
Float: left;
}
6. indent the first line-use text-indent
Text-indent can indent the first line of the container in a certain unit. For example, a Chinese section generally contains two Chinese characters at the beginning of each section. This can be written as follows:
P {
Text-indent: 2em;/* em is the relative unit. 2em is twice the size of a word */
}
If font-size is 12 PX, text-indent: 2em is indented to 24px.
7. Chinese phonetic alphabet-use ruby tags and ruby-align attributes
For example, you can use ruby-align to set the alignment for zhu yin. This is shown in the CSS manual. For details, refer to the ruby-align item.
8. Fixed-width Chinese Character truncation-use text-overflow
The background language can be used to cut off the field content in the database, for example, cut 12 Chinese characters (then use the ellipsis ). However, html Tag filtering is also required, and CSS control is not required. For example, apply the following style to the list:
Li {
Overflow: hidden;
Text-overflow: ellipsis;
White-space: nowrap;
}
However, you can only process text Truncation on one line, but cannot process multiple lines.
9. Fixed-width Chinese character (word) line-use word-break
For example, to display many place names in a fixed-width container (separated by spaces ), to avoid disconnections between Place Names (that is, one word is on top and the other word is broken to the next line ). You can use word-break. For example:
Nanjing SHANGHAI Shanghai
It is worth noting that the space in it cannot be replaced (at least one soft space is required ).

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.