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>