首页 > 其他分享 >css的三大特性及属性

css的三大特性及属性

时间:2024-03-27 16:03:21浏览次数:23  
标签:行高 层叠 权重 样式 元素 三大 选择器 css 属性

css的三大特性及属性

1.1 层叠性

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

  • 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式

  • 样式不冲突,不会层叠

1.2 继承性

CSS中的继承: 子标签会继承父标签的某些样式,如文本颜色和字号。恰当地使用继承可以简化代码,降低CSS样式的复杂性。

子元素可以继承父元素的样式:
(text-,font-,line-这些元素开头的可以继承,以及color属性)
继承性口诀:龙生龙,凤生凤,老鼠生的孩子会打洞

行高的继承性

body{
  font:12px/1.5 Microsoft YaHei;
}
  • 行高可以跟单位也可以不跟单位

  • 如果子元素没有设置行高,则会继承父元素的行高为 1.5

  • 此时子元素的行高是:当前子元素的文字大小*1.5

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

1.3 优先级

当同一个元素指定多个选择器,就会有优先级的产生。

  • 选择器相同,则执行层叠性

  • 选择器不同,则根据选择器权重执行

选择器权重表格:

选择器选择器权重
继承或*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

2.CSS的注释

注释用于解释代码,它们会被浏览器忽略。CSS 中的注释以“/*”开头,以“*/”结尾。

 /*需要注释的内容 */

背景图片大小

background-size:x y;  设置背景图大小可以设置数值单位px;也是可以设置百分数的一个

标签:行高,层叠,权重,样式,元素,三大,选择器,css,属性
From: https://blog.csdn.net/J3259392566/article/details/136948613

相关文章

  • var定义的全局变量与window的属性的区别
    https://blog.csdn.net/2201_75705263/article/details/129916155关系所有JavaScript全局对象、函数以及变量均自动成为window对象的成员全局变量是window对象的属性。全局函数是window对象的方法区别1.全局变量不能通过delete删除deletea;而windo......
  • 数据库三大范式的学习与数据库表设计的了解
    数据库三大范式的学习与数据库表设计的了解内容简单介绍对于数据库三大范式的理解以及一些设计表示要注意的方面本章内容梳理图数据库三大范式比较官方的定义数据库的三大范式(NormalForms)是关系数据库设计中用于确保数据结构化、减少数据冗余、并提高数据完整性的指导和规......
  • 详解SSL证书系列(7)HTTP的三大缺点
    我们已经了解到HTTP协议具有相当优秀和方便的一面,然而HTTP并非只有好的一面,事物皆具有两面性,它也是有不足之处的,那么HTTP有哪些缺点呢?窃听风险由于HTTP本身不具备加密的功能,所以也无法做到对通信内容进行加密,即HTTP报文是使用明文方式发送的。如果要问为什么通信时不加密是一......
  • 浏览器工作原理与实践--渲染流程(下):HTML、CSS和JavaScript,是如何变成页面的
    在上篇文章中,我们介绍了渲染流水线中的DOM生成、样式计算和布局三个阶段,那今天我们接着讲解渲染流水线后面的阶段。这里还是先简单回顾下上节前三个阶段的主要内容:在HTML页面内容被提交给渲染引擎之后,渲染引擎首先将HTML解析为浏览器可以理解的DOM;然后根据CSS样式表,计算出DOM......
  • 浏览器工作原理与实践--渲染流程(上):HTML、CSS和JavaScript,是如何变成页面的
    在上一篇文章中我们介绍了导航相关的流程,那导航被提交后又会怎么样呢?就进入了渲染阶段。这个阶段很重要,了解其相关流程能让你“看透”页面是如何工作的,有了这些知识,你可以解决一系列相关的问题,比如能熟练使用开发者工具,因为能够理解开发者工具里面大部分项目的含义,能优化页面卡......
  • react 组件加上 displayName 属性的作用是什么
    react组件加上displayName属性的作用是什么在React中,为组件添加displayName属性的主要作用是方便调试和识别组件。在开发过程中,尤其是在查看浏览器开发者工具(如ReactDevTools扩展)时,displayName属性的值会显示为组件的名称,这对于追踪组件层次结构、查找特定组件以及理解组件之......
  • Blazor学习记录六_模版化组件_渲染模式_CSS隔离和代码隔离
    17.模版化组件在组件中放置一个可渲染的代码片段供外部调用者来传入要渲染的内容及渲染样式,这样的组件就叫做模版化的组件。一般是一个支持泛型的组件,目标为消费者封装重复使用的通用性良好的UI组件。比如一个用来给用户呈现表格数据的表格组件。示例组件GenaricTable.razor代......
  • css实现弹出的div显示在屏幕中间
    主要代码如下:.info{width:90vw;height:102vw;display:block;position:fixed;z-index:999;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:14px;}.info-header{......
  • CSS 样式
    一.CSSCSS层叠样式表(CascadingStyleSheets):能够对网页中元素的排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,简单来说,美化页面二.CSS的引入方式行内式:通过元素开始标签的style属性注入,语法为style="样式名:样式值;样式名......
  • 37.html+css+js网页设计实例/“音乐”酒吧主题介绍/web前端期末大作业/
    一、前言本实例以“音乐”酒吧为主题设计,响应式web,应用html+css+js,包括图片轮翻效果、视频、音频、留言板等,供大家参考。【关注作者|获取更多源码(2000+个Web案例源码)|优质文章】;您的支持是我创作的动力!看到这里就【点赞收藏博文】,Web开发、课程设计、毕业设计有兴趣的联系我交......