Switched from blue ideal first Home> Technical Documents> website building> Chinese typesetting experience CSS 

  1, how to configure text font, color, size - the use of font 

  Italic font-style settings, such as font-style: italic; 
  Font-weight text size settings, such as font-weight: bold; 
  Font-size text size settings, such as font-size: 12px; (or 9 pt, different units that the problem css reference manual) 
  Line-spaced Height settings, such as the line-height: 150%; 
  Color settings text color (note-not the Font color), such as color: red; 
  Font-family font settings, such as font-family: "Lucida Grande," Verdana, Lucida, Arial, Helvetica 10 lines, sans-serif; (This is a common way) 

  All these can be written in the font attributes, and his party (with the exception of color attribute the need for separate written): 

  Operation code box 
   <span><style> <a href="tag-body.html">body</a> (font: italic bold 12px/150% "Lucida Grande," Verdana, Lucida, Arial, Helvetica 10 lines, sans-serif;) </ style> italic font-style settings, such as font-style: italic; font-weight text size settings, such as font-weight: bold; font-size text size settings, such as font-size: 12px; (or 9 pt, different units that the problem CSS reference manual) line-spaced height settings , such as line-height: 150%; color settings text color (note-not the font color), such as color: red; font-family font settings, such as font-family: "Lucida Grande," Verdana, Lucida, Arial, Helvetica 10 lines, sans-serif; (This is a common way)  
   [Ctrl + A full selection Note: You may first revision of the code, and then running]  

   2, paragraphs typesetting how to control - the use of margin, text-align  

  Chinese paragraphs use <p> labels around (at indentation), the previous paragraph after the blank can be used margin.    For example: 

  P ( 
  Margin: 18px 6px 6px 18px; / * respectively, right, down, left, in a clockwise direction starting 12:00 * / 
  ) 

  Alignment with the text-align text, such as: 

  P ( 
  Text-align: center; / center alignment * * / 
  ) 

  Alignment is also available in left, right and justify (ends alignment) 

  Operation code box 
   <span><style> P (margin: 18px 6px 6px 18px; / * respectively, right, down, left, in a clockwise direction starting 12:00 * / text-align: center; / * center alignment */}</ style> <p> p (margin: 18px 6px 6px 18px; / * respectively, right, down, left, in a clockwise direction starting 12:00 * /) way alignment with the text-align text, such as: p (text-align: center; / center alignment * * /) Alignment also left, and right justify (ends alignment) </ p>  
   [Ctrl + A full selection Note: You may first revision of the code, and then running]  

  3, Shupai text - use writing-mode 

  Writing two-mode attribute value lr-tb and tb-rl, the former is the default on the left - right, on - and the latter is on - and right - left. 

  For example: 

  P ( 
  Writing-mode: tb-rl; 
  ) 

  Can be combined direction typesetting. 

  Operation code box 
   <span><style> P (writing-mode: tb-rl;) </ style> <p> writing two-mode attribute value lr-tb and tb-rl, the former is the default on the left - right, on the - after is the - under the right - left.      <span>For example: p (writing-mode: tb-rl;) can be combined direction typesetting.      <span></ P>  
   [Ctrl + A full selection Note: You may first revision of the code, and then running]  

  4, bulleted - use list-style 

  CSS, in the bulleted a disc (solid dots), circle (hollow circle), square (solid box), the decimal (Arabic), the lower-roman (lowercase Roman numerals), the upper-roman (capital Rome), lower-alpha (lowercase letters), the upper-alpha (in capital letters), none (no).    For example, to set a list (or ol ul) symbol for the box, such as: 

  Li ( 
  List-style: square; 
  ) 

  Another list-style there are some, such as some small picture can be used as a symbol in the list-style direct write url ( "pictures") addresses on it.    Note that if a list of the patch on the left (margin-left) set to zero, list-style-position: outside (the default is outside) symbol not be shown.    It is a pity that these projects seem to be symbols set size, dots and the box is always less points.    And they do not set the direction of the vertical alignment. 

  5, the first words sink - use: first-letter 

  Pseudo-object: first-letter-with font size, the first word can be made to Float sink effect. 
  For example: 

  P: first-letter ( 
  Padding: 6px; 
  Font-size: 32pt; 
  Float: left; 
  ) 

  Operation code box 
   <span><style> P: first-letter (padding: 6px; font-size: 32pt; float: left;) </ style> <p> pseudo-object: first-letter-with font size, the first word can be made to float sink effect .      <span>For example: p: first-letter (padding: 6px; font-size: 32pt; float: left;) </ p>  
   [Ctrl + A full selection Note: You may first revision of the code, and then running]  

  Ps are first-line pseudo-class trip to the first definition of style 

  Operation code box 
   <span><style> P: first-line (color: red) </ style> <p> first-line pseudo-class trip to the first definition of the pattern of first-line pseudo-first trip to define the <a href="tag-style.html">style</a> of first-line pseudo-style trip to the first definition first-line pseudo-class trip to the first definition of the pattern of first-line pseudo-first trip to define the style of first-line pseudo-first trip to define the pattern of first-line pseudo-first trip to define the pattern of first-line pseudo-style trip to the first definition first-line pseudo-class trip to the first definition of the pattern of first-line pseudo-first trip to define the style of first-line pseudo-first trip to define the pattern of first-line pseudo-style trip to the first definition of </ p>  
   [Ctrl + A full selection Note: You may first revision of the code, and then running]  

  In the case of the first paragraph of the red 

  6, the first line indentation - use text-indent 

  Text-indent can be made within the first line indentation containers certain units.    For example, Chinese general paragraphs before each air two Chinese characters.    It can be written: 

  P ( 
  Text-indent: 2em; / * em is relatively flat, 2 em a word that is now twice the size * / 
  ) 

  If the font-size is 12 px, then text-indent: 24 px 2em are indented. 

  Operation code box 
   <span><style> P (text-indent: 2em; / * em is relatively flat, 2 em a word that is now twice the size of */}</ style> <p> text-indent can be made within the first line indentation containers certain units .      <span>For example, Chinese general paragraphs before each air two Chinese characters.      <span>It can be written: p (text-indent: 2em; / * em is relatively flat, 2 em a word that is now twice the size * /)-if the <a href="tag-font-size.html">Font Size</a> is 12 px, then text-indent: 24 px 2em are indented.      <span></ P>  
   [Ctrl + A full selection Note: You may first revision of the code, and then running]  

  7, the Chinese Mandarin - ruby labels and the use of ruby-align attribute 

  For example, Mandarin <ruby> <rt style = "font-size: 11px;"> zhu yin </ rt> </ ruby>, we can use the ruby-align set Alignment.    This is the css manuals to see inside the concrete can be self-inspection of the ruby-align. 

  Operation code box 
   <span><ruby> Bruce Wolf <rt style = "font-size: 11px;"> bu lu si lang </ rt> </ ruby>  
   [Ctrl + A full selection Note: You may first revision of the code, and then running]  

  8, a fixed Width of Chinese characters cut - the use of text-overflow 

  Language can be used to the Background in the fields from the database content truncated handle, for instance, closed 12 Chinese characters (after using ellipsis).    But sometimes need html tags such as filters, and use CSS to control is not the problem.    For example, the Application List of the following forms: 

  Li ( 
  Overflow: hidden; 
  Text-overflow: ellipsis; 
  White-space: nowrap; 
  ) 

  But the text of his party can only deal with the cut, can not handle the trip. 

  9, fixed width of Chinese characters (Ci) pack trip - the use of word-break 

  For example, for instance, to a fixed width of containers inside showed that many names (assuming a space separated), in order to avoid disconnection middle names (that is, in one word above and the other to break the word to the next line).    You can use the word-break.    For example: 

  <div Style="width:210px;height: 200px;background: #ccc;word-break:keep-all"> 
  Nanjing, Shanghai, Nanjing, Shanghai, South Shanghai, Shanghai and Shanghai Nanjing, Shanghai, Nanjing, Shanghai, Nanjing, Shanghai, Nanjing, Shanghai, Nanjing, Shanghai, Nanjing, Shanghai, Nanjing, Shanghai, Nanjing, Shanghai, Nanjing, Shanghai, 
  </ Div> 

  It is worth noting that there can not be in lieu of the space (at least have a soft spaces). 

  Operation code box 
   <span><div Style="width:210px;height: 200px;background: #ccc;word-break:keep-all"> Nanjing, Shanghai, Nanjing, Shanghai, South Shanghai, Shanghai and Shanghai Nanjing, Shanghai, Nanjing, Shanghai, Nanjing, Shanghai, Nanjing, Shanghai, Nanjing, Shanghai Nanjing, Shanghai, Nanjing, Shanghai, Nanjing, Shanghai, Nanjing, Shanghai, </ div>  
   [Ctrl + A full selection Note: You may first revision of the code, and then running]