Heim >Web-Frontend >CSS-Tutorial >7 CSS-Hacks, die jeder Entwickler kennen sollte
7 CSS-Hacks, die jeder Entwickler kennen sollte
- WBOYnach vorne
- 2023-08-29 14:53:02635Durchsuche
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
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 Attributscroll-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!