大家好，又和大家见面了，这节课我们讲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;"><!</span><span style="color: #ff00ff;">DOCTYPE </span><span>html<span style="color: #0000ff;">></span> <span style="color: #008080;user-select:none;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span> <span style="color: #008080;user-select:none;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #008080;user-select:none;"> 4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">></span> <span style="color: #008080;user-select:none;"> 5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>HTML<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #008080;user-select:none;"> 6</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #008080;user-select:none;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #008080;user-select:none;"> 8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p"</span><span style="color: #0000ff;">></span>hi!<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #008080;user-select:none;"> 9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>hi!<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #008080;user-select:none;">10</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #008080;user-select:none;">11</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></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;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span> <span style="color: #008080;user-select:none;">16</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></pre> </div> <p>style是用来在HTML的内部样式表</p> <p>外部样式表怎么用</p> <p>HTML代码</p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>HTML<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> link大部分的用途是用来引用css！ </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</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;"><!-- 文件名 --></span><span style="color: #0000ff;">"> </span><span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p"</span><span style="color: #0000ff;">></span>hi!<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>hi!<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></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>