菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 张锐杰-20221013-02CSS [打印本页]

作者: 张锐杰 时间: 2022-10-14 08:51
标题: 张锐杰-20221013-02CSS
一、今日学习内容：
CSS的复合选择器
什么是复合选择器
      复合选择器是对基本选择器进行组合而成的选择器。

复合选择器包括一下几个
      后代选择器
         概念：
            也叫做包含选择器，就是可以选择父元素里面的所有符合条件的子元素

         语法规范
            元素1 和元素2之间要用空格隔开
            元素1是父级，元素2是子级，最终选择的是子级
            元素2可以是儿子，也可是孙子，只要是元素1的后代都可以
            元素1和元素2可以使任意的基础选择器

      子选择器
         概念
            子选择器也叫做亲儿子选择器，会选择父级元素最近的一级子元素
            语法：
                  元素1和元素2之间要用大于号隔开
                  元素1是父级，元素2是子级，最终选择的是元素2
                  元素2必须是亲儿子，也就是距离元素1最近一级的元素2，孙子、重孙都不能被选择

      并集选择器
         概念
            并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明，每组选择器之间用“,”隔开即可。

      伪类选择器
         链接伪类选择器
            主要是给链接选择器上附加特殊效果的
            例：
                  注意：四个链接伪类选择器同时使用时，使用lvha的顺序来进行书写，如果顺序变化会影响链接伪类的样式效果

         focus伪类选择器（焦点伪类选择器）
            焦点伪类选择器是获取光标所在位置，进行样式变化，这个伪类选择器主要就是针对表单元素来说的

         伪类选择器总结
            伪类和css的类一样，可以附加在其他的选择器上
            像其他的选择器附加伪类选择器时，必须选择器要支持伪类选择器所声明的状态，否则没有效果

CSS的元素显示模式
元素显示模式的分类
      块级元素
         常见的块级元素有
            h1-h6标签、p标签、div标签、ul标签、ol标签、li标签等等。

         块级元素的特点
            自己独占一行
            高度和宽度都是可以控制的（内外边距也可以控制）
            宽度默认是父级的100%
            块级元素里面可以放其他的块级或者行内元素

         注意
            文字类的元素内不可以放块级元素
            比如说p标签和h1-h6标签，内部不可以放div标签

      行内元素
         常见的行内元素
            a标签、strong标签、b标签、em标签、i标签、del标签、span标签等等，span标签是典型的行内元素。

         行内元素的特点
            行内元素在一行上可以显示多个
            无法设置宽高
            默认的宽度和高度是他本身的内容的宽高
            行内元素内只能容纳文本或者其他行内元素

         注意：
            链接标签里面不能再放链接。
            特殊情况在a标签里要放其他的块级元素，最好给a标签转化为块级元素更安全

      行内块元素
         常见的行内块元素
            img标签、input标签、td标签等等

         行内块元素的特点
            和相邻的行内块元素在一行上，但是它们之间会有空白空隙，一行可以显示多个（行内元素特点）
            默认宽度是它本身内容的宽度（行内元素特点）
            高度和宽度都是可以进行控制的（块级元素的特点）

元素显示模式的转化
      转为块级元素：display:block;
      转化为行内元素：display:inline;
      转化为行内块元素：display:inline-block;

文字的垂直居中
      CSS没有提供文字垂直居中的代码，可以用以下方式来解决
         让文字的行高等于盒子的高度就可以了

CSS背景属性
背景颜色
      背景颜色使用属性background-color来进行设置，它的默认值是transparent（透明）

背景图片
      background-image：url(图片地址);    默认是none

背景平铺
      bacground-repeat
      属性值：
         repeat：背景横向和纵向都平铺（默认值）
         no-repeat：背景不平铺
         repeat-x：背景横向平铺
         repeat-y：背景纵向平铺

背景图片定位
      background-position：x，y；
         1、可以使用方位名词进行设置
         2、可以使用具体的像素单位进行设置
         3、可以混合方位名词和像素值进行设置

      背景图片定位的总结：
         1、参数是方位名词
            如果指定的两个值都是方位名词，则两个值的先后顺序没有关系
            如果只指定了一个方位名词，另一个值省略，则省略的值为center（居中对齐）

         2、参数是精确的像素单位
            如果参数是精确的像素单位，第一个值肯定是x坐标，第二个值是y坐标
            如果只指定了一个数值，那么该数值就一定是x坐标，y坐标默认居中

         3、参数是混合单位
            如果参数是混合单位（像素值和方位名词混合使用），则第一个值x坐标，第二个值是y坐标

背景图片附着（滚动）
      background-attachment
         属性值
            scroll：默认值，背景图片随着屏幕滚动
            fixed：背景不跟随屏幕滚动

背景复合写法
      默认的复合写法的顺序为
         background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；

CSS的三大特性
层叠性
      概念
         相同的选择器给设置相同的样式时，新的样式会覆盖掉旧的样式（层叠）

      层叠性的原则
         样式冲突，遵循的是就近原则，哪个样式离结构近，就执行哪个样式。
         样式不冲突，不会层叠。

继承性
      概念
         子标签会集成父标签的某些样式，比如文本颜色和字号等等。简单理解就是子承父业。

优先级（权重）
      概念
         当选择器相同的时候，遵循层叠性原则
         当选择器不同的时候，遵循优先级（权重）原则

      选择器权重
      优先级的注意点
         1、权重是由四组数字组成的，但是不会有进位
         2、可以理解为类选择器永远大于元素选择器，以此类推
         3、等级判断从左向右进行判断，如果某一位相同，那就判断下一位
         4、继承的权重是0，不管父元素的权重有多高，子元素继承得到的权重都是0

      权重叠加
         div ul li  权重是 0,0,0,3
         .nav ul li 权重是 0,0,1,2
         a:hover 权重是 0,0,1,1

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)