造型简介
在过去的几周里，我们讨论了如何将您需要的所有信息放到网页上。但是，如果您一直在跟踪并编写代码，您可能会注意到您的页面看起来不太吸引人。事实上，他们甚至可能看起来很糟糕……
到目前为止，我们还没有向我们的网页添加任何样式。样式是我们为浏览器提供的规则，告诉它我们希望 HTML 元素在页面上的外观。我们可以更改大小、字体、颜色、位置、对齐方式和许多其他内容！但如何？
添加我们的第一个样式
此文本现在是蓝色的！
就是这样！如果您好奇，请将其复制并粘贴到文档中，然后在浏览器中打开它。你看见什么了？文字现在是蓝色的！不错！
那么，这是怎么回事？我们用段落元素包围文本内容，并为该段落元素赋予样式属性。请注意开始
标记中的 style=。在属性值中，我们将颜色样式指定为蓝色值：“color: blue;”。
现在，这很酷，但是如果我们想让文本在页面上居中怎么办？
此文本为蓝色且居中！
我们只需更改 style 属性中的值！强大的！但是该值属性发生了什么？我们以前没有见过这种语法！这就是CSS！但是等等，如果我们正在编写 HTML，为什么它会在这里？
我们是！但 HTML 并不是为样式而设计的；它是为样式而设计的。它是为结构和语义而设计的（我们将在后面的文章中介绍）。如果我们想改变页面的外观，我们必须修改样式表。默认情况下，我们的浏览器决定如何使用所谓的“用户代理样式表”来解释 HTML 中的信息。到目前为止您所看到的字体大小和颜色都是基于此！当我们将 CSS 添加到样式属性时，我们定义的样式将覆盖用户代理样式表，而我们未定义的任何样式将回退到该表。 CSS 代表层叠样式表，这就是原因！
这太棒了。现在我们可以改变页面的外观，可能性是无限的。但想象一下，如果我们想要更多定制：
欢迎来到我的网站！
希望您今天过得愉快！
哇…只有两行文本就有很多代码…而且很难快速了解发生了什么！这是一个问题，因为如果您稍后尝试返回编辑此信息，那么您将花费比如下所示更长的时间：
欢迎来到我的网站
祝您度过愉快的一天！
我们如何解决这个问题？
CSS 简介
为了防止 HTML 变得混乱，我们将所有样式移至 .css 文件中！对于小型项目，我们通常称之为 style.css。除了整理我们的代码之外，将样式移动到新文件中还实现了称为关注点分离的编程概念。这意味着我们希望将代码分割成其功能组件。我们的代码不应该尝试做所有事情，而应该分解成更小的部分，只做好一件事！
在此示例中，我们没有使用一个文件来构建内容并对其进行样式设置，而是使用两个文件：一个用于构建内容，另一个用于设置样式。忧虑分开！那么，这可能是什么样子？
h1 { 字体大小：36px； 字体粗细：500； 文本对齐：居中； 文本装饰：下划线； 底部填充：16px； 颜色：#b0b1b2； 不透明度：0.7；}p { 字体大小：16px； 字体粗细：300； 文本对齐：左对齐； 左内边距：100px； 背景颜色：黄色；}
啊，好多了！现在，我们的 HTML 文件不再因所有这些样式而混乱！您在上面看到的是两个 CSS 规则集。规则集由一个选择器和两个大括号组成，其中包含有关如何设置选择器样式的所有信息。在此示例中，我们看到的两个选择器是 h1 和 p。这意味着此处列出的所有样式将分别应用于任何 HTML
或
元素！
我们可以对任何类型的元素执行此操作！事实上，我们可以通过多种方式使用 CSS 选择器来选择对象，但我们将在另一周再讨论。现在，只要知道如果您输入元素类型，您就可以在大括号内添加样式！
我们已经定义了一些样式，但是我们如何确保我们的浏览器知道将它们应用到哪个文件？
链接元素
我们要学习的第一个
元素是 元素。它有一些用例，但出于我们的目的，我们将使用它将 style.css 链接到 index.html。换句话说，这个元素告诉我们的浏览器该页面使用哪个样式表。实际上，它看起来像这样：
我的网页 ...
就是这样！我们的 style.css 链接到我们的 HTML 文档，并且样式将被应用。
让我们分解这个链接元素。首先，它是一个自关闭元素，因此我们不需要关闭标签，并且它内部不包含任何内容。该元素有两个必需的属性：href 和 rel。这些是必需的，因为 元素将外部资源链接到 HTML 文档。因此，我们需要告诉浏览器 1）该资源在哪里以及 2）该资源的用途。 href 代表“超文本引用”，决定了位置，而 rel 或关系决定了用途！
需要注意的是，使用 href 属性，您提供的路径可以是绝对路径，也可以是相对路径。这意味着您可以给出根目录中的文件路径的位置，例如 /Users/username/Documents/project/style.css （绝对）。或者您可以相对于您正在处理的文件的位置来执行此操作，如上所述。文件名前的 ./ 表示浏览器应在与 HTML 文件相同的文件夹（或目录）中查找 style.css。您还可以在此处添加 URL；许多内容交付网络允许您使用预制样式表，您也可以使用 元素连接它们！
挑战
好了，今天我们已经讲了很多了。现在是时候付诸实践了。将您在上周的挑战中创建的“关于我”页面到一个名为 style.css 的新文件。 （确保将其放在与 HTML 文件相同的文件夹中！）
然后，为每个元素创建样式。尝试使用您可以分配的不同样式，直到您的“关于我”页面看起来更漂亮！ （注意：您还可以定位 和
元素！）
有关可以应用的样式的完整列表，请查看 Mozilla 开发者网络。他们托管 Web 开发语言的完整文档：HTML、CSS 和 JS！这是他们网站的链接。使用侧边栏中“参考”下的属性列表来看看有什么可能！
下周见！
以上就是设计我们的内容的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1629342.html
微信扫一扫 
支付宝扫一扫 
