CSS: Unterschied zwischen den Versionen

Aus Vokabulabor
Zur Navigation springen Zur Suche springen
VisuellWikitext
Zeile 47: Zeile 47:
       </p>
       </p>
       <p class="normal-text">Und noch ein Absatz am Schluss.</p>
       <p class="normal-text">Und noch ein Absatz am Schluss.</p>
      </p>
      <p class="experiment">
        Mit diesen Absatz können wir mal so richtig experimentieren. Er ist genügend lang, dass er mehr als eine Zeile füllt, und das passt uns gut.<br/>
        Hier fängt eine Zeile wieder an.
       </p>
       </p>
   </div>
   </div>
Zeile 87: Zeile 91:
* Im Editor Visual Code werden die Farben angezeigt. Welche Farben gibt es? Cursor hinter den "color:", Strg-Enter liefert eine Auswahl.
* Im Editor Visual Code werden die Farben angezeigt. Welche Farben gibt es? Cursor hinter den "color:", Strg-Enter liefert eine Auswahl.


== Textausrichtung (Alignment) ==
* der erste Absatz soll rechtsbündig werden: dazu haben wir schon eine Klasse "right" eingetragen: &lt;div class="region1 **right**">
* der erste Absatz soll rechtsbündig werden: dazu haben wir schon eine Klasse "right" eingetragen: &lt;div class="region1 **right**">
* Diese Klasse definieren wir jetzt: eine Klasse beginnt in der CSS-Definition immer mit einem Punkt. In der HTML-Datei wird kein Punkt geschrieben!
* Diese Klasse definieren wir jetzt: eine Klasse beginnt in der CSS-Definition immer mit einem Punkt. In der HTML-Datei wird kein Punkt geschrieben!
Zeile 95: Zeile 100:
</pre>
</pre>
* Browser F5
* Browser F5
== Rahmen und Längenangaben ==
* Wir wollen, dass Div-Bereiche mit einem schwarzen Rahmen der Breite 3 Pixel versehen sind.  
* Wir wollen, dass Div-Bereiche mit einem schwarzen Rahmen der Breite 3 Pixel versehen sind.  
* Längen (oder Breiten) können in CSS verschieden Bezüge haben:
* Längen (oder Breiten) können in CSS verschieden Bezüge haben:
Zeile 107: Zeile 114:
** vw (viewport width): 1% der Breite des "View Ports"
** vw (viewport width): 1% der Breite des "View Ports"


== Das Boxmodell ==
* Der Abstand eines Absatzes zum nächsten Absatz soll eine halbe Zeichenbreite sein, mit dunkelblauem Rahmen.
* Der Abstand eines Absatzes zum nächsten Absatz soll eine halbe Zeichenbreite sein, mit dunkelblauem Rahmen.
<pre>
<pre>
Zeile 117: Zeile 125:
}
}
</pre>
</pre>
* Wir probieren mal Veschiedenes mit genau dem einen Absatz mit der Klasse "experiment" aus:
<pre>
<pre>
.sheet {
.experiment {
  background-color: #cc;
    border red 3px dotted;
  margin: 1em;
    margin: 1rem 2rem 3rem 5rem;
  padding: 1em;
    padding: 1rem 5rem;
}
    color: blue;
.region1 {
    background: lightcyan;
  background-color: lightgreen;
  margin: 1em 33%;
}
.region2 {
  background-color: white;
}
.error {
  color: red;
  border: 0.1em solid red;
}
.warning {
  color: blue;
}
.middle {
  text-align: center;
}
.right {
  text-align: right;
}
}
</pre>
</pre>
* Datei index.php im Browser öffnen.
* Werden bei margin, border oder padding 4 Einheiten angegeben, so gelten die für oben, rechts, unten und links.
* Bei 2 Einheiten: erste bezieht sich auf oben und unten, die zweite auf rechts und links.
* Bei einer Einheit: alle Seiten.
* Probiere mal die anderen Einheiten aus: px, vt, %
 
== Farben ==
* Der Standard definiert eine Reihe von Farbnamen: red green blue white black cyan...
* Diese können noch mit "light" oder "dark" modifiziert werden: lightgreen darkblue
* Reicht das nicht aus, kann mit Hexadezimalzahlen ein genauer Wert festgelegt werden.
** wenn 6 Hexziffern genommen werden, sind die ersten 2 der Rotanteil, die 2ten 2 der Grünanteil, die 3ten 2 der Blauanteil
** #00ff00: kein Rot, volles Grün (ff), kein Blau
** #ff0000: volles Rot, kein Grün, kein Blau
** #000000: kein "Licht": schwarz
** #ffffff: volles "Licht": weiß
** #1289ab: ein bisschen rot (12), mittel grün (89), viel blau
** mit einer Browser-Erweiterung kann man mittels "Color-Picker" diese Farbnummer ermitteln

Version vom 26. September 2023, 10:02 Uhr

Links

Zielsetzung

Cascading Style Sheets (CSS) ist eine Sprache, mit der HTML-Inhalte mit Formateigenschaften ausgestattet werden. Das dient der Trennung von Inhalt (HTML) und Form (CSS).

Schnellkurs

  • Datei anlegen: index.html
<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="tutorial.css">
</head>
   <div class="sheet">
      <h1>Try it!</h1>
      <p class="region1 right">
         This is a paragraph with right alignment.
      </p>
      <div class="region2">
         <p class="error">Error found</p>
         <p class="warning">Warning: it is dangerous</p>
      </div>
      <p class="region1 middle">
         This is a paragraph too, but with center alignment.
      </p>
      <p class="long-text">
         Dieser Satz ist ein besonders langer Satz, der mittels verschachtelter Relativsätze, die
         nicht immer einen Sinn
         ergeben, einfach mehrere Zeilen, die eben auch lang sein dürfen, erzeugen, so dass das als Muster für normale
         Textabsätze dienen kann.
      </p>
      <p class="long-text2">
         Dieser <b>zweite</b> Satz ist ebenfalls ein besonders langer Satz, der mittels
         verschachtelter Relativsätze, die nicht immer einen Sinn
         ergeben, einfach mehrere Zeilen, die eben auch lang sein dürfen, erzeugen, so dass das als Muster für normale
         Textabsätze dienen kann.
      </p>
      <p class="long-text2">Dieser <b>zweite</b> Satz ist ebenfalls ein besonders langer Satz, der mittels
         verschachtelter Relativsätze, die nicht immer einen Sinn
         ergeben, einfach mehrere Zeilen, die eben auch lang sein dürfen, erzeugen, so dass das als Muster für normale
         Textabsätze dienen kann.
         <br />
         Im gleichen Absatz folgt hier noch ein Satz.
      </p>
      <p class="normal-text">Und noch ein Absatz am Schluss.</p>
      </p>
      <p class="experiment">
         Mit diesen Absatz können wir mal so richtig experimentieren. Er ist genügend lang, dass er mehr als eine Zeile füllt, und das passt uns gut.<br/>
         Hier fängt eine Zeile wieder an.
      </p>
   </div>
   <div>
      <h2>Important Rivers</h2>
      <table class="standard-table">
         <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Length</th>
         </tr>
         <tr>
            <td>1</td>
            <td>Nil</td>
            <td>6000 km</td>
         </tr>
         <tr>
            <td>1</td>
            <td>Isar</td>
            <td>200 km</td>
         </tr>
         <tr>
            <td>1</td>
            <td>Rottach</td>
            <td>50 km</td>
         </tr>
      </table>
   </div>
</body>
</html>
  • Datei index.php im Browser öffnen.
  • Wir legen die Datei tutorial.css an.
  • Wir wollen die Überschrift in blauer Schrift, in der Mitte zentriert:
h1 {
  color: blue;
  text-align: center;
}
  • Im Editor Visual Code werden die Farben angezeigt. Welche Farben gibt es? Cursor hinter den "color:", Strg-Enter liefert eine Auswahl.

Textausrichtung (Alignment)

  • der erste Absatz soll rechtsbündig werden: dazu haben wir schon eine Klasse "right" eingetragen: <div class="region1 **right**">
  • Diese Klasse definieren wir jetzt: eine Klasse beginnt in der CSS-Definition immer mit einem Punkt. In der HTML-Datei wird kein Punkt geschrieben!
.right {
  text-align: right;
}
  • Browser F5

Rahmen und Längenangaben

  • Wir wollen, dass Div-Bereiche mit einem schwarzen Rahmen der Breite 3 Pixel versehen sind.
  • Längen (oder Breiten) können in CSS verschieden Bezüge haben:
    • Pixel (Punkte auf dem Bildschirm)
    • %: Prozent des umgebenden Elements.
    • em: Schriftbreite des Parent-Elements (umgebendes Element), und zwar die Breite des Buchstabens "m".
    • rem (root front size): Schriftgröße des HTML-Elements, meist relativ zu der Browser-Schriftgröße (16 px).
    • lh (line height): Höhe einer Zeile im Parent-Element
    • rlh (root line height): Zeilenhöhe des HTML-Elements, meist relativ zu 16 px
    • ch (character): die Höhe des Zeichens "0" (Null).
    • vh (viewport height): 1% der Höhe des "View Ports" (Sichtbarer Bereich des Anzeigegerätes: Im Smartphone die Bildschirmhöhe, in Windows die Fensterhöhe)
    • vw (viewport width): 1% der Breite des "View Ports"

Das Boxmodell

  • Der Abstand eines Absatzes zum nächsten Absatz soll eine halbe Zeichenbreite sein, mit dunkelblauem Rahmen.
div {
  border: solid 3px black;
 }
p {
  border: solid 1px darkblue;
  padding-bottom: 0.5rem;
}
  • Wir probieren mal Veschiedenes mit genau dem einen Absatz mit der Klasse "experiment" aus:
.experiment {
    border red 3px dotted;
    margin: 1rem 2rem 3rem 5rem;
    padding: 1rem 5rem;
    color: blue;
    background: lightcyan;
}
  • Werden bei margin, border oder padding 4 Einheiten angegeben, so gelten die für oben, rechts, unten und links.
  • Bei 2 Einheiten: erste bezieht sich auf oben und unten, die zweite auf rechts und links.
  • Bei einer Einheit: alle Seiten.
  • Probiere mal die anderen Einheiten aus: px, vt, %

Farben

  • Der Standard definiert eine Reihe von Farbnamen: red green blue white black cyan...
  • Diese können noch mit "light" oder "dark" modifiziert werden: lightgreen darkblue
  • Reicht das nicht aus, kann mit Hexadezimalzahlen ein genauer Wert festgelegt werden.
    • wenn 6 Hexziffern genommen werden, sind die ersten 2 der Rotanteil, die 2ten 2 der Grünanteil, die 3ten 2 der Blauanteil
    • #00ff00: kein Rot, volles Grün (ff), kein Blau
    • #ff0000: volles Rot, kein Grün, kein Blau
    • #000000: kein "Licht": schwarz
    • #ffffff: volles "Licht": weiß
    • #1289ab: ein bisschen rot (12), mittel grün (89), viel blau
    • mit einer Browser-Erweiterung kann man mittels "Color-Picker" diese Farbnummer ermitteln
Abgerufen von „https://vokabulabor.hamatoma.de/index.php?title=CSS&oldid=63“