Heim > Artikel > Web-Frontend > 7 CSS-Hacks, die jeder Entwickler kennen sollte

7 CSS-Hacks, die jeder Entwickler kennen sollte

WBOYnach vorne: 2023-08-29 14:53:02603Durchsuche

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

CSS ist die Abkürzung für Cascading Style Sheets. Es wird verwendet, um optisch ansprechende Websites zu erstellen. Die Verwendung erleichtert die Erstellung effektiver Webseiten.

Website-Design ist entscheidend. Es verbessert die Ästhetik und Gesamtqualität der Website, indem es die Benutzerinteraktion erleichtert. Obwohl es möglich ist, eine Website ohne CSS zu erstellen, ist ein Styling erforderlich, da kein Benutzer mit einer langweiligen, unattraktiven Website interagieren möchte. In diesem Artikel besprechen wir 7 CSS-Hacks, die jeder Entwickler irgendwann auf seiner Webdesign-Reise benötigen wird.

Erstellen Sie reaktionsfähige Bilder mit CSS

Mithilfe verschiedener Techniken, die als responsive Bilder bezeichnet werden, können Sie das richtige Bild für die Auflösung, Ausrichtung, Bildschirmgröße, Netzwerkverbindung oder das Seitenlayout des Geräts laden. Bilder sollten vom Browser nicht gestreckt werden, um sie an das Seitenlayout anzupassen, und das Herunterladen von Bildern sollte nicht zu lange dauern oder zu viel Netzwerkverkehr erfordern. Dies verbessert das Benutzererlebnis, da Bilder schnell geladen werden und für das menschliche Auge klar erkennbar sind. Um responsive Bilder zu erstellen, schreiben Sie immer die folgende Syntax: −

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

Die einfachste Technik, Fotos mit hoher Auflösung zu erstellen, besteht darin, ihre Breiten- und Höhenwerte auf die Hälfte ihrer tatsächlichen Größe einzustellen.

Platzieren Sie den Inhalt des Elements in der Mitte

Wenn Sie den Inhalt eines Elements zentriert ausrichten möchten, gibt es mehrere Möglichkeiten, dies zu tun. Die einfachsten sind unten aufgeführt.

Positionsattribute

Verwenden Sie die CSS-Positionseigenschaft, um Inhalte mit der folgenden Syntax zu zentrieren:

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

Beispiel

<!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>

Verwenden Sie Tags

Inhalte, die zentriert ausgerichtet werden sollen, sollten innerhalb des

-Tags geschrieben werden. Der gesamte Inhalt wird dann zentriert ausgerichtet.

Verwenden Sie das Textausrichtungsattribut

Wenn der Inhalt, den Sie zentrieren möchten, nur Text enthält, können Sie einfach das textalign-Attribut verwenden.

text-align: center;

Verwenden Sie universelle Selektoren

Der CSS-Sternchen (*)-Selektor, auch bekannt als CSS-Universalselektor, wird verwendet, um alle Elemente oder Teile von Elementen einer gesamten Webseite auf einmal auszuwählen oder abzugleichen. Nach der Auswahl können Sie beliebige benutzerdefinierte CSS-Eigenschaften verwenden, um sie entsprechend zu formatieren. Es passt zu allen Arten von HTML-Elementen wie ,

Universelle Selektoren werden tatsächlich verwendet, um jedes Element auf einer Webseite zu gestalten. Aufgrund der von Browsern festgelegten Standardeinstellungen ist es oft schwierig, ein bestimmtes Stilformat für eine gesamte Seite beizubehalten. Es ermöglicht Entwicklern, Standardstile für Webseiten vorzubereiten. Die häufigste Verwendung besteht darin, alle Elemente einer Webseite gemeinsam zu gestalten.

Grammatik

*{
   Css declarations
}

Beispiel

<!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-Stile überschreiben

Normalerweise verwenden wir CSS-Klassen, um CSS-Stile zu überschreiben. Wenn Sie jedoch festlegen möchten, dass ein bestimmter Stil auf ein Element angewendet werden muss, verwenden Sie !important.

Grammatik

element{
   property: value !important;
}

Beispiel

<!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-Verhalten

Eine gute und effiziente Benutzererfahrung ist der wichtigste Faktor beim Webdesign. Es macht keinen Sinn, eine Website zu erstellen, wenn Ihre Website nicht benutzerfreundlich ist. Um ein reibungsloses Benutzererlebnis zu gewährleisten, sollten Sie Ihrer Website einen reibungslosen Scroll-Effekt hinzufügen.

Mit dem Attribut

scroll-behaviour können Entwickler das Verhalten der Seite beim Scrollen festlegen.

html{
   scroll-behaviour: smooth;
}

Fügen Sie Medienabfragen hinzu und machen Sie das Layout responsiv

Wenn ein Medientyp mit dem Gerätetyp übereinstimmt, auf dem das Dokument angezeigt wird, wird eine Medienabfrage mit diesem Medientyp verwendet, um Stile auf den Inhalt anzuwenden.

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

Wenn Ihre Website auf verschiedenen Geräten angezeigt werden muss, verwenden Sie am besten Viewport-Einheiten. Dadurch wird sichergestellt, dass die Größe des Inhalts automatisch entsprechend dem Ansichtsfenster angepasst wird.

vw– Ansichtsfensterbreite
vh ——Ansichtsfensterhöhe
v Minuten– Minimaler Ansichtsbereich
v max– Viewport Maximum

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>

Das obige ist der detaillierte Inhalt von7 CSS-Hacks, die jeder Entwickler kennen sollte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html 选择器样式表 display position flex

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：So positionieren Sie Tooltips mithilfe von CSS richtigNächster Artikel：So positionieren Sie Tooltips mithilfe von CSS richtig

In Verbindung stehende Artikel

Mehr sehen