✅ Listen und Menüs in CSS3

Inhaltsverzeichnis

Zu Erstellen Sie dynamische Menüs für unsere Webseiten Heutzutage ist es sehr üblich, in HTML5 zu programmieren und ihm dann ein persönliches Look and Feel zu geben CSS3 dass es sich um eine Sprache handelt, die auf Stylesheets basiert, d. h. der Code, der unserer Seite Form, Farbe und Struktur verleiht, befindet sich in einer separaten Datei, die außerhalb der von uns geschriebenen Seite selbst codiert ist.

Zuerst werden wir sehen, wie man Listen erstellt, denn schließlich ist ein Menü eine Liste, die so gestaltet ist, dass sie sichtbar eleganter ist. Auf diese Weise sind wir in Html als Linkliste strukturiert und dann setzen wir ein personalisiertes Erscheinungsbild schon mit CSS3.

Es gibt zwei Arten von Listen, geordnete und ungeordnete. Wenn wir später eine Liste verwenden, um ein Menü zu konfigurieren, verwenden wir höchstwahrscheinlich eine ungeordnete Liste, aber wir sehen die Optionen.

Sie werden genau gleich erstellt, der einzige Unterschied liegt im reservierten Wort, das für den Besteller sein wird

Der HTML-Code lautet wie folgt:


Erstes Element
Zweites Element
Drittes Element


Erstes Element
Zweites Element
Drittes Element

1. Erstes Element
2. Zweites Element
3. Drittes Element

Oder genau das gleiche ohne die Ordinalzahl zuerst:

Erstes Element
Zweites Element
Drittes Element

In HTML gibt es bestimmte Vorformate, wenn wir eine Liste erstellen, d.h. es gibt einen bestimmten Rand, Schriftfarbe, Aufzählungszeichen, Auffüllung usw. die standardmäßig beim Erstellen unserer Liste angezeigt wird. Das Schlimme ist, dass es optisch nicht sehr gut aussieht, das Gute ist, dass es dank CSS extrem einfach nach unseren Wünschen geändert werden kann.

Wir beginnen mit einem Blick auf die verschiedenen Arten von Vignetten, die wir auf unserer Speisekarte platzieren können. Standardmäßig wird jedem Element in der Liste ein schwarzer Kreis vorangestellt. Wir können jedoch Quadrate, leere Kreise oder ein Bild aus unserer Datei einfügen.

Der Code zum Ändern des Aufzählungszeichens in CSS3 ist der folgende:

 #menu {list-style-type: quadrat;}

Um den Rand mithilfe des Beispielmenüs zu ändern, ist es so einfach wie dieses Code in CSS3:

 #menu {Rand: 0px;}

 #menu {Rand: 0px; Polsterung: 2px; }

CSS3-Code

 #menu {Rand: 2px;}

Neben der Dicke ist der Rahmen ein Feld, das viele Möglichkeiten bietet. Wir können einen Stil, eine Farbe, einen Farbverlauf auswählen … und wir werden einige Optionen sehen.

Bordüren-Stil
Beginnend mit dem Kantenstil, Bordüre-Stil, die am häufigsten verwendeten Möglichkeiten sind:

KeinerDadurch wird die Kante selbst entfernt. Dies ist die Standardoption. Wenn wir also Listen für unsere Menüs erstellen, werden normalerweise keine Rahmen angezeigt, es sei denn, wir geben sie an.

FestDies ist die Kante, die am häufigsten verwendet werden kann. Es ist ein durchgehender Rand, schwarz in der Farbe.
VerstecktO versteckt ist eine weitere Option, bei der wir keine Kanten visualisieren, da sie versteckt sind. Für Programmierzwecke existiert es jedoch. Es wird verwendet, um die Ränder mit anderen benachbarten Zellen oder Tabellen abzugrenzen, auch wenn kein dicker Rand zu sehen sein soll.
GratWir werden diese Kante setzen, wenn wir wollen, dass sie sich von den anderen abhebt. Lässt die Umrandung eine Ebene über dem Rest auf dem Bildschirm erscheinen.
AnfangWie der vorherige ist es eine vorstehende Kante, die jedoch nicht eine Ebene über der Oberfläche des Bildschirms zu liegen scheint als das, was sie im Inneren trägt.
RilleIm Gegensatz zu Ridge mit diesem Bordürenstil scheint das Element unter den Rest versenkt zu sein.
EinsatzGenau wie bei Groove scheint diese Kante nicht eingesunken zu sein, sondern liegt tatsächlich eine Ebene unter dem Rest.
GepunktetMit diesem Stil erzeugen wir einen Rahmen, der aus einer gepunkteten Linie besteht, standardmäßig schwarz und Leerzeichen.
DoppeltWie das Wort selbst sagt, handelt es sich um einen doppelten Rahmen, der aus zwei durchgehenden schwarzen Linien besteht, die durch ein Leerzeichen getrennt sind.

GestricheltDies ist eine spezielle Art von Rahmen, ähnlich wie gepunktet, mit der Ausnahme, dass die Punkte zu größeren Linien werden, dh es handelt sich um eine Art unterbrochene Linie.

Wie bei border können wir bei border-style wählen, ob wir den Rand einer Seite, beider, der oberen Grenze, der unteren Grenze oder aller definieren möchten. Wenn wir nur einen Wert schreiben, wird er auf alle Kanten gelegt, und wenn wir statt einer zwei Optionen schreiben, ist die erste für die obere und untere Kante und die zweite für die Seiten.

Damit haben wir nun den Rahmen, die Größe und den Stil definiert, jedoch bleibt das Menü sehr einfach und optisch nicht sehr schön. Wir können vertikale Menüs wünschen, wie sie standardmäßig erstellt werden, aber wenn wir sie horizontal haben möchten, müssen wir das Schlüsselwort float hinzufügen, damit jedes Element in der Liste neben dem nächsten platziert wird.

Ich erkläre dies etwas genauer, jedes Element der Liste, das wir mit "li" codiert haben, hat standardmäßig das Verhalten eines Blockelements, d.h. es erzeugt nach dem Platzieren einen Zeilenumbruch und verhindert das Platzieren eines anderen Elements an seiner Seite. Wenn wir jedes Element unserer Liste neben das vorherige platzieren möchten, müssen wir dieses Blockverhalten beseitigen.

Dafür wäre der Code folgender:

 #menu {Listenstil: keine; Rand: 0px; Polsterung: 0; } #menu li {margin: 2px; Polsterung: 2px; Rahmen: 2px solide; Schwimmer: links; }

horizontales Menü

Wenn wir nun möchten, dass unsere Liste als Menü fungiert und uns dorthin umleitet, wo wir wollen, müssen wir unseren Elementen einen Link hinzufügen. Dies ist sehr einfach. In unserem Code in der Html fügen wir Folgendes hinzu:


Erstes Element
Zweites Element
Drittes Element

Schließlich werden wir einige der Optionen für das Erscheinungsbild sehen.

Texteigenschaften
BreiteWenn wir eine feste Breite setzen wollen. Zum Beispiel Breite: 100 px;
Text-DekorationWenn wir möchten, dass der Text unseres Elements auf irgendeine Weise dekoriert wird. Es gibt viele Möglichkeiten, aber einige der häufigsten sind:

unterstreichen: wenn wir wollen, dass alles unterstrichen ist
überstreichen: wie unterstrichen fügt eine Zeile in den gesamten Text ein, diesmal jedoch nicht darunter.
blinken: Erstellen Sie Text, der leuchtet, der intermittierend wie ein Licht blinkt.
Leitung: Wir schreiben diese Option, wenn unser Text durchgestrichen werden soll.
keiner: Dies ist eine Redundanz, da der Text standardmäßig mit diesem Wert ohne Dekoration geliefert wird. Manchmal ist es jedoch nützlich, wenn wir zur ursprünglichen Option zurückkehren möchten, nachdem wir einen Effekt mit einer Ressource namens Hover verwendet haben, die wir als nächstes sehen werden.

TextausrichtungEs ist die Richtung, in der der Inhalt unserer Blockelemente veröffentlicht wird, seien Sie vorsichtig, nicht der Text selbst, den wir später mit der Eigenschaft direction sehen werden. Die Optionen sind sehr einfach: links, wenn der Text von links verlaufen soll, rechts, wenn der Text von rechts nach links verlaufen soll, zentrieren, wenn der Text zentriert sein soll, und ausrichten, wenn der Text im Blocksatz angeordnet werden soll.

RichtungMit dieser Option definieren wir die Richtung des Textes, den wir schreiben, in diesem Fall gibt es nur zwei Optionen:

ltr: Dies ist diejenige, die standardmäßig in Browsern angezeigt wird, da mit Ausnahme einiger Sprachen, in denen von rechts nach links geschrieben wird, normalerweise von links nach rechts geschrieben wird, was diese Option definiert.
rtl: Dies ist die andere mögliche Richtung des Textes, von rechts nach links, die wir verwenden werden, wenn wir beispielsweise arabische Texte schreiben möchten.

TexteinzugDass es von Einrückung oder Tabellierung kommt, ist eine Eigenschaft, die dafür verantwortlich ist, dieses Kriterium in der ersten Zeile unserer Blockelemente und auch in Tabellen festzulegen. Es gibt drei Möglichkeiten:

messen
Prozentsatz
Erben

Wenn wir in ihnen den Prozentsatz verwenden, beziehen wir uns auf die Breite des Elements, in dem es sich befindet.
Auch in allen können wir positive oder negative Zahlen jeder der für CSS3, Pixel, ems … existierenden Maßeinheiten verwenden.

Text-TransformationLetzte Eigenschaft in Bezug auf den Text, die wir sehen werden und die mit Groß- und Kleinschreibung zu tun hat:

profitieren: Mit dieser Option wird nur der erste Buchstabe jedes Wortes in Großbuchstaben angezeigt.
Großbuchstaben: Zeigt den gesamten Text in Großbuchstaben an.
Kleinbuchstaben- Zeigt den gesamten Text in Kleinbuchstaben an.
keiner: lässt den Text so, wie er geschrieben wurde. Es ist die Standardeinstellung.

WortabstandObwohl es sich nicht direkt mit dem Text beschäftigt, tut es dies auf dem Raum, den wir zwischen den Wörtern lassen. Seine Werte können "normal" oder ein gültiges Maß sein. Wenn wir eine Kennzahl eingeben, wird ihr Wert zu der normalen Kennzahl hinzugefügt, die standardmäßig geliefert wird.

Jetzt gehen wir zu den Eigenschaften der Schriftart.

Schrifteigenschaften
SchriftartDiese Eigenschaft ist die umfassendste aller Eigenschaften, die sich auf die Schriftart beziehen, und bietet mehrere Optionen für ihre Verwendung. Zunächst können Sie mit einem, zwei, drei oder keinem der Werte „font-style“, „font-variant“ und „font-weight“ beginnen.

Dann müssen wir die Größe des Buchstabens mit "font-size" angeben, optional gefolgt von dem Abstand, der mit "line-height" angegeben wird und immer mit der Art der Schriftfamilie "font-family" endet. Schließlich müssen Sie einen der folgenden Werte eingeben:

Bildbeschriftung- Für Schaltflächen oder Dropdown-Listen, dh für Steuerelemente und Formularfelder.
Speisekarte: Wenn wir Dropdown-Menüs oder andere Arten von Menüs konfigurieren möchten.
Symbol: für die Texte, die unter den Symbolen angezeigt werden.
Nachrichtenbox- Für Dialogfelder, seien es Fehler-Popups, Informations-Popups usw.
status-baA: für Fensterstatusleisten.
Untertiteln - Für kleine Formularfelder und Steuerelemente.

In der font-Eigenschaft haben wir einige andere Optionen verwendet, die wir noch nicht gesehen haben und die wir im Folgenden erläutern werden:

SchriftstilDamit definieren wir die Schriftstil. Die Werte, die es haben kann, sind "normal", was die Standardeinstellung ist, "kursiv", wenn unser Buchstabe kursiv sein soll, dh kursiv; oder "schräg", wenn wir den schrägen Buchstaben haben wollen, was eine Art Kursivschrift ist, bei der nur die Zeichen geneigt sind und nicht alle wie in Kursivschrift.

Schriftart-VarianteWir werden es verwenden, um die Schriftvarianten und wir haben nur zwei Optionen, die "normale", die standardmäßig geliefert wird, und die Variante "Kapitälchen", auch Kapitälchen genannt, bei der Großbuchstaben die gleiche Größe wie Kleinbuchstaben haben.

SchriftstärkeEs ist eine der am häufigsten verwendeten Eigenschaften, da mit ihr Wir können die Dicke der Buchstaben steuern (Seien Sie vorsichtig, es stimmt nicht mit der Größe jedes Buchstabens überein, die wir später sehen werden). Numerisch gesehen hat es 9 Optionen, die Hunderter von 100 bis 900 sind, also 100, 200, 300, 400, 500, 600, 700, 800 und 900. Es gibt auch geschriebene Werte, das "normale", das 400 entspricht , "fett", was 700 entspricht und was wir fett nennen würden und das seltsamerweise nicht im Schriftstil, sondern hier auftauchte. Es gibt auch die Werte "fetter" oder "leichter" und manchmal andere wie "mittel" oder "schwer", die je nach Anzahl der Dicken, die die Schrift hat, Zahlenwerten zugeordnet werden.

SchriftgrößeMit dieser Eigenschaft, wenn Wir werden die Schriftgröße kontrollieren. Es stehen vier Werte zur Verfügung, "absolute Größe", "relative Größe", "Prozenteinheit" und "Maßeinheit". Es gibt einige absolute und relative Maßeinheiten, die in CSS definiert sind, wie z. B. em, die in dieser Eigenschaft am häufigsten verwendet wird, ex, px,%, in, cm, mm, pt oder pc. Zusätzlich zu diesen Maßen gibt es einige Wörter, die funktionieren und verwendet werden können, wie z. B. xx-klein für das kleinste, x-klein, klein, mittel, groß, x-groß oder xx-groß für das größte. Diese sechs Wörter entsprechen den Größen der verschiedenen HTML-Titel-Tags von

zu

und dies sind absolute Maßgrößen, sodass sie unabhängig von Browser- oder Bildschirmauflösung immer gleich aussehen. Die Wörter "kleiner" und "größer" können auch als relative Maße verwendet werden, die von der Schriftgröße des Elements abhängen, das sie enthält.

ZeilenhöheEs ist bereits in den Texteigenschaften definiert.
SchriftfamilieWeit verbreitetes Eigentum, das wir ermöglicht Ihnen die Auswahl der Schriftart oder Schriftart. Zuerst geben wir den Namen der Schriftart oder Schriftart ein, und optional können andere Schriftartnamen folgen, falls unser Browser oder System den ersten nicht hat oder nicht unterstützt. Es gibt keine Standardschriftart, da sie von unserem Browser abhängt, obwohl eine sehr gebräuchliche "Times New Roman" ist. Einige generische Schriftartwerte können "Serifen" sein, in denen einige Schriftarten wie Times New Roman, Garamond, Georgia oder Cambria enthalten sind; "Sans-Serif" und seine Schriften Verdana, Arial, Tahoma, Helvetica oder Futura. "Monospace" und seine Beispiele Courier New oder Monaco unter anderem. Und "Fantasie" mit den Typen Comic Sans oder Impact. Natürlich stehen uns noch viele weitere Schriftarten zur Auswahl.

Buchstaben-AbstandDamit können wir kontrolliere den Abstand zwischen den Buchstaben, und es funktioniert genauso wie sein Wortabstand-Analogon der Texteigenschaften, mit den Werten "normal" und einem gültigen Maß.

FarbeEndlich sehen wir die Eigenschaft der Farbe, die wir in unseren Text einfügen möchten. Standardmäßig ist es schwarz. Es gibt mehrere Möglichkeiten, die Farbe zu wählen, eine davon sind die 17 verschiedenen Farbwörter, die es gibt: Aqua, Schwarz, Rot, Gelb, Blau, Fuchsia, Grün, Limette, Orange, Grau, Kastanienbraun, Oliv, Marine, Lila , silber, blaugrün und weiß.

Eine andere Möglichkeit besteht darin, eine Farbe von RGB-Prozentsatz, dies ist einfach die Angabe von drei Prozentsätzen, die den Farben Rot ®, Grün (G) und Blau (B) entsprechen:

 Farbe: RGB (22 %, 76 %, 14 %); (Die 3 Prozentsätze müssen nicht 100% ergeben)

Ein anderer Weg ist durch RGB dezimal das funktioniert genauso wie der prozentuale RGB-Wert, aber anstatt drei Werte in Prozent zu setzen, werden sie als Dezimalwerte angegeben: