📌  相关文章
📜  每个 Web 开发人员都应该知道的 CSS 技巧

📅  最后修改于: 2021-10-19 08:26:56             🧑  作者: Mango

级联样式表……如果您是全栈开发人员或前端工程师，那么您肯定已经在您的应用程序中使用了 CSS。 CSS 在使您的网站美观和有吸引力方面发挥着重要作用。一个漂亮的用户界面总是能吸引用户，这成为用户在网站上停留很长时间的一个很好的理由。

学习 CSS 很容易，在您的 Web 应用程序中使用和使用它的属性也很有趣……但很少有人掌握它。当应用程序中的事物或样式没有按照他们希望的方式运行时，开发人员就会感到恼火。为您的应用程序编写 CSS 类似于解决难题。您尝试不同的属性，并在应用您自己的样式后检查您的应用程序的外观。

CSS-Tricks-That-Every-Web-Developer-Should-Know

您不需要为每个 HTML 元素编写样式。您的 CSS 使您的 HTML 代码更小。您会发现为您的网站创建漂亮的设计很容易。编写完美的 CSS 并不容易，但如果您是其中的高手，那么您肯定会节省大量时间。此外，您不必与设计师讨论此事。

在这篇博客中，我们将讨论一些 CSS 技巧，这些技巧将帮助您为您的项目编写好的 CSS。遵循这些技巧将使您成为更好的开发人员……

技巧 1：让你的按钮完美

按钮是每个 Web 应用程序的常见元素。无论您是需要提交表单、重定向到不同页面、购买商品还是发送电子邮件，在大多数情况下，您都将使用按钮来完成这些任务。不管什么按钮能吸引用户的注意力，让你的按钮完美是很重要的。不同的程序员 遵循不同的方法来获得相同的结果。类似的事情发生在 CSS 中。下面是一些让你的按钮变得完美的技巧……

  • 尺寸：区域至少应为40×40 像素，以使您的按钮可在移动设备上点击。
  • Box-shadow：添加 box-shadow为您的按钮创建深度效果。
  • 最小宽度：当您看到按钮中的文本太短时，添加最小宽度作为按钮的最小尺寸。要将文本居中对齐，请使用 CSS 中的text-align: center 属性。
  • 悬停：您悬停CSS 的属性以使您的按钮具有交互性。这将吸引用户的注意力。将鼠标悬停在按钮上时，悬停会更改按钮的颜色。它很容易吸引用户的注意力。
  • 过渡：添加颜色过渡，增加额外的触感。
  • 圆角：它是可选的，但圆角按钮也会吸引用户的注意力。
  • Line-height ：要使带有填充的按钮中的文本垂直居中，请使用line-height 。行高在单行的情况下设置行与带显示的元素之间的空间。下面给出一个例子…… 
//CSS
button {
 margin: 30px;
 line-height: 60px;
 min-width: 160px;
 font-family: Arial, sans-serif;
 background-color: #FD310F;
 border-radius: 4px;
 text-align: center;
 border: 0;
 cursor: pointer;
 color: #fff;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 transition: background-color 0.3s ease-in-out;
}

button:hover {
 background-color: #0000ff;
}

技巧 2：按钮栏

您可以在按钮栏中对具有不同操作的按钮进行分组。在这组按钮中，按钮的总数或按钮的大小让开发人员感到困惑。对于不同的按钮，您可能需要不同的设计，这里编写 CSS 对您来说变得困难。在这种情况下你不能灵活。为了解决这个问题，你可以编写下面给出的代码……

HTML

HTML


Logo



  

HTML

  


  


//CSS
.button-bar {
background-color: #00FF00;
padding: 0 7px;
text-align: right;
}
.button-bar button {
margin: 20px 12px;
display: inline-block;
}

技巧 3：调整图像大小

调整图像大小也是一项具有挑战性的任务。在您的 Web 应用程序中，您不希望图像按比例放大。很多时候，图像变得模糊，图像分辨率低。图像应该很小以避免这些问题。大多数情况下，我们以像素表示图像。定义图像的特定大小。这个想法是使图像的原始大小为最大大小。如果图像的大小为 200 像素，则保持最大宽度为 200 像素。

您可以尝试的最佳技巧是以百分比定义图像的大小。您可以找到最大宽度和屏幕宽度之间的比率，然后您可以将最大宽度设置为屏幕宽度的某个百分比。

您可以考虑一个场景，图像宽度为 400px，宽度设置为 100%。现在可能发生两件事，如下所示。

  • 如果屏幕的大小为 800px 宽，则最大宽度将为 800px。这里图像的宽度只有 400px。所以这实际上将显示为 400px。
  • 如果图像比您的屏幕大，那么例如屏幕是 300 像素并且最大宽度设置为 100%，那么图像将缩放到 300 像素宽的大小。 



.content{
/* Min space between image and window */
padding: 30px;
}
.content img{
display: block;
margin: 0 auto;
max-width: 100%;
}

技巧 4：固定标题

我们都在我们的应用程序顶部使用标头。标题看起来不错，但很难做出完美的标题。您可能在每个网站上都观察到标题很粘。这个属性是通过使用position: fixed来实现的。但在这里，您将面对页面开头的空白区域。

当您必须调整页面大小时，您将面临这个问题。每当您必须调整空间时，标题的高度都会发生变化。你还将面临 问题 与滚动条。它的一部分将被标题覆盖。要解决这个问题，请使用CSS的flex属性。

HTML 



Logo



  





//CSS
.page{
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.page .header{
background-color: #000;
line-height: 30px;
color: #fff;
text-align: center;
}
.page .content{
flex: 1;
overflow: auto;
}

技巧 5：中心内容

没有任何网站可以在没有内容的情况下运行。 UI 开发人员在将内容放在不同的页面上并为它们提供样式时要小心，这一点很重要。任何网站上的内容都应该正确放置，并且在具有多种分辨率的多个设备上看起来应该很好。这也是一项具有挑战性的任务。

大多数开发人员使用媒体查询来解决这个问题。在内容中添加媒体查询会使事情变得复杂，因为您可能必须为不同的分辨率添加各种媒体查询代码。

要解决此问题，您可以根据浏览器的大小调整页面内容的大小。这里需要考虑div里面的内容是文本。这里当每行大约为 1300px-1500px 时会很难阅读。您需要限制内容的宽度。水平居中，因为它不会在更高分辨率下覆盖整个宽度。

以下是解决此问题的解决方案……

  • 最大宽度：您需要将页面大小限制为最大宽度
  • 边距：“0-自动”-此属性将设置相同的左右边距，这将使 div 水平居中，“class=page”
  • 填充：创建 一些空间 在屏幕和内容之间。

HTML 


  


  



// CSS
body{
padding: 30px;
font-family: Arial, sans-serif;
}
.page{
background-color: #0000FF;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
border-radius: 4px;
margin: 0 auto;
max-width: 600px;
padding: 30px;
}

结论

当你开始你的职业生涯时，你将使用 CSS，你会学到很多东西，但编写完美的 CSS 并不容易。它伴随着实践和看到其他人的代码。玩转您的代码并检查它如何影响您的 Web 应用程序。这样做的时候你会明白很多事情。