首页 > web前端 > css教程 > 正确学习CSS

正确学习CSS

DDD
发布: 2024-10-30 16:33:03
原创
355 人浏览过

正确学习CSS

Learn CSS Properly
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。极客们的极客们:
Learn CSS Properly
GeeksforGeeks 是一个领先的在线平台,为全球数百万开发人员和技术爱好者提供计算机科学和编程资源,其中包含大量课程、线下课堂项目、教程、文章、编码挑战、练习题等等。

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

访问 GeeksForGeeks

2。 W3学校:
Learn CSS Properly
W3Schools 是一所针对 Web 开发人员的学校,涵盖 Web 开发的所有方面:HTML 教程。 CSS 教程。 JavaScript 教程。 PHP 教程。

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

参观 W3Schools

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

TailwindCSS:
Learn CSS Properly
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中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板