样式

我们看到了不同的 HTML 元素的绘制是不同的。一些元素显示为块，一些则是以内联方式显示。我们还可以添加一些样式，比如使用<strong>加粗内容，或使用<a>使内容变成蓝色，并添加下划线。

<img>标签显示图片的方式或点击标签<a>时跳转的链接都和元素类型紧密相关。但元素的默认样式，比如文本的颜色、是否有下划线，都是可以改变的。这里给出使用style属性的示例。

<p><a href=".">Normal link</a></p>
<p><a href="." style="color: green">Green link</a></p>

样式属性可以包含一个或多个声明，格式为属性（比如color）后跟着一个冒号和一个值（比如green）。当包含更多声明时，不同属性之间必须使用分号分隔，比如color:red;border:none。

文档的很多方面会受到样式的影响。例如，display属性控制一个元素是否显示为块元素或内联元素。

This text is displayed <strong>inline</strong>,
<strong style="display: block">as a block</strong>, and
<strong style="display: none">not at all</strong>.

block标签会结束其所在的那一行，因为块元素是不会和周围文本内联显示的。最后一个标签完全不会显示出来，因为display:none会阻止一个元素呈现在屏幕上。这是隐藏元素的一种方式。更好的方式是将其从文档中完全移除，因为稍后将其放回去是一件很简单的事情。

JavaScript 代码可以通过元素的style属性操作元素的样式。该属性保存了一个对象，对象中存储了所有可能的样式属性，这些属性的值是字符串，我们可以把字符串写入属性，修改某些方面的元素样式。

<p id="para" style="color: purple">
  Nice text
</p>
<script>
  let para = document.getElementById("para");
  console.log(para.style.color);
  para.style.color = "magenta";
</script>

一些样式属性名包含破折号，比如font-family。由于这些属性的命名不适合在 JavaScript 中使用（你必须写成style["font-family"]），因此在 JavaScript 中，样式对象中的属性名都移除了破折号，并将破折号之后的字母大写（style.fontFamily）。