CSS

 CSS Cascaded Style Sheets

Ein HTML-Dokument, das keinerlei Formatierungsangaben enthält, wird gemäß einer Grundeinstellung im Browser formatiert.

Definition eines Style (html-3.htm)

• Direkt im Tag (nur in Ausnahmefällen)
  [code lang=“css“] <p style="font-weight:bold;">Fettgedruckt</p><[/code]
• Im Kopf einer HTML-Seite (kann nur in der aktuellen Seite verwendet werden)
  [code lang=“html“] <style>
  p { font-weight:bold; }
  </style>
  <p>Fettgedruckt</p></li>[/code]

• In einer externen Datei (wiederverwendbar)
  [code lang=“html“]
  <link rel="stylesheet" type="text/css" href="MeinStyle.css" />
  <p>Fettgedruckt</p>[/code]

Wenn eine Definition mehrfach vorkommt, gilt die, die dem betreffenden Tag am nächsten ist, es sei denn, sie besitzt die Ergänzung !important.

Man kann in einem Abschnitt <style>…</style> so genannte StyleSheets definieren und diese Styles auf einzelne, eine Gruppe von oder auf alle Tags einwirken lassen.

Aussehen eines Style

[code lang=“css“]
p {
font-family: Courier;
}
[/code]
Dieses Beispiel würde alle Tags des Typs p (Paragraf) im Fettdruck darstellen.

[code lang=“css“]
.MeineParagrafen {
font-weight: bold;
}
[/code]
Dieses Beispiel würde alle Tags der Klasse MeineParagrafen im Fettdruck darstellen.

[code lang=“css“]
#MeinParagraf {
font-size: larger;
}
[/code]

Dieses Beispiel würde das Tag mit der ID MeinParagraf größer darstellen.
Gleichzeitige Formatierung mehrerer Tags:

[code lang=“css“]
h1,h2,h3 {
font-size: larger;
}
[/code]

Zugehörige HTML-Konstrukte

[code lang=“css“]
<p>Hello ClubComputer</p>;
<p class="MeineParagrafen">Hello ClubComputer</p>
<p ID="MeinParagraf">Hello ClubComputer</p>
[/code]

Kaskadierung

Wenn ein Tag an mehreren Stellen definiert ist, gilt die Vorrangregel:

1. Inline-Style-Shees
2. Externer oder interner Style (Reihenfolge!)
3. Browser Anfangswert

Mit dem Zusatz !important vor dem schließenden Strichpunkt kann einer bestimmten Einstellung der Vorrang eingeräumt werden.

Es gibt 224 verschiedene Stilbeschreibungsnamen:

@font-face • @font-feature-values • @keyframes • align-content • align-items • align-self • animation • animation-delay • animation-direction • animation-duration • animation-fill-mode • animation-iteration-count • animation-name • animation-play-state • animation-timing-function • backface-visibility • background • background-attachment • background-blend-mode • background-clip • background-color • background-image • background-origin • background-position • background-repeat • background-size • border • border-bottom • border-bottom-color • border-bottom-left-radius • border-bottom-right-radius • border-bottom-style • border-bottom-width • border-collapse • border-color • border-image • border-image-outset • border-image-repeat • border-image-slice • border-image-source • border-image-width • border-left • border-left-color • border-left-style • border-left-width • border-radius • border-right • border-right-color • border-right-style • border-right-width • border-spacing • border-style • border-top • border-top-color • border-top-left-radius • border-top-right-radius • border-top-style • border-top-width • border-width • bottom • box-decoration-break • box-shadow • box-sizing • break-after • break-before • break-inside • caption-side • clear • clip • color • column-count • column-fill • column-gap • column-rule • column-rule-color • column-rule-style • column-rule-width • columns • column-span • column-width • content • counter-increment • counter-reset • cursor • direction • display • empty-cells • filter • flex • flex-basis • flex-direction • flex-flow • flex-grow • flex-shrink • flex-wrap • float • font • font-family • font-feature-settings • font-kerning • font-language-override • font-size • font-size-adjust • font-stretch • font-style • font-synthesis • font-variant • font-variant-alternates • font-variant-caps • font-variant-east-asian • font-variant-ligatures • font-variant-numeric • font-variant-position • font-weight • hanging-punctuation • height • hyphens • image-orientation • image-rendering • image-resolution • ime-mode • justify-content • left • letter-spacing • line-break • line-height • list-style • list-style-image • list-style-position • list-style-type • margin • margin-bottom • margin-left • margin-right • margin-top • mark • mark-after • mark-before • marks • mask • mask-type • max-height • max-width • min-height • min-width • object-fit • object-position • opacity • order • orphans • outline • outline-color • outline-offset • outline-style • outline-width • overflow • overflow-wrap • overflow-x • overflow-y • padding • padding-bottom • padding-left • padding-right • padding-top • page-break-after • page-break-before • page-break-inside • perspective • perspective-origin • phonemes • position • Property • quotes • resize • rest • rest-after • rest-before • right • Specifies what happens if content overflows an element's box • table-layout • tab-size • text-align • text-align-last • text-combine-upright • text-combine-upright • text-decoration • text-decoration-color • text-decoration-line • text-decoration-style • text-indent • text-justify • text-orientation • text-overflow • text-shadow • text-transform • text-underline-position • top • transform • transform-origin • transform-style • transition • transition-delay • transition-duration • transition-property • transition-timing-function • unicode-bidi • user-select • vertical-align • visibility • voice-balance • voice-duration • voice-pitch • voice-pitch-range • voice-rate • voice-stress • voice-volume • white-space • widows • width • word-break • word-spacing • word-wrap • writing-mode • z-index

 

Webseiten-Layout

In HTML gibt es zwei Möglichkeiten, um eine Seite zu strukturieren: mit Tabellen (table) oder mit Abschnitten (div). Eine Tabelle ist eine starre Abfolge von Zeilen und Spalten, die nicht veränderbar ist. Dagegen hängen die Abschnitte nicht so starr aneinander wie die Zellen einer Tabelle.

Tabellen-Layout (layout-table.htm)

[code lang=“html“]
<table>
<tr>
<td>
Hier ist die erste Spalte.
</td>
<td>
Hier ist die zweite Spalte.
</td>
<td>
Hier ist die dritte Spalte.
</td>
</tr>
</table>
[/code]

 

Abschnitts-Layout (layout-div.htm)

[code lang=“html“]
<style>
.column {
float: left;
width: 33.33%;
}

.row:after {
content: "";
display: table;
clear: both;
}

@media (max-width: 600px) {
.column {
width: 100%;
}
}
</style>
<div class="row">
<div class="column">
Hier ist die erste Spalte.
</div>
<div class="column">
Hier ist die zweite Spalte.
</div>
<div class="column">
Hier ist die dritte Spalte.
</div>
</div>
[/code]

Die Struktur der beiden Anordnungen schaut sehr ähnlich aus. Der Unterschied ist, dass man die Tabellenstruktur in keiner Weise verändern kann, es werden immer drei nebeneinander liegende Zellen mit Text sein. Wenn daher der Bildschirm kleiner wird, bleibt nichts anderes über, als den Bildschirm horizontal hin- und herzuschieben.

Bei der Abschnittsstruktur erfolgt über das class-Attribut ein Verbindung zu einer .css-Datei, in der beschrieben werden kann, wie diese Abschnitte angeordnet werden sollen: horizontal nebeneinander – wie bei einem großen Bildschirm, oder gestapelt aufeinander – wie bei einem Handy.

In einem modernen Design befindet sich zusammengehöriger Inhalt in einem Division-Tag (div). Wie diese Abschnitte angeordnet werden, kann von der Bildschirmgröße abhängig gemacht werden, man spricht von „responsive design“.

Würde man keine besonderen Stile anwenden, würden diese Abschnitte einfach hintereinander angezeigt werden.

So schaut nun das Layout bei einem normalen PC-Bildschirm bei beiden Varianten aus:

Wenn die Bildschirmbreite verringert wird, schaltet die Abschnitts-Variante um:

CSS-Frameworks

Ein Framework ist eine Sammlung von Styles, die die Entwicklung von Webseiten vereinfachen.

• w3.css (https://www.w3schools.com/w3css/)
• Bootstrap (erfordert jQuery) (https://www.w3schools.com/bootstrap/)
• FoundationPress (komplexe Lösung) (https://foundationpress.olefredrik.com/)

Über die Anwendung von Bootstrap werden wir beim nächsten Clubabend mehr hören.

---

Hinweise

• Alle hier in Klammen gesetzten Dateien findest Du auf der Seite http://sex.clubcomputer.at -> webseiten zum Ausprobieren.
• Die Beispiele in diesem Beitrag sind auch in einem Foliensatz zu finden.
• Beachte auch den Beitrag „Websprachen lernen“, in dem zahlreiche Links zu dem hier besprochenen Thema zu finden sind.