HTML引入CSS样式三种办法及优先级
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">办法</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> css的样式引用由3种方式。分别为内联定义、链入内部CSS和链入<span style="color: black;">外边</span>CSS。有一点<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>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">内联定义</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 内联定义，即在对象的标记内<span style="color: black;">运用</span>对象的style属性定义适用的样式表属性，格式定义为 :<div style="内容"><div>，如下示例</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-ec91ea43c57b2c2674e2628adaf30faf_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">浏览器此时<span style="color: black;">表示</span>内容</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-c10bd8d0e1408e5f06e3175b17b95f46_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">链入内部CSS</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> CSS内链接<span style="color: black;">是由于</span><style></style>标记对放在<head></head>中，在<style>中有一个类型属性type，后面接test/css，<span style="color: black;">暗示</span>CSS文本，语法格式如下：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> <style type="text/css"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> /*<span style="color: black;">这儿</span>写CSS内容*/</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> </style></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">示例如下：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-9976e7441e425bbd404a38a7efc9e3c3_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">效果图如下：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-264725e6626a31e7a1c4029f2a74da2a_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">链接<span style="color: black;">外边</span>CSS</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> css外链接是把CSS文件放在网页外面，<span style="color: black;">经过</span>链接<link>使CSS文件对本网页的样式有效，就相当于C语言的.h文件喽。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><link>里面的属性有type、rel、href，其中type固定为text/css，rel（即样式表）固定为stylesheet，href自然指的<span style="color: black;">便是</span>css文件的<span style="color: black;">位置</span>了，语法格式为：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> <link type="text/css" rel="stylesheet" href="css文件的存放<span style="color: black;">位置</span>"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 示例代码如下：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-6240abd12f6658af596e08317a9f5753_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> web.css内容为</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-48ea77e65002db18fc51a079ae0cc488_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 效果如下</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-3036c991771d1f5a0a8e8a1fed24c801_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">三种样式范围及优先级</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 简而言之吧，</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 链接<span style="color: black;">外边</span>CSS：<span style="color: black;">功效</span>在引用该CSS文件的网页中。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">链接内部CSS：只<span style="color: black;">功效</span>在该CSS文件的网页中。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 内联定义：只<span style="color: black;">功效</span>在定义该样式的div层中，对其它层<span style="color: black;">没</span>效。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">三种样式优先级</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>看到莫怪。下面以代码效果说明：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-f5f81cfadd031f1e3f0683006ad7005d_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 我在<span style="color: black;">外边</span>CSS文件内定义class的div1背景颜色为红色，内部CSS定义为黑色，内联定义为绿色，效果图如下：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-4bed5f5467f7a6cb9dd2f1a3337a79fe_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">表示</span>为绿色，好吧，内联定义优先级最高。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">而后</span>我再把内联定义去掉，比较一下内部CSS和<span style="color: black;">外边</span>CSS的优先级，如下</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-15666ca82226854e638e276b414ae755_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">此时效果图如下：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-660e3b55354270dc88bf3dbfb144e5a8_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">恩，就<span style="color: black;">这般</span>了，内部CSS次之，<span style="color: black;">外边</span>CSS优先级最低。<span style="color: black;">要紧</span>的话说三遍，优先级：内联定义最高、内部CSS次之、<span style="color: black;">外边</span>CSS优先级最低。或许我提优先级的时候，<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>没事儿，斗地主<span style="color: black;">亦</span>没豆子了。</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>前端该<span style="color: black;">怎样</span>学习，<span style="color: black;">能够</span>加入我的自学团，会有知识分享，匹配学习伙伴，还<span style="color: black;">能够</span>参加我组织的上线项目及活动。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">想加入的伙伴给我留言<span style="color: black;">或</span>直接私信</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 原文链接：<a style="color: black;">HTML引入CSS样式三种<span style="color: black;">办法</span>及优先级_王文松的博客</a>-CSDN博客_css优先级</p>
外链论坛的成功举办，是与各位领导、同仁们的关怀和支持分不开的。在此，我谨代表公司向关心和支持论坛的各界人士表示最衷心的感谢！ 你字句如珍珠，我珍藏这份情。
页:
[1]