INT

Internet-Technik

CSS

CSS

Mit HTML beschreibt man die Struktur und Bedeutung der Teile eines Dokuments.

Mit CSS lässt sich die Darstellung dieser Teile festlegen.

Verwendung

CSS lässt sich auf verschiedene Weise in HTML einbinden.

Möglichkeit 1

Als externe Datei, getrennt von den Inhalten im HTML.

Im <head> notiert man

		
			<link rel="stylesheet" href="mydesign.css" />

rel-Attribut immer gleich href ist die URL deiner CSS-Datei

Merke: jede HTML-Datei kann mehrere CSS-Dateien einbinden.

		
			<head>
			  <title>Seitentitel</title>

			  <link rel="stylesheet" href="layout.css" />
			  <link rel="stylesheet" href="type.css" />
			  <link rel="stylesheet" href="colors.css" />
			</head>

Möglichkeit 2

Gesammelt im <head> der HTML-Datei.

		
			<html>
				<head>
					<title>Seitentitel</title>
					<style>
						CSS-Regeln
					</style>
				</head>
				<body> … </body>
			</html>

Möglichkeit 3

Direkt innerhalb des HTML-Dokuments, bei den betreffenden Elementen.

Im Tag notiert man das style-Attribut

		
			<p style="CSS-Regeln">…</p>
Möglichkeit 1 —   immer super
Möglichkeit 2 —   fast nie gut
Möglichkeit 3 —   immer schlecht

In der Regel ist eine Vermischung von Struktur und Gestaltung nicht sinnvoll.

Sie erhöht den späteren Verwaltungsaufwand, erschwert den Überblick und hat nur wenige Vorteile.

Daher sollte man versuchen, HTML und CSS getrennt zu halten.

Syntax

CSS verwendet Regeln um festzulegen, welche Stile auf welches Element angewandt werden.

		
			p {
				color: red;
			}

Selektor Eigenschaft
Property Wert
Value

Der einfachste Selektor ist der Elementname, zB. p, h1, li oder td

				
					p {
						color: red;
					}

Der Selektor definiert eine Menge von Elementen, auf die der jeweilige Stil angewandt werden soll.

zB. wählt der Selektor p alle HTML-Elemente <p> zur Formatierung aus.

Der Selektor li alle <li> Elemente.

Der Selektor img alle <img> Tags.
usw.

Der Selektor nennt die Bedingungen, die ein Element erfüllen muss, damit der nachfolgende Satz von Eigenschaften darauf angewandt wird.

Jede Regel kann mehrere Eigenschaften enthalten.

				
					p {
						color: red;
						font-size: 20px;
						font-style: italic;
					}

Jede CSS-Datei kann mehrere Regeln enthalten.

				
					p {
						color: red;
						font-size: 12px;
						font-style: italic;
					}

					h1 {
						color: blue;
						font-size: 20px;
					}

Häufig verwendete Eigen­schaften sind zB. color, um die Schriftfarbe zu ändern.

Werte sind zB. red, green, black oder rgb(0, 128, 66)

Es gibt auch eine hexadezimale Notation für Farben, zB.

grün #4CD964
orange #FF9500
rot #FF2D55
blau #007AFF

font-size, um die Schriftgröße anzupassen.

Werte sind zB. 10px, 120%, 1.25em oder 0.5vw

font-family, um die Schriftart festzulegen, zB. auf Helvetica, Arial, Lucida oder einfach sans-serif.

Alternativ auch Bodoni, Times New Roman, Times, serif.

margin, um Abstände festzulegen, zB.

		
			margin-left: 100px;
			margin-bottom: 30px;
			margin-top: 5px;

Referenz

Github Repo

Beginne mit Aufgabe 4.

https://arnorichter.de/hsma/int/aufgaben