给元素加样式
- <标签 属性名=“属性”>
- 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>