CSS的三大特性重要掌握~

😊博主页面:鱿年年

👉博主推荐专栏:《WEB前端》👈

​💓博主格言:追风赶月莫停留,平芜尽处是春山❤️

目录

前言

一、层叠性

二、继承性

 2.1行高的继承

三、优先级

前言

CSS还有三大非常重要的特性需要掌握:层叠性、继承性、优先级。

一、层叠性

相同选择器给设置相同的样式,此时一个样式就会被覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。

层叠性的原则:

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

二、继承性

CSS当中的继承:子标签会继承父标签的某些样式,如文本颜色和字号。简单来说就是:子承父业

  • 恰当地使用继承可以简化代码,降低CSS样式的复杂性。
  • 子元素可以继承父元素的样式(text-,font-,line-等这些元素开头的可以继承,以及color属性也是可以继承的)

 2.1行高的继承

body {
    font:12px/1.5 黑体;
}
  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高,则会继承父元素的行高为1.5
  • 此时子元素的行高是:当前子元素的文字大小*1.5

注意:body 行高的1.5倍 这样的写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高。

三、优先级

当同一个元素指定多个选择器时,就会产生优先级,就是权重。

  • 选择器相同,则执行层叠性
  • 选择器不同,则根据选择器的权重执行

选择器权重值如图所示。

选择器选择器权重
继承 或者*0,0,0,0
元素选择器0,0,0,1
类选择器,伪类选择器0,0,1,0
ID选择器0,1,0,0
行内样式 style=''''1,0,0,0
!important 很重要重要重要无穷大

优先级的注意事项:

  1. 权重是有4租数字组成,但是不会有进位。
  2. 可以理解为 类选择器永远大于元素选择器 ID选择器 永远大于类选择器,以此类推。
  3. 等级判断从左往右,如果某一位数值相同的情况下,则判断下一位数值。
  4. 可以有简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器为100,行内样式为1000,!important 为无穷大。
  5. 继承的权重始终为0,如果该元素没有直接选中的话,不管父元素权重多高,子元素得到的权重都是为0。

权重的叠加:如果是复合选择器的话,则会有权重叠加,需要计算权重。

比如:

  • div ul li → 0,0,0,3
  • .nav ul li → 0,0,1,2
  • a:hover → 0,0,1,1
  • .nav a → 0,0,1,1

今天晚上就到这里哦,早点休息哦大家。

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: CSS88是一本经典的CSS参考手册,它是CSS的早期版本,被广泛用于前端开发。作为初学者或者想要回顾基础知识的开发者,CSS88是一个不错的选择。 CSS88手册首先介绍了CSS的基本概念和语法,包括选择器、属性和属性值等。通过阅读手册,可以了解如何在HTML文档中使用CSS来控制页面的样式。手册还提供了丰富的示例代码,可以帮助读者更好地理解和应用这些概念。 CSS88手册还包含了大量常用的CSS属性和属性值的详细说明,如文本样式、盒模型、浮动、定位等。每个属性都有清晰的解释和用法示例,使开发者能够快速掌握各种样式的应用方法。 此外,CSS88手册还介绍了如何使用CSS编写响应式布局和动画效果。响应式设计是现代Web开发中的一个重要概念,能够使网页在不同设备上呈现出最佳的布局和样式。而CSS动画则给网页添加了更多的交互性和生动性,使用户体验更加丰富。 尽管CSS88是早期版本的参考手册,但它提供了一个坚实的CSS基础,并且其中的很多概念和技术在当前的CSS3版本中仍然适用。因此,对于想要了解CSS基础知识或者需要回顾基础知识的开发者来说,CSS88仍然是一个非常有价值的参考资料。 ### 回答2: CSS88是一个CSS规范的版本,它于1988年发布,是CSS(层叠样式表)的最早的标准之一。由于当时浏览器的功能和技术限制,CSS88的特性相对较少,不能满足现代化网页设计的需求。随着浏览器的发展,CSS3作为CSS的最新版本,引入了许多新的特性和功能,使得网页设计更加灵活和丰富。 CSS3参考手册是一个提供CSS3语法和属性的参考资源。它通常包含了详细说明每个CSS3属性的用法、取值范围和兼容性信息等。参考手册有助于开发者在需要时快速查找和理解CSS3的特性,从而更好地应用到网页设计中。 在CSS3参考手册中,你可以找到各种各样的CSS3特性,包括但不限于: 1. CSS3选择器:新增了众多选择器,如属性选择器、子元素选择器、相邻选择器等,有助于通过更精确的选择器选取目标元素。 2. 边框和背景:CSS3引入了新的边框样式和圆角属性,还可以使用渐变颜色、背景图像大小调整等。 3. 盒模型:添加了更多的盒模型属性,如盒阴影、透明度、角度旋转等。 4. 文字效果:可以添加文字阴影、文字渐变、文字特效等。 5. 过渡和动画:引入了过渡和动画效果的属性,使得页面元素可以平滑变化或动起来。 6. 媒体查询:允许开发者根据设备的宽度、高度、屏幕分辨率等特性来应用不同的样式。 总之,CSS3参考手册是一个有助于开发者更好地学习和应用CSS3的工具,它提供了详实的信息和示例,能够帮助开发者在网页设计中灵活运用CSS3的新特性,实现丰富多样的页面效果。 ### 回答3: CSS3参考手册是一本关于CSS3语法和属性的详细指南。CSS3是CSS的第三个主要版本,引入了许多新的特性和属性,使网页设计更加灵活和强大。 在CSS3参考手册中,可以找到关于CSS3语法的详细说明和示例代码。这包括选择器、盒模型、文本样式、背景效果、边框样式、动画和过渡效果等。每个属性都有一个详细的解释,以及其兼容性和浏览器支持情况的说明。在手册中,还可以找到一些常见的CSS3用法和技巧,可以帮助开发者更好地利用CSS3来设计网页。 CSS3参考手册对于学习和掌握CSS3非常有帮助。它可以作为一个全面的指南,帮助开发者了解每个CSS3属性的功能和用法。通过参考手册,开发者可以轻松地查找和理解CSS3属性和语法,以及它们对网页设计的影响。手册中的示例代码也能够帮助开发者更好地理解CSS3的应用。 总而言之,CSS3参考手册是学习和使用CSS3的宝贵资源。它提供了关于CSS3属性的详细说明和示例代码,帮助开发者更好地理解和应用CSS3。无论是初学者还是有经验的开发者,都可以从参考手册中获得帮助,提高他们的CSS3技能水平。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值