1.

/* 权重是0 */* {font-size: 35px;text-align: center;color: pink;}/* h1 权重是1 */h1 {color: red;}/* . 权重10 */.yncg {color: #0f00f0;}.llmk {color: yellow;}.nqxx {color: #0f0;}.hpzf {color: red;}/* # 权重100 */#inqxx {color: black;}/* . 权重10 */.klgx {color: #FF00FF;}h2 {color: #0f0 !important;}#ihpzf {color: #0f0;}#iklgx {color: red;}#ijjgc {color: #0f0;}/* !important 权重1000 */.jjgc {color: red !important;}#ixly {color: yellow;}.xlj {color: #0f0 !important;}  h4 {color: $0f0 !important;}.xyj {color: black;}/* 权重2 =1+1 */div h5 {color: #0f0;}/* 权重1 */h5 {color: red;}.hpyz {color: #55007f;}/* 权重11 =1+10 */div .xyy {color: purple;}.box2 .xyy {color: #000fff;}div #ixyj {color: #0f0;}/* 权重101 =100+1 */#b2 h5 {color: pink;}.hpzf {color: black;}h6 {color: red;}div h6 {color: #ffff7f;}/* 权重101 */#b2 h6 {color: #00ff7f;}/* 权重11 =1=+1 */.box2 h5 {color: blue;}/* 权重20 */.box2 .xyy {color: #000fff;}.box .dj {color: pink;}.box2 #idj {color: black;}.hyrz {color: #00FFFF;}.jmqs {color: rgb(234,21,140);font-style: "仿宋";}.dpcq {color: rgb(20,20,20);font-style: "宋体";font-size: 0.625rem;}.llmk {font-weight: bold !important;}.nqxx {text-align: right !important;}.hpzf {text-align: left !important;}.xlj {font-family: "楷体" !important;}.xyy {font-style: italic;}

2. 主体

<div class="box"><h1 class="yncg">云南虫谷</h1><h2 class="llmk">龙岭迷窟</h2><h3 style="color: pink;" id="inqxx" class="nqxx">怒晴湘西</h3><p id="ijjgc" class="ijjgc">精绝古城</p><p style="color: blue" class="hpzf" id="ihpzf">黄皮子坟</p><p class="klgx" id="iklgx" style="color: bisque;">昆仑归墟</p><p class="xlj" id="ixly" style="color: #00FFFF;">寻龙诀</p><p style="color: #0000FF;" class="hpyz" >黄皮幽冢</p> </div><!-- 包含选择器的权重等各个选择器 权重和 --><div id="bo2" class="box2"><h4 style="color: yellow;" class="xyj" id="ixyj">西游记</h4><h5 class="xyy" id="ixyy">喜洋洋与灰太狼</h5><h6 class="dj" id="idj" style="color: purple;">迪迦奥特曼</h6><p class="hyrz">火影忍者</p><p class="jmqs">假面骑士</p><p class="dpcq">斗破苍穹</p></div>

3. 完整代码如下所示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* 权重是0 */* {font-size: 35px;text-align: center;color: pink;}/* h1 权重是1 */h1 {color: red;}/* . 权重10 */.yncg {color: #0f00f0;}.llmk {color: yellow;}.nqxx {color: #0f0;}.hpzf {color: red;}/* # 权重100 */#inqxx {color: black;}/* . 权重10 */.klgx {color: #FF00FF;}h2 {color: #0f0 !important;}#ihpzf {color: #0f0;}#iklgx {color: red;}#ijjgc {color: #0f0;}/* !important 权重1000 */.jjgc {color: red !important;}#ixly {color: yellow;}.xlj {color: #0f0 !important;}   h4 {color: $0f0 !important;}.xyj {color: black;}/* 权重2 =1+1 */div h5 {color: #0f0;}/* 权重1 */h5 {color: red;}.hpyz {color: #55007f;}/* 权重11 =1+10 */div .xyy {color: purple;}.box2 .xyy {color: #000fff;}div #ixyj {color: #0f0;}/* 权重101 =100+1 */#b2 h5 {color: pink;}.hpzf {color: black;}h6 {color: red;}div h6 {color: #ffff7f;}/* 权重101 */#b2 h6 {color: #00ff7f;}/* 权重11 =1=+1 */.box2 h5 {color: blue;}/* 权重20 */.box2 .xyy {color: #000fff;}.box .dj {color: pink;}.box2 #idj {color: black;}.hyrz {color: #00FFFF;}.jmqs {color: rgb(234,21,140);font-style: "仿宋";}.dpcq {color: rgb(20,20,20);font-style: "宋体";font-size: 0.625rem;}.llmk {font-weight: bold !important;}.nqxx {text-align: right !important;}.hpzf {text-align: left !important;}.xlj {font-family: "楷体" !important;}.xyy {font-style: italic;}</style></head><body><!-- 优先级（权重） --><!-- 优先级相同的情况下  后面的样式会生效 --><!-- 优先级不同的情况下  优先级高的生效 --><!-- 权重   从下往上依次增大 --><!-- *（通配符）     0  --><!-- 标签选择器      1 --><!-- class选择器    10 --><!-- 伪类选择器      10 --><!-- id选择器       100 --><!-- 内联样式       1000 --><!-- !important     最高 --><!-- 包含选择器的权重等于各个选择器  权重和 --><div class="box"><h1 class="yncg">云南虫谷</h1><h2 class="llmk">龙岭迷窟</h2><h3 style="color: pink;" id="inqxx" class="nqxx">怒晴湘西</h3><p id="ijjgc" class="ijjgc">精绝古城</p><p style="color: blue" class="hpzf" id="ihpzf">黄皮子坟</p><p class="klgx" id="iklgx" style="color: bisque;">昆仑归墟</p><p class="xlj" id="ixly" style="color: #00FFFF;">寻龙诀</p><p style="color: #0000FF;" class="hpyz" >黄皮幽冢</p> </div><!-- 包含选择器的权重等各个选择器 权重和 --><div id="box2" class="box2"><h4 style="color: yellow;" class="xyj" id="ixyj">西游记</h4><h5 class="xyy" id="ixyy">喜洋洋与灰太狼</h5><h6 class="dj" id="idj" style="color: purple;">迪迦奥特曼</h6><p class="hyrz">火影忍者</p><p class="jmqs">假面骑士</p><p class="dpcq">斗破苍穹</p></div></body>
</html>

执行结果如下所示：

4. 结束语

若这篇文章有帮到你，请给个赞，收个藏，欢迎大家留言评论；
若文章有什么错误的地方，欢迎大家指教。

Web前端学习之 CSS基础二相关推荐

web前端学习中CSS，JS代码压缩
web前端要学习的知识有很多,前端基础要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML负责结构,网页想要表达的内容由html书写. CSS负责样式,网 ...
Web前端学习html css（一）
10.15 1.1 导学 1.拨云见日 html ,css, 切图流程, PC企业布局, PC游戏布局 2.溯本求源扩展html , 扩展css, html5新语法,css3新语法,兼容与hack ...
厚积薄发前端学习笔记 CSS基础篇-左侧固定，右侧自适应（或右侧固定，左侧自适应）布局方法...
这是我们经常可能会遇到到一种布局方法,或者是右侧固定,左侧自适应,下面列出我归纳总结的几种方法,是实际开发中比较常用和实用的几种方法 GitHub项目链接写在前面归纳总结了几种比较ok的方法,左右 ...
自学web前端怎么学？web前端学习路线css属性
自学web前端技术,如果才能找到一份web前端的工作.按照现在的招聘标准来看,无论你去哪个公司面试,你只需要满足他们公司的需求就可以.找到一份web前端工作需要掌握的内容如下: 首先是html,css ...
web前端学习（CSS篇）
目录 CSS基础语法基本样式内联样式与内部样式内联样式外部样式及两种写法 CSS中的颜色表示法 CSS背景样式背景实现视觉差效果 CSS边框样式边框实现三角形 CSS文字样式 CSS段落样 ...
Web前端学习笔记——HTML基础
开发工具我们主要用的开发工具有 chrome . sublime . photoshop 浏览器(显示) 浏览器是网页显示.运行的平台,常用的浏览器有IE.火狐(Firefox).谷歌(Chrom ...
我的前端学习之CSS基础--选择器、字体、非布局样式、背景
CSS基础选择器半透明,可叠加,第一张的padding,第二张的font-size,第三张的background <style>body{padding :10px; font-siz ...
Web前端学习笔记——CSS京东案例、BFC
京东项目(一) 京东项目介绍项目名称:京东网项目描述:京东首页公共部分的头部和尾部制作,京东首页中间部分. 项目背景现阶段电商类网站很流行,很多同学毕业之后会进入电商类企业工作,同时电商类网站需 ...
前端学习之CSS基础
前言 html标签就不说了,这次学习CSS样式,就是美化html标签. 快速了解什么是css 普通标签: 加了css样式: <img src="https://static.runoo ...

Web前端学习之 CSS基础二

Web前端学习之 CSS基础二

1.

2. 主体

3. 完整代码如下所示

4. 结束语

Web前端学习之 CSS基础二相关推荐

最新文章

热门文章