CSS-Typen

CSS-Typen

CSS kann auf folgende drei Arten zu unserer Website hinzugefügt werden:

  • Externes CSS (in einer separaten Datei)
  • Internes CSS (am Anfang eines Webseitendokuments)
  • Inline-CSS (Rechts neben dem Text, den es schmückt)

Externes CSS

Wie oben besprochen, haben wir bereits eine Datei mit dem Namen „style.css“ im Ordner „styles“ angelegt. Aber unsere HTML-Datei, dh index.html, kennt ihren Speicherort nicht. Daher müssen wir den angegebenen Code im Header-Abschnitt hinzufügen [zwischen und ] unserer HTML-Datei:


Beispiel

Externes CSS-Beispiel

Ab sofort haben wir nur den Speicherort der CSS-Datei hinzugefügt, aber keinen Code in unsere CSS-Datei. Somit sieht die Ausgabe etwa so aus:

Externe CSS-Ausgabe

Jetzt fügen wir Codes in unsere CSS-Datei ein. Wir werden die Kopfzeile rot, die Unterkopfzeile blau und den Absatz grün machen, wie unten erwähnt:

Externe CSS-Datei

Die Ausgabe sieht nun etwa so aus:

Externe CSS-Endausgabe

CSS-Code

Aus dem obigen Beispiel können wir ableiten, dass ein CSS-Code Folgendes enthält:

Externer CSS-Code

  1. Selector: Ein Selektor hilft uns, genau zu wissen, für welches Element wir einen bestimmten Stil hinzufügen möchten. Im obigen Diagramm wenden wir die grüne Farbe für alle an Stichworte. Dieser Selektortyp wird als Elementselektor [auch als Tag- oder Typselektor bezeichnet] bezeichnet. Wenn Sie ein anderes Element stylen müssen, sagen Sie , ändern Sie einfach den Selektornamen in CSS.
    Es gibt viele Arten von Selektoren. Im Folgenden sind die drei am häufigsten verwendeten Selektoren:
SelektornameProduktbeschreibungBeispiel
1. ElementauswahlUnter dieser Kategorie definieren wir einen gemeinsamen Stil für ein einzelnes HTML-Tag und es spiegelt den gleichen Stil für dieses Tag wider, wo immer es verwendet wird.p {

  Farbe grün;

}

Dies spiegelt die grüne Farbe für alle p-Tags wider.

2. ID-SelektorUnter dieser Kategorie geben wir jedem HTML-Tag eine ID und für diese ID definieren wir einen Stil. Dieselbe ID kann nicht mehreren HTML-Tags zugewiesen werden; Daher wird es meistens verwendet, wenn für ein bestimmtes HTML-Element ein einzigartiger Stil benötigt wird.

In CSS definieren wir es mit einem Hash-Symbol (#).

CSS:
#meine-id1 {
  Farbe grün;

}
HTML:

Dies spiegelt die grüne Farbe für jedes HTML-Tag wider, dessen ID gleich "my-id1" ist.

3. KlassenauswahlUnter dieser Kategorie definieren wir eine Klasse für jedes HTML-Tag und für diese Klasse definieren wir einen Stil. Es ist der am häufigsten verwendete CSS-Selektor, da dieselbe Klasse mehreren HTML-Tags zugewiesen werden kann, sodass ein CSS-Stil wiederverwendet werden kann.

In CSS definieren wir es mit einem Punkt (.).

CSS:
.meine Klasse {
  Farbe grün;

}
HTML:


Dies spiegelt die grüne Farbe für jedes HTML-Tag wider, dessen Klasse gleich „my-class1“ ist.

 

 

 

  1. Erklärung: Eine Deklaration ist ein Feldwertpaar, wobei field eine der Elementeigenschaften ist, die Sie ändern möchten, und der Wert die erforderliche Änderung ist. Z.B Farbe Rot;
  2. Eigentum: Wie oben besprochen, ist die Eigenschaft das Attribut eines Elements, das geändert werden kann. Mögliche Attribute für Absatz-Tag, dh kann Farbe, Ausrichtung, Schriftart usw. sein.
  3. Eigentumswert: Dies ist der mögliche Wert für eine Eigenschaft und ändert sich entsprechend. Bei Farbe kann es sich um eine beliebige Farbe in Hexadezimal oder einen Farbnamen handeln.

Wichtige Punkte zur CSS-Deklaration

  • Die gesamte Struktur eines CSS wird als Regel oder Regelsatz bezeichnet. Jeder Regelsatz muss in geschweiften Klammern ({}).
  • Jede Erklärung muss in Form von a Feldwert or Eigenschaft: Immobilienwert Paar, dh es muss einen Doppelpunkt haben (:) zwischen Feld und Wert.
  • Innerhalb jedes Regelsatzes können wir mehrere Deklarationen haben. Jede Deklaration muss durch Semikolon (;).

Internes CSS

In den obigen Beispielen haben wir eine externe CSS-Datei verwendet, um unseren Styling-Code zu platzieren, aber Sie können alle diese Codes auch zusammen mit HTML-Code hinzufügen. Dazu müssen Sie CSS hinzufügen unter innerhalb der Kopfzeile [zwischen und ] von HTML. Dies kann anhand des gegebenen Beispiels besser verstanden werden:

Syntax

Interne CSS-Syntax

Beispiel

Nehmen wir unser altes Beispiel von Sachin Tendulkar. Wir entfernen den Link zwischen externem CSS und fügen dasselbe CSS in unseren HTML-Code ein:

Internes CSS-Beispiel

Ausgabe

Hier haben wir gerade eine zusätzliche CSS-Deklaration für . hinzugefügt Tag und machte es fett. Somit sieht die Ausgabe etwa so aus:

Interne CSS-Ausgabe

Inline-CSS

Angenommen, Sie haben CSS für alle angewendet Tags, und es besteht die Notwendigkeit, einen einzigartigen Stil für eines der Tag, dann müssen Sie Inline-CSS verwenden. Ein Inline-CSS wird verwendet, um einem einzelnen Element einen einzigartigen Stil hinzuzufügen.
Um den Inline-Stil zu verwenden, fügen wir „style“ als Attribut dieses Elements hinzu.

Syntax

”>

Beispiel

Inline-CSS-Beispiel

Im vorherigen Beispiel fügen wir nur einen Inline-Stil mit internem CSS hinzu.

Ausgabe

Somit sieht die Ausgabe wie folgt aus:

Inline-CSS-Ausgabe

CSS-Priorität

Aus dem obigen Beispiel können wir auch schließen, dass ein Inline-CSS einen anderen CSS-Typ überschreiben kann. Daher wird die Priorität von CSS, die von der Webseite verfolgt wird, wie folgt sein:

  1. Inline-Stil (höchste Priorität)
  2. Externer und interner Stil (sie haben fast die gleiche Priorität)
  3. Standard des Browsers (auch Browser wenden CSS auf unsere Elemente an)

 

Hinterlassen Sie eine Nachricht

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.