CSS三大特性

最新推荐文章于 2022-05-20 16:22:06 发布
最新推荐文章于 2022-05-20 16:22:06 发布
阅读量114 收藏
点赞数
分类专栏： # HTML&CSS&Sass 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H200102/article/details/110425551
版权

CSS三个特性：层叠性、继承性、优先级

1、层叠性
在这里插入图片描述
2、继承性：跟文字相关的一些特性。
在这里插入图片描述
在这里插入图片描述

3、优先级
在这里插入图片描述
选择器的权重
在这里插入图片描述
优先级注意事项
在这里插入图片描述
权重叠加：如果是复合选择器，会有权重叠加的问题
权重有叠加，不会有进位的问题。

在这里插入图片描述

H千面
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS实现进度条---CSS3新特性之过渡
H.千面的博客
12-16 1199
一、基础知识 过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 过渡动画： 是从一个状态 渐渐的过渡到另外一个状态，可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。 我们现在经常和 :hover 一起 搭配使用。 样例：鼠标放上去变化 div { width: 200px;
案例：新浪导航案例-padding影响盒子好处---CSS
H.千面的博客
12-02 533
效果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti
对CSS三大特性的认识
Hero_era的博客
05-20 581
目录 一、层叠性 二、继承性 三、优先级、 CSS有三大特性：层叠性、继承性、优先级 一、层叠性 1、层叠性：相同的选择器若设置相同的样式，那么此时一个样式就会层叠（覆盖）另一个冲突的样式。 2、层叠性主要解决样式冲突问题。 层叠性原则： 样式若冲突，遵循就近原则，即那个样式离结构更近就执行哪个样式。 样式若不冲突，则不发生层叠，也就是正常执行。 下面来看两个例子： 1）我们给字体加上颜色，但同时加两种色彩，看是否体现层叠性： 可以看到黑色离我们的结构更近，那么来看看效果
CSS的三大特性
Yang_Xingxing_的博客
05-15 1814
CSS的三大特性 css有三个非常重要的特性：层叠性、继承性、优先级 1. 层叠性 相同选择器给设置相同的样式，此时一个样式就会**覆盖（层叠）**另一个冲突的样式。层叠性主要解决样式冲突的问题 层叠性原则： 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式 样式不冲突，不会层叠 2. 继承性 CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。 恰当的使用继承可以简化代码，降低CSS样式的复杂性 子元素可以继承父元素的样式（text-，font-
CSS 的三大特性
kaieew12345的博客
06-15 238
1. CSS 的三大特性 CSS 有三个非常重要的三个特性：层叠性、继承性、优先级。 1.1 层叠性 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突 的问题 层叠性原则：  样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式  样式不冲突，不会层叠 CSS 有三个非常重要的三个特性：层叠性、继承性、优先级。 1.2 继承性 现实中的继承: 我们继承了父亲的姓 CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是
21.2 CSS 三大特性与页面布局
08-22
配套资源
css三大特性.pptx
11-25
css初入人员
【CSS基础学习】CSS的三大特性
01-08
CSS有三大特性，分别是 继承性，层叠性，优先级。CSS的主要特征是继承性，这里先讲解继承性。 继承性 继承性的使用说明 继承性的描述： 继承性是指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父类的...
css的三种定位方式使用探讨
09-25
css的3种类型定位方式，默认使用普通流技术再页面中布局元素，希望表现与普通流不同，另外两个特性position和float，下面有个不错的示例，大家可以参考下，希望对大家有所帮助
每日进步一点点
weixin_48292956的博客
04-06 409
今日励志语：一定要把自己的目标落在实处，写下人生的清单 今日知识点：css三大特性： 1，层叠性 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式 样式不冲突，不会层叠 2，继承性 CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。子元素可以继承父元素的样式：（text-，font-，line-这些元素开头的可以继
子级绝对定位，父级相对定位的由来 --- CSS定位
H.千面的博客
12-11 3634
CSS定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子。 定位 = 定位模式 + 边偏移 。 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。 绝对定位 相对定位 固定定位 子级绝对定位，父级相对定位的由来（子绝父相） ① 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。 ② 父盒子需要加定位限制子盒子在父盒子内显示。 ③ 父盒子布局时，需要占有位置，因此父亲只能是相对定位。 这就是子绝父相的由来，所以相对定
页面导入图片并设置位置---CSS背景及总结
H.千面的博客
12-01 966
页面中导入图片，并设置位置，不要使用src直接导入，而要使用background-image: url(url);导入，其中，括号内的url是图片的地址。 使用src导入，不好设置位置。 background-image : none | url (url)属性是设置背景图片，小的装饰图片，背景图片都可以使用这个属性。 利用 background-position 属性可以改变图片在背景中的位置。 div { width: 300px; height: 300
CSS权重，属性书写顺序，布局技巧和网页布局总结，盒子模型排列位置---CSS
H.千面的博客
12-13 629
通过盒子模型，清楚知道大部分html标签是一个盒子。 标准流 可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。 浮动 可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。 定位 定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。 ...
案例：CSS布局网页的产品信息模块
H.千面的博客
12-04 504
本文两个案例 案例一效果及分析： 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"&
使用a标签写小米官网侧边栏--CSS
H.千面的博客
11-30 488
效果： 案例的核心思路分为两步: 把链接a 转换为块级元素, 这样链接就可以单独占一行,并且有宽度和高度. 鼠标经过a 给 链接设置背景颜色 CSS 没有给我们提供文字垂直居中的代码. 这里我们可以使用一个小技巧来实现. 解决方案: 让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中 涉及到的知识点：块级行级元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt
CSS 的元素显示模式---块级和行级的元素
H.千面的博客
11-30 446
资料来源于黑马pink老师的课程 了解元素的显示模式可以更好的让我们布局页面. 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 2.1 什么是元素显示模式 2.2 块元素 2.2 行内元素 2.3 行内块元素 2.4 元素显示模式总结 2.5 元素显示模式转换 例如将多个div在同一行显示。 转换为块元素：display:block; 转换为行内元素：display:inline; 转换为行内块：display: inline-block; <!DOCTYPE htm
CSS代码：呈现一个三角形
最新发布
09-19
### 回答1： 我不太懂你的问题，但是我可以给你一些关于CSS代码的建议：使用border-style属性来设置边框样式，使用border-width属性来设置边框宽度，使用border-color属性来设置边框颜色，使用border-radius属性来设置圆角。 ### 回答2： 要呈现一个三角形的CSS代码，可以利用CSS的边框和高度为0的特性来实现。具体代码如下： ```css .triangle { width: 0; height: 0; border-left: 50px solid transparent; /* 左边的边框为透明 */ border-right: 50px solid transparent; /* 右边的边框为透明 */ border-bottom: 100px solid red; /* 底边为红色 */ } ``` 解释一下这段代码的实现过程： 首先，通过设置宽度为0，高度为0，创建一个没有内容的元素。接下来，通过设置左边和右边的边框为透明，使得这个元素只有一个底边。最后，设置底边的颜色为红色，以呈现一个红色的三角形。 如果想要改变三角形的大小，可以调整`border-left`和`border-right`的宽度。此外，也可以通过调整`border-bottom`的宽度和颜色来改变三角形的形状和颜色。 希望以上解答对你有帮助！ ### 回答3： CSS代码可以通过使用伪元素和border属性来创建一个简单的三角形。以下是一个示例： HTML代码： ``` <div class="triangle"></div> ``` CSS代码： ```css .triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #000; } ``` 解释： - 通过设置`width`和`height`为0，创建一个没有内容的块级元素。 - 使用`border`属性设置边框，其中`border-left`和`border-right`被设置为透明，以创建一个没有左右边框的等腰三角形。 - `border-bottom`被设置为实心的黑色边框，用于创建三角形的底边。 使用上述代码，我们可以在页面上呈现一个三角形。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值