首页 > 文章 > web前端 > 每个开发者都应该知道的 7 个 CSS Hack

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

WBOY转载: 2023-08-29 14:53:02606浏览

CSS 是层叠样式表的缩写。它用于制作具有视觉吸引力的网站。使用它将使制作有效网页的过程变得更容易。

网站的设计至关重要。它通过促进用户交互来提高网站的美观度和整体质量。虽然可以在没有 CSS 的情况下创建网站，但需要样式，因为没有用户愿意与无聊、没有吸引力的网站进行交互。在本文中，我们讨论了每个开发人员在网页设计过程中的某个时间点都会需要的 7 个 CSS hack。

使用CSS创建响应式图片

使用被称为响应式图片的各种技术，可以加载适合设备的分辨率、方向、屏幕大小、网络连接或页面布局的正确图片。图片不应该被浏览器拉伸以适应页面布局，下载图片不应该花费太长时间或使用过多的网络流量。由于图片加载快速且对人眼清晰，这可以提高用户体验。要创建响应式图片，请始终编写以下语法−

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

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

将元素的内容放置在中心

如果你想居中对齐任何元素的内容，有多种方法。下面提到了最简单的。

持仓属性

使用CSS的position属性通过以下语法来将内容居中放置：

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>

使用标签

要居中对齐的内容应写在

标记内。然后，整个内容将居中对齐。

使用text-align属性

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

text-align: center;

使用通用选择器

CSS星号(*)选择器，也称为CSS通用选择器，用于一次性选择或匹配整个网页的所有元素或元素的某些部分。选择后，您可以使用任何 CSS 自定义属性来设置相应的样式。它匹配任何类型的 HTML 元素，如、

、

通用选择器实际上用于设置网页中每个元素的样式。通常，维护整个页面的特定样式格式很困难，因为浏览器设置了默认值。它使开发人员能够为网页准备默认样式。最常见的用途是将网页的所有元素一起设置样式。

语法

*{
   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….
   }
}

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

vw– 视口宽度
vh ——视口高度
v 分钟– 视口最小
v max– 视口最大

CSS 弹性盒

一个CSS Flexbox是一个包含多个flex元素的容器。这些flex元素可以根据需要排列成行或列。Flex项目是flex容器的子元素，它是其父元素。使用CSS flexbox可以使每个元素具有精美和吸引人的外观。

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>

以上是每个开发者都应该知道的 7 个 CSS Hack的详细内容。更多信息请关注PHP中文网其他相关文章！

css html 选择器样式表 display position flex

声明：

本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除

上一篇：如何使用 CSS 正确定位工具提示下一篇：使用 CSS 实现摆动动画效果

查看更多