构建网站需要了解的所有 CSS 属性

2021-09-09 10:37:41 浏览数 (61)

无论你是刚开始接触 CSS 还是有很多使用它的经验，你都必须承认有很多 CSS 属性。而在那片汪洋大海中，很容易迷茫。你正在从 StackOverflow 复制和粘贴代码，直到发现一个有效的代码。但这将如何在更大范围内发挥作用？为什么它首先起作用？大多数时候，你会为答案而担忧。你只需专注于最终产品。一些 CSS 功能在构建网站时很重要，但它们很难被发现。本文旨在帮助你解决在开发网站时可能遇到的最常见的 CSS 问题。让我们来看看你不能忽略的某些属性。

1. display：flex；

是否有必要将元素居中？

你可能会通过谷歌搜索找到数十种替代答案；但是，大多数情况下你只需要一个。

.your-class-name {
  display: flex;
  justify-content: center;
  align-items: center;
}

​display：flex；​将一个接一个地在水平行中对齐您的子元素。要使其成为垂直行，请添加 ​flex-direction: column; ​到代码的末尾。

你的主轴由 ​flex-direction​ 定义。行是默认值。

如果你使用 ​justify-content: center;​，则主轴上的元素将对齐。对于我们的代码示例，这表示项目将水平居中。

你的交叉轴由 ​align-items​ 定义，这意味着你的元素垂直居中。

这里可以传递很多属性，但我只强调一个： ​justify-content: space-between; ​因此，行的开头或结尾将没有边距。

2.margin

此属性将确定某些元素之间的距离。

.your-class-name {
  margin-top: 16px;
  margin-right: 12px;
  margin-bottom: 16px;
} 
// shorthand
.your-class-name {
  margin: 16px 12px;
}

您可以使用 ​margin-top​、​margin-right​ 等直接将属性附加到边上，或者你可以使用单个边距属性来覆盖所有内容：

margin: {{ top }} {{ right }} {{ bottom }} {{ left }};

如果省略 ​bottom​，它将继承 ​top ​（查看我们的示例）！如果省略 ​left​，它将继承 ​right​。

3. padding

首次出现时，填充似乎与边距相似。

语法与边距相同，速记也相同。

那么，我们为什么需要它？

考虑一个物理手提箱的情况。你想记下这个案子。

但是，你不想从左上角开始写作。你应该稍微缩进你的内容。

填充将用于此。我们元素的内部受到填充的影响。

但是，如果你有两个彼此靠近的行李并希望在它们之间留出空间，则可以使用边距。

4. background-color

这是一个相对简单的方法，但它是必须的。此属性适用于大多数 HTML 组件。

background-color: blue;
background-color: #232323;
background-color: rgb(255, 255, 128);
background-color: rgba(255, 255, 128, 0.5);

属性的范围可能从基本颜色名称到其 HEX 值和 RGB 值（甚至 HSL）。

RGBA 令人着迷，因为它允许您设置不透明度和颜色。你看到0.5了吗？这意味着将有 50% 的透明度。

5.color

颜色与背景颜色相似，不同之处在于它会影响文本的颜色。其他一切都一样，甚至是透明度。

6.opacity

但是我们可以让任何事情变得透明！

opacity: 0.1; // 10% visibility
opacity: 0.9; // 90% visibility

这对于禁用状态或有趣的效果很有用。

7.width

这是一个很难的问题。大多数时候你不想有固定的宽度。ni的设计应该适合移动设备，你可以使用边距和填充来实现。

但是，有时你必须得到修复。那么您想将图标的大小设置为 24 像素吗？

另外，看看这篇文章。缩小页面进行探索。你会注意到它并没有一路走来。

因为整个页面都包含 ​max-width​ 属性，所以就是这种情况。将其环绕在你的网站上是个好主意。

8. height

由于我们滚动方向的性质，高度比宽度容易得多。

但是，你应该尽可能少地使用预设高度。你可以执行此操作的一个地方是你的标题。

还存在所有其他限定符，例如 ​min-height​ 和 ​max-height​。

9.cursor：pointer；

将鼠标悬停在此页面上的任何按钮上。你能看到光标是如何变成一只小手的吗？

对此的解释是游标：指针。只要能让他们做某事（按钮、链接等），就应该使用它。

10. font-size

这个易于使用并控制文本大小。如果你是一个完全的初学者，我建议坚持使用 ​px​。

如果你想深入一点，看看 ​rem​。简而言之，你以 ​px​ 为单位设置默认字体大小，所有其他字体都与该数字成比例。

例如，如果你的基础值为 ​16px​，则 ​2rem ​将为 ​32px​。

11. font-family

你是否正在寻找各种字体？​Google Fonts​ 很棒，选择一个，将它包含在您的 ​index.html​ 中，并将其名称添加到 ​font-family​ 中是轻而易举的。

12.：hover

这将在悬停时为某个元素添加任何效果。

.your-class-name:hover {
  cursor: pointer;
}

我们的示例将光标更改为指针。

结论

如果我告诉你，你会用这 12 个属性解决大部分 CSS 问题呢？

当然，根据你的情况，你可能需要更多，或者你需要更深入地研究其中一些。

但这足以构建一个外观稳固的网站。


CSS

1 人点赞