Tag – TML/CSS – Projekt ILUGC (Webseite)-CSS-Tutorial-php.cn

Tag – TML/CSS – Projekt ILUGC (Webseite)

Patricia Arquette

Freigeben： 2025-01-04 07:11:34

Original

825 Leute haben es durchsucht

HTML:

HTML steht für Hyper Text Markup Language
HTML ist die Standard-Auszeichnungssprache zum Erstellen von Webseiten
HTML beschreibt die Struktur einer Webseite
HTML besteht aus einer Reihe von Elementen
HTML-Elemente teilen dem Browser mit, wie der Inhalt angezeigt werden soll
HTML-Elemente kennzeichnen Inhalte wie „Dies ist eine Überschrift“, „Dies ist ein Absatz“, „Dies ist ein Link“ usw.

Siehe – https://www.w3schools.com/Html/html_intro.asp

CSS:

Cascading Style Sheets (CSS) ist eine Stylesheet-Sprache, die zur Beschreibung der Darstellung eines in HTML geschriebenen Dokuments verwendet wird.
CSS beschreibt, wie Elemente auf dem Bildschirm, auf Papier, in Sprache oder auf anderen Medien gerendert werden sollen.

Siehe – https://developer.mozilla.org/en-US/docs/Web/CSS

Day - TML/CSS - Project ILUGC(web page)

Unterschied zwischen HTML/CSS und Javascript.

-->HTML/CSS – Statische Seiten – Der Inhalt bleibt bei jedem Laden gleich, sofern er nicht manuell aktualisiert wird.
-->Javascript – Dynamische Seiten – Seiten können auf Benutzeraktionen reagieren, z. B. auf das Klicken auf eine Schaltfläche, das Absenden eines Formulars oder das Bewegen der Maus.

HTML-Syntax:

<html>
<head>
<title>Page Title</title>
</head>
<body>
   <h1>My First Heading</h1>
   <p>My first paragraph.</p>
</body>
</html>

Nach dem Login kopieren

-->Speichern Sie die Datei mit der Erweiterung (.html) und doppelklicken Sie, um das Programm auszuführen.

Day - TML/CSS - Project ILUGC(web page)

HTML-Element:
In HTML werden Elemente normalerweise mit einem öffnenden Tag und einem schließenden Tag umschlossen, um ihren Anfang und ihr Ende zu definieren.
--> Eröffnungstag: Markiert den Anfang eines HTML-Elements.
--> Schließendes Tag: Markiert das Ende eines HTML-Elements mit einem Schrägstrich vor dem Elementnamen.
Beispiel:

Hallo Welt!

Eigenständiges Tag: Ein eigenständiges Tag (auch als selbstschließendes Tag bekannt) in HTML ist ein Element, das kein schließendes Tag erfordert, da es keinen Inhalt zwischen einem öffnenden und einem schließenden Tag hat Tag.
Ex-
- break:wird zum Einfügen eines Zeilenumbruchs verwendet

Projekt:

Vorbereitung des ILUGC-Webseitenlayouts:(https://ilugc.in/)

<html>
<Kopf>
    <title>ILUGC</title>
<Stil>
.Container{
    Grenze:1px fest;
    Höhe:200 %;
    Breite:85%;
    margin:auto;
}
.header h4{
    Texttransformation: Großbuchstaben;
    Farbe:#e22d30;
    border-top:1px durchgehend grün;
    Breite: fit-content;
    padding-top:10px;
}
.header{

    Rand:25px;
}
</style>
</head>
<Körper>
   <div>



<p>Ausgabe:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173594590044719.jpg" alt="Day - TML/CSS - Project ILUGC(web page)"></p><p><strong>Erklärung:</strong></p>

<ol>
<li>
<html>: Das Stammelement des HTML-Dokuments.</li>
<li>
<head>: Enthält Metadaten und Ressourcen für das Dokument.</li>
<li>
<title>: Legt den Titel der Webseite fest, die auf der Browser-Registerkarte angezeigt wird.</li>
<li>
<style>: Bettet CSS zum Gestalten des HTML-Dokuments ein.</li>
</ol>

Nach dem Login kopieren

.container: Gestaltet den Container div:
a) border: 1px solid;: Fügt einen 1-Pixel-soliden Rand hinzu.
b) Höhe: 200 %;: Setzt die Höhe auf das Doppelte der Höhe des Ansichtsfensters.
c) Breite: 85 %;: Setzt die Breite auf 85 % der Breite des Ansichtsfensters.
d) margin: auto;: Zentriert den Container horizontal.
.header h4: Formatiert das
Element innerhalb der .header-Klasse:
a) text-transform:uppercase;: Wandelt Text in Großbuchstaben um.
b) Farbe: #e22d30;: Setzt die Textfarbe auf einen bestimmten Rotton.
c) border-top: 1px solid green;: Fügt einen grünen oberen Rand hinzu.
d) width: fit-content;: Verkleinert die Elementbreite, um sie an den Inhalt anzupassen.
e) padding-top: 10px;: Fügt 10 Pixel Abstand über dem Text hinzu.
.header: Formatiert den Header div:
a) margin: 25px;: Fügt einen Rand von 25 Pixeln um die Kopfzeile hinzu.

: Enthält den gesamten sichtbaren Inhalt der Webseite.
: Ein Containerelement zum Gruppieren und Gestalten von Inhalten.
: Stellt die Hauptüberschrift der Webseite dar.
: Stellt eine Unterüberschrift von geringerer Bedeutung als
dar.

Attribut:
Ein Attribut stellt zusätzliche Informationen zu einem HTML-Element bereit, normalerweise in Form von Name-Wert-Paaren.
Beispiel: „

Polsterung:
Padding ist der Abstand zwischen dem Inhalt eines Elements und seinem Rand. Es erstellt einen inneren Rand um den Inhalt und drückt den Inhalt von den Rändern des Elements weg.

Marge:
Der Rand ist der Raum außerhalb des Randes eines Elements, der es von anderen Elementen trennt. Es definiert den Außenraum zwischen Elementen und schafft Abstand um sie herum.

Klassenselektor und ein Elementselektor:

Der Klassenselektor zielt auf HTML-Elemente ab, die ein bestimmtes Klassenattribut haben, indem er einen Punkt (.) gefolgt vom Klassennamen verwendet.
Der Elementselektor zielt direkt auf HTML-Elemente anhand ihres Tag-Namens ab

Das obige ist der detaillierte Inhalt vonTag – TML/CSS – Projekt ILUGC (Webseite). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Tag – TML/CSS – Projekt ILUGC (Webseite)

HTML:

CSS:

Projekt:

: Stellt die Hauptüberschrift der Webseite dar.

: Stellt eine Unterüberschrift von geringerer Bedeutung als

dar.