[Study Notes CSS DIV] CSS text_html/css_WEB-ITnose

Thorough Study of CSS Design Section 5.1 Notes

属性	含义	备注
font-family	字体	可以同时声明多种字体，字体之间用逗号分隔。例：font-family:  Arial, ”Times New Roman”;
font-size	文字大小	长度单位
相对单位	（1）px：相对于1个像素的比例，1px相当于1像素； （2）em：1em表示的长度是其父元素中字母m的标准宽度； （3）ex：1ex表示字母x的标准高度； （4）%
绝对单位	（1）pt：point，印刷的点数，在一般的显示器中1pt相对于1/72inch； （2）in：inch，英寸； （3）cm：centimeter，厘米； （4）mm：millimeter，毫米； （5）pc：pica，1pc=12pt。
line-height	行高	表示的是两行文字之间的基线（下划线的位置就是文字的基线）的距离。
注：三个属性的混写：font:大小/行高 字体;
color	文字颜色
background-color	背景颜色
font-weight	文字加粗	normal|bold
font-style	文字倾斜	normal|oblique（倾斜）|italic（意大利体）
text-decoration	文字效果	none|underline（下划线）|overline（上划线）|line-through（删除线）|blink（闪烁，IE不支持） 注：同时应用多个效果时，中间用空格隔开。
text-align	水平对齐	left|right|center|justify（两端对齐）
vertical-align	垂直对齐	只能用于表格单元格中的对象竖直方向的对齐
text-indent	段首缩进	如：text-indent:2em;（缩进2个字符）

Attributes

Meaning

Remarks

font-family

Font

Multiple fonts can be declared at the same time, separated by commas. Example: font-family: Arial, ”Times New Roman”;

font-size

Text size

Length unit

Relative unit

(1) px: relative to the ratio of 1 pixel, 1px is equivalent to 1 pixel;

(2) em: the length represented by 1em is the standard width of the letter m in its parent element;

(3) ex: 1ex represents the standard height of the letter x;

                  <p class="sycode">                      <!     DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"     >          <     html      xmlns     ="http://www.w3.org/1999/xhtml"     >          <     head     >           <     title     >     Universal vertical center with CSS     </     title     >           <     style     >     #outer      {     height     :      100px     ;      overflow     :      hidden     ;      position     :      relative     ;     }     #outer[id]      {     display     :      table     ;      position     :      static     ;     }     #middle      {     position     :      absolute     ;      top     :      50%     ;     }           /*      for explorer only     */     #middle[id]      {     display     :      table-cell     ;      vertical-align     :      middle     ;      position     :      static     ;     }     #inner      {     position     :      relative     ;      top     :      -50%     }           /*      for explorer only      */          /*      optional: #inner[id] {position: static;}      */      .withBorder     {      border     :     1px green solid     ;          }          </     style     >          </     head     >          <     body     >          <     div      id     ="outer"      class     ="withBorder"     >           <     div      id     ="middle"     >           <     div      id     ="inner"     >      any text any height any content, everything is vertically centered.      </     div     >           </     div     >          </     div     ></     body     >          </     html     >                  </p>

(4)%

Absolute unit

(1) pt: point, the number of printing points, in a general display, 1pt is relative to 1/72inch; (2) in: inch, inch; (3) cm: centimeter, centimeter; (4) mm: millimeter, millimeter; (5) pc: pica, 1pc=12pt.

line-height

line-height

represents the distance between the baseline of two lines of text (the position of the underline is the baseline of the text).

Note: Mixing of three attributes: font: size/line height font;

color

Text color

background-color

Background-color

font-weight

Text bold

normal|bold

font-style

Text oblique

normal|oblique(tilt)| italic (Italian)

text-decoration

Text effect

none|underline|overline|line-through|blink (not supported by IE) Note: When applying multiple effects at the same time , separated by spaces.

text-align

Horizontal alignment

left|right|center|justify

vertical-align

Vertical Alignment

Can only be used to align objects in table cells in the vertical direction

text -indent

Indentation at the beginning of paragraph

For example: text-indent:2em; (indent 2 characters)

Tips: 1. Set drop cap .firstLetter{ font-size:3em ; line-height:3em; float:left; } 2. Vertical centering of paragraphs (1 ) Method 1: Set line-height to the same value as height Disadvantages: For more than one line of text, increase the text length, or the browser window becomes narrower, so the text If line breaks are required, this method will not work. (2) Method 2: Improvement method: multi-vertical.htm HTML code