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:
1st 2 pages
