CSS基础教程

论坛 期权论坛     
选择匿名的用户   2021-5-23 01:39   178   0
<div class="blogpost-body" id="cnblogs_post_body">
<span style="font-size:12pt;"><strong>一、CSS的应用</strong></span>
<span style="font-size:12pt;"> [翻译Htmldog]<br></span>
<br>
<span style="font-size:12pt;">有三种方法应用CSS</span>
<br>
<span style="font-size:12pt;"><strong>(一)、In-line 行内<br></strong></span>
<br>
<span style="font-size:12pt;">行内样式是在html标签里直接使用style属性</span>
<div class="cnblogs_code">
  <div>
   <span style="font-size:12pt;color:#008000;">&lt;!--</span>
   <span style="font-size:12pt;color:#008000;">Example Source Code</span>
   <span style="font-size:12pt;color:#008000;">--&gt;</span>
   <span style="color:#000000;"><br></span>
   <span style="font-size:12pt;color:#0000ff;">&lt;</span>
   <span style="font-size:12pt;color:#800000;">p </span>
   <span style="font-size:12pt;color:#ff0000;">style</span>
   <span style="font-size:12pt;color:#0000ff;">&#61;&#34;color: red&#34;</span>
   <span style="font-size:12pt;color:#0000ff;">&gt;</span>
   <span style="font-size:12pt;color:#000000;">text</span>
   <span style="font-size:12pt;color:#0000ff;">&lt;/</span>
   <span style="font-size:12pt;color:#800000;">p</span>
   <span style="font-size:12pt;color:#0000ff;">&gt;</span>
  </div>
</div>
<p><span style="font-size:12pt;">设定段落文字红色。</span><br><span style="font-size:12pt;">但要记住,最后的HTML应该是独立出来,使用表现文档,所以行内样式应该在任何地方避免。<br></span><br><span style="font-size:12pt;"><strong>(二)、Internal 内部<br></strong></span><br><span style="font-size:12pt;">使用于整个页面的植入内部样式在head标签里面,style标签包围样式。</span><br></p>
<div class="cnblogs_code">
  <div>
   <span style="font-size:12pt;color:#008000;">&lt;!--</span>
   <span style="font-size:12pt;color:#008000;">Example Source Code</span>
   <span style="font-size:12pt;color:#008000;">--&gt;</span>
   <span style="color:#000000;"> <br></span>
   <span style="font-size:12pt;color:#0000ff;">&lt;!</span>
   <span style="font-size:12pt;color:#ff00ff;">DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Strict//EN&#34;<br></span>
   <span style="font-size:12pt;color:#ff00ff;">&#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&#34;</span>
   <span style="font-size:12pt;color:#0000ff;">&gt;</span>
   <span style="color:#000000;"><br></span>
   <span style="font-size:12pt;color:#0000ff;">&lt;</span>
   <span style="font-size:12pt;color:#800000;">html</span>
   <span style="font-size:12pt;color:#0000ff;">&gt;</span>
   <span style="color:#000000;"><br></span>
   <span style="font-size:12pt;color:#0000ff;">&lt;</span>
   <span style="font-size:12pt;color:#800000;">head</span>
   <span style="font-size:12pt;color:#0000ff;">&gt;</span>
   <span style="color:#000000;"><br></span>
   <span style="font-size:12pt;color:#0000ff;">&lt;</span>
   <span style="font-size:12pt;color:#800000;">title</span>
   <span style="font-size:12pt;color:#0000ff;">&gt;</span>
   <span style="font-size:12pt;color:#000000;">CSS Example</span>
   <span style="font-size:12pt;color:#0000ff;">&lt;/</span>
   <span style="font-size:12pt;color:#800000;">title</span>
   <span style="font-size:12pt;color:#0000ff;">&gt;</span>
   <span style="color:#000000;"><br></span>
   <span style="font-size:12pt;color:#0000ff;">&lt;</span>
   <span style="font-size:12pt;color:#800000;">style </span>
   <span style="font-size:12pt;color:#ff0000;">type</span>
   <span style="font-size:12pt;color:#0000ff;">&#61;&#34;text/css&#34;</span>
   <span style="font-size:12pt;color:#0000ff;">&gt;</span>
   <span style="color:#800000;"><br></span>
   <span style="font-size:12pt;color:#800000;">    p </span>
   <span style="font-size:12pt;color:#000000;">{<!-- --></span>
   <span style="color:#ff0000;"><br><br></span>
   <span style="font-size:12pt;color:#ff0000;">        color</span>
   <span style="font-size:12pt;color:#000000;">:</span>
   <span style="font-size:12pt;color:#0000ff;"> red</span>
   <span style="font-size:12pt;color:#000000;">;</span>
   <span style="color:#ff0000;"><br>    </span>
   <span style="font-size:12pt;color:#000000;">}</span>
   <span style="color:#800000;"><br><br></span>
   <span style="font-size:12pt;color:#800000;">    a </span>
   <span style="font-size:12pt;color:#000000;">{<!-- --></span>
   <span style="color:#ff0000;"><br></span>
   <span style="font-size:12pt;color:#ff0000;">        color</span>
   <span style="font-size:12pt;color:#000000;">:</span>
   <span style="font-size:12pt;color:#0000ff;"> blue</span>
   <span style="font-size:12pt;color:#000000;">;</span>
   <span style="color:#ff0000;"><br>    </span>
   <span style="font-size:12pt;color:#000000;">}</span>
   <span style="color:#800000;"><br></span>
   <span style="font-size:12pt;color:#0000ff;">&lt;/</span>
   <span style="font-size:12pt;color:#800000;">style</span>
   <span style="font-size:12pt;color:#0000ff;">&gt;</span>
   <span style="color:#000000;"><br></span>
   <span style="font-size:12pt;color:#000000;">...</span>
  </div>
</div>
<span style="font-size:12pt;">所有段落文字红色,链接蓝色。</span>
<br>
<span style="font-size:12pt;">像行内样式一样,你应该保持HTML和CSS分离,所以我们只剩下救星。<br></span>
<br>
<span style="font-size:12pt;">外部样式使用在整个多样页面网站。它是一个独立
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP