Zum Inhalt springen

CSS

Aus WikiJournal

CSS ist eine Abkürzung aus dem Englischen Cascading Style Sheets. CSS ist eine grundlegende Technologie zur Definition der Darstellung verschiedener Elemente von Webseiten: Text, Bilder, Überschriften, Listen, Tabellen usw. Diese Technologie wird von Webmastern verwendet, um Farben, Schriftarten und die Positionierung einzelner Blöcke sowie andere Aspekte des Erscheinungsbilds von Webseiten zu definieren.

Alle Fragen zur Verwendung und Konfiguration von CSS können auf der Diskussionsseite dieses Artikels gestellt werden.

Geschichte von CSS

Anfang der 1990er Jahre hatten verschiedene Browser ihre eigenen Stile zur Darstellung von Webseiten. Die HTML-Entwicklung verlief sehr schnell und konnte damals alle bestehenden Anforderungen an die Informationsformatierung erfüllen, weshalb CSS zu dieser Zeit keine breite Anerkennung fand.

Erst 1994 schlug Håkon Wium Lie vor, das Konzept der "Cascading Style Sheets" für HTML-Dokumente zu verwenden. Zu dieser Zeit war die Funktionalität der Browser begrenzt. 1990 war HTML, das von Tim Berners-Lee entwickelt wurde, dazu gedacht, eine strukturelle und keine visuelle Darstellung von Dokumenten zu bieten. Einer der Gründer von Netscape, Marc Andreessen, kündigte am 13. Oktober 1994 an, dass die erste Version von Netscape Navigator zum Testen verfügbar sei. Drei Tage vor dem Test veröffentlichte der norwegische Programmierer Håkon Wium Lie eine Entwurfsversion von CSS. Heute hat diese nur noch wenig mit den modernen Standards gemeinsam, aber damals wurde das allgemeine Konzept festgelegt. Nicht nur CSS, sondern auch mehrere andere Stilprogrammiersprachen konnten für das visuelle Design verwendet werden.

Im November 1994 wurde auf der Web-Konferenz in Chicago wie geplant der erste CSS-Entwurf vorgestellt. Politische Debatten und die Lösung einiger technischer Fragen dauerten zwei Jahre an, aber am 17. Dezember 1996 empfahl das W3C offiziell CSS1.

Seitdem wurden die folgenden CSS-Versionen mit erweiterter Funktionalität und verbesserten Möglichkeiten zur Steuerung des Webseitenlayouts veröffentlicht:

  • CSS1 - 1994: Begrenzte Funktionalität, die die Einstellung der Schriftgröße, die Änderung des Schriftstils: normal, kursiv oder fett, die Definition von Rahmen, Hintergründen, Textfarben und anderen Seitenelementen umfasste. Außerdem die Einstellung des Wortabstands, Zeilenabstands und Zeichenabstands, die Textausrichtung, Tabellen, Bilder. Es gibt Eigenschaften für innere und äußere Ränder und Rahmen, Breite, Höhe von Blöcken und die Positionierung von Elementen.
  • CSS2 - 1998-2009: Alle bisherigen Funktionen wurden beibehalten und mehrere zusätzliche hinzugefügt, nämlich: feste, absolute und relative Positionierung von Elementen, ein erweitertes Selektormechanismus und mehrere andere Funktionen bei der Arbeit mit grafischen und Tonelementen.
  • CSS3 - Die aktuelle CSS-Entwicklung, die Animationen, verschiedene Rahmenrundungen, Tabellen sowie Schatteneinstellungen, mehrere Hintergründe und andere Funktionen ermöglicht.

Grundlagen von CSS

Jeder, der mit der Erstellung von Websites beginnt, hat das Problem mit dem Design und dem allgemeinen Layout aller Seiten. Es ist notwendig, dies korrekt zu gestalten, damit alle Seiten in allen Webbrowsern wie Internet Explorer, FireFox, Chrom und anderen ähnlich aussehen. Das korrekte Layout sorgt für ein schnelles Laden der Seite und eine schnelle Indizierung durch Suchmaschinen wie Google. Dieses Handbuch und andere Artikel, die sich mit CSS befassen, bieten Ihnen eine allgemeine Anleitung zum Thema, wie alle Elemente der Seite und des Website-Designs mit CSS erstellt werden können. Dieses Handbuch richtet sich an diejenigen, die mit der Erstellung von Websites beginnen.

Wie man eine CSS-Datei erstellt und mit der Website verbindet

Es gibt drei Möglichkeiten, CSS mit einer Website zu verbinden und ein Layout mit dieser Technologie zu erstellen:

1) Verwenden Sie den folgenden Code in HTML, der zwischen den Head-Tags - <head> - platziert werden sollte. Der CSS-Code sollte dort zwischen den Style-Tags - <style type="text/css"> und </style> - platziert werden. Diese Methode hat den Nachteil, dass alle CSS-Einstellungen nicht mit anderen Seiten der Website verbunden sind, sondern nur auf der Seite funktionieren, auf der der Code platziert ist. 

<head>
<style type="text/css"> 
#example {
  width: 100%
}
.class_example {
 border: 1px solid red;
 }
</style>
</head>

2) Die zweite Methode benötigt eine spezielle CSS-Datei, in der alle CSS-Einstellungen vorgenommen werden. Zum Beispiel mystyles.css, in der der gesamte CSS-Code platziert werden sollte. Diese Datei kann mit einfachen Programmen wie "Notepad" und anderen kostenlosen Software wie Notepad++, Visual Studio Code usw. erstellt und bearbeitet werden. Wenn Sie eine separate CSS-Datei erstellen möchten, müssen Sie in HTML aller Seiten Ihrer Website (dies kann im Header-Template erfolgen) den Link zu dieser CSS-Datei angeben: 

<head>
<link rel="stylesheet" type="text/css" href="mystyles.css"/>
</head>

href="mystyles.css" - die Adresse auf dem Server der CSS-Datei.
Diese Methode ist die beste, da alle CSS-Einstellungen mit allen Seiten der Website verbunden sind. Diese Methode ist auch im Fall der CSS-Bearbeitung bequem, da Sie alle Änderungen nur in einer Datei vornehmen müssen, und alle Änderungen werden sofort auf allen Seiten übernommen.

3) CSS-Parameter können innerhalb des HTML-Codes wie folgt angegeben werden: 

<div style="border: 1px solid blue; padding: 5px;">Text oder anderes HTML-Element auf der Seite.</div>
  • Nach style= können Sie jede CSS-Einstellung vornehmen.

CSS-Syntax

Zunächst ist es wichtig zu wissen, dass CSS-Code drei Hauptelemente hat:

  • Selektor - der Name des HTML-Elements oder sein ID-Name. CSS ermöglicht es, eine Gruppe von Selektoren zu erstellen und dieselben Eigenschaften anzuwenden.
  • Eigenschaft - eine Einstellung, die auf den Selektor angewendet wird. (color, font, size usw.)
  • Wert - der Wert der Eigenschaft. Es hängt davon ab, welche Eigenschaft verwendet wird.

Unten können Sie ein Beispiel sehen, wie CSS-Code aussehen kann:

Um CSS-Werte auf ein HTML-Element anzuwenden, sollten Sie Folgendes tun:

  • Setzen Sie den ID-Namen für ein HTML-Element auf einer Seite (für die gesamte Seite, ein Bild, eine Tabelle oder ein div-Element). Der bessere Weg, ein HTML-Element zu platzieren, besteht darin, einen sogenannten <div>-Block zu erstellen und einen ID-Namen dafür festzulegen, um ihn später mit CSS zu gestalten:
<div id="id_name">Text, Bild oder anderes Element</div>

Webdesigner verwenden es fast täglich, aber nicht viele wissen tatsächlich, was das div-Tag bedeutet und wo es verwendet werden sollte. Dieser Artikel soll das div-Tag entmystifizieren, erklären, wann und wo es verwendet werden sollte, und es mit dem ähnlichen span-Tag vergleichen. div-Tag (oder Element), Abkürzung für division. Ein generischer Container für Blöcke von Inhalten, wie Bilder und Textabsätze. Kann durch eine ID eindeutig identifiziert werden, um in ein CSS-Stylesheet eingehängt zu werden.

Siehe spezielle Artikel zu CSS im WikiJournal, die alle Arten von Selektoren, deren Eigenschaften und Werte beschreiben.

  • Es ist möglich, Eigenschaften und Werte in geschweiften Klammern {} festzulegen, sobald der Name für ein HTML-Element auf der Seite oder dessen Selektor festgelegt ist. Es kann so aussehen:
div {
font-size: 12px;
font-family: Verdana;
}

#id_name {
background: blue;
border: 1px solid blue;
}

body {
background: gray;
border: 1px solid black;
}

img {border: 1px solid red;}
  1. div - legt die gemeinsamen Parameter und Werte für alle Elemente fest, die im div-Block enthalten sind.
  2. #id_name - legt den Namen für ein bestimmtes HTML-Element fest. Eigenschaften und Werte werden in geschweiften Klammern festgelegt, wie im obigen Beispiel gezeigt (im Beispiel werden Hintergrund und Rahmen festgelegt).
  3. body - in diesem Fall legen wir CSS-Eigenschaften für die gesamte Seite fest, da sich alle HTML-Elemente innerhalb des <body></body>-Tags befinden.
  4. img - legt Parameter und Werte für alle Bilder auf der Seite fest. Es ist auch möglich, Eigenschaften für ein bestimmtes Bild festzulegen, indem eine eindeutige ID dafür festgelegt wird. In diesem Fall sollte der Selektor so aussehen: #id_name img, d.h. ein Bild innerhalb eines Elements mit seiner ID - #id_name.
  5. table - legt Parameter und Werte für alle Tabellen auf der Seite oder der gesamten Website fest.
  6. td, th - legt Parameter und Werte für alle Zellen von Tabellen auf der Seite oder der Website im Allgemeinen fest.

Beispiel einer mit CSS erstellten Website

Testcode auf separater Seite

Fazit

Grundsätzlich ist die CSS-Syntax nicht kompliziert und kann leicht für das Seitenlayout und das allgemeine Website-Design verwendet werden. Weitere Informationen zur Verwendung von CSS für bestimmte Elemente auf einer Seite finden Sie in den folgenden Links. Wenn Sie Fragen zur Verwendung von CSS und zur Festlegung einiger Eigenschaften oder Werte haben, können Sie Ihre Nachrichten gerne auf der Diskussionsseite veröffentlichen.

Konfiguration von CSS-Elementen

Vorlage:Navigation/CSS

Abgerufen von „https://de.wikijournal.org/w-wiki/index.php?title=CSS&oldid=514“