CSS ed

Style Syntax für Html

Table of Contents

Grundlagen ed

einfügen ed

3 Möglichkeiten:

externe Datei
alles in eine .css Datei schreiben und dann in der html Datei (im head) einbinden:
<link rel="stylesheet" href="https://www.example.com/bla/datei.css">
<link rel="stylesheet" href="lokale-datei.css">

direkt in die Html Datei (global):
<style>
  ...
</style>

direkt in die Html Datei (lokal):
<table style="...bla...">...

Selektoren ed

alle html Elemente vom selben Typ
p { color: red; } /* gilt für alle <p> Blöcke */
h1 { color: red; } /* gilt für alle <h1> Überschriften */
b, i, tt { color: red; } /* gilt für alle <b>, sowie für alle <i> und <tt> Texte */

nur "Klassen" (markierte Elemente)
html:
<table class="mein-klassen-name"> ... </table>
...<b class="mein-klassen-name">...</b>...
css:
.mein-klassen-name { color: red; }

nur "IDs" (auch markierte Elemente, aber nur ein einzelnes)
html:
<table id="meine-id"> ... </table>
css:
#meine-id { color: red; }

direkte Kinder
p > b { color: red; } /* nur <b> Elemente direkt in <p> */

Kinder und Kindes-Kinder
p b { color: red; } /* erlaubt auch <p><i><b>...</b></i></p> */

direkte Nachbarn
i + b { color: red; } /* <b>, wenn es direkt nach einem <i>...</i> kommt */

Ränder ed

praktisch jedes html Element kann mit Rändern umhüllt werden

Das "Box-Model"

Größen
p {
  padding: 10px; /* 10 Pixel dicke in alle Richtungen */
  margin: 10px;
}
b {
  padding-top: 10px; /* nur oben */
  padding-right: 10px; /* nur rechts */
  padding-bottom: 10px; /* nur unten */
  padding-left: 10px; /* nur links */
  margin: 10px 20px 30px 40px; /* 10 oben, 20 rechts, 30 unten, 40 links */
}

Ränder
p {
  border: 5px solid black;
  /* oder */
  border-width: 5px;
  border-style: solid;
  border-color: black;

  /* styles */
  border-style: solid;   /* durchgezogene Linie */
  border-style: dotted;  /* punktiert */
  border-style: dashed;  /* gestrichelt */
  border-style: double;  /* doppelte Linie */
  border-style: hidden;  /* unsichtbar */
  border-style: none;    /* gar kein Rand */

  /* pro Seite */
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;

  /* runde Ecken */
  border-radius: 10px;
}

Größen ed

betrifft den "Inhalt"! Ränder, padding, margin sind zusätzlich

absolute Größe
span {
  width: 200px; /* Pixel */
  height: 100px;

  width: 5cm;  /* centimenter, milimeter */
  height: 13mm;
}

relativ
span {
  width: 50%;  /* 50% des umgebenden Elements */
  max-width: 800px;
  min-width: 100px;
}

Farben ed

Text, Vordergrund
p {
  color: black;
  color: red;
  color: #00ff00; /* "hexadezimal" grün */
  color: rgb(0,255,0); /* rot, grün, blau (0-255) */
  color: hsl(200, 50%, 50%);  /* Farbton (0-360), Sättigung, Helligkeit */
}
weitere Farb-Namen unter https://www.w3schools.com/colors/colors_names.asp

Hintergrund
p { background-color: black; }

Text ed

Ausrichtung
span {
  /* horizontal */
  text-align: left;    /* links ausrichten */
  text-align: center;
  text-align: right;
  text-align: justify; /* dehnen, bis es passt */
  /* vertikal */
  vertical-align: top;
  vertical-align: center;
  vertical-align: bottom;
}

Dekoration
span {
  text-decoration: none;
  text-decoration: underline;
  text-decoration: overline;
  text-decoration: line-through;
}

Fonts
span {
  font-family: Helvetica, sans-serif;
  /* probier "Helvetica" und falls es das nicht gibt "sans-serif" */
  font-style: italic;
  font-weight: bold;
}

Größe
span {
  font-size: 20px;
  font-size: 2.5em; /* 2.5 x "standard Größe" */
  font-size: 5cm;
  font-size: 5vw;   /* 5% der Fensterbreite */
}

sonstiges
span {
  text-indent: 50px;   /* Absatz einrücken */
  line-height: 0.8;    /* Abstand zwischen Zeilen */
  word-spacing: 10px;  /* Abstand zwischen Worten */
  white-space: nowrap; /* keine Zeilenumbrüche erlauben */
  text-shadow: 2px 2px 5px red; /* roter Schatten, 2px rechts, 2px runter, 5px verschwommen */
}

Categories: Computer, Programmieren