【学习笔记之CSS+DIV】CSS文字_html/css_WEB-ITnose

 

CSS设计彻底研究5.1节笔记

属性	含义	备注
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个字符）

技巧：

1.设置首字下沉

.firstLetter{

font-size:3em;

line-height:3em;

float:left;

}

2.段落的垂直居中

（1）方法一：将行高（line-height）设置为与高度（height）相同的值

缺点：对于超过一行的文本，增加文本长度，或者是浏览器窗口变窄，于是文本需要折行显示，这种方法就无效了。

（2）方法二：改进方法：multi-vertical.htm

HTML代码

                  <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>