css| Skills | website | chinese
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):
<textarea class="bk" id="temp47228" rows="12"><style>body{font:italic Bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, XXFarEastFont-Franklin, Sans-serif; </style>font-style set italic, such as Font-style:italic;font-weight set text weight, 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 color (note not font-color), such as color : red;font-family set fonts, such as font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song, Sans-serif; (This is the general writing)</textarea>
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)
<textarea class="bk" id="temp38942" rows="12"><style>p{margin:18px 6px 6px 18px/* is the top, right, bottom, left, 12 o'clock clockwise direction/text-align:center/* Center Alignment */}</style> <p>p{margin:18px 6px 6px 18px///* is the alignment of the text in the clockwise direction of the top, right, bottom, left, 12 o'clock, for example: p{text-align:center;/* Center Alignment * * Alignment also has left, right, and justify (justified) </p></textarea>
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.
<textarea class="bk" id="temp16916" rows="12"><style>p{Writing-mode:tb-rl;} The </style><p>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. For example: p{writing-mode:tb-rl;} Can be combined with direction typesetting. </p></textarea>
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;
}
<textarea class="bk" id="temp56437" rows="12"><style>p:first-letter{padding:6px; font-size:32pt; float:left;} </style><p> Pseudo object: First-letter with font-size, float can make the first word sinking effect. For example: p:first-letter{padding:6px; font-size:32pt; float:left;} </p></textarea>
P.S also has first-line pseudo class to define the first line style
<textarea class="bk" id="temp37874" rows="12"><style>p:first-line{color:red}</style><p> First-line Pseudo class to define the first row style First-line pseudo class to define the first row style First-line pseudo class to define the first row style First-line pseudo class to define the first row style First-line pseudo class to define the first row style First-line pseudo class to define the first row style first-l INE pseudo class to define the first row style First-line pseudo class to define the first row style First-line pseudo class to define the first row style First-line pseudo class to define the first row style First-line pseudo class to define the first row style First-line pseudo class to define the first row style </p></textarea>
The first act of the paragraph in the previous example is red
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.
<textarea class="bk" id="temp20120" rows="12"><style>p{text-indent:2em/*em is a relative unit, 2EM is now twice times the size of a word */}</style><p> 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. Can write this: p{text-indent:2em/*em is a relative unit, 2EM is now a word size of twice times * * If Font-size is 12px, then text-indent:2em indented 24px. </p></textarea>
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.
<textarea class="bk" id="temp46824" cols="21"><ruby> Bruce Wolf <rt style= "font-size:11px;" >bu lu si lang</rt></ruby></textarea>
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).
<textarea class="bk" id="temp66714" rows="4" cols="21"><div style= "Width:210px;height:200px;background: #ccc; word-break:keep-all" > Nanjing Shanghai Shanghai Shanghai Nanjing Shanghai Shanghai South Shanghai China Nanjing Shanghai Jing Shanghai Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai</textarea> Nanjing Shanghai Shanghai Nanjing Shanghai Shanghai </div>
