html元素背景设置、字体样式简介、文本各类样式

1. CSS元素背景

• 1.background-color: red; //块颜色背景

• 2.background-image: url(…/img/1.jpg); //图片背景

• 3.background-repeat: repeat-x(沿着x平铺)/repeat-y(沿着y平铺)/no-repeat; //背景图片的重复性

• 4.background-attachment: fixed;
  fixed： 固定元素位置，相对于浏览器窗口进行定位

• 5.background-position:50% 0%;
  x:left center right 百分比（相对于父元素） y:top center bottom 百分比（相对于父元素）

• 6.background-size: 100px 100px;

     取值：px(像素)，百分比(相对于父元素) 
     cover(把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中) 
     (把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域)
  

• 7.background:color image repeat attachment position //background属性整体赋值先后顺序

  例:background: red url(../img/1.jpg) repeat-x center center / 50% 50%; 
  

注：背景颜色，background-color:这些会填充内边距和边框border, 而不会填充外边框margin的部分

2. body背景说明

• 1."画布 canvas"一块区域

  • 特点：

    1.最小宽度为视口宽度
    2.最小高度为视口高度 （最大可以是整个网页的高度、宽度）

• 2.HTML元素的背景

  • 特点： 覆盖整个画布

• 3.body元素的背景
  如果HTML有背景，body元素正常（背景覆盖边框盒）
如果HTML没有背景，body的背景覆盖画布

例：.body{
                 background: url(imgs/man_bg.jpg) no-repeat; //设置网页背景颜色，设置画布
                 background-size:100% auto;
                 background-position：left top;
               }

• 4.关于背景图

1. 背景图的宽度百分比，相对于视口，不是整个网页，所以设置背景图的宽度为100%时，宽度最大只有视口的最大值（背景颜色是没有问题的）

2. 背景图的高度百分比，相对于HTML元素（网页）高度

3. 背景图的横向位置（百分比、预设值）都相对于视口，背景图的纵向位置（百分比、预设值）都相对于HTML元素（网页）

3. 字体

• 1.font-family; //设置字体
  font-family:"微软雅黑","Microsoft yaHei";

    例：font-family:"宋体";

• 2.font-size;
  设置字体大小(改变的是字体高度,宽度由字体决定)

 例：font-size: 30px;  (16px => lem)

• 3.font-weight; //设置字体粗细 (范围：100~900)
  bold(粗) normal(普通) lighter(细)

例：font-weight:100;

• 4.font-style;
  设置字体样式

取值：normal italic(斜体)

• 5.font:style weight size/line-height font-family
  font属性整体赋值先后顺序(用font必须有size)

 例：italic blod 30px "微软雅黑","Microsoft yaHei"

4.文本

• 1.letter-spacing;
  设置字符间距

      例：letter-spacing: 10px;

• 2.word-spacing;
  设置空格间距(字间距)

      例：word-spacing: 10px;

• 3.direction;
  设置书写顺序

     取值：direction: ltr; (left to right)
               direction: rtl; (right to left)

• 4.text-decoration;
  设置文本样式

 取值：  
    nonea(默认)
    line-through(直线穿过)
    overline(上划线)
    underline(下划线)

• 5.text-aligh;
  设置文字水平对齐方式
center(居中) left(左对齐[默认]) right(右对齐) justify(两端对齐)

    例：text-aligh: center;
           width:250px;
           height:300px;
           text-aligh: justify;

• 6.vertical-align //vertical-align
  设置文字垂直对齐方式

   例：vertical-align: -4px;

• 7.text-indent;
  设置段落的缩进

  例：text-indent: 60px; (开头空60px)

8. text-transform;
   设置英文字母大小写
uppercase(全部大写) lowercase(全部小写) capitalize(首字母大写)

  例：text-transform: uppercase;

• 9.1 white-space;
  设置容器是否包裹文本

 例：white-space: nowrap;(不包裹)

• 9.2 overflow;
  设置溢出的部分

   例：overflow: hidden(隐藏溢出部分)

9.3 text-overflow;
设置文字溢出部分

   例：text-overflow: clip(默认) ellipsis(溢出部分加省略号)

• 10.vertical-align;
  设置文本垂直对齐

    取值：top center bottom 百分比(100%为1个行高)