Der folgende Artikel bietet eine Übersicht über HTML-Stylesheets. HTML Cascading Style Sheet ist ein Blatt mit Regeln und Eigenschaften, die dem Browser mitteilen, wie HTML unter Verwendung aller angegebenen Stile gerendert werden soll. CSS ist die Art und Weise, wie wir Webseiten gestalten. CSS verfügt über alle Eigenschaften wie Hintergrund, Farben, Schriftarten, Abstände, Ränder usw., die wir für jedes Element auf den Seiten definieren können.
HTML-Stylesheets werden auch verwendet, um das Layout der Seite festzulegen, z. B. wo Kopf- und Fußzeilen oder andere Elemente auf der Seite platziert werden sollen. CSS wird immer zusammen mit HTML gesprochen, da Seiten ohne Stil sehr blass sind, keine Überschriften usw. hervorgehoben werden und auf der gesamten Seite die gleiche Schriftgröße vorliegt, was den Benutzern überhaupt kein gutes Aussehen verleiht.
Früher wurden Stile, Skripte und HTML alles auf einer Seite geschrieben. Dies machte die Seiten extrem lang und äußerst schwierig zu lesen und zu bearbeiten. Dann kam die Möglichkeit, HTML, Stile und Javascript zu trennen.
Es gibt drei Möglichkeiten, wie wir die Stile einbinden können:
Dies ist eine Möglichkeit, Stile für jedes Element in HTML selbst in einem Attribut namens style zu schreiben.
Diese Art der Formatierung wird überhaupt nicht empfohlen, da der HTML-Code unübersichtlich aussieht und wir dem Ansatz „Einmal schreiben, an vielen Stellen verwenden“ nicht folgen können.
Beispiel:
Code:
<h1 style=”font-size: 10px;margin-top: 10px;”>Hello World!</h1>
Dabei werden Stile in ein Stil-Tag eingebunden und innerhalb einer Webseite über HTML platziert. Diese Art des Stylings ist immer noch besser als das Inline-Styling, da wir gemeinsame Stile zusammenfassen können, falls sie für mehrere Elemente gleichzeitig verwendet werden müssen.
Es ist einfacher, die HTML-Datei in der Entwicklungsphase zu bearbeiten, und wir müssen nicht jedes Mal die entsprechende CSS-Datei öffnen und jedes Mal bearbeiten.
Beispiel:
Code:
<html>
<head>
<style>
container-block{
font-size: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class=”container-block”>Hello World!</div>
</body>Dies ist die gebräuchlichste und beste Art, Stile für eine Webseite zu erstellen. Dies ähnelt dem internen Stil, der Unterschied besteht jedoch darin, dass die Stile in einer separaten Datei mit der Erweiterung .css geschrieben werden und ein Verweis darauf im Head-Tag der Webseite platziert wird.
Die Syntax zum Verknüpfen einer CSS-Datei auf der Webseite lautet:
Syntax:
<link rel="stylesheet" type="text/css" href="theme.css">
Stile sollten im Head-Tag enthalten sein, das über dem Body-Tag (d. h. dem eigentlichen Inhalt) des HTML liegt.
Inline-Stile haben mehr Priorität als interne, und dann kommt die letzte Priorität für den externen Stil.
Inline>Intern>Extern
Best Practices bei der Verwendung von CSS:
Verwendung: @import ‘./process.css’;
Dies sind grundsätzlich Zustände der ausgewählten Elemente und nicht wirklich die genauen Elemente.
Die verschiedenen Funktionen sind unten aufgeführt:
Beispiel:
Code:
-webkit-transition: width 2s, height 4s;
Mobile, Desktops, iPads behave differently; however, we cannot style the pages in the same way. Previous web standards have been designed in such a way that we had different CSS for every type of device.
With the progress of web standards and the way the web is built, browsers are developed to have a single CSS that can be used for any type of device. To change the styles for devices based on width and height, media queries are used with which we can specify the min or max-width of the device and write styles within it.
Example:
Code:
@media screen and (max-width: 767px){
container{
width: 60%;
padding: 20px;
}
}Styles are definitely a boon for the web. And as web development has increased exponentially in recent times, CSS3 has definitely gained a lot of demand to make the pages extremely interactive and intuitive.
Das obige ist der detaillierte Inhalt vonHTML-Stylesheets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
