CSS三大特性

最新推荐文章于 2024-07-10 23:34:24 发布
最新推荐文章于 2024-07-10 23:34:24 发布
阅读量25 收藏
点赞数 1
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64502483/article/details/131284132
版权

1.继承性

设置父元素的样式子元素可以继承

父元素的color属性  text-等属性 line-等属性 font-等属性可以继承

注意：

h1标签作为子元素的时候 不可以继承font-size属性

a标签作为子元素字体元素的下划线无法继承

2.层叠性

使用多个选择器给一个标签设置样式的时候 样式还会发生重叠

3.优先级

！import  的优先级是最高的

style属性  权重为1000

id选择器  权重为100

类选择器  伪类选择器  属性选择器  权重为10

标签选择器 伪元素选择器  权重为1

通配符选择器/普通选择器  权重为0

权重越大，优先级越高

css样式的优先级排序

内联样式>内部样式/外部样式(就近原则)

内部样式和外部样式优先级没有前后，遵循就近原则

Hui.6
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css三大特性
baozhuona的博客
11-28 764
层叠性和样式声明的顺序无关，和标签调用样式的顺序有关，后调用的覆盖前面的继承性 首先要满足嵌套关系才能产生继承，子标签继承父标签的属性 文字的所有属性都可以被继承 特例： h系列标签不能继承文字大小 a标签不能继承文字颜色优先级！important>行内样式>id选择器>类选择器>标签选择器>默认样式 权重可叠加
CSS三大特性详解
月光晒了很凉快的博客
03-18 2479
文章目录CSS的三大特性1. 层叠性2. 继承性3. 优先级 CSS的三大特性 CSS有三个非常重要的三个特性：层叠性、继承性、优先级。 1. 层叠性 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。 层叠性原则： 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式 样式不冲突，不会层叠 2. 继承性 现实中的继承：我们继承了父亲的姓。 CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。
对CSS三大特性的认识
Hero_era的博客
05-20 665
目录 一、层叠性 二、继承性 三、优先级、 CSS有三大特性：层叠性、继承性、优先级 一、层叠性 1、层叠性：相同的选择器若设置相同的样式，那么此时一个样式就会层叠（覆盖）另一个冲突的样式。 2、层叠性主要解决样式冲突问题。 层叠性原则： 样式若冲突，遵循就近原则，即那个样式离结构更近就执行哪个样式。 样式若不冲突，则不发生层叠，也就是正常执行。 下面来看两个例子： 1）我们给字体加上颜色，但同时加两种色彩，看是否体现层叠性： 可以看到黑色离我们的结构更近，那么来看看效果
CSS的三大特性
Keep_Trying_Go的博客
11-25 2187
CSS的三大特性：层叠性，继承性，优先级： （1）层叠性：相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突样式： 原则：样式冲突-遵循的原则是就近原则，哪个样式理结构近，就执行哪个样式； 样式不冲突-不会层叠。 （2）继承性：子标签会继承父标签的某些样式，如文本颜色，字号。 行高继承性：body { font:12px/1.5 Microsoft yahei;} 行高可以有单位也可以无单位。这个1.5代表的是当前元素文字大小的1.5倍。所以当前行高为21px. 如果子元素没有设置行高，则会继承父元
CSS 三大特性
BOM485480的博客
10-22 499
CSS层叠性 所谓层叠性是指多种CSS样式的叠加。 是浏览器处理冲突的一个能力,如果一个属性通过两个相同权重选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。 一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。 样式不冲突，不会层叠 CSS继承性 所谓继承性是指书写CS
4.CSS的三大特征
weixin_62061392的博客
04-07 3966
CSS的三大特征
CSS的三大特性总结
weixin_54671516的博客
07-20 964
CSS的三大特性：继承性，层叠性，优先级
CSS三大特性-继承性
Huyingxue107的博客
07-30 2086
可以继承的常见属性(文字控制属性都可以继承)①颜色color②字体属性font-style、font-weight、font-size、font-family③文本属性text-indent、text-align④行高line-height⑤……，原因很简单，box-sizing属性本来就应该是灵活使用的，全局设定为border-box或者全局设定为content-box都有弊端。，但效果存在，其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了。...
CSS之三大特性（十）
全粘小谭的博客
10-06 708
众所周知，CSS具有三大特性，分别是：继承性、层叠性、优先级，这些特性对于我们日常开发来说极为重要，如果我们平时在编写代码时，总是会出一大堆bug，那可能就是这三个特性没有理解到位，所以要写出优质的代码，这三个特性是必须要理解的👻
css三大特性.pptx
11-25
css初入人员
css+div实现大括号.zip
03-10
这通常涉及到定位、边框、背景颜色以及一些CSS3的新特性。 1. **定位**：通过`position`属性，我们可以将`div`元素放置在页面上的任意位置。可以设置`position: absolute;`或`position: fixed;`，然后使用`top`, `...
css3旋转放大和移动
11-05
其中，"css3旋转放大和移动"是两个非常重要的概念，它们极大地增强了网页元素的表现力。下面将详细阐述这两个特性。 一、CSS3旋转 CSS3中的旋转（rotate）特性允许我们对网页元素进行任意角度的旋转。通过使用`...
精通CSS 第三版
02-21
9. **浏览器兼容性（Cross-Browser Compatibility）**：尽管CSS标准已相对统一，但不同浏览器对某些特性的支持程度不一，了解如何通过前缀（Vendor Prefixes）和特性检测来确保兼容性至关重要。 10. **性能优化...
【CSS】了解grid-auto-columns和grid-auto-rows属性
读心悦
07-07 362
和是 CSS Grid Layout（网格布局）中的两个重要属性，它们用于定义在显式网格（即那些通过或明确指定的网格区域）之外的隐式网格（即自动创建的网格线之间的空间）中的列和行的尺寸。
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
最新发布
uuplay0216的博客
07-10 751
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
scss概念及使用
m0_74293254的博客
07-10 762
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
【CSS】缩写属性place-items
读心悦
07-07 221
是一个强大的简写属性，它允许你通过单个声明同时设置 Grid 或 Flexbox 布局中元素的对齐方式。通过合理地使用这个属性，你可以轻松地实现各种复杂的布局效果。
css画出渐变色右三角形
06-22
CSS可以通过纯CSS3的特性轻松地绘制出渐变色的右三角形。这通常利用伪元素`::before`和`::after`以及`transform`属性来实现。以下是一个简单的示例： ```css .triangle { width: 0; height: 0; position: relative; display: inline-block; } .triangle::before { content: ''; position: absolute; top: 50%; left: 100%; margin-top: -5px; /* 这里的数值等于三角形斜边高度的一半 */ width: 0; height: 10px; background: linear-gradient(to right, red, blue); /* 使用渐变颜色 */ transform: rotate(45deg); /* 创建45度角的三角形 */ } .triangle::after { content: ''; position: absolute; top: 50%; left: 100%; margin-top: -5px; /* 同上 */ width: 0; height: 10px; background: linear-gradient(to right, yellow, green); /* 另一个渐变颜色 */ transform: rotate(-45deg); /* 创建-45度角的三角形，使其与前一个三角形形成一个完整的右三角形 */ } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值