CSS初学者实用技巧有哪些

* { 
     border: 2px solid red;
}复制代码

.wave2 {
  width: 1400px;
}复制代码

h2 {
    color: #2ecc71 !important;
}复制代码

.square {
  background: #2ecc71;
  width: 25rem;
  aspect-ratio: 1/1;
}复制代码

.center {
    background-color: #2ecc71;
    display: block;
    margin: auto;
    width: 50%;
    height: 200px;
}复制代码

5. 如何在 CSS 中移除盒子中的额外填充

使用box-sizing: border-box将确保在为框设置宽度和填充时不会向框添加额外的填充。这将帮助您的布局看起来更好。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}复制代码

6. 如何使用 CSS 制作首字下沉

您可以使用首字母伪元素制作首字下沉。是的！你在报纸上看到的首字下沉。

选择适当的 HTML 元素并应用样式，如下所示：

 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia officia nisi
      veniam laboriosam? In excepturi ea inventore eligendi iusto! Incidunt
      molestiae quas molestias, nesciunt voluptate aut vitae odio corrupti
      quisquam laudantium aperiam consequuntur voluptas eum? Velit, eligendi ad
      laboriosam beatae corporis perferendis tempore consequatur sint rem quam,
      quae, assumenda rerum.
 
复制代码

p.texts::first-letter {
  font-size: 200%;
  color: #2ecc71;
}复制代码

7. 如何在 CSS 中将文本设为大写或小写

大写或小写字母不必直接来自您的 HTML。您可以在 CSS 中强制任何文本为大写或小写。

我希望将来会有 SentenceCase 和 tOGGLEcASE 的选项。但是你为什么要写一个文本 toOGGLEcASE 呢？

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
      minima.

LOREM IPSUM DOLOR SIT AMET
复制代码

.upper {
  text-transform: uppercase;
}

.lower {
  text-transform: lowercase;
}复制代码

8. 如何声明变量以保持 CSS DRY

变量？是的。您可以在 CSS 中声明变量。

当您声明变量时，您可以在许多其他样式中使用它们。如果您有任何要更改的内容，您只需更改该变量，结果将反映在使用它们的任何地方。这将有助于保持您的 CSS 代码干燥（不要重复自己）。

您可以通过将变量放置在根范围内来声明变量，以便它在样式表中是全局的。要使用您的变量，您可以将属性放在“var”关键字旁边的大括号内。

通常在样式表的顶部声明变量 - 即在重置之前。

:root {
  --text-color: hsl(145, 63%, 49%);
}

p {
  color: var(--text-color);
}复制代码

9. 如何使用:before和:after选择器向你的 CSS 添加额外的内容

CSS 中的:before选择器可帮助您在元素之前插入内容：

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
  minima.
复制代码

p.texts::before {
  content: "Some Lorem Texts: ";
  color: #2ecc71;
  font-weight: bolder;
}复制代码

选择:after器做同样的事情，但它在元素之后插入内容：

p.texts::after {
  content: " Those were Some Lorem Texts";
  color: #2ecc71;
  font-weight: bolder;
}复制代码

10. 如何使用纯 CSS 实现平滑滚动

您可以在网页上应用平滑滚动，而无需编写复杂的 JavaScript 或使用插件。因此，如果您有链接到网页上多个部分的锚标记并单击它们，则滚动是平滑的。

html {
  scroll-behavior: smooth;
}复制代码

关于“CSS初学者实用技巧有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。