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

标题: 杨国强_（8）20221111 [打印本页]

作者: 违心 时间: 2022-11-11 22:28
标题: 杨国强_（8）20221111
一.今日学习内容：
CSS的复合选择器：
  是建立在基础选择器之上，对基础选择器进行组合形成的。
  优点： 复合选择器可以更加准确，高效的选择目标元素。
常用的复合选择器：后代选择器：可以选择元素里面的子元素，外层标签写前面，内层标签写后面，中间用空格隔开。
  语法：元素1.元素2{样式声明}；    元素1是父级，元素2是子级；元素2可以是孙子，也可以是儿子，只要是元素1的后代即可；元素1和元素2可以是任意的基础选择器。
子选择器：只能选择作为某元素的最近一级子元素，亲儿子选择器。元素1>元素2{样式声明}；元素1和元素2之间用大于号隔开；元素2必须是元素1的亲儿子（孙子，重孙都不可以）。
并集选择器：可以选择多组标签，同时为他们来指定相同的样式，通常用于集体声明。 注意点：每一组选择器可以是任意的选择器，基础选择器，复合选择器都可以。
伪类选择器：  分为俩种，一种是链接伪类选择器，一种是焦点伪类选择器。 链接选择器：<a></a>用的较多。  ：link选择所有的未被方位过的链接。：visited选择所以已经被访问过的链接。       ：hover选择所以链接当鼠标点击时悬浮的状态。    ：active选择所以链接点击时的状态。  注意：如果四个伪类选择器都要使用，按照lvha的顺序来写；如果想要给其他选择器添加伪类，这个选择器必须要有伪类的状态，不然不可以使用。实际工作中，hover用的最多。焦点伪类选择器： focus来实现焦点元素的样式设置。
语法：input： focus{样式声明}；一般焦点伪类选择器都是和input来联合使用的，因为input标签有聚焦的状态。
CSS元素显示模式： 元素显示模式就是元素在网页中的显示状态就是它本身的显示模式。比如h1标签独占一行，span一行可以有多个，div独占一行。
  HTML元素显示模式分类：总共分为三种，分别是块元素，行内元素，和行内块元素。
  块元素：特点：独占一行，宽度默认是父级宽度的百分百；本身也可以是容器或者是盒子，里面可以放其他的行内或者块级元素，高度和宽度是可以设置的。常见的块元素：h1-h6标签，div标签，p标签，ul标签，ol标签，li标签，其中div标签是最典型的块元素。
行内元素：相邻的行内元素会在一行上进行显示；宽高设置的都是无效的；常见的行内元素有a标签，strong标签，em标签，span标签，ins标签等等。相邻的行内元素会有一点儿间隙。默认的宽高是他本身内容的宽高，行内元素只能容纳文字或者其他行内元素，比如span里面不要放div标签。
  行内块元素：特点：  相邻的行内块元素在一行上显示，并且有空白缝隙（行内元素特点）；默认宽度是他本身内容的宽度（行内元素的特点）；高度和宽度可以进行设置（块级元素的特点）。常见的行内块元素：img，input，dt等等。
元素显示模式的转换： 转换为块级 display；block；转换为行内  display；inline；转换为行内块  display inline-block
CSS背景属性
  背景颜色：默认值:transparents(透明度)； background-color 属性值：颜色单词，十六进制，rgb；背景图片：background-image 属性值：url（图片路径）。
  背景平铺：属性：background-repeat 属性值： repeat  默认值，代表背景图片在横向和纵向上都平铺；no-repeat  代表背景图片不平铺；repeat-x 代表背景图片在横向上平铺；repeat-y 代表背景图片在纵向上平铺；
  背景图片定位： background-position； 属性值：精确的像素值单位和方位名词
  方位名词：没有先后顺序，都可以产生显示效果，自带x轴和y轴的定位属性。y轴方位名词：center在，top在，bottom；x轴方位名词：left，right，center。当只写了一个方位名词，另一个方位就会默认居中。
  精确的像素单位; 如果用精确单位来定位背景图片，当我们只写了一个像素值，代表x轴进行了相应的设置，y轴是默认居中的，方位名词和精确像素单位可以混合使用，比如  center 100px。
背景图片的滚动：background-attachment  属性值：scroll 默认值，图片随着屏幕进行滚动； 属性值：fixed  图片不随着屏幕进行滚动。
背景的复合写法：background一般默认的顺序    属性值：background-color  background-image background-repeat background-attachment background-position；实际开发中我们一般都会用复合写法。
背景半透明：语法：background：ragb（0，0，0，0.3）； ragb中间的a是alpha的缩写，透明度的意思，取值范围是0~1之间；我们习惯把0.3写成.3；0是可以省略的； 背景半透明是指盒子半透明，盒子中的内容不受影响； 背景半透明是css3里边的新增属性，不太关注兼容性写法，直接用就可以。
  CSS的三大特征：层叠性，继承性，优先级三种。层叠性：相同的选择器设置相同的样式，此时新的样式就会覆盖掉旧的样式。层叠性的原则：样式冲突的时候，遵循就近原则，哪个近用哪个；样式不冲突不会层叠。继承性： 在CSS中，子标签会继承父标签的某些样式，比如文字颜色和字号等等，简单来说，子承父业。 优先级（权重）：概念：如果选择器相同，执行层叠性；如果选择器不相同，执行优先级（根据选择器的权重来执行）。
   选择器和选择器权重：  继承或* 0，0，0，0 ； 元素选择器 0，0，0，1； 类选择器，伪类 0，0，1，0； ID选择器 0，1，0，0； 行内样式  1，0，0，0；！important 无穷大。权重的注意点：由四组数字构成，但是不会有进位，简单的理解就是类选择器的权重永远大于元素选择器。如果使用复合选择器，那么就将复合选择器中的基础选择器的权重相加比较即可。继承的权重为0，父元素的样式权重再高对于子元素来说，继承下来的样式权重为0。

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