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

标题: 赵强-20221013-CSS2 [打印本页]

作者: BlueFlame 时间: 2022-10-13 23:50
标题: 赵强-20221013-CSS2
一、今日所学内容
(1)CSS复合选择器
   什么是复合选择器？
复合选择器是对基本选择器进行组合而成的
   复合选择器包括一下几个
后代选择器：也叫做包含选择器，就是可以选择父元素里面的所有符合条件的子元素
      语法规范：
            元素1 和元素2之间要用空格隔开
            元素1是父级，元素2是子级，最终选择的是子级
            元素2可以是儿子，也可是孙子，只要是元素1的后代都可以
            元素1和元素2可以使任意的基础选择器

子选择器：子选择器也是亲儿子选择器，会选择父级最近的子元素
      语法规范
            元素1和元素2之间要用大于号隔开
            元素1是父级，元素2是子级，最终选的是子级元素
            元素2必须是亲儿子，孙子，重孙元素都不可以
并集选择器：并集选择器可以选择多组标签，同时问他们定义相同的样式，通常用于集体声明，每组选择器之间用逗号“,”隔开
      语法规范：

伪类选择器
      链接伪类选择器
               主要是给链接选择器上附加效果
                  伪类名称                示例                说明
                  ：link                a:link                选择所有未被访问过的链接
      ：visited             a:visited             点击之后
                  ：hover             a:hover             鼠标悬浮
      ：active             a:active             点击时样式
注意：按照以上顺序设置伪类选择器
focus伪类选择器（焦点伪类选择器）
      焦点伪类选择器时获取光标所在的位置进行样式变化，这个伪类选择器主要就是针对表单元素来说的
      伪类选择器总结：
伪类和CSS的类一样，可以附加在其他的选择器上
向其他选择器附加伪类选择器时，必须选择器要支持伪类选择器所声明的状体，否则没有效果
(2)CSS元素显示模式
      元素显示模式的分类
块级元素
      常见的块级元素有
h1~h6标签、p标签、div标签、ul标签、ol标签、li标签等等
      块级元素的特点
自己独占一行
高度和宽度都可以控制（内外边距也可以控制）
宽度默认时父级的100%
块级元素里面可以放其他的块级或者行内元素
      注意：
文字类的元素不能放块级元素
例如：p标签和h1~h6标签内部不能放div标签内
行内元素
      常见的行内元素
a标签、strong标签、b标签、em标签、i标签、del标签、span标签等等，span标签是典型的行内元素
      行内元素的特点
行内元素在一行上可以显示多个
无法设置宽高
默认的宽度和高度是它本身的内容的宽高
行内元素只能容纳文本或者其他行内元素
      注意：
链接标签里面不能再放链接
特殊情况在a标签里面要放其他

行内块元素
      常见的行内块元素
img标签、input标签、td标签等等
      行内块元素的特点
和相邻的行内块元素在一行上，但是他们之间会有空白空隙，一行可以显示多个（行内元素特点）
高度和宽度都是可以进行控制的（块级元素特点）

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

      文字的垂直居中
CSS没有提供文字垂直居中的代码，可以用一下方式解决
      让文字的行高等于盒子的高度
(3)CSS背景属性
      背景颜色
背景颜色使用background-color来进行设置，它的默认值是transparent（透明）
      背景图片
background-image：url(图片地址)；默认值是none
      背景平铺
background-repeat
属性值：
/* 背景图片不平铺 */
            background-repeat: no-repeat;
            /* 背景图片横向平铺 */
            background-repeat: repeat-x;
            /* 背景图片纵向平铺 */
            background-repeat: repeat-y;
            /* 背景图片横向纵向平铺(默认值) */
            background-repeat: repeat;
      背景图片定位
1.可以使用方位名词进行设置
2.可以使用具体的像素单位设置
3.可以混合方位名词和像素值进行设置
            背景图片定位总结:
      1.参数是方位名词
            如果指定的两个值都是方位名词,则两个值得先后循序没有关系
            如果指定了一个方位名词,另一个值省略.则省略得值为center(居中对齐)
      2.参数是精确的像素单位
            如果参数是精确的像素单位,第一个值肯定是x坐标,第二个值是y
            如果只指定了一个数值,那么该数值就一定是x坐标,y坐标默认居中

      背景图片附着(滚动)
background-attachment
         属性值:
      /* 默认值,背景图片随着屏幕滚动 */
                  background-attachment: scroll;
                  /* 背景图片不跟随屏幕滚动 */
                  background-attachment: fixed;
      背景复合写法
默认的复合写法的顺序为:
      background: 背景颜色背景图片背景图片地址背景平铺背景图像滚动背景图片位置;
(4)CSS的三大特性:
层叠性:相同的选择器给设置相同的样式时,新的样式会覆盖掉旧的样式(层叠)
      层叠的原则:
样式冲突:遵循的是就近原则
样式不冲突,不会层叠
继承性:子标签会继承父标签的某些样式,例如颜色字号等等,子承父业.


优先级(权重):
         当选择器相同的时候遵循层叠性原则
         当选择去不同的时候遵循
选择器                         选择器的权重
继承和*                         0,0,0,0
元素选择器(标签选择器)    0,0,0,1
类选择器,伪类选择器       0,0,1,0
ID选择器                         0,1,0,0
行内选择器                      1,0,0,0
!important                      无穷大
            优先级的注意点
      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/)