前端基础(九)_CSS的三大特征

简介: 本文详细解释了CSS的三大特性:层叠性、继承性和优先级,并通过实例演示了样式冲突、叠加和选择器优先级的应用。

CSS的三大特征

1、层叠性

1.样式冲突,遵循就近原则
2.样式不冲突,不会层叠,会叠加

1.1.样式冲突,遵循就近原则例子:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    div {
   
      padding: 0;
    }

    .div2 {
   
      width: 50px;
      padding: 10px;
    }

    .div2 {
   
      width: 100px;
      border: 2px solid red;
    }
  </style>
</head>

<body>
  <div class="div2">我是内容</div>
</body>

</html>

在这里插入图片描述

在这里插入图片描述
页面的最终展示效果
在这里插入图片描述
代码
样式冲突,遵循就近原则,所以width的值为100px;padding的值为10px

1.2.样式不冲突,不会层叠,会叠加例子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    div {
   
      color: pink;
    }

    .div2 {
   
      padding: 10px;
    }

    .div2 {
   
      width: 100px;
      border: 2px solid red;
    }
  </style>
</head>

<body>
  <div class="div2">我是内容</div>
</body>

</html>

在这里插入图片描述
样式不重叠,所有针对于这个元素的样式会叠加,都加到这个元素身上,如果其中有重叠的某个样式,也会按照样式冲突,遵循就近原则进行替换。

2、继承性–子元素会继承父元素的样式

1、a标签不会继承父元素的文字颜色,h1-h6标题标签不会继承父元素的字体大小
2、字体系列属性
font-family字体系列属性
font-size字号属性
font-weight文字加粗属性
Font-style 文字风格属性
Line-height 行高属性
3.文本系列属性
text-indent 文本缩进属性
text-align文本水平对齐方式属性
text-decoration文本装饰线属性
color文本颜色属性
4.列表中list-开头的属性

3、优先级

选择器的权值越大,优先级越高,权值相同时,谁在后面显示谁
基本选择器权值:
通配符选择器0、标签选择器1、类选择器10、id选择器100
复合选择器权值计算方式:组成复合选择器的所有单一算账去的权值累加

.box div{} 10+1 =11

box .box p{} 100+10+1=111

1.行间样式的优先级高于id选择器的优先级;
2.继承央视的权值为0;子元素中设置的样式,会覆盖继承到的样式;
3.在样式中定义!Important,优先级高于行内样式;

目录
相关文章
|
1月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
28 4
|
2月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
241 1
|
2月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
2月前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
74 2
|
2月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)2
【前端基础篇】CSS基础速通万字介绍(上篇)
27 2
|
2月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)3
【前端基础篇】CSS基础速通万字介绍(上篇)
20 1
|
2月前
|
缓存 前端开发 JavaScript
【前端基础篇】CSS基础速通万字介绍(上篇)1
【前端基础篇】CSS基础速通万字介绍(上篇)
21 1
|
2月前
|
移动开发 算法 前端开发
前端常用算法全解:特征梳理、复杂度比较、分类解读与示例展示
前端常用算法全解:特征梳理、复杂度比较、分类解读与示例展示
29 0
|
2月前
|
前端开发 JavaScript 容器
前端之CSS基础知识
前端之CSS基础知识
18 0
|
2月前
|
前端开发 容器
【前端基础篇】CSS基础速通万字介绍(下篇)3
【前端基础篇】CSS基础速通万字介绍(下篇)
18 0
下一篇
DataWorks