我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

陈玉-20221013-CSS2

[复制链接]
polaris123 发表于 2022-10-14 00:01:12 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
一、今日学习内容
1.复合选择器
  (1)后代选择器
注意:1.元素1 和 元素2之间要用空格隔开
                    2.元素1是父级,元素2是子级,最终选择的是子级
                    3.元素2可以是儿子,也可是孙子,只要是元素1的后代都可以
                    4.元素1和元素2可以使任意的基础选择器
  (2)子选择器
注意:1.元素1和元素2之间要用大于号隔开
          2.元素1是父级,元素2是子级,最终选择的是元素2
          3.元素2必须是亲儿子,也就是距离元素1最近一级的元素2,孙子、重孙都不能被选择
  (3)并集选择器:并集选择器可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明,每组选择器之间用“,”隔开即可。
  (4)伪类选择器
   a.链接伪类选择器(为链接添加特定效果)
   注意:需要使用lvha的顺序来进行书写,如果顺序变化会影响链接伪类的样式效果
   b.focus伪类选择器(焦点伪类选择器):是获取光标所在位置进行样式变化,主要用于表单元素
   基本语法:input:focus {  }
2.CSS元素显示模式
  2,1块级元素
  特点:
         1.自己独占一行
         2.高度和宽度都是可以控制的(内外边距也可以控制)
         3.宽度默认是父级的100%
         4.块级元素里面可以放其他的块级或者行内元素,文字类的元素内不可以放块级元素
  2.2行内元素
  特点:
         1.行内元素在一行上可以显示多个
         2.无法设置宽高
         3.默认的宽度和高度是他本身的内容的宽高;行内元素内只能容纳文本或者其他行内元素
  2.3行内块元素
  特点:
         1.和相邻的行内块元素在一行上,但是它们之间会有空白空隙,一行可以显示多个(行内元素特点)
         2.默认宽度是它本身内容的宽度(行内元素特点)
         3.高度和宽度都是可以进行控制的(块级元素的特点)
  2.4元素显示模式转化
转为块级元素:display:block;
转化为行内元素:display:inline;
转化为行内块元素:display:inline-block;
3.CSS背景属性
  3.1背景颜色background-color:____; transparent(透明)
  3.2背景图片background-image:url(图片地址);默认是none
  3.3背景平铺bacground-repeat:repeat/no-repeat/repeat-x/repeat-y
  3.4图片定位background-position:x,y;或者设置方位名词
  3.5图片附着(滚动)background-attachment:fixed/scroll
  3.6背景复合写法默认顺序为:background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
4.CSS三大特性
  4.1层叠性
概念:相同的选择器给设置相同的样式时,新的样式会覆盖掉旧的样式(层叠)
原则:样式冲突,遵循的是就近原则,哪个样式离结构近,就执行哪个样式。
  4.2继承性
概念:子标签会集成父标签的某些样式,比如文本颜色和字号等等。
  4.3优先级
概念:当选择器不同时,遵循优先级(权重)原则
        优先级注意点:
        1、权重是由四组数字组成的,但是不会有进位
        2、可以理解为类选择器永远大于元素选择器,以此类推
        3、等级判断从左向右进行判断,如果某一位相同,那就判断下一位
        4、继承的权重是0,不管父元素的权重有多高,子元素继承得到的权重都是0
5、复合选择器的权重相加
二、今日问题
今日内容已掌握
三、解决方案
今日内容已掌握
回复

使用道具 举报

关注0

粉丝0

帖子37

发布主题
大家都在学
课堂讨论
一周热帖排行最近7x24小时热帖
关注我们
专注C++菁英教育

客服电话:18009298968

客服时间:9:00-21:00

猩码学苑 - 专注C++开发菁英教育!( 陕ICP备2025058934号-1 )

版权所有 © 陕西菁英数字科技有限公司 2023-2026