llc02_css

网页分成三个部分

• 结构（HTML）
• 表现（CSS）
• 行为（JavaScript）

css 层叠样式表

• 网页实际是一个多层结构，通过CSS可以分别为网页的每一个层来设置样式而最终我们能看到的只是网页的最上边一层
• 总之，CSS用来设置网页中元素的样式

使用CSS来修改元素的样式

• 第一种方式（内联样式，行内样式）

  • 在标签内部通过style属性来设置元素的样式

  • 问题

    • 使用内联样式，样式只能对一个标签生效

      如果希望影响到多个元素必须在每一个元素中复制一遍

      并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便

    • 注意：开发时绝对不要使用内联样式

• 第二种（内部样式表）

  • 将样式编写到head中的style标签里

    然后通过CSS的选择器来选中元素并为其设置各种样式

    可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用

  • 内部样式表更加方便对样式进行复用

  • 问题

    我们的内部样式表只能对一个网页起作用

    ​ 它里面的样式不能跨页面进行复用

• 第三种（外部样式表）最佳实践

  • 可以将CSS样式编写到一个外部的CSS文件中

    之后通过link标签来引入外部的CSS文件

  • 外部样式表需要通过link标签进行引入

    意味着只要想使用这些样式的网页都可以对其进行引用

    使样式可以在不同的页面之间进行复用

  • 将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制

    从而加快网页的加载速度，提高用户的体验

CSS中的注释，注释中的内容会自动被浏览器所忽略

• 选择器 声明块

• 选择器，可以通过选择器选中页面中的指定元素

  比如 p 的作用就是选中页面中所有的 p 元素

• 声明块，通过声明块来指定要为元素设置的样式

  ​ 声明块由一个一个的声明组成

  ​ 声明是一个名值对结构

  ​ 一个样式名对应一个样式值，名和值之间以：连接，以；结尾

常用选择器

• 元素选择器
  • 作用：根据标签名来选中指定元素
  • 语法：标签名{}
  • 例子：p{} h1{}
• id选择器
  • 作用：根据元素的id值选中一个元素
  • 语法：#id属性值{}
  • 例子：#box{} #red{}
• 类选择器
  • 作用：根据元素的class属性值选中一组元素
  • 语法：.class属性值
• 通配选择器
  • 作用：选中页面中的所有元素
  • 语法：*

复合选择器

• 交集选择器
  • 作用：选中同时符合多个条件的元素
  • 语法：选择器1选择器2选择器3 选择器n{}
  • 注意点：
    • 交集选择器中如果有元素选择器，必须使用元素选择器开头
• 选择器分组（并集选择器）
  • 作用：同时选择多个选择器对应的元素
  • 语法：选择器1，选择器2，选择器3，选择器n{}；
  • #b1,.p1,h1,span,div.red{}

关系选择器

• 子元素选择器
  • 作用：选中指定父元素的指定子元素
  • 语法：父元素 > 子元素
• 后代元素选择器
  • 作用：选中指定元素内的指定后代元素
  • 语法：祖先 后代
• 选择下一个兄弟
  • 语法：前一个 + 后一个
• 选择下边所有的兄弟
  • 语法：兄 ~ 弟

元素关系

• 父元素
  • 直接包含子元素的元素叫做父元素
• 子元素
  • 直接被父元素包含的元素是子元素
• 祖先元素
  • 直接或间接包含后代元素的元素叫做祖先元素
  • 一个元素的父元素也是它的祖先元素
• 后代元素
  • 直接或间接被祖先元素包含的元素叫做后代元素
  • 子元素也是后代元素
• 兄弟元素
  • 拥有相同父元素的元素是兄弟元素

属性选择器

• [属性名] 选择含有指定属性的元素
• [属性名 = 属性值] 选择含有指定属性和属性值的元素
• [属性名^= 属性值] 选择属性值以指定值开头的元素
• [属性名$= 属性值] 选择属性值以指定值结尾的元素
• [属性名 *= 属性值] 选择属性值中含有某值的元素的元素

伪类（不存在的类，特殊的类）

• 伪类用来描述一个元素的特殊状态

  • 比如第一个子元素，被点击的元素，鼠标移入的元素……

• 伪类一般情况下都是：开头

  • :first-chlid 第一个子元素

  • :last-child 最后一个子元素

  • :nth-child() 选中第n个子元素

    • 特殊值： n 第n 个n的范围0 到正无穷

      ​ 2n 或 even 表示选中偶数位的元素

      ​ 2n+1 或 odd 表示选中奇数位的元素

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

  • :first-of-type

  • :last-of-type

  • :nth-of-type()

    • 将符合条件的元素从选择器中去除

:link 用来表示没访问过的链接（正常的链接）

:visited 用来表示访问过的链接

• 由于隐私原因，所以visited这个伪类只能修改链接的颜色

:hover 用来表示鼠标移入状态

:active 用来表示鼠标点击

伪元素，表示页面中的一些特殊的并不真实的存在的元素（特殊的位置）

​ 伪元素使用 :: 开头

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 表示选中的内容

::before 元素的开始

::after 元素的最后

• before 和 after 必须结合content属性来使用！！！！

样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上

继承是发生在祖先后后代之间的

继承的设计是为了方便我们开发

​ 利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，

​ 这样只需设置一次即可让所有的元素都具有该样式

注意：并不是所有的样式都会被继承：

​ 比如 背景相关的，布局相关等的这些样式都不会被继承

样式的冲突

• 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突
• 发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定
  • 选择器的权重
    • 内联样式 1,0,0,0
    • id选择器 0,1,0,0
    • 类和伪类选择器 0,0,1,0
    • 元素选择器 0,0,0,1
    • 通配选择器 0,0,0,0
    • 继承的样式 没有优先级
• 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，越优先显示（分组选择器是单独计算的）
  • 选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
  • 如果优先级计算后相同，此时则优先使用靠下的样式
• 可以在某一样式的后边添加 ！important，则此时该样式会获取到最高的优先级，甚至超过内联样式，
  • 注意：在开发中这个玩意一定要慎用！

长度单位：

• 像素
  • 屏幕显示器实际上是由一个一个的小点点构成的
  • 不同的屏幕像素大小是不同的，像素越小的屏幕显示的效果越清晰
  • 所以同样的200px在不同的设备下显示效果肯定不一样
• 百分比
  • 也可以将属性值设置为其父元素属性的百分比
  • 设置百分比可以将子元素跟随父元素的改变而改变
• em
  • em是相对于元素的字体大小计算的
  • 1em = 1font-size
  • em会根据字体大小的改变而改变
• rem
  • rem是相对于根元素的字体大小来计算的

颜色单位：

• 在CSS中可以直接使用颜色名来设置各种颜色
  • 比如：red，orange，yellow，…………
  • 但是在css中直接使用颜色名是非常的不方便
• RGB值
  • RGB通过三种颜色的不同浓度来调配出不同的颜色
  • R red，G green，B blue
  • 每一种颜色的范围在 0 -255（0% - 100%）之间
  • 语法：RGB（红色，绿色，蓝色）
• RGBA
  • 就是在rgb的基础上增加了一个a表示不透明度
  • 需要四个值，前三个和rgb一样，第四个表示透明度
• HSL值 HSLA值

  • H 色相（0 - 360）

  • S 饱和度，颜色的浓度 0% - 100%

  • L 亮度，颜色的亮度 0% - 100%