HTML-Stylesheets-HTML-Tutorial-php.cn

HTML-Stylesheets

王林

Freigeben： 2024-09-04 16:16:28

Original

1266 Leute haben es durchsucht

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.

Wie verwende ich HTML-Stylesheets?

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.

Möglichkeiten zum Einbinden von HTML-Stylesheets in eine Webseite

Es gibt drei Möglichkeiten, wie wir die Stile einbinden können:

1. Inline-Styling

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>

Nach dem Login kopieren

2. Internes Styling

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>

Nach dem Login kopieren

3. Externes Styling

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

Nach dem Login kopieren

Stile sollten im Head-Tag enthalten sein, das über dem Body-Tag (d. h. dem eigentlichen Inhalt) des HTML liegt.

Was ist die Priorität zwischen Inline-, internem und externem Styling?

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:

CSS kann in mehrere Dateien statt nur in eine aufgeteilt werden.
Getrennte CSS-Dateien können entweder einzeln mithilfe von Link-Tags in ein Head-Tag eingefügt werden.
Oder eine CSS-Datei kann mehrere Importanweisungen haben, um die restlichen CSS-Dateien zu importieren. Dadurch wird das CSS logisch getrennt, aber letztendlich wird Folgendes erreicht: Alle Stile werden aus derselben Datei gerendert.

Verwendung: @import ‘./process.css’;

Stile können für beliebige Webseitenelemente mit Selektoren wie dem HTML-Tag selbst, Klassennamen, IDs und beliebigen Attributnamen definiert werden.
Es sind einige Pseudo-Selektoren verfügbar, wie zum Beispiel:
- vor
- nachher
- ntes Kind
- erstes Kind
- letztes Kind
- schweben
- besucht

Dies sind grundsätzlich Zustände der ausgewählten Elemente und nicht wirklich die genauen Elemente.

Wenn mehrere CSS-Dateien auf der Seite enthalten sind, erhält die letzte Datei die höchste Priorität und überschreibt die vorhandenen Stile vorheriger Dateien mit demselben Selektor.
Stylesheets sollten vor HTML selbst verwendet werden, damit Stile angewendet werden, während die Seite geladen wird. Wenn es am Ende eingefügt wird, wird HTML zuerst geladen und dann werden die Stile langsam angewendet, was für den Benutzer ein sehr schlechtes Erlebnis darstellt.

Verschiedene Funktionen von HTML Cascading Style Sheets

Die verschiedenen Funktionen sind unten aufgeführt:

CSS stellt Animationen bereit: Bisher wurde Javascript nur für Animationen verwendet. Aber das neueste CSS, d. h. CSS3, stellt Animationen mithilfe von Eigenschaften selbst bereit.
Herstellerpräfixe: Bevor Browser die Standardversion/Eigenschaftsnamen für neue Funktionen veröffentlichen, stellen uns Browser für einige Zeit als Experiment einige Herstellerpräfixe zur Verfügung. Entwickler müssen warten, bis der Browser seine Standardversionen veröffentlicht. In der Zwischenzeit können experimentelle Funktionen mit Herstellerpräfixen verwendet werden.
CSS-Transformationen: Übergänge werden verwendet, um innerhalb einer bestimmten Dauer schrittweise von einem Wert einer Eigenschaft zu einem anderen zu wechseln.

Beispiel:

Code:

-webkit-transition: width 2s, height 4s;

CSS Transforms: Transforms in CSS allow you to translate, rotate, scale and skew elements.

Media Queries

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;
}
}

Nach dem Login kopieren

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!