学习 Tailwind CSS 的先决条件
在本文中，我们将介绍您在开始之前需要了解的最低 CSS 知识 顺风 CSS .我假设你已经知道 HTML基础 .但如果你不这样做，我已经写了一个博客系列涵盖了 这里 .
什么是 CSS？
CSS代表 层叠样式表 . CSS 不是一种编程语言。 CSS 将样式应用于 HTML 元素并更改它们在屏幕上的外观。
CSS 语法
下面是一个 CSS 语法的例子：
h1{
红色;
字体大小：16px；
}
因此，让我们分解它以更好地理解它。我们有 h1 哪一个是 选择器 .选择器指向我们要设置样式的元素，在这种情况下，所有 h1 元素。花括号内的每一行 {} 包含一个 宣言 （每个声明包含 适当的价值; ）。第一个声明有 财产 颜色 调成 价值 红色的 .第二个声明具有属性 字体大小 设置为值 16像素 .分号 ; 出现在每个声明的末尾。
使用上面的 CSS 代码，所有 <h1> 页面内的元素将获得红色的文本颜色和 16 像素的字体大小。
如何使用 CSS？
让我们在桌面上创建一个名为“website”的文件夹，然后用文本编辑器打开它。在文件夹中，创建一个名为 索引.html .
将以下代码添加到 索引.html 页：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>零 CSS 到 Tailwind CSS</title>
</head>
<body> </body>
</html>
我们可以通过三种方式将 CSS 添加到我们的页面中：
内联 CSS
在这个方法中，我们设置 风格 将元素上的属性添加到我们想要的 CSS 声明中。
<h1 style="color:red;">Code Pro Max</h1>
插入上面的 <h1> 里面的元素 <body> 页面并检查结果。
不建议使用内联 CSS，因为您需要指定每个元素所需的所有样式，并且代码没有可重用性。
内部 CSS
我们可以在页面的 head 元素中插入一个内部 CSS。我们用一个 <style> 标签。让我们在页面中添加一个段落并使用内部 CSS 对其应用样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>零 CSS 到 Tailwind CSS</title>
<style>
p{
颜色：绿色；
}
</style>
</head>
<body>
<h1 style="color:red;">Code Pro Max</h1>
<p>这是 Code Pro Max 的主要网站。</p>
</body>
</html>
您可以看到内部 CSS 语法有点不同，这是因为应用的 CSS 声明需要一个选择器来指向一个元素。语法的第一部分 ( p ) 指向所有 <p> 页面内的元素。然后是我们在花括号内的所有 CSS 声明 {} 将被应用于 <p> 元素。
此方法的局限性在于，您必须重新创建 <style> 每个页面的部分，您必须在其他页面上重用样式。
外部 CSS
外部 CSS 方法与内部样式类似，但样式不同，单独编写 .css 文件，以便更容易在您需要的任何页面上重用样式。
在后面添加以下内容 <p> 我们的元素 索引.html 文件：
<h2>博客文章</h2>
<h3>最近的博客文章</h3>
创建一个名为 样式.css 并编写以下代码：
h2{
颜色：蓝色；
}
h3{
字体大小：50px；
}
我们编写的 CSS 样式设置了所有 <h2> 标记的文本颜色 蓝色的 并应用字体大小 50 像素 对所有人 <h3> 元素。
但是我们如何才能告诉 html 页面这个外部 CSS 文件呢？我们通过添加一个 <link> 里面的元素 <head> 我们 HTML 页面的部分。
<link rel="stylesheet" href="style.css">
这 相对 属性指定之间的关系 索引.html 文件和链接的文档（ 样式.css ) 我们将其设置为 样式表 .这 链接 属性指向链接文档的位置。
检查结果，我们可以看到外部 CSS 文件样式已被应用。
外部 CSS 方法的好处是，如果我们添加另一个页面，并且我们希望将相同的样式应用到我们的 <h2> 和 <h3> 标签，我们只需要导入 样式.css 该页面上的文件。
Tailwind CSS 使用一个外部 CSS 文件，其中包含我们可以应用于页面元素的所有 CSS 类。
Chrome 开发者工具 (DevTools)
让我们使用 Chrome 开发者工具 (DevTools) 检查应用于我们页面的样式。我们可以使用 Chrome DevTools 来检查应用于页面元素的 CSS。 右键点击 在页面上并选择 检查 .如果它在右侧打开，请单击右上角的“三点图标”并将“Dock 侧”更改为底部。
在“元素”选项卡下，单击任何元素，这将在样式选项卡下的右侧显示应用于元素的样式。
如果你想调试你的页面或者某些东西没有按预期工作，Chrome DevTools 将帮助你更快地找到问题。
CSS 选择器
到目前为止，我们只介绍了一种类型的选择器，即根据元素的标签名称选择元素，但我们也可以使用其他方式。
类型选择器
我们在示例中使用了类型选择器。我们将元素的标签名称写为选择器。这个例子将改变所有 <h1> 元素的字体大小为 40 像素 ：
h1{
字体大小：40px；
}
保存文件并检查结果。
我们从 Chrome DevTools 中注意到，内联 CSS 和外部 CSS 样式都已应用于我们的 <h1> 标签。我们也可以看到文件名 样式.css CSS来自。 Chrome DevTools 允许我们在实际将它们添加到我们的代码之前修改应用的样式并尝试不同的样式。
如果我们想对一种类型的所有元素应用相同的样式，则类型选择器很有用。但是假设我们有两个 <h1> 元素，我们想将其中一个的字体大小设置为 40 像素 另一个 20 像素 .
添加以下内容 <h1> 在我们现在拥有的标签下。
<h1>从未停止学习</h1>
保存文件并检查结果。
可以看到字体大小 40像素 被应用于这两个 <h1> 标签，但我们只想要第一个 h1 第二个 h1 我们希望字体大小为 20像素 .我们需要另一种方法来定位特定元素并对其应用样式。
ID 选择器
我们可以设置一个独一无二的 ID 属性，然后使用 id 选择器对其应用 CSS。为了让浏览器知道这是一个 id 选择器而不是类型选择器，我们在 id 前面加上一个 # 符号。所以首先，让我们添加两个不同的 id 到我们的 h1 元素。
<h1 id="mainHeading" style="color:red;">Code Pro Max</h1>
<h1 id="subHeading">从未停止学习</h1>
现在每一个 h1 元素有一个 id 属性，我们可以通过将选择器设置为来定位第一个 #mainHeading 第二个通过将选择器设置为 ＃副标题 .我已经删除了以前的 h1 选择器，因为现在我们有一个 id 选择器。
#主标题{
字体大小：40px；
}
＃副标题{
字体大小：20px；
}
保存文件并检查结果。
你可以看到每个 h1 元素通过 id 选择器获得了自己的样式。
id 选择器解决了类型选择器的问题，但是如果我们有一个包含 5 种不同类型 <p> 标签，我们想将其中两个显示为红色，其中两个显示为橙色，另一个显示为蓝色？如果我们想使用 id 选择器，我们将重复自己。
在 - 的里面 索引.html 文件，之后 h3 元素，添加以下段落。
<p id="paragraph-red-1">第一段</p>
<p id="paragraph-red-2">第二段</p>
<p id="paragraph-orange-1">第三段</p>
<p id="paragraph-orange-2">第四段</p>
<p id="paragraph-blue">第五段</p>
对于 CSS，我们需要添加以下内容来定位每个段落并设置它们的颜色：
#paragraph-red-1{
红色;
}
#paragraph-red-2{
红色;
}
#paragraph-orange-1{
颜色为橙色;
}
#paragraph-orange-2{
颜色为橙色;
}
#paragraph-蓝色{
颜色：蓝色；
}
我们得到了它的工作，但我们有相同的 红色; 或者 颜色为橙色 多次应用。如果我们有 20 个以上的段落以红色显示，我们必须在我们的 CSS 文件中创建 20 个以上的样式来定位它们。重复相同样式的原因是我们不能拥有相同的样式 ID 另一个元素的属性。这 ID 属性的值在每个页面上必须是唯一的。这是类选择器可以提供帮助的地方。
类选择器
如果我们有多个使用相同样式的元素，我们将使用类选择器。在上一个示例中，我们有多个使用相同颜色的段落。为了使用类选择器，我们首先需要添加一个 班级 属性到我们的元素。我将首先删除段落中的所有 id，然后为它们添加一个类。
<p class="text-red">第一段</p>
<p class="text-red">第二段</p>
<p class="text-orange">第三段</p>
<p class="text-orange">第四段</p>
<p class="text-blue">第五段</p>
这 班级 多个元素的属性值可以相同。在我们的 CSS 中，删除之前的样式并使用类选择器添加以下样式。为了告诉浏览器我们正在定位一个元素的类，我们需要在类名前加上一个点“ . ”在我们的 CSS 文件中。
.text-red{
红色;
}
.text-橙色{
颜色为橙色;
}
.text-蓝色{
颜色：蓝色；
}
保存文件并检查结果
结果是一样的，但现在我们的 CSS 行数更少了，我们可以添加类 文字红色 , 文本橙色 ， 或者 文字蓝色 到任何其他元素并更改其文本颜色。使用类选择器的另一个优点是我们可以将多个类添加到由空格分隔的元素中，并将所有样式应用于元素。
让我们在末尾添加以下类 样式.css 文件：
.text-小{
字体大小：20px
}
.text-medium{
字体大小：40px
}
.text-大{
字体大小：60px
}
将第二个类添加到以空格分隔的任何段落以更改它们的字体大小。
<p class="text-red text-large">第一段</p>
<p class="text-red text-medium">第二段</p>
<p class="text-orange text-small">第三段</p>
<p class="text-orange text-large">第四段</p>
<p class="text-blue text-small">第五段</p>
这会将两种样式都应用到我们的段落中。
Tailwind CSS 与类一起工作，我们使用 班级 属性。
我们可以使用其他选择器，但这些是重要的选择器，对于 Tailwind CSS，我们大部分时间都在使用类。你可以检查 这个 链接或 这个 一个关于 CSS 选择器的更多信息。
CSS 注释
您还可以在 CSS 中添加注释。如果您想解释您编写的 CSS，这很有用。注释只会在您的代码中可见，不会显示在浏览器中或影响页面的布局。 CSS 注释以 /* 并以 */ ：
/* 此文本不会在浏览器中显示或影响页面布局 */ /* 我们可以有
多行
注释
*/ /*
不会应用评论中的 CSS 样式
.text-非常大{
字体大小：100px；
}
*/
CSS 属性列表
在我们目前介绍的示例中，我们只有两个基本的 CSS 属性 color 和 font-size，但是我们可以使用很多属性。你可以前往 w3schools.com/cssref 并检查代码示例中可用的所有 CSS 属性。我没有介绍这些内容的原因是 Tailwind CSS 以不同的方式使用它们。我们使用 Tailwind CSS 类将样式应用于我们的元素。
下一步是什么？
现在您已经了解了 CSS 的工作原理，您可以开始安装 Tailwind CSS 并开始了解它提供的 CSS 类。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/1806/38273017
标签：字体大小,Tailwind,元素,我们,样式,先决条件,选择器,CSS From： https://www.cnblogs.com/amboke/p/16640228.html