文本格式化

1、文本格式化

   1、字体相关

      1、指定字体

         属性:font-family
取值:字体值列表
语法:font-family:value1,value2,value3 ...;
eg :
  font-family:"Microsoft Yahei",Arial,Times;

      2、字体大小

         font-size: px/pt;
页面常用字体大小:
   12px
   18px
   36px

      3、字体加粗

         效果等同于 <b></b>
属性:font-weight
取值:normal / bold / value
 value : 没有单位的数字
         400 - 900

 400 --> normal
 900 --> bold

      4、字体样式

         效果等同于<i></i> 斜体 
属性:font-style
取值:normal / italic

      5、小型大写字母

         属性:font-variant
取值:normal / small-caps;

      6、字体属性

         将所有的字体相关属性放在一个声明中
属性:font
取值:font-style font-varaint font-weight font-size font-family;

eg :
  font:italic small-caps bold 12px "microsoft yahei",Arial;

  font:bold 12px/24px "microsoft yahei",Arial;
    12px(文字大小)/24px(行高)

  font-size:12px;

   2、文本格式

      1、文本颜色
属性:color
取值:颜色单位值

      2、文本排列

         效果等同于 <xx align=""></xx>
水平对齐方式
属性:text-align
取值:left / center / right  / justify
注意：该属性对 行内元素 没有效果
  <span style="text-align:center;">Hello World</span>

      3、文字修饰(线条)

         属性:text-decoration
取值:none / underline(下划线) / overline(上划线) / line-through(删除线)

      4、行高

         1、什么是行高
   当前元素内"一行"数据的高度是多少。如果行高的高度大于文本的高度，那么该行文本会在当前的行高范围内呈"垂直居中"状态显示
2、属性 
   line-height
   取值：以px为单位的数字
3、首行文本缩进
   属性：text-indent
   取值：以px为单位的距离
   eg : text-indent:24px;
4、文本阴影
   属性：text-shadow
   取值：h-shadow v-shadow blur color;

2、表格属性

   1、表格常用属性

      1、尺寸属性

         width , height

      2、内边距

         padding

      3、边框

         border 
 
/*只给表格设置边框，单元格没有*/
table{
border:1px solid red;
}
/*单元格边框，与表格无关*/
td{
border:1px solid red;
}

      4、文本格式化

         font-*
text-*

      5、背景属性

         background-*

      6、vertical-align 

         垂直对齐方式
取值：top / middle / bottom

   2、表格特有样式

      1、边框合并(重要)

         属性：border-collapse
取值：
     separate : 默认值，分离边框
     collapse : 边框合并

      2、边框边距

         相当于 td 的外边距
属性：border-spacing
取值：
      1个值 ：水平 和 垂直间距是相同的
      2个值 ：第一个值表示水平间距，第二个值表示垂直间距
注意：
1、只有表格在分离边框模式下，border-spacing 才会起到作用
2、该属性加在table中

      3、显示规则

         如何布局或显示/解析一个table 。定义加载表格的算法
属性：table-layout
取值：
   auto : 自动表格布局，默认值，列的宽度是由单元格的内容来决定的。
   fixed : 固定表格布局，列的宽度是表格宽度和列宽度一起决定的。
固定表格布局，算法较快，但是不太灵活
自动表格布局，算法较慢，能够反映传统的表格特点