lehrkraefte:blc:informatik:glf24:web:hello-css

This is an old revision of the document!


Aber mit Style bitte

CSS steht für Cascade style sheet.

Mit CSS kann das Aussehen bestimmter Elemente und ihrer Unterelemente (cascade!) festgelegt werden.

Elemente könne mit verschiedenen Selektoren ausgewählt werden.

/* Kommentare zwischen Slash Stern und Stern Slash */
h1 {  /* alle Übertitel <h1>...</h1> */
   color: white;          /* Textfarbe als Farbname */
   background: #002244;   /* Farbe als Hex-Code */
}
.wichtig {  /* Alle Elemente mit dem Attribut class="wichtig", z.B. <div class="wichtig">...</div> */
    font-weight: bold;  /* Fette Schrift */
}
#catpics {  /* Das (einzige!) Element mit id="catpics" */
    border-radius: 5px;           /* Abgerundeter Rand */
    border-style:solid;           /* Durchgezogener Rand */
    border-width: 2px;            /* 2 Pixel breiter Rand */
    background-color:orange;
    margin:20px;                  /* 20px Platz ausserhalb vom Element */
    padding:10px;                 /* 10px Platz innerhalb vom Element */
}
#catpics > div { /* Alle Div-Elemente, die direkt innerhalb des Elements mit id="catpics" sind. Aber nicht verschachtelte Unterlemente */
    display:flex;                      /* Flexible Anordnung der Element innerhalb */
    align-items: center;               /* Elemente innherhalb vertikal zentrieren */
    justify-content: space-evenly;     /* Elemente horizontal gleich verteilen */
    flex-wrap: wrap;                   /* "Zeilenumbruch", wenn zu viele Elemente */
}
  • lehrkraefte/blc/informatik/glf24/web/hello-css.1742985867.txt.gz
  • Last modified: 2025/03/26 10:44
  • by Ivo Blöchliger