CSS三大特性-外链论坛 - Powered by Discuz! Archiver

wloe2gf 发表于 2024-6-30 08:22:27

CSS三大特性

<h2 style="color: black; text-align: left; margin-bottom: 10px;">CSS三大特性</h2>层叠行继承性优先级<h2 style="color: black; text-align: left; margin-bottom: 10px;">1 层叠性</h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">1.1 层叠性定义</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">相同<span style="color: black;">选取</span>器给同一<span style="color: black;">目的</span>设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">1.2 层叠性特点</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">遵循原则：就近原则，哪个样式离<span style="color: black;">目的</span>近，就以哪个样式为准 </p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2 继承性</h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">2.1 继承性定义</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">子标签会继承父标签的某些样式，如文本颜色和字号等。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">2.2 继承性特点</h3>恰当的<span style="color: black;">运用</span>继承<span style="color: black;">能够</span>简化代码，降低CSS样式的<span style="color: black;">繁杂</span>性子元素<span style="color: black;">能够</span>继承父元素的样式（text-、font-、line-这些元素<span style="color: black;">研发</span>的<span style="color: black;">能够</span>继承，以及color属性）<h3 style="color: black; text-align: left; margin-bottom: 10px;">2.3 继承性<span style="color: black;">重视</span>问题</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">简写字体属性font代码案例1(行高跟单位<span style="color: black;">状况</span>)：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">body{
   font: 16px/20px Microsoft YaHei;
   }</div> 说明：16px指代字体<span style="color: black;">体积</span>、20px指代行高、Microsoft YaHei指代字体微软雅黑<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">简写字体属性font代码案例2(行高不跟单位<span style="color: black;">状况</span>)：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">body{
   font: 16px/1.5 Microsoft YaHei;
   }</div> 说明：body元素的子元素A，元素A的行高是元素A字体<span style="color: black;">体积</span>的1.5倍<h2 style="color: black; text-align: left; margin-bottom: 10px;">3 优先级</h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">3.1 优先级定义</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">区别</span><span style="color: black;">选取</span>器给同一<span style="color: black;">目的</span>设置相同的样式，此时会<span style="color: black;">按照</span><span style="color: black;">选取</span>器权重决定<span style="color: black;">目的</span>的<span style="color: black;">最后</span>样式。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">3.2 优先级特点</h3><span style="color: black;">选取</span>器权重<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-f3bf15c8ba4228c1c8fe645872a4a6d6_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>1<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">重视</span>：属性<span style="color: black;">选取</span>器的权重为：0,0,1,0</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 伪元素<span style="color: black;">选取</span>器和标签<span style="color: black;">选取</span>器权重<span style="color: black;">同样</span>：0,0,0,1</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">3.3 优先级<span style="color: black;">重视</span>问题</h3>权重是有4组数字<span style="color: black;">构成</span>，<span style="color: black;">然则</span>不会有进位等级判断从左向右，<span style="color: black;">倘若</span>某一位数值相同，则判断下一位数值继承的权重是0，不管父元素权重多高，子元素得到的权重都是0权重叠加：<span style="color: black;">倘若</span>是组合器<span style="color: black;">选取</span>器，则会有权重叠加，<span style="color: black;">必须</span>计算权重（下面样例说明）<div style="color: black; text-align: left; margin-bottom: 10px;"><!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>Document</title>
   <style>
   ul li {
   color: green;
   }
   li {
   color: red;
   }
   .nav li {
   color: blue;
   }
   </style>
   </head>

   <body>
   <ul class="nav">
   <li>样例q</li>
   <li>样例2</li>
   <li>样例3</li>
   </ul>
   </body>

   </html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">ul li<span style="color: black;">选取</span>器的权重是0,0,0,2; </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">li <span style="color: black;">选取</span>器的权重是0,0,0,1;</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">.nav li<span style="color: black;">选取</span>器的权重是0,0,1,1; </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">因为</span>.nav li<span style="color: black;">选取</span>器的权重更高，<span style="color: black;">因此</span><span style="color: black;">最后</span>样式已.nav li<span style="color: black;">选取</span>器为准。</p>

星☆雨 发表于 2024-9-5 02:34:53

期待与你深入交流，共探知识的无穷魅力。

情迷布拉格 发表于 2024-9-7 23:53:25

谷歌网站排名优化 http://www.fok120.com/

qzmjef 发表于 2024-9-26 12:58:07

期待与你深入交流，共探知识的无穷魅力。

qzmjef 发表于 2024-10-13 23:09:23

顶楼主，说得太好了！

m5k1umn 发表于 2024-11-7 05:25:22

你的见解真是独到，让我受益匪浅。

1fy07h 发表于前天 09:37

一看到楼主的气势，我就觉得楼主同在社区里灌水。

页: [1]

外链论坛's Archiver

CSS三大特性