Question

所以我最近开始使用Free Code Camp来学习Web开发，并且我已经在前端开发认证部分达到了我的第一个项目。

我只是想知道，＆＃34;纠正＆＃34; HTML / CSS / jQuery看起来像什么？

到目前为止，该网站一直在教我，它向我展示了多种方法来实现颜色，字体，按钮，属性，元素，以及通过HTML，CSS和jQuery提供的所有好东西。< / p>

但是有没有首选的地方放置东西？

例如，假设我想将段落字体颜色设置为蓝色。我：

1）在HTML中

<p class="text-primary">Hello World</p>

2）在CSS中

<style>
   .font-blue {
      font-color: 00F;
   }
</style>

3）在jQuery中

<script>
   $(document).ready(function() {
      $(#h2numb3).css("color", "red");
   });
</script>

任何人都可以给我一个明确的答案，或者社区已经决定了什么＆＃34;更喜欢＆＃34;，什么应该是HTML，CSS和jQuery？或者只是基于独特的用例场景？例如，如果要将所有h2更改为字体等宽，请在CSS中执行，但如果您特别想要定位标题，请在要更改的h2的start元素中执行此操作吗？

或者是否有更具体的内容，例如＆＃34;屏幕上出现的单词用HTML表示，影响外观的东西用CSS表示，jQuery用于操作和东西。＆＃34;

顺便说一下，我在此之前的段落中添加的示例是我基于HTML，CSS和jQuery迄今为止所学到的内容。

Answer 1

在软件开发中，关键的咒语之一就是将你的顾虑分开。

撰写网页时，您的疑虑是：

结构由您的HTML定义。 HTML应该只定义页面上的元素，并以语义方式进行。正文包含部分，部分包含标题，段落和表格。表格包含输入等。

样式由CSS定义。在这里，您可以描述事物的样子。标题是大的，蓝色的并且居中。一个段落是小字体，衬线字体，深灰色。与文章相关的图像是浮动的。

页面的功能方面是使用JavaScript（可能还有其他一些技术）定义的。在这里，您可以描述单击按钮或将元素从一个位置拖动到另一个位置时发生的情况。

将这些问题分开意味着你可以改变一个而不必改变其他问题（在某种程度上）。如果要更改所有段落的样式，可以更改p标记和中提琴的CSS，更改所有段落样式。想象一下，如果你在HTML中定义每个段落的样式，则分别为每个元素！如果你想改变它们，那真是一场噩梦。

同样，如果您想要这样做，只要有人将鼠标悬停在链接上，您就会在工具提示中显示链接页面的摘要，您可以在JavaScript中执行此操作。您编写单个事件处理程序，并分配给每个链接。然后，当您想稍后修改它时，它是一个单独的事件处理程序，您可以为每个链接更改它。

这是一个简化的解释，但我希望能让您深入了解为什么“关注点分离”是一个重要的指导原则。

你的评论已经接近了：

还是有一些更具体的东西，比如“屏幕上出现的单词用HTML表示，影响外观的东西用CSS表示，jQuery用于操作和东西。”

Answer 2

一般来说，请避免使用#1。

#2没问题，但您想查看外部样式表。当你有一个包含所有样式的.css扩展名的单独文件时，那就是这样。

当您使用javascript或在您的示例jQuery中使用

#3。您不必像示例中那样应用CSS，但有时它是唯一的选择。

现在，为了解决您的语言，没有＆＃34;正确的＆＃34;做这些事情的方法。有最好的做法，但也有一些情况，每个都是合适的。

如果您刚刚开始学习，请坚持使用外部无助，并在适当时使用其他方法，否则您似乎别无选择。

使用外部样式表的基础知识是有一个文件，名称无论你想要什么，但通常styles.css或main.css包含你的样式：

.font-blue {
    font-color: 00F;
}

在你的html的head部分中，您可以通过以下方式链接到它：

<link rel="stylesheet" href="/css/main.css">

这样您可以按如下方式应用样式：

<p class="font-blue"></p>