外联样式表
使用这种内嵌的方式定义的样式,只能用在定义它的这个页面上,如果需要重复的使用定义的样式,你得把它们复制到每一个想要使用它的页面上 ..
还有一种应用样式的方法可以解决这种重复使用样式的问题 .. 就是去给页面链接一个外部的样式表 .. 在这人样式表文件里,你可以定义页面需要的样式 .. 然后在想要使用这些样式的页面上,把这个样式表的位置告诉它们就行了 ..
在项目的 styles 目录的下面,添加一个样式表 .. 名字是 style.css .. css 文件的扩展名就是 css .. 然后在这个样式表文件里,去定义想要的样式 ..
比如我们还是想去设置一下页面上的大标题的样式 .. 用一个 h1 作为这个样式的选择器 .. 先去设置一下文字的颜色 .. 用一个 teal .. 青色 .. 再设置一下文字的大小 ..
保存一下这个样式表 .. 再打开想要使用这个样式表里定义的样式的文档 ... 一般我们可以在文档的 head 元素里面,去链接想要使用的样式表 ..
用一个 link 标签 .. 先在它上面添加一个 rel 属性,描述链接的东西跟这个文档之间的关系 .. rel 就是 relationship .. 也就是关系的意思 .. 这里要链接的是个样式表,所以把它的值设置成 stylesheet ..
链接的东西的位置可以放到 href 属性里面 .. 这里就是之前创建的样式表的位置 .. 是在相对于这个 index.html 文档的 styles 这个目录的下面,名字是 style.css ..
保存一下 .. 你会看到页面上的大标题的样式会有一些变化 .. 因为这个页面上的这个大标题里的文字使用了我们在 style.css 这个样式表里设计的样式 ...