html基础教程3

大家好，又和大家见面了，这节课我们讲style的用途和外部样式表的功能和用途

首先来个实例（style的）

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>HTML</title>
 6     </head>
 7     <body>
 8         <p class="p">hi!</p>
 9         <p>hi!</p>
10     </body>
11     <style>
12         p.p {
13             color: blue;
14         }
15     </style>
16 </html>

style是用来在HTML的内部样式表

外部样式表怎么用

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML</title>
        <!-- link大部分的用途是用来引用css！ -->
        <link rel="stylesheet" type="text/css href="<!-- 文件名 -->">
    </head>
    <body>
        <p class="p">hi!</p>
        <p>hi!</p>
    </body>
   </html>

css代码

p.p {
    color: red;
}
p {
    color: blue;
}

因为这里是HTML教程，我就不一一解释了

下一期教程class

网页源代码

<p>大家好，又和大家见面了，这节课我们讲style的用途和外部样式表的功能和用途</p>
<p>首先来个实例（style的）</p>
<div class="cnblogs_code">
<pre><span style="color: #008080;user-select:none;"> 1</span> <span style="color: #0000ff;">&lt;!</span><span style="color: #ff00ff;">DOCTYPE </span><span>html<span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;user-select:none;"> 2</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">html</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;user-select:none;"> 3</span>     <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;user-select:none;"> 4</span>         <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;user-select:none;"> 5</span>         <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>HTML<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;user-select:none;"> 6</span>     <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;user-select:none;"> 7</span>     <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;user-select:none;"> 8</span>         <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p"</span><span style="color: #0000ff;">&gt;</span>hi!<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">p</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;user-select:none;"> 9</span>         <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">p</span><span style="color: #0000ff;">&gt;</span>hi!<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">p</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;user-select:none;">10</span>     <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;user-select:none;">11</span>     <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">style</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;user-select:none;">12</span> <span style="background-color: #f5f5f5; color: #800000;">        p.p </span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;user-select:none;">13</span> <span style="background-color: #f5f5f5; color: #ff0000;">            color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> blue</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;user-select:none;">14</span>         <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;user-select:none;">15</span>     <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">style</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;user-select:none;">16</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">html</span><span style="color: #0000ff;">&gt;</span></span></pre>
</div>
<p>style是用来在HTML的内部样式表</p>
<p>外部样式表怎么用</p>
<p>HTML代码</p>
<div class="cnblogs_code">
<pre><span style="color: #0000ff;">&lt;!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">html</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>HTML<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #008000;">&lt;!--</span><span style="color: #008000;"> link大部分的用途是用来引用css！ </span><span style="color: #008000;">--&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/css href="</span><span style="color: #008000;">&lt;!-- 文件名 --&gt;</span><span style="color: #0000ff;">"&gt;
    </span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p"</span><span style="color: #0000ff;">&gt;</span>hi!<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">p</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">p</span><span style="color: #0000ff;">&gt;</span>hi!<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">p</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span>
   <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">html</span><span style="color: #0000ff;">&gt;</span></pre>
</div>
<p>css代码</p>
<div class="cnblogs_code">
<pre><span style="color: #800000;">p.p </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}<span style="color: #800000;">
p </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> blue</span>;
}</pre>
</div>
<p class="p">因为这里是HTML教程，我就不一一解释了</p>
<p>下一期教程class</p>
<style>
p.p {
    color: red;
}
</style>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/1175971310-axbcdxyz/p/12820677.html