CSSの3種類の埋め込み方式

2546 ワード

1.行内スタイル



    
    

<!--style="background-color: red;"-->

<!--    -->
    <div style="font-size: 30px; color: red; background-color: green;">1111111111111</div>
    <div style="font-size: 30px; color: red; background-color: green;">1111111111111</div>
    <div style="font-size: 30px; color: red; background-color: green;">1111111111111</div>
    <div style="font-size: 30px; color: red; background-color: green;">1111111111111</div>
    <div style="font-size: 30px; color: red; background-color: green;">1111111111111</div>
    <div style="font-size: 30px; color: red; background-color: green;">1111111111111</div>
    <div style="font-size: 30px; color: red; background-color: green;">1111111111111</div>
    <p style="font-size: 40px; color: yellow;">ghhgjhjgghjghjghjhgjhjghjg</p>


</code></pre> 
 <p>2.    </p> 
 <pre><code>


    <meta charset="UTF-8"/>
    <title/>


    <!--
      css      :
      1.    
      2.    
    -->
    <style>
        div{
           color: purple;
           font-size: 40px;
           background-color: yellowgreen;
        }

        p{
            color: deeppink;
            font-size: 50px;
        }
    </style>

    <link href="css/index.css" rel="stylesheet"/>


   <div style="color: hotpink; background-color: red;">1111111111111111111</div>
   <div>22222</div>
   <div>2233333</div>
   <div>4444</div>
   <div>5555</div>
   <p>222222222222222222222222</p>
   <p>222222222222222222222222</p>
   <p>222222222222222222222222</p>
   <p>222222222222222222222222</p>


</code></pre> 
 <p>3.    </p> 
 <pre><code>


    <meta charset="UTF-8"/>
    <title/>
    <link rel="stylesheet" href="css/index.css"/>


   <div>111111111111111111111</div>
   <p>22222222222222222222222</p>






index.css
div{
    color: brown;
    font-size: 50px;
}

p{
    background-color: yellow;
    color: darkgreen;
    font-size: 39px;
}
</code></pre> 
</article>
                            </div>
                        </div>