正确学习CSS

正确学习CSS

CSS（层叠样式表） 由 Web 开发人员用来设计网站样式。

当我开始学习 Web 开发时，我对 CSS 感到非常困惑。我遇到的最大困难是记住属性和维护代码。在这篇文章中我将帮助初学者避免我在学习时所犯的错误。

1。练习
编程是你无法完全记住的东西。一切都是通过练习来理解它。
当我学习 CSS 练习时，有点困难，因为我不能很好地记住东西。我试图避免“复制和粘贴”，因为我认为这会毁掉我的技能。最后我完成了 CSS 代码的复制和粘贴。现在我并不是说复制和粘贴会让事情变得更好。但是，如果您尝试了解运行复制并粘贴的 CSS 代码时发生的情况。这比记住 CSS 属性要好得多。

（例如）如果您想将按钮设计为圆形、黑色和白色文本，并希望它在悬停时交换背景和文本颜色。你可以通过一段 CSS 代码来完成类似的操作：

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton:hover{
    background-color: #ffffff;
    color: #000000;
}

如果不了解它的作用，它就没有多大帮助。
如果你明白这一点：

• 边框：2px实线；为按钮添加了 2 像素实心边框，
• border-radius: 16px 使其圆润 16 像素，
• 背景颜色：#000000；将背景设为黑色，
• 颜色：#ffffff；将文本设为白色，:hover,
• 背景颜色：#ffffff；
• 颜色：#000000；悬停时背景变为白色，文本变为黑色。

您下次将能够编写按钮，而无需复制粘贴，更好的是，您将对边框、边框半径、背景颜色、颜色和:hover有基本的了解，并且能够在更多方面使用它不仅仅是一个按钮。这就是为什么你应该理解你复制粘贴的代码。

资源：
从哪里复制和粘贴代码也很重要。因为作为初学者，您需要对代码进行良好的解释。

有很多网站可以很好地完成这项工作，但我推荐：

1。极客们的极客们：

GeeksforGeeks 是一个领先的在线平台，为全球数百万开发人员和技术爱好者提供计算机科学和编程资源，其中包含大量课程、线下课堂项目、教程、文章、编码挑战、练习题等等。

这个平台提供的代码有很好的解释，是我个人最喜欢的。

访问 GeeksForGeeks

2。 W3学校：

W3Schools 是一所针对 Web 开发人员的学校，涵盖 Web 开发的所有方面：HTML 教程。 CSS 教程。 JavaScript 教程。 PHP 教程。

这个网站也和“Geeks For Geeks”非常相似。但解释技术不同所以这取决于你是否舒服。

参观 W3Schools

代码可维护性：
在学习 Web 开发时，第二件最烦人的事情是我的 CSS 代码变得太大。为复杂的网站项目维护 CSS 代码变得越来越困难。多亏了像 TailwindCSS 这样的框架，你总是不必编写原始 CSS。

TailwindCSS：

Tailwind CSS 是一个开源 CSS 框架。与 Bootstrap 等其他框架不同，它不为按钮或表格等元素提供一系列预定义的类。相反，它创建了一个“实用”CSS 类列表，可用于通过混合和匹配来设置每个元素的样式。

TailwindCSS 使 CSS 代码像我们之前的按钮示例一样：

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton:hover{
    background-color: #ffffff;
    color: #000000;
}

进入以下课程：

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton :hover{
    background-color: #ffffff;
    color: #000000;
}

可以将其添加到您的 HTML 按钮元素中，例如：

border-2 rounded-md bg-black text-white hover:bg-white hover:text-black

对于像 ReactJS 这样的其他框架，我会为初学者推荐 TailwindCSS。它更容易学习和在生产中使用。它使您的 CSS 代码更加可维护。您还可以将它与 ReactJS 一起使用，从而提高代码效率和可维护性。 TailwindCSS 也有非常详细且易于理解的代码解释的文档。

访问 TailwindCSS

结论：
虽然学习CSS可能很困难，但是在理解它的同时经常练习它会有很大帮助。

不要只是复制粘贴代码，还要理解它的作用，因为这是学习 CSS 的正确方法。

以上是正确学习CSS的详细内容。更多信息请关注PHP中文网其他相关文章！