Cascading Style Sheets (CSS)

CSS ist eine Ergänzung zu HTML und erlaubt es Formatierungen von Text bis hin zu Seitenlayouts zu beschreiben. Professionell arbeitet man mit einer externen CSS-Datei, deren Informationen mit den einzelnen HTML-Seiten verknüpft werden. Damit wird die Trennung von Inhalt und Layout und somit die bessere Strukturierung ermöglicht. CSS wird von den Browser interpretiert und wird als Client-Seitiges Format bezeichnet. Standardisiert und entwickelt wird CSS durch das W3C-Gremium.

Vorteile für das Verwenden von CSS:

  • Ermöglicht barrierefreie Gestaltung
  • Gestaltung für unterschiedliche Endgeräte durch Media Queries
  • Suchmaschinenfreundlich
  • Aktualisierungen und Designänderungen sind leichter und schneller, da man CSS global anlegen kann

Nachteile für das Verwenden von CSS:

  • Nur bedingt cross-browser-tauglich: Nicht alle Browser interpretieren CSS-Befehle standardgemäß oder überhaupt
  • User können Stylesheets abschalten oder verändern

 

Weiterführende Links
Self HTML

Bewertung: 
3
Durchschnitt: 3 (1 Stimme)

CSS-Box-Model

CSS-Box-Modell
eine CSS-Box definiert sich durch:
- Breite(width), Höhe(height), Rahmenlinie(border), Außenabstand(margin) zum umgebenden Kasten oder Browserfenster, Innenabstand(padding) zum Inhalt des Elements, farbigem Hintergrund(background-color)

Der Innenabstand: padding (Polsterung)
Nach dem Inhaltsbereich folgt in jeder Box der Innenabstand. Das padding liegt innerhalb der Box und übernimmt die Hintergrundfarbe des Inhaltsbereichs. Padding kann für alle vier Seiten einer Box einzeln definiert werden. Die Eigenschaften sollte jeder kennen, dennoch hier nochmal:
padding-top für oben
padding-right für rechts
padding-left für links
padding bottom für unten
Padding funktioniert übrigens bei Block und Inline Elementen absolut identisch

Der Rahmen drum herum: border (Rahmenlinien)
Um das padding legt sich der Rahmen (border), der Rand der Kiste, der eine eigene Breite, Linienart und Farbe annehmen kann (width, style, color).Die Eigenschaften hier heißen:
border-top
border-right
border-bottom
border-left
Der border ist sehr flexibel und kann für jede dieser vier Seiten eine gesonderte Breite, Linienart und Farbe erhalten. Die Regeln zur Erstellung von Rahmenlinien mit border gelten ohne Einschränkungen auch für Inline Elemente

Der Außenabstand: margin (Rand)
Jede Box kann einen Außenabstand (margin) haben, der ebenfalls für alle vier Seiten einzeln definiert werden kann:
margin-top
margin-right
margin-bottom
margin-left
Der Außenabstand liegt außerhalb der Box und übernimmt die Hintergrundfarbe des umgebenen Elements. margin darf im Gegensatz zu border und padding übrigens auch negative Werte haben.

 

Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

CSS-Kaskadierung

Einführung in CSS-Kaskadierung: http://jendryschik.de/wsdev/einfuehrung/css/kaskade

Bewertung: 
0
Bisher keine Bewertung

Kaskade

Die CSS-Kaskade

Beginnen wir mit Ebene 1, der am wenigsten gewichteten Regel.

Ebene 1: Browser-Stylesheets

  • Browser definiert selbst gewisse Regeln, wie bestimmte Elemente auszusehen haben
  • Diese werden als erstes angewendet, werden aber auch am einfachsten bzw. als erstes überschrieben
  • Lehnen sich zum größten Teil an den Initialwerten der CSS-Empfehlung an
  • Unterscheiden sich leicht von Browser zu browser
  • Beispiel dafür ist der Standard-Abstand des <body> Elements zum Browserrand. Dieser muss – falls gewünscht – durch den Autor einer Webseite entfernt werden.

Ebene 2: User-Stylesheets

  • Einstellungen des Benutzers im Browser, die ebenfalls das Erscheinungsbild einer Webseite beeinflussen
  • Beispiel: die Definition einer bestimmten Schriftgröße.

Ebene 3: Autoren-Stylesheets

Dies sind die Stylesheets, die durch den Autoren – also durch den Entwickler – einer Webseite bei der Webseitenerstellung definiert werden.

Alle vom Autor definierten Stylesheets führen bei der Darstellung einer Webseite zu einem Gesamtstylesheet, in dem ebenfalls ein Element an mehreren Stellen, unterschiedliche Deklarationen bekommen kann, die sich überschneiden. Hier gilt: Je näher die Deklaration am Element ist, desto mächtiger ist sie.

Die Reihenfolge (in ihrer Priorität aufsteigend):

  1. externe CSS-Anweisungen
  2. interne CSS-Anweisungen
  3. style-Anweisungen direkt im Tag

Ebene 4: !important

Ist eine CSS-Deklaration mit dem Schlüsselwort “!important” versehen, wird sie immer den anderen Deklarationen bevorzugt. Sollten zwei Deklarationen mit “!important” versehen sein und auf ein Element zutreffen, gilt die zuletzt ausgegebene Deklaration.

Gewichtung der Selektoren durch die Spezifität

Doch auch unter den Selektoren gibt es bestimmte Prioritäten.
Um die Relevanz bzw. Priorität dieser Selektoren nun herauszufinden, wird ein Wert berechnet, der dessen Durchsetzungsfähigkeit festlegt. Dieser Wert lässt sich anhand eines Zahlenwertes ausdrücken, der mittels Tabelle errechnet wird.

  • A erhält den Wert 1, wenn die CSS-Deklarationen direkt im style-Attribut eines HTML-Elements notiert sind.
  • B ist die Anzahl der id-Attribute eines Selektors (“X#name”)
  • C ist die Anzahl aller anderen Attribute einschließlich Klassen und Pseudoklassen innerhalb des Selektors.
  • ist die Anzahl der Elementnamen und Pseudoelemente, die der Selektor beinhaltet.

 

Beispiele:

Selektor                 A               B               C               D

a:link                       0               0               1                1

.xyz                         0               0               1                0

#nav a.xyz              0               1               1                1

li a                           0               0               0                2

#nav li a                  0               1               0                2

Um die Spezifität nun als Wert vorliegen zu haben, werden die Zahlen der Reihe nach von Kategorie A bis Kategorie D hintereinander Weg geschrieben. Deklarationen mit einem höheren Wert (also einer höheren Spezifität) überschreiben die Deklarationen, mit einer niedrigeren Spezifität.

Im oberen Beispiel beschreiben alle Selektoren das gleiche Element:

<div id="nav">

<ul>

<li><a class="xyz" href="URL">Link</a></li>

</ul>

</div>

Die Deklarationen von “#nav a.xyz” treffen aufgrund der höheren Spezifität auf das Element zu und werden angewendet.

Sortierung nach Vorkommen

Haben zwei oder mehrere Selektoren die gleiche Spezifität und sprechen das gleiche Element an, so entscheidet die Reihenfolge der Vorkommens. Da Browser den Quelltext einer Seite von oben nach unten auslesen, zählt der zuletzt notierte Selektor.

 

Bewertung: 
5
Durchschnitt: 5 (1 Stimme)

CSS-Positionierung

Allgemeines:
Die Positionierung eines Elements bietet gestalterisch einen gewissen Spielraum.
So kann man mit einer gewissen Positionierung eines Elements andere Überlagern, per JavaScript bewegen lassen, oder einfach eine bestimmte Anordnung der Elemente festlegen.

Diese Angabe im CSS kann auf alle Elemente angewendet werden, ist nicht vererbbar und zeigt sich optisch im Browser.


Die vier Arten:
- static
- relative
- absolute
- fixed

 

static
Initialwert eines Elements.
Die Positionierung durch top,right,bottom und left ist hier unwirksam.
Elemente mit diesem Wert werden von links nach rechts und oben nach unten positioniert, also im Textfluß.

relative
Relative Positionierung im Textfluß.
Die Angaben top,right,bottom und left, verschieben dieses Element aus deren relativen Position und hat keinen Einfluss auf die nachfolgenden Elemente.

absolute
Absolute Positionierung eines Elements zum Eltern-Element, welches ebenfalls positioniert sein muss.
Diese Elemente liegen über alle anderen und haben keinen Einfluss auf die Positionierung der anderen.
Die Angaben top,right,bottom und left, positionieren dieses Element ausgehend vom Eltern-Element... dies kann z.B. ein anderes DIV oder der BODY Tag sein.

fixed
Wie absolute. Bis auf, dass sich das Element am Browserfenster orientiert und nicht mit gescrollt wird.
Man kennt diese Positionierung von fest positionierten Navigationen oder Werbebannern.

 

im CSS wird die Positionsart wie folgt bestimmt:

#beispiel {
   position: fixed;     <<< Art der Positionierung
   top: 10px;     <<< Abstand von oben
   left: 20px;     <<< Abstand von links
}

 

Positionierung durch "float":
Durch das Floaten von Elementen werden diese aus dem Textfluss genommen und verdrängen so nachfolgende Elemente mit ihrer Breite und Höhe und nicht in der gesamten Breite.
So können zum Beispiel Bilder von Texten umgeben werden.

Arten von float:
- left
- right

 Left positioniert das Element links im Eltern-Element und right tut dieses rechts im Eltern-Element.

#beispiel {
   float: left;
}

 

Weiterführende Links

http://little-boxes.de/lb1/IV-css-positionierung.html

http://de.selfhtml.org/css/eigenschaften/positionierung.htm

http://www.css4you.de/position.html

Bewertung: 
5
Durchschnitt: 5 (1 Stimme)

CSS-Selektoren

"Damit Formateigenschaften auf ein Element angewendet werden können, muss definiert werden, welche Elemente angesprochen werden. Dies geschieht über Selektoren. Als Selektoren bezeichnet man die Teile einer CSS-Regel, die vor dem Abschnitt aus geschweiften Klammern stehen. Voneinander unabhängige Selektoren, denen dieselben Eigenschaften zugewiesen werden, können in einer mit Kommata getrennten Selektor-Liste notiert werden." - Quelle: selfhtml.org

Außerdem: Terminologie von CSS-Selektoren

link zu w3schools CSS selectors

 

Bewertung: 
0
Bisher keine Bewertung

CSS-Sprites

Wie sehen Sprites eigentlich aus?
Auf der Startseite von www.spiegel.de seht ihr im großen Footer weitere Serviceangebote. Vor jedem dieser Service-Links steht ein kleines Icon. Alle Grafiken in einer einzigen  Datei zusammengefasst ergeben ein Sprite. Im Falle vom Spiegel-Footer sieht das dann so aus: http://www.spiegel.de/static/sys/v10/bg/bg_footer-partner-sprite.png

Wie wird das Sprite dann positioniert?
Gehen wir davon aus, wir haben eine DIV-Box mit der Abmessung von 30px x 30px. Wenn wir nochmal einen Blick auf das Spiegel-Sprite werfen sehen wir, dass diese Grafik wesentlich größer ist 30x30 px. Die "überstehenden Teile" der Grafik sind also nicht sichtbar da die DIV-Box zu klein ist. Und genau darin liegt die Idee: Ich verschiebe über die CSS-Eigenschaft "background-position" meinen Hintergrund so, dass nur der Ausschnitt sichtbar ist den ich sehen möchte und der Rest "abgeschnitten" wird.

Kann ich die einzelnen Icons kreuz und quer auf der Grafik platzieren?
Mit Sprites zu arbeiten bedeutet, dass ihr ein wenig rechnen müsst. Wollt ihr z.B. das 3. Icon von oben sehen, und jedes Icon ist 30px hoch, dann muss die Hintergrundgrafik 60px nach unten verschoben werden.

Und wie sieht der Quellcode dazu aus?
<div style="width:25px; height:30px; background-image:url(bg_footer-partner-sprite.png); background-position:0 -60px; background-repeat:no-repeat "></div>

OK, was bringt das Ganze?
Der Haupt-Sinn liegt darin, eine geringere Anzahl an requests zu erzeugen. Jedes mal wenn euer Browser eine Datei abruft (ein Bild, eine html-Datei, ein PDF, ...) stellt er eine Anfrage (request) an den Webserver. Z.B.: "Gib mir bitte die Datei logo.jpg"
Der Server antwortet (response): Hier ist die Datei logo.jpg.
Das "Frage-und-Antwort-Spiel" benötigt Zeit. Jedes Bild, jede CSS-Datei, jede JavaScript-Datei - alles wird beim Laden einer Seite separat angefragt. Durch das Zusammenfassen von Grafiken (Sprite) verringert man die Anzahl der Anfragen. Dadurch wird ein Geschwindigkeitsvorteilt erzielt.

Ist die Dateigröße eine Sprites größer oder kleiner als die Summe aus den Einzelgrafiken?
Das Ganze ist halt die Summe seiner Teile. Demnach macht es erstmal keinen Unterschied.
Trotzdem kann man etwas an Größe einsparen, in dem man Sprites farblich zusammenfast und z.B. als gif abspeichert.
Die Idee dahinter ist, beispielsweise alle roten Piktogramme zusammen zu fassen, das Rot anzugleichen und einschließend ein .gif mit 2 Farben zu speichern, da ein gif mit wenigen Farben kleiner ist als eins mit mehr Farben. Das selbe wiederholt man mit Grau, Blau, etc.

Sollte ich Sprites auf jeder Webseite einsetzen?
Tja, das hängt sehr mit der Projekt-Art und -Größe ab. Muss wirklich beim ersten Laden der Seite das E-Mail-Symbol in der Sprite-Grafik geladen werden, obwohl die Mailadresse nur im Impressum auftaucht? Auf den restlichen 600 Unterseiten erscheint diese Grafik nirgendwo. Habe ich sowieso nur spärlich hier und da mal ein Icon auf der Seite, lohnt sich der Mehraufwand dann wirklich?

Wann empfiehlt sich der Einsatz unbedingt?
Beim Hovern. Früher sah man häufig, dass eine Grafik, die beim Mousover wechseln sollte, nachladen musste. Das war unschön. Durch den Einsatz eines Sprites wird die Grafik direkt geladen und beim Hovern per CSS nur verschoben. Dies geschieht sofort, ohne dass irgend etwas nachgeladen werden muss.

Bewertung: 
5
Durchschnitt: 5 (2 Stimmen)

CSS-Timing-Functions

Siehe dazu PDF:

AnhangGröße
PDF icon AP19_KiraHesmer_timing.pdf55.15 KB
Bewertung: 
0
Bisher keine Bewertung

CSS3 – Farbe

CSS3

Attribute

In CSS werden Elementen über mehrere Befehle bzw. Eigenschaften Farben zugewiesen. Dabei sind die folgenden die wichtigsten und am meisten genutzten:

  • color /* Legt die Vordergrundfarbe (z.B. von Text) fest */
  • background-color /* Legt explizit die Hintergrundfarbe fest */
  • background /* Ist ein Abkürzungsbefehl, in dem u. a. auch die Farbe definiert werden kann - */
  • "background" beinhaltet die Befehle: …color, …image, …repeat, …attachement, …position
  • "background" Beispiel: body {background:#ffffff url('img_tree.png') no-repeat right top;}
  • "background" Info: http://www.w3schools.com/css/css_background.asp

 

Farbnotationen

Hexadezimal

Die Notation in CSS für Farben lässt sich derweil auf unterschiedliche Art und Weise realisieren. Zum Einen wird hier mit einem Hexadezimalwert gearbeitet, dem eine Raute vorangestellt wird. Dabei gilt es zu beachten, dass am Bildschirm mit RGB-Werten gearbeitet wird und daher je ein Byte (mit einer Wertigkeit von 0 bis 255) für jeden Farbkanal (Rot, Grün, Blau) zur Verfügung steht.

Gültige Farben wäre demnach #8800FF oder auch #42C69F. Im ersteren Beispiel ließe sich die Schreibweise auf #80F vereinfachen. Doppelte Zeichen können hier weggelassen werden, sofern jede dieser drei Zweiergruppen jeweils den gleichen Stellenwert hat. Einige Beispiele dazu:

  • #44FF22 ließe sich zu #4F2 vereinfachen
  • #3C1A89 ließe sich nicht vereinfachen
  • #133CCA ließe sich ebenfalls nicht vereinfachen, da die Bytes wie folgt aussehen würden: 13/3C/CA
  • #22FF3A ließe sich auch nicht vereinfachen, da nur zwei der drei Zweiergruppen eine Verkürzung der Schreibweise ermöglichen
  • #8383FF ließe sich nicht vereinfachen, da 8 und 3 nicht gleich sind

 

Schlüsselwort-Farbnamen

Außerdem gibt es die weniger verbreitete Möglichkeit, Farben mit ihren Namen anzusprechen.
 
Dazu gibt es folgende Begrifflichkeiten:
black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal und aqua.
 
Diese 16 Farben sind in HTML 4.0 definiert.
 
Mit CSS 2.1 kam die Farbe orange hinzu.
 
 
 

Dezimalangaben

  • rgb(R, G, B)

Jeder Farbkanal (Rot, Grün, Blau) besitzt 256 Darstellungswerte. 0 ist der dunkelste Wert, während 255 der hellste Farbton bzw. der Farbwert in gesättigtem Zustand ist.

So wird zum Beispiel aus #ff00ff dann rgb(255, 0, 255)
 


Prozentualangaben

  • rgb(R%, G%, B%)

Diese Schreibweise ähnelt der mit den Dezimalangaben, nur dass man stattdessen mit den Prozentwerten arbeitet.

So wird aus rgb(255, 0, 255) zum Beispiel rgb(100%, 0%, 100%)

 

CSS3 - RGBA und HSL

In CSS3 sind weitere Schreibweisen hinzugekommen, die nicht nur im RGB-Modell arbeiten, sondern Farben auch im RGBA- und HSB- bzw. HSL-Format erkennen. Diese werden mit den folgenden Befehlen aktiviert:

  • rgba(R, G, B, A) /* ähnlich rgb(R, G, B) */

Hier kann mit einem Alpha-Wert eine Transparenz angegeben werden. A liegt hier zwischen 0 für transparent bis 1 für opak.

  • hsl(H, S, L) /* Hue, Saturation, Lightness */

Hierbei wird ein Farbkreis zugrunde gelegt, der mit 360 Grad alle Farben abdecken kann. 0° bzw. 360° entsprechen hierbei Rot, 120° Grün und 240° Blau. Dieser Wert wird als Ganzzahl für das H angegeben. S steht für die Sättigung, 0% bedeuten daher, dass es sich um einen neutralen Grauton handelt, 100% lassen die Farbe strahlen. Das L für Lightness steht für die Helligkeit und sollte dementsprechend selbsterklärend sein. 0% bedeuten auch hier, dass kein Licht hinzugefügt wird, 100% bedeutet, dass die maximale Helligkeit erreicht ist.

 

Sonderfall Schlagschatten

Box-Elemente

Bei Schlagschatten gibt es eine gesonderte Notation:

box-shadow: <horizontaler Versatz> <Vertikaler Versatz> <Weichzeichnung> <Farbe>; /* für Block-Elemente wie DIVs etc. */

Dabei wird ausgehend von der Positionierung des betroffenen Containers der horizontale und vertikale Versatz angegeben, danach die Weichzeichnungsstärke und zu guter Letzt die Farbe in den angegebenen Formaten wie oben.

Wahlweise kann vor den horizontalen Versatz noch ein "inset" mit anschließendem Leerzeichen geschrieben werden, das weist den Browser dazu an, den Schatten "in" das Element zu verlagern und somit den Schattenwurf auf den Hintergrund anzuwenden.

Die Schwierigkeit, die hier hinzukommt ist die, dass es für verschiedene Browser auch mehrere Notationsmöglichkeiten gibt, wie eine solche Anweisung aussehen kann. Dabei werden die sogenannten browserspezifischen Präfixe verwendet. Hier eine Übersicht:

Mozilla Firefox: -moz-
Google Chrome, Safari: -webkit-
Opera: -o-
Internet Explorer: -ms-

Damit würde sich eine Definition, die für alle Browser gültig ist, wie folgt aussehen:

-moz-box-shadow: 5px 5px 10px #000;
-webkit-box-shadow: 5px 5px 10px #000;
-o-box-shadow: 5px 5px 10px #000;
-ms-box-shadow: 5px 5px 10px #000;
box-shadow: 5px 5px 10px #000;

Die letzte Zeile deckt das Restrisiko ab, dass ein Browser keine der verwendeten Präfixe, dafür aber den Schlagschatten beherrscht.

Text

Bei Text werden keine Präfixe verwendet. Statt box-shadow schreibt man text-shadow:

text-shadow: <horizontaler Versatz> <Vertikaler Versatz> <Weichzeichnung> <Farbe>; /* für Texte */

Die Notation ist hier die selbe.

---

Weiterführende Links

Weitere Informationen zu den einzelnen Angaben der jeweiligen Farben sind unter
http://www.w3.org/TR/2003/CR-css3-color-20030514/#colorunits zu finden.

Noch ein interessanter und übersichtlicher Link:
http://www.webmasterpro.de/coding/article/css-referenz-farben.html#goto-definition-ueber-farbschluesselwoerter-css-3

http://www.braekling.de/web-design/3311-css3-color-farben-mit-farbtabellen.html

http://www.peterkroener.de/aenderungen-in-der-neuen-css3-farbverlauf-syntax-ohne-vendor-prefix/

Bewertung: 
5
Durchschnitt: 5 (2 Stimmen)

Media Query

Media Query gehört zum Themenbereich CSS und es geht dabei darum geräteabhängige darstellung von Website zu realisieren. Dass also der Gerätetyp erkannt wird und dann das passende CSS dazu angesteuert wird.

Weiterführende Links:

http://www.heise.de/ix/artikel/Allen-recht-1058764.html
https://developer.mozilla.org/en-US/docs/CSS/Media_queries
http://webmasterparadies.de/webdesign/246-responsive-webdesign-teil-2-media-queries-einrichten.html

Bewertung: 
0
Bisher keine Bewertung

U5: CSS-Vererbung

Anleitung für das Wiki
In diesem Wiki könnt ihr gemeinsam Lerninhalte erstellen. Jedes Wiki ist direkt und für jeden angemeldeten User editierbar. Wenn bereits bei vorherigen Prüfungs-Wikis zum Thema (manchmal auch nur Teilgebiete streifend) erstellt wurden, so werden sie unten verlinkt. Ansonsten einfach hier diesen Eintrag überschreiben und mit entsprechenden Inhalten füllen.
Um Beispielaufgaben etc. zu bearbeiten haben wir extra eine Lerngruppe (https://mediencommunity.de/lerngruppe-mediengestalter-ap-sommer-2019) eingerichtet, bitte diese für das gemeinsame Lösen von Aufgaben nutzen.

Viel Erfolg beim Lernen.
Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

CSS-Vererbung: Beispiel

Wir haben folgende HTML-Struktur:

Und passen das CSS nun an:

Wie wir sehen können, sind, obwohl wir dem DIV-Element mit der Klasse "gross" die font-size von 20pt gegeben haben, auch die darinliegenden Elemente davon betroffen.
Und obwohl das DIV-Element mit der Klasse "blau" die color (gemeint ist damit immer die Schriftfarbe) blau hat, sind auch hier die darinliegenden Elemente betroffen.

Wenn wir nun einen Schritt weiter gehen:

Und dem H1-Element (Überschrift 1. Rangordnung) die Farbe "red" und die font-size "30pt", wird damit der vererbte Wert überschrieben; Wir sprechen nun das Element direkt an, somit muss es nicht mehr die Eigenschaften seines Eltern-Elementes übernehmen.

AnhangGröße
PDF icon U5 CSS-Vererbung.pdf1.48 MB
Bewertung: 
3
Durchschnitt: 3 (1 Stimme)