7个每个开发者都应该知道的CSS技巧

CSS是层叠样式表（Cascading Style Sheets）的缩写。它用于制作视觉上吸引人的网站。使用它可以使制作有效的网页的过程变得更加简单。

网站的设计非常重要。通过促进用户交互，它提高了网站的美观度和整体质量。虽然可以在没有CSS的情况下创建网站，但由于没有用户愿意与无聊而丑陋的网站进行交互，因此需要进行样式设置。在本文中，我们讨论了在网页设计过程中每个开发者在某个时候都需要的7个CSS技巧。

使用CSS创建响应式图片

使用被称为响应式图片的各种技术，可以加载适合设备分辨率、方向、屏幕大小、网络连接或页面布局的正确图片。浏览器不应该拉伸图片来适应页面布局，并且下载图片不应该太长时间或使用过多的互联网。因为图片加载快，对人眼清晰，它可以改善用户体验。要创建响应式图片，始终编写以下语法-

img{
   max-width: 100%;
   height: auto;
}

创建具有高分辨率的照片最简单的技术是将其宽度和高度值设为实际尺寸的一半。

将元素的内容居中对齐

如果你想要将任何元素的内容居中对齐，有多种方法可以实现。以下是最简单的方法。

位置属性

使用CSS的位置属性通过以下语法指定内容的居中位置 –

element{
   position: absolute;
   left: value;
   top: value;
}

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      h1{
         text-align: center;
      }
      div{
         position: absolute;
         left: 45%;
      }
   </style>
</head>
<body>
   <h1> Position property </h1>
   <div> This is an example. </div>
</body>
</html>

使用`<center>`标签

您希望居中对齐的内容应该写在<center>标签之间。然后，整个内容都会被居中对齐。

使用text-align属性

如果要居中对齐的内容只包含文本，则可以简单地使用text-align属性。

text-align: center;

使用通用选择器

CSS星号(*)选择器，也称为CSS通用选择器，用于一次性选择或匹配整个网页中的所有元素或部分元素。选择后，您可以使用任何CSS自定义属性对其进行样式化。它可以匹配任何类型的HTML元素，如<div>，<section>，<nav>，<button>等。它还可以用于选择和样式化父元素的子元素。

通用选择器字面上用于样式化网页中的每个元素。由于浏览器已经设置了默认值，通常很难在整个页面上保持特定的样式格式。它使开发人员能够为网页准备一个默认样式。最常见的用法是同时为网页中的所有元素添加样式。

语法

*{
   Css declarations
}

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      *{
         color: green;
         text-align: center;
         font-family: Imprint MT shadow;
      }
   </style>
</head>
<body>
   <h1>Css Universal Selector</h1>
   <h2>This is an example. It shows how to style the whole document altogether.</h2>
   <div>
      <p class = "para1"> This is the first paragraph. </p>
      <p class= "para2"> This is the second paragraph </p>
   </div>
</body>
</html>

覆盖CSS样式

通常，我们使用CSS类来覆盖CSS样式。然而，如果您希望指定一个特定的样式应该应用于一个元素，那么请使用 !important 。

语法

element{
   property: value !important;
}

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {
         color: blue;
      }
      .demo {
         color: red !important;
      }
   </style>
</head>
<body>
   <h2> This is an example #1 </h2>
   <h2> This is an example #2 </h2>
   <h2> This is an example #3 </h2>
   <h2 class= "demo"> This is an example #4 </h2>
   <h2> This is an example #5 </h2>
</body>
</html>

滚动行为

精细高效的用户体验是网页设计中最关键的因素。如果您的网站不友好，那么制作网站就毫无意义。为了确保顺畅的用户体验，您应该在网站中添加平滑滚动效果。

scroll-behaviour 属性使开发人员能够指定页面在滚动期间的行为。

html{
   scroll-behaviour: smooth;
}

添加媒体查询并使排版响应式

当媒体类型与显示文档的设备类型匹配时，使用该媒体类型的媒体查询来应用样式到内容。

@media (max-width: 100px){
   {CSS rules….
   }
}

如果您的网站需要在不同设备上查看，那么最好使用viewport单位。这可以确保内容根据视口调整大小。

vw – 视口宽度
vh – 视口高度
vmin – 视口最小值
vmax – 视口最大值

CSS弹性盒子

CSS弹性盒子是包含多个弹性元素的容器。可以根据需要将这些弹性元素排列成行或列。弹性项是弹性容器的子元素，其父元素。使用CSS弹性盒子可以使每个元素具有精美和吸引人的外观。 display:flex可以帮助开发人员使每个组件显示得适当和可爱。它通过对齐将元素的子元素排列成行或列。它将父元素中的子元素对齐成行或列。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .flex-container {
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
         background-color: #097969;
         align-items: center;
         justify-content: center;
         width: 60%;
      }
      .demo1, .demo2, .demo3, .demo4 {
         background-color: yellow;
         height : 50px;
         width: 90%;
         margin: 10px;
         padding: 12px;
         font-size: 17px;
         font-weight: bold;
         font-family: verdana;
         text-align: center;
         align-items: center;
         color: brown;
      }
      .demo1{
         order: 1;
      }
      .demo2{
         order: 4;
      }
      .demo3{
         order: 2;
      }
      .demo4{
         order: 3;
      }
   </style>
</head>
<body>
   <h1>Order of Flex Items</h1>
   <p>The following list of flex elements has them in an ordered arrangement thanks to the order property:</p>
   <div class="flex-container">
      <div class= "demo1" > This </div>
      <div class= "demo2"> example </div>
      <div class= "demo3"> is </div>
      <div class= "demo4"> an </div>
   </div>
</body>
</html>