CSS（三）

一、元素的显示设置

1、设置元素的可见性

    属性：visbility
    取值：
        1、visible 默认值，元素可见
        2、hideen  设置元素隐藏，元素在文档中仍然占位

2、转化元素类型

    属性：display
    作用 ：改变元素类型
    取值：
        1、block ：转换为块元素
        2、inline：转换为行内元素
        3、inline-block：转换为行内块元素
       特殊取值：
        4、none  ：实现元素隐藏，元素在文档中不占位，其他元素会相应的移动
    实现元素隐藏与显示：
         display:none;   隐藏
         display:block;  显示
   练习：实现下拉菜单
      1、使用列表或其他结构完成下拉菜单
         et：菜单：北京 
                   深圳
               ...
      2、当鼠标悬停在 北京 时，显示下拉菜单，鼠标移出时隐藏下拉菜单

二、背景相关的属性

1、背景颜色，取颜色值

   属性： background-color
   注意：
         1、所有元素默认背景颜色都为透明色，新建窗口的白色并不是body的背景颜色，是浏览器渲染的结果
         2、背景颜色是从元素的边框位置开始绘制的，如果元素添加内边距，都会被渲染成相应的背景颜色进行填充

2、背景图片

1、设置背景图片
    属性：  background-image
    取值：  url("图片路径")
    注意：
       1、背景图片的尺寸如果大于元素尺寸，图片仍然按照原始图片显示，超出元素的部分不可见；
       2、如果背景图片的尺寸小于元素尺寸，浏览器会自动对背景图片进行重复平铺，直到把元素铺满；
       3、背景图片与背景颜色一样，不影响元素正常内容的显示。
2、背景背景图片的重复方式
     图片尺寸不够时，浏览器会自动沿水平和垂直两个方向对图片进行重复平铺，直到铺满元素
     属性：background-repeat
     取值：
          1. repeat 默认值，沿水平和垂直方向平铺
          2. no-repeat 设置背景图片不重复平铺
          3. repeat-x 沿水平方向（横向）平铺
          4. repeat-y 沿垂直方向（纵向）平铺
3、设置背景图片的位置
      默认情况下，背景图片从元素的左上角显示
     1、属性：background-position
     2、取值：x y
        1、取像素值：
            以像素为单位的数值，使用空格隔开
                x: 表示背景图片水平方向偏移距离，正值表示图片向右偏移，负值表示图片向左偏移
                y: 背景图片垂直方向的偏移距离，正值表示图片向下偏移，负值表示图片向上偏移
              * 注意：结合“精灵图”实现元素背景图片调整，这种技术叫“精灵技术”
        2、取百分比
            参照元素尺寸计算水平和垂直偏移距离
             1、0% 0%
                  图片显示在左上角
             2、50% 50%
                  背景图显示在元素中间
             3、100% 100%
                  背景图显示在右下角
         3、方位值确定背景图片的位置
                   x ：left / center / right
                   y : top  / center / bottom
                 如果只设置一个方向上的关键字，另外一个方向默认是center
4、设置背景图片的大小
     1、属性：background-size
     2、取值：x y
              x y 分别表示背景图片的宽和高
             1、像素值
             2、百分比 ：参照元素宽高尺寸计算背景图片的大小
             3、cover  ：表示将图片等比拉伸（放大）至完全覆盖元素，超出部分不可见
             4、contain：表示将图片等比拉伸至刚好被元素容纳，不能超出元素尺寸，可能会造成背景图片无法完全覆盖元素的效果。（未填充到的部分不管）
5、背景属性简写
      1、属性： background
      2、取值： color url() repeat position;
      3、注意：

              1、背景属性按照一定顺序设置
              2、background-size需要单独设置（背景图片的尺寸大小）
              3、可以省略属性值，单独设置颜色 或者背景图片
                 et :
                        background:red;
                        background:url();

三、文本相关的属性

1、字体的相关属性

1、字体大小
        属性：font-size
        取值：像素值或em  1 em = 16 px
2、字体粗细程度
        属性：font-weight
        取值：
          1、关键字  light / normal(正常) / bold（加粗）
          2. 整百数值 100-900,数值越大，字体越粗
           100（lighter）- 400 (normal) - 700(bold) - 900(bolder)
3、字体名称
      1、属性：font-family
      2、取值：字体名称
      3、注意：
               1、如果字体名称是中文或者由多个英文单词组成，需要使用引号引起来
                  et：
                     font-family:"微软雅黑";
                     font-family:"Microsoft YaHei";
                     font-family:Arial;
                     font-family:serif;
                2、同时指定多个字体名称，之间使用英文逗号间隔。当浏览器不支持第一种字体时，会按照顺序依次后面指定字体名称显示
                    et：
                       font-family : "黑体","微软雅黑","宋体";
4、字体样式（是否采用斜体）
       1、属性：font-style
       2、取值：
               1、nomal   正常显示
               2、italic  斜体显示
               3、oblique 倾斜显示
       3、注意：oblique可以将字体倾斜一定角度，默认倾斜效果与italic斜体没有差别
5、字体属性简写
        1、属性：font
        2、取值：style weight size family
        3、注意：
               1、同时设置四个属性值时，参照给定的顺序书写
               2、font-size 和 font-family是必填项，不能省略。

2、文本相关的属性

1、文本颜色
         1. 属性 ：color
         2. 取值 ：颜色值
2、文本装饰线
     1. 属性 ：text-decoration
     2. 取值 ：
         1. underline : 下划线
         2. overline : 上划线
         3. line-through ：删除线
         4. none : 取消文本装饰线
3、文本水平对齐方式
     1. 属性 ：text-align
     2. 取值 ：
         1. left(默认值) / center / right
         2. justify 两端对齐
4、设置行高
       行高指的是一行文本所占的高度
     1、属性 ：line-height
     2、取值 ：像素值或em
     3、用法 ：
           1. 设置行高与元素高度相同，实现一行文本的垂直居中
           2. line-height > height ,文本会下移
           3. line-height < height ,文本会上移
     4、注意 ：
         文本内容在当前行中始终是垂直居中的
     5、特殊取值 ：
         取无单位的数值，表示当前字体大小的倍数，由此计算行高
         et :
           p{
              font-size:20px;
              line-height:2;  (当前行高为字体大小的2倍，40px)
           }

四、表格相关的属性

1、基础样式是通用的

2、独有的CSS属性:

1、边框合并
      1、属性：border-collapse
      2、取值：
            1、seperate : 默认值，单元格边框与表格边框相分离
            2. collapse : 设置表格边框与单元格边框合并
      3、注意：
            1、td不支持margin
            2、border-collapse只能在table中使用
2、设置边框边距
     1、属性：border-spacing
     2、取值：h-value v-value
                  h-value : 水平方向边框之间的距离
                  v-value : 垂直方向边框之间的距离
                  两个值之间使用空格隔开
     3、注意：
             边框边距只能在边框分离状态下设置，合并时无法使用