css基础

css基础

1.基本属性

• 颜色
• 字体属性

 font-family：字体类型
 font-style：字体的风格，normal正常，italic斜体
 font-weight：字体精细，可以是数字。有：bold，lighter，100-700等
 font-size：字体大小
           单位：
               相对单位（随着分辨率而变化）：
                         px：像素
                         em：倍
                         %：百分比
               绝对单位：
                        em，mm等
 font：符合属性
      font：[font-style][font-weight][font-size][font-family]
      注意：属性可以省略，但是顺序必须一致

• 文本属性

    color：字体属性
    text-transform：英文的大小写转化
              capitalize：首字母大写
              uppercase：全部大写
              lowercase：全部小写
    text-align：文本水平对齐    left、right、center
    text-indent：文本缩进
    line-height：行高
    height：高度
         注意：高度和行高相同时，可以实现单行文本垂直居中
    weight：宽度
    text-decoration：文本装饰
               none、underline、overline、line-through（删除线）
    vertical-align：文本垂直对齐  值：top、bottom、middle
              注意：这个属性只有单元格可以使用，使用display：table-cell；
    设置单词内部的字母间距（letter-spacing）
    和单词之间的距离（word-spacing）

• 边框属性

border-width：边框宽度
      1个值：四边相同
      2个值：上，右（没有指定的变，取对边的值）
      3个值：上，右，下（左取对边）
      4个值：上，右，下，左
border-style：边框样式     solid实线等
border-color：边框颜色
border：复合属性
      顺序：宽，样式，颜色    eg：border：1px solid red；

• 背景属性

background-color：背景颜色
background-image：背景图片
background-repeat：背景图片的重复方式，如no-repeat
background-position：背景图片的位置
background-attachment：背景图片的展示方式，如fixed
background：复合属性
    顺序如下：color，image，repeat，attachment，position
    注意：属性可以省略，但是顺序必须一致
    background-position 需要和 background-repeat结合使用

• 列表样式

list-style-type：列表的类型   disc、circle、square
list-style-position：列表的位置   inside、outside
list-style-image：使用图片代替列表的符号
list-style：复合属性  顺序：image、position、type

• 文字与图片的对齐

默认情况下，文字与图片以底部对齐
通过给图片设置vertical-align：middle，使用文字与图片居中对齐
通过给图片设置float：left、right，使用文字与图片以顶部对齐

2.其他属性

• z-index：层叠顺序的设置
  -1—999，默认auto（父元素有z-index就和父元素一样，如果没有才为0）
  值越大，显示越上面
  注意：z-index属性必须与postion属性结合使用，如果没有postion，z-index无效。

• opacity：元素的透明度
  opacity：x； //x范围（0—1），值越小越透明
  filter：alpha（opacity=x）； //x范围（0—100），值越小越透明
  注意：两种写法都写，为了浏览器的兼容
  rgba：通过它设置透明度与opacity设置透明度的区别
  如：
  ——background-color通过rgba设置，只是背景透明；
  ——opacity给元素设置透明，元素里的所有内容都会透明

• cursor：鼠标的形状 hand（箭头），pointer（手的形状）

• visibility：hidden；与display：none有区别：
  都可以对元素进行隐藏，使用visibility，元素的位置还会保留，而display不会

3.属性的继承性
有的属性可以继承如font-size等，有的无法继承如border等。