CSS-1 选择器及常用单位

CSS-1

• 作用：修改元素的样式

• CSS修改的方式：
      - 内联样式/行内样式
      在标签内通过style属性设置样式
      - 内部样式表
     在head内添加style标签设置对应元素的样式
      - 外部引用
     在外部CSS文件中编写一套样式表，通过<link rel=“stylesheet” href=“路径”>

• 语法
     -注释：/* */
     -基本语法：选择器 声明块
     选择器{
          名：值;
          }

• 常用选择器
      -元素选择器
  p{
  color: red;
  }
      -id选择器
  #red{
  color: red;
  }
      -类选择器
  .blue{
  color: blue;
  }
      -通配选择器
  *{
  color: red;
  }
  注意：id唯一，class不唯一

• 复合选择器
      -交集选择器
  div.red{
  font-size: 30px;
  }
      -并集选择器
  h1, span{
  color: green
  }

• 关系选择器
  父元素
  子元素
  祖先元素
  后代元素
  兄弟元素
      -子元素选择器 父元素 > 子元素
  div.box > span{
  color: orange;
  }
      -后代元素选择器 祖先 后代
  div span{
  color: skyblue
  }
      -兄弟元素选择器 前一个 + 后一个
      -兄弟元素选择器 选择后面所有的兄弟元素 兄~弟

• 属性选择器
  [属性名] 选择含有指定属性的元素
  [属性名=属性值] 选择含有指定属性和属性值的元素
  [属性名^=属性值] 选择属性值以指定值开头的元素
  [属性名$=属性值] 选择属性值以指定值结尾的元素
  [属性名*=属性值] 选择属性值中含有某值的元素的元素
      格式：p[title*=e]{
  color: orange;
  }

• 伪类选择器
  描述一个元素的特殊状态
  比如：第一个子元素、被点击的元素、鼠标移入的元素…

            - 伪类一般情况下都是使用:开头
                :first-child 第一个子元素
                :last-child 最后一个子元素
                :nth-child() 选中第n个子元素
                    特殊值：
                        n 第n个 n的范围0到正无穷
                        2n 或 even 表示选中偶数位的元素
                        2n+1 或 odd 表示选中奇数位的元素

                    - 以上这些伪类都是根据所有的子元素进行排序

                :first-of-type
                :last-of-type
                :nth-of-type()
                    - 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序

            - :not() 否定伪类
                - 将符合条件的元素从选择器中去除代码片

• a元素的伪类
     :link 用于表示没访问过的链接
     :visited 用于表示访问过的链接
     :hover用于表示鼠标移入
     :active 用来表示鼠标点击

• 伪元素选择器
  伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
  伪元素的格式 ：：元素名（两个冒号）
  ::first-letter 表示第一个字母
  ::first-line 表示第一行
  ::selection 表示选中的内容
  ::before 元素的开始
  ::after 元素的最后
  before 和 after 必须结合content属性来使用

div::before{
content: ‘abc’;
color: red;
}

- 样式的继承

继承是发生在祖先后后代之间的
继承的设计是为了方便我们的开发，
利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，
这样只需设置一次即可让所有的元素都具有该样式
注意：并不是所有的样式都会被继承：
比如 背景相关的，布局相关等的这些样式都不会被继承

- 选择器的权重
样式冲突时，根据选择器的权重来决定
内联样式 1000
id选择器 0100
类和伪类选择器 0010
元素选择器 0001
通配选择器 0000
继承的样式 没有优先级

比较优先级时，需要将选择器累加计算，
注意：
  选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器
  如果优先级计算后相同，此时则优先使用靠下的样式
  某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级

- 单位

1. 长度单位
     1em=1 font-size 字体大小改变则em改变
     1rem=根元素字体大小
2. 图像单位
     像素 px
      百分比 将属性值设置为相对于其父元素属性的百分比
   - 颜色
   在CSS中可以直接使用颜色名来设置各种颜色
   比如：red、orange、yellow、blue、green … …
   -颜色单位
        RGB
        color:rgb(255,0,0)
        RGBA A为透明度
        color:rgba(255,0,0,0.5)
        16进制的RGB 语法#红色绿色蓝色
        background-color: #ff0000;
        HSLA值 H色相(0-360) S饱和度(%) L亮度(%)
        background-color: hsla(98, 48%, 40%, 0.658);