CSS

CSS steht für "Cascading Style Sheets" und ist  für die Gestaltung der Website zuständig. 

Aufbau

Eine CSS-Regel besteht aus:

  • einem Selektor (selector)

Der Selektor steht vor der geschweifen Klammer und wählt die Kästchen auf der Seite aus, welche gestaltet werden sollen.

    • Eigenschaft

    Ist die zu gestaltende Eigenschaft (Farbe, Schriftart etc.) nach ihr kommt ein Doppelpunkt

    • einem Wert (value)

    Ist der Wert den die Eigenschaft annehmen soll und steht nach dem Doppelpunkt. Der Wert wir mit einem Selikolon beendet.

    • einer Deklaration (declaration)

    Zwischen den geschweiften Klammerns steht die Deklaration/Anweisung welche die Gestaltung der Elemente beschreibt.

     

     

     

    Beispiele:

    .mitglied h3 {
    background: #07b; color: white;
    font-size: 1.25rem;
    padding: 1rem;
    margin: -0.5rem -0.5rem 1rem -0.5rem
    }

     

    body {
    max-width: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: column;
    min-height: 100vh;
    margin: 0;
    }

    Farben

    Im CSS benutzt man meisst end RGB-Wert oder den Hex-Farbcode.

    RGB steht für rot/red grün/green blue/blau. Jede Farbe kann durch zahlen zwischen 0 und 355 definiert werden. 

    Beim Hex-Farbcode gibt es 6 stellen welche aus 3 2-symbol-Elementen besteht. Jedes 2-Symbol-Element drückt einen Farbwert von 0-255 aus.

     

    Beispiele:

    Hex-Code: 
    #FF0000 = rot
    (128, 0, 128) = violett

    RGB-Wert:
    (255, 0, 0) = rot
    (128, 0, 128)= violett

    Überschriften

    Überschriften schöner gestalten kann man mit:

    display: (Alles andere rutscht in die nächste Zeile)
    font-size: (Schriftgrösse)
    text-align: (Ausrichtung)
    margin-bottom: (Leerraum)
    font-family: (wählt alles innerhalb der geschweiften Klammer)

     

    Grid und Flexbox

    Grid:

    Grid bedeutet übersetzt Raster, gemeint sind Anordnungen mit Zeilen und Spalten um eine Ordnung zu schaffen. Ein Grid-Layout ordnet Texte und Grafiken zu einem angenehmen Muster so das man alles schnell erkennen kann.

    • grid-column-start
    • grid-column-end
    • grid-row-end
    • grid-row-start
    • grid-template-columns
    • grid-template-rows
    • grid-column
    • grid-row
    • grid-area


    Grid und Flexbox haben eine ähnliche Funktion jedoch ist Grid im Vergleich zu Flexboy zwei Dimensional und ermöglicht Raster-Layouts. 

    Flexbox:

    Bei dem Flexible Box Layout kurz Flexbox können Boxen nur in einer Zeile oder einer Spalte platziert werden da es ein Dimensional ist.

    • justify-content: (flex-start, flex-end, center, space-between, space-around)
    • -> richtet die Elemente - Hauptachse.
    • align-items: (flex-start, flex-end, center, baseline, stretch)
    • -> richtet die Elemente - Querachse.
    • flex-direction: (row, row-reverse, column, column-reverse
    • -> reverse dreht Hauptachse.
    • order: (-2,-1, 1, 2, 3...)
    • -> Stelle ander man das Element haben will.
    • align-self: (flex-start, flex-end, center, baseline, stretch
    • ->überschreitet den Wert von align-items.
    • flex-wrap: (nowrap, wrap, wrap-reverse
    • -> legt fest ob Elemente auf eine Zeile gezwängt werden oder umgebrochen werden.
    • flex-flow: (bspw. column-reverse wrap reverse)
    • -> flex-direction und flex-wrap zusammen.
    • align-content: (flex-start. flex-end, center, space-between. space-around, stretch)
    • -> richtet die Zeile aus falls auf Querachse platz ist.

    Grid Bilder Automatisch responsive

    .link-boxen img{

    object-fit: cover;
    width: 100%;
    aspect-ratio: 3/2 ; -> Bild Verhältnisse/ Grösse

    }

    .link-boxen {

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); ->Grid ist automatisch responsive
    gap: 10px;

    }

    Box-Modell

    Alle Blockboxen haben einen Inhalt der von padding (Innenabstand), border (Rahmenlinie/ Rand) und margin (Aussenabstand) umgeben ist.

    position

    relative:
    Die relative Positionierung verschiebt eine Box von ihrer normalen Position im Flow und markiert den ursprünglichen Platz der Box als geschützt. Mit den Eigenschafften top, right, bottom, left kann man die positionierte Box im Viewport verschieben.

    absolute:
    Im Gegensatz zu relative nimmt die absolute Positionierung das Element komplett aus dem Flow hinaus. Alle anderen Elemente verhalten sich so als wäre es garnicht da. Mit den Eigenschafften top, right, bottom, left  kann man die genauen Kordinaten angeben. Die Positionierung bezieht sich immer auf die nächst umgebene positionierte (nicht static) Box (falls keine vorhanden ist auf das Stammelement html)

    fixed:
    Fixierte Elemente orientieren sich am Browserfenster. Da dies nicht mitscrollt bleiben fixierte Elemente auch während dem Scrolen an Ort und Stelle.

    sticky:
    Ein Element mit der Position sticky ist im Flow und scrolt mit, es ist eine Mischung aus fixed und absolut. Nachdem es einen gewissen Punkt erreicht hat wird es aus dem Flow gehoben und fixiert.

     

    media queries

    Mit @media kann man verschiedene Medientypen wie "all" (Standart Werte), "screen" (für Bildschirme aller Art und Grösse) und "print" (für Drucker) definieren. 
    Durch min-width und mac-width kann man einstellen ab welchem Viewport man das @media sehen will:

    • min= bis dort (bsp2. über 1000px)
    • max= ab dann (bspw. unter 1000px)