「前端架构师详解Css09」“类天猫双十二侧边栏”及css三大特性
wxin55 2024-11-10 12:20 8 浏览 0 评论
友情提示：以下代码是我们邀请的前端架构师基于天猫门户编写的css相关代码，现在免费分享给大家，获取的方式为：
关注此头条号“互联网IT信息”——>私信发送 “天猫css” ，（注意：css全是小写）即可得到源代码的获取方式。
1. 此篇文章讲解目录：
案例和由此案例重点讲解的知识点介绍
案例代码实现
css三大特性知识点详解
2. 案例和相关知识点介绍
此案例是页面，效果如下：
此页面的技术实现解析：
使用标签选择器定义通用样式，通过css层叠性和继承性来让通用标签的样式被继承到类选择器上
此案例中主要用到了，基于此，我们会系统的将如下知识点全部讲解：
css三大特性：层叠性、继承性、优先级
3. 此案例的代码实现
第一步：使用块级标签和无序列表编写导航侧边栏的html
第二步：通过标签选择器定义ul li a的通用样式
第三步：定义外层div样式
第四步：通过类选择器定义无序列表样式，其中li和a标签的基本样式继承自第二步的标签选择器
4. 此案例的知识点详解
CSS三大特性：
层叠性、继承性、优先级
1）层叠性：
1. 给一个标签设置的样式发生冲突的时候即样式的覆盖
2. 浏览器的渲染机制是从上到下的，当有冲突的时候就采用最后的那个样式
例如：
h2.grape {color: purple;}
h2 {color: siver;}
层叠性代码实例：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<styletype="text/css">
.two{
color: green;
}
.one{
color: red;
font-size: 30px;
}
.tree{
color: yellow;
font-size: 40px;
}
</style>
</head>
<body>
<pclass="one two tree">
一段文字
</p>
</body>
</html>
2）继承性：继承就是子标签继承了上级标签的CSS样式的属性
1，发生的前提是：标签之间属于一种嵌套关系
2，文字颜色可以之间继承
3，字体大小可以继承
4，字体可以继承
5，行高也可以实现继承
6， 与文字有关的属性都可以，实现继承
特殊注意：
a标签超链接不能实现字体颜色的继承，字体大小可以继承
h1不可以继承文字的大小，继承过来还会做一个计算
继承性代码实例：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<style>
div{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div>
<ahref="">a</a>
</div>
</body>
</html>
3) 优先级
具体解释如下：
内联样式最大，内联样式的优先级最高。
ID选择器的优先级，仅次于内联样式。
类选择器优先级低于ID选择器
标签选择器低于类选择器。
补充：
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
所有都相同时，声明靠后的优先级大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
综述：
-行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式
important > 内联 > ID > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承
css优先级代码实例：
<!DOCTYPE>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>无标题文档</title>
<style>
*{ font-size:56px;}
p{ font-size:32px; color:#60C;}
.d{ color:#F0F;}
#hei{ color:#96F;}
</style>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落2</p>
<pclass="d"id="hei"style="color:#FF0;">我是段落3</p>
<ahref="#">我是超链接</a>
<span>我是备胎标签</span>
</body>
</html>
大家好接下来我们会邀请前端架构师以连载的方式，并且结合阿里天猫商城的门户，系统讲解Css的专业知识，欢迎大家关注头条号“互联网IT信息”。
相关推荐
- ES6中 Promise的使用场景?（es6promise用法例子）
-
一、介绍Promise，译为承诺，是异步编程的一种解决方案，比传统的解决方案（回调函数）更加合理和更加强大在以往我们如果处理多层异步操作，我们往往会像下面那样编写我们的代码doSomething(f...
- JavaScript 对 Promise 并发的处理方法
-
Promise对象代表一个未来的值，它有三种状态：pending待定，这是Promise的初始状态，它可能成功，也可能失败，前途未卜fulfilled已完成，这是一种成功的状态，此时可以获取...
- Promise的九大方法（promise的实例方法）
-
1、promise.resolv静态方法Promise.resolve(value)可以认为是newPromise方法的语法糖,比如Promise.resolve(42)可以认为是以下代码的语...
- 360前端一面~面试题解析（360前端开发面试题）
-
1.组件库按需加载怎么做的，具体打包配了什么-按需加载实现：借助打包工具（如Webpack的require.context或ES模块动态导入），在使用组件时才引入对应的代码。例如在V...
- 前端面试-Promise 的 finally 怎么实现的?如何在工作中使用?
-
Promise的finally方法是一个非常有用的工具，它无论Promise是成功（fulfilled）还是失败（rejected）都会执行，且不改变Promise的最终结果。它的实现原...
- 最简单手写Promise，30行代码理解Promise核心原理和发布订阅模式
-
看了全网手写Promise的，大部分对于新手还是比较难理解的，其中几个比较难的点：状态还未改变时通过发布订阅模式去收集事件实例化的时候通过调用构造函数里传出来的方法去修改类里面的状态，这个叫Re...
- 前端分享-Promise可以中途取消啦（promise可以取消吗）
-
传统Promise就像一台需要手动组装的设备，每次使用都要重新接线。而Promise.withResolvers的出现，相当于给开发者发了一个智能遥控器，可以随时随地控制异步操作。它解决了三大...
- 手写 Promise（手写输入法 中文）
-
前言都2020年了，Promise大家肯定都在用了，但是估计很多人对其原理还是一知半解，今天就让我们一起实现一个符合PromiseA+规范的Promise。附PromiseA+规范地址...
- 什么是 Promise.allSettled()!新手老手都要会?
-
Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的pr...
- 前端面试-关于Promise解析与高频面试题示范
-
Promise是啥，直接上图：Promise就是处理异步函数的API，它可以包裹一个异步函数，在异步函数完成时抛出完成状态，让代码结束远古时无限回掉的窘境。配合async/await语法糖，可...
- 宇宙厂:为什么前端离不开 Promise.withResolvers() ?
-
大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发。1.为什么需要Promise.with...
- Promise 新增了一个超实用的 API!
-
在JavaScript的世界里，Promise一直是处理异步操作的神器。而现在，随着ES2025的发布，Promise又迎来了一个超实用的新成员——Promise.try()！这个新方法简...
- 一次搞懂 Promise 异步处理（promise 异步顺序执行）
-
PromisePromise就像这个词的表面意识一样，表示一种承诺、许诺，会在后面给出一个结果，成功或者失败。现在已经成为了主流的异步编程的操作方式，写进了标准里面。状态Promise有且仅有...
- Promise 核心机制详解（promise机制的实现原理）
-
一、Promise的核心状态机Promise本质上是一个状态机，其行为由内部状态严格管控。每个Promise实例在创建时处于Pending（等待）状态，此时异步操作尚未完成。当异步操作成功...
- javascript——Promise（js实现promise）
-
1.PromiseES6开始支持，Promise对象用于一个异步操作的最终完成（包括成功和失败）及结果值的表示。简单说就是处理异步请求的。之所以叫Promise，就是我承诺，如果成功则怎么处理，失败怎...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- ES6中 Promise的使用场景?（es6promise用法例子）
- JavaScript 对 Promise 并发的处理方法
- Promise的九大方法（promise的实例方法）
- 360前端一面~面试题解析（360前端开发面试题）
- 前端面试-Promise 的 finally 怎么实现的?如何在工作中使用?
- 最简单手写Promise，30行代码理解Promise核心原理和发布订阅模式
- 前端分享-Promise可以中途取消啦（promise可以取消吗）
- 手写 Promise（手写输入法 中文）
- 什么是 Promise.allSettled()!新手老手都要会?
- 前端面试-关于Promise解析与高频面试题示范
- 标签列表
-
- hive行转列函数 (63)
- sourcemap文件是什么 (54)
- display none 隐藏后怎么显示 (56)
- 共享锁和排他锁的区别 (51)
- httpservletrequest 获取参数 (64)
- jstl包 (64)
- qsharedmemory (50)
- watch computed (53)
- java中switch (68)
- date.now (55)
- git-bash (56)
- 盒子垂直居中 (68)
- npm是什么命令 (62)
- python中+=代表什么 (70)
- fsimage (51)
- nginx break (61)
- mysql分区表的优缺点 (53)
- centos7切换到图形界面 (55)
- 前端深拷贝 (62)
- kmp模式匹配算法 (57)
- jsjson字符串转json对象 (53)
- jdbc connection (61)
- javascript字符串转换为数字 (54)
- mybatis 使用 (73)
- 安装mysql数据库 (55)