9 tips for CSS web page layout

Source: Internet
Author: User
Tags manual lowercase

I. 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;

II. How to control paragraph layout-use margin, text-align

The <p> label can be used for Chinese paragraphs. margin can be used for left and right (equivalent to indentation) and blank spaces after the paragraph. 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.

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

VII. Chinese character phonetic transcription-using ruby labels and ruby-align attributes

For example, you can use ruby-align to set the alignment mode in <ruby> phonetic <rt style = "font-size: 11px;"> zhu yin </rt> </ruby>. 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) lines-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:

<Div style = "width: 210px; height: 200px; background: # ccc; word-break: keep-all">
Nanjing Shanghai

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.