Learn Web standards for months and follow standard design and make Web pages. Always want to write something, to organize their own experience. Writing this article, mainly for the Chinese layout design, English typesetting because it is rarely done, so do not involve.
First describes how to set the font, color, size, paragraph blank, and other relatively simple application, and then introduced below, such as the first word sinking, first line indentation. Finally, some commonly used Web page layout, such as the truncation of Chinese characters, fixed-width words within the fold line (Word-wrap and Word-break) and so on. Because just write some application experience, if you need complete CSS attribute introduction, please refer to the CSS manual.
1, how to set text font, color, size--use font
Font-style set italic, such as font-style:italic;
Font-weight set text thickness, such as font-weight:bold;
Font-size set text size, such as font-size:12px (or 9pt, different unit display problem reference CSS manual)
Line-height set line spacing, such as line-height:150%;
Color Set text colors (note not font-color), such as color:red;
Font-family set fonts, such as font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, song-style, Sans-serif;
All of the above can be written in one line of the Font property (except for the color property that needs to be written separately):
Font:italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song-Body, Sans-serif;
2. How to control paragraph typesetting--using margin,text-align
Chinese paragraph use <p> label, left and right (equivalent to indent), paragraph before the blank, can be used margin. Like what:
p{
margin:18px 6px 6px 18px; /* respectively is up, right, down, left, 12 o'clock clockwise direction.
}
The alignment of the text with Text-align, for example:
p{
Text-align:center; /* Center Alignment */
}
Alignment also has left, right, and justify (justified)
PS. Talking about margin, I'm used to defining margin:0 for all the tags when I write css; Because sometimes the default margin values cause page layout problems, and you can not find the reason (pay special attention to the UL/OL/P/DT/DD and other tags)
3, vertical text--use Writing-mode
The Writing-mode property has two values LR-TB and TB-RL, the former is the default left-right, top-down, and the latter is up-down, right-left.
Like what:
p{
WRITING-MODE:TB-RL;
}
Can be combined with direction typesetting.
4, the problem of the project symbol--using List-style
In CSS, bullets have disc (filled dots), circle (hollow circles), square (solid squares), decimal (Arabic numerals), Lower-roman (lowercase roman numerals), Upper-roman (uppercase Roman numerals), Lower-alpha (lowercase English letters), Upper-alpha (uppercase English letters), none (No). For example, set a list (UL or OL) bullets for the box, such as:
li{
List-style:square;
}
In addition List-style also has some values, for example can use some small picture as the bullet, under List-style directly writes the URL ("The Picture Address") to be possible. Note If the left outer patch (MARGIN-LEFT) of a list of items is set to zero, the Bullets for List-style-position:outside (the default is outside) are not displayed. Unfortunately, the above bullets don't seem to set the size, the dots and squares are always the point. And the vertical alignment cannot be set.
5, the first word sinks--use: First-letter
Pseudo object: First-letter with font-size, float can make the first word sinking effect.
Like what:
p:first-letter{
padding:6px;
font-size:32pt;
Float:left;
}
6, first line indent-use Text-indent
Text-indent can make the first line in the container indent a certain unit. For example, Chinese paragraphs usually empty two characters before each paragraph. You can write this:
p{
Text-indent:2em; /*em is the relative unit, 2EM is now twice times the size of a word * *
}
If the font-size is 12px, then the TEXT-INDENT:2EM is indented to 24px.
7, about Chinese character phonetic notation--use Ruby label and Ruby-align attribute
For example <ruby> phonetic <rt style= "font-size:11px;" >zhu Yin</rt></ruby>, you can use Ruby-align to set alignment. This is seen in the CSS manual, you can check the ruby-align items.
8. Fixed-width Chinese character truncation--using Text-overflow
The background language allows you to truncate the contents of a field from a database, such as 12 characters (followed by an ellipsis). But sometimes you also need to filter HTML tags, and the use of CSS control is not the problem. For example, apply the following style to the list:
li{
Overflow:hidden;
Text-overflow:ellipsis;
White-space:nowrap;
}
However, only the truncation of text on one line can be processed, and multiple lines cannot be processed.
9. Fixed-width Chinese character (word) folding line--using Word-break
For example, to display a number of places in a fixed-width container (suppose separated by a space), to avoid the middle of the place name (that is, one word is on top and the other word is broken to the next line). You can use Word-break. Like what:
<div style= "Width:210px;height:200px;background: #ccc; Word-break:keep-all" >
Shanghai, Shanghai, Nanjing Shanghai Nanjing Nanjing Shanghai Nanjing Shanghai Shanghai Nanjing China Shanghai Nanking Shanghai Shanghai Nanking Shanghai Shanghai Nanjing
</div>
It is worth noting that the spaces inside cannot be substituted (at least a soft space).
