给元素加样式

• <标签 属性名=“属性”>
• style标签添加样式,如下：

 <h1>再谈《战争与和平》：女性人物的美与罪</h1>

 <h1 style="color:red;
    font-size:30px;
    text-decoration:underline;">再谈《战争与和平》：女性人物的美与罪</h1>

分离内容和样式、元素分类和命名

• 标签选择器

h1、h2 标签选择器   {属性；}
<style>
        h1 {     
        color:red;
        font-size:30px;
        text-decoration:underline;
        }
        a {
        color:blueviolet;
        font-size:20px;
        }
        h2 {
        text-align:center;
        }
        p::first-line {
        letter-spacing: 2px;
        word-spacing: 4px;
        }
       
    </style>

<h1>再谈《战争与和平》：女性人物的美与罪</h1>

 <img class="avatar"src="images/001.jpg" alt="">
<span class="time"> 2018-03-05 20:44:08</span>
<br>
<img class="art-img" src="images/002.webp" alt=""><br>

<span class="note">海伦（BBC版）</span>

• 类选择器
  用class分类 .类选择器 .time、.art-img

<style>
 .time {
        color:gray;
        }
        .note {
        color:red;
        }
        .avatar {
         border-radius: 50%;
        }
        a.art-img {
         width:300px;
        }
</style>

<span class="time"> 2018-03-05 20:44:08</span>

<img class="art-img" src="images/002.webp" alt=""><br>

 <span class="note">海伦（BBC版）</span>