前端 CSS基础知识整理

CSS
一、css简介
 css:层叠样式表（Cascading  Style  Sheets），相同属性会覆盖，不同属性会叠加。
二、css的作用
   css给html添加样式
三、css的引入方式
 1.行内样式/内联 (style属性）
 2.内部样式（<style>标签）
 3.外部样式（.css为后缀样式文件）
    引入外部样式有两种：
      ①<link>标签
      ②@import
四、选择器
 简单选择器
          1.   通用选择器（*）
          2.   元素选择器
          3.   类选择器（.）          
          4.   id选择器（#）


     权重值：
        通用选择器        0
        元素选择器        1
        类选择器            10
        id选择器            100
        行内样式           1000
        ！important        ∞
行内样式大于内部或者外部样式，！importent表示最高优先级。


      复合选择器
          1. 后代选择器
                选择器    后代选择器{
                                      }
注：以空格隔开
          2.子代选择器
                 选择器  > 子代选择器{
                                          }
          3.并集选择器
                    选择器1，选择器2...{
                                      }
注：以逗号分隔
          4.交集选择器
                    选择器1选择器2...{
                                      }
注：交集选择器之间没有分隔，所以有标签选择器必须把它放在首位


五、css3选择器
    属性选择器
  1、全匹配  =
         标签 [属性名 = '属性值']  {  }
  2、开头匹配   ^
         标签 [属性名^  =  '属性值']  {  }
  3、结尾匹配   $
         标签 [属性名 $=  '属性值']  {  }
  4、包含匹配  *
         标签 [属性名 *=  '属性值']  {  }
   
      结构性伪类选择器
  1、：nth-child()  选中第几个儿子，从1开始，还可以表倍数
        ：first-child()  第一个儿子
        ：last-child()  最后一个儿子
   例： ：nth-child(2n) 选中第2、4、6...
            ：nth-child(2n+1) 选中第3、5、7...
            ：nth-child(3n) 选中第3、6、9...
            section>div ：nth-child(3) 选中section下的第三个儿子，且这个儿子是div
   2、：nth-of-type()  选中父级下的第几个儿子
   3、：only-child 选中只有一个子级的
   4、兄弟选择器
            相邻兄弟选择器
                  适用情况：相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素，而且二者有相同的父元素。
                  书写语法：element1 + element2      
            其他兄弟选择器
                  适用情况：其他兄弟选择器匹配同一个父元素中在 element1后面的所有 element2 元素。
                  书写语法：element1 ~ element2
六、基本属性
字体属性
   font-size    字体大小    默认大小16px   最小10px
                      单位：px 像素
                                 em:相对于父元素字体大小的倍数
                                 rem（r:root):相对于根元素html元素它的字体大小的倍数
   font-family   字体类型
  font-weight   字体粗细
   font-style      字体样式      normal:正常    italic:斜体   oblique:倾斜


文本属性
   color:字体颜色
       值：英语单词（red,blue,green等)
              rgb  范围：0-255之间的整数
              16进制  0-9  A-F
               rgba   a:透明度（0-1）0：透明   1：不透明
    text-align:文本对齐
    line-height:文本行高
    注：line-height和height相同时，可以实现一行文本的垂直居中
   text-indent ： 文本缩进
   text-decoration ：  文本装饰     underline下划线    overline上划线    line-through删除线     none


背景属性
       背景颜色：background-color
       背景图片：background-image
       背景重复：background-repat
       背景定位：background-position
       背景固定：background-attachment
列表属性
        list-style-type:项目符号的设定
            none:无   circle:空心圆    disc:实心圆    square:实心方块
        list-style-position:列表的定位
            outside|inside
盒子属性
        boder:边框
        padding:内边距，盒子的边框与内容的距离
        margin:外边距，盒子与其它盒子之间的距离
        注：垂直方向的margin会合并，水平方向不会。