Dicegame 1.0 – CSS Klassen und externes Stylesheet
Dicegame 1.0 – CSS Klassen und externes Stylesheet

Dicegame 1.0 – CSS Klassen und externes Stylesheet

Projekt

CSS Klassen sind eine von mehreren Methoden um die Verknüpfung zwischen HTML-Code und CSS-Code herzustellen. Ich nutze in Dicegame 1.0 überwiegend den Klassenbezug in einem externen Stylesheet. In diesem Beitrag werde ich 3 Schritte dokumentieren die sich an Anfänger richten und auch näher darauf eingehen.

Die Reihenfolge sieht so aus:

1) Wie man ein externes Stylesheet verknüpft
2) Den div-Containern Klassen vergeben um sie anschliessend mit CSS ansteuern zu können
3) Das Stylesheet erstellen und erstes CSS eingeben

Vorab will ich aber noch auf 3 Punkte eingehen die für das Verständnis wichtig sind.

Was ist ein Stylesheet?

Das Stylesheet ist (in unserem Fall) ein externes Dokument das CSS-Code enthält. Dieser Code ist für das Aussehen im Browser verantworlich. Es gibt dem HTML-Code ein Layout und macht die Seite optisch ansprechend.

Was sind Klassen?

Klassen stellen eine Verbindung zwischen HTML-Tags und CSS-Deklarationen her. Ein HTML-Tag definiert ein Element das im Webbrowser erscheint und die CSS-Deklaration gibt ihren Senf dazu indem sie am Aussehen dessen herumbastelt.

Was ist eine Ordnerstruktur?

Eine Website hat immer eine Ordnerstruktur, gleich den Orndern und Dokumenten auf dem Desktop Deines Rechners. Mein Würfelspiel hat eine ganz einfache Struktur, die ich Dir hier zeigen möchte.

  • Dicegame-1-0: Dies ist der Ordner unter dem das Spiel erreichbar ist
  • index.html: Dies ist das Dokument das das Spiel startet
  • style.css: Dies ist das externe Stylesheet
  • script.js: Hierin befindet sich der JavaScript Code, ebenfalls in einem externen Dokument
  • img: Dies ist der Folder indem sich alle Bilddateien befinden

1. Wie man ein externes Stylesheet mit HTML verknüpft

Um ein externes Stylesheet mit einer (oder mehreren) HTML-Dateien zu verknüpfen fügt man im head-Tag der HTML-Datei einen link-Tag hinzu. Hier im Code siehst Du wie das in Dicegame 1.0 gemacht wurde.

<!doctype html>
<html>
<head>
	<title>Dicegame 1.0</title>
	<link href="style.css" type="text/css" rel="stylesheet" />
</head>
  • head: Definiert den head=Bereich des HTML-Dokumentes und ist im Browser nicht sichtbar. Er enthält die Meta-Daten.
  • href: Gibt den Pfad zum Dokument an
  • type: Gibt an um welche Art Dokument es sich handelt, hier CSS
    • rel: Zeigt die Relation der Dokumente untereinander an, hier Stylesheet

Nachdem nun die Verlinkung erstellt wurde, ist es an der Zeit das CSS Dokument mit der Bezeichnung „style.css“ zu erstellen. Dies geschieht im Folder Dicegame 1.0 und nicht in einem Unterverzeichnis, da sonst der angegebene Pfad nicht mehr funktionieren würde.

Dazu wird ein neues Dokument im Text- oder Codeeditor erstellt und style.css genannt. Auf die Endung .css kommt es hier an damit der Brwoser auch erkennt dass es sich um ein Stylesheet handelt.

2. Der HTML-Code bekommt Klassen zugewiesen

Für Dicegame 1.0 reichen 3 Klassen aus. Diese werden auf die entsprechenden Elemente, hier die div-Container, angewandt:

<body>
	<div id="canvas“ class="canvas">
		<div id="title">
		</div>
		<div id=„playground“ class="playground">
<!-- ---------- Text blocks display here ---------- -->
			<div id="playground_message">
				<div id="playground_message_left" class="field">
				</div>
				<div id="playground_message_right" class="field">
				</div>
			</div>
<!-- ---------- This is the machine's area ---------- -->
			<div id="playground_machine">
				<div id="playground_machine_avatar" class="field">
				</div>
				<div id="playground_machine_dice" class="field">
				</div>
			</div>
<!-- ---------- This is the user's area ---------- -->
			<div id="playground_user">
				<div id="playground_user_avatar" class="field">
				</div>
				<div id="playground_user_dice" class="field">
				</div>
			</div>
<!-- ---------- This is the button's area ---------- -->
			<div id="playground_button">
				<div id="playground_button_left" class="field">
				</div>
				<div id="playground_button_right" class="field">
				</div>
			</div>
		</div>
	</div>
</body>
</html>
  • class=“canvas“: Für das Spielfeld mit dem Titel
  • class=“playground“: Für das Feld in dem Sich die 8 Icons befinden
  • class=“field“: Für alle Icons

3. Das erste CSS

Das CSS-Stylesheet existiert zwar, hat aber noch keinen Inhalt. Ich werde vorerst nur einen Selektor und 3 Deklarationen dazu festlegen um den Rahmen dieses Beitrags nicht zu sprengen. Hier der Code:

body {
	background-color: #567890;
	display: flex;
	justify-content: center;
}

Dieser Code tut im Wesentlichen das Folgende:

  • body: Ist ein Selektor und steuert das HTML-Tag body an
  • background-color: Diese Eigenschaft legt die Hintergrundfarbe fest
  • display & justify-content: Dies sind zwei Eigenschaften aus dem Flexbox Modell

Auf das Flexbox Modell gehe ich hier nicht näher ein denn das würde ebenfalls den Rahmen des Beitrags sprengen. Das Flexbox Modell ist ein „System“ das es erlaubt das Verhalten von div-Containern zu bestimmen, je nachdem ob die Seite in der Desktop- oder der Mobilen Ansicht angezeigt wird. Ich werde diesem Thema bald eine Artikelserie widmen da es sehr komplex ist.

Im nächsten Beitrag gehe ich im Detail auf das Stylesheet und die für das Würfelspiel erforderlichen Deklarationen ein.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.