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)

Bildpositionierung im CSS & HTML

Damit ist entweder die allgemeine Positionierung von Elementen mit CSS gemeint oder die Hintergrundbildpositionierungen mit CSS.

Positionierung von Elementen mit CSS

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

Hier einige kurze Beispiele dafür:

1. Beweglich (Thumbnails, etc.)
img#Galeriebild{
float:left;
display:inline;
margin:11px;
border:0px;
}

2. Fest ( z.B. Buttons über irgendwas drüber )
img#Logo{
position:absolute;
left:33px;
top:55px;
border:0px;
}

3) Fest, nicht wegscrollen ( erst ab IE7 )
img#Logo{
position:fixed;
left:33px;
top:55px;
border:0px;
}

Wenn man was absolut positionieren will, dann muss die Box drumherum ebenfalls absolut oder - falls diese beweglich sein soll - relativ positionieren.

Beispiel: Man will etwas irgendwo über den Seiteninhalt positionieren, eine wunderschöne Layer-Werbung zum Beispiel. Wenn man da jetzt einfach absolut hinschreibt, dann klebt es am body fest. Wenn man aber den Seiten-div der mit "margin: 0px auto;" zentriert ist relativ setzt, dann orientiert sich das Element an der Seite.

Was im Code weiter unten steht, wird immer obendrübergeschoben (NICHT über Flash!!!)

 

Hintergrundbildpositionierungen mit CSS

de.selfhtml.org//css/eigenschaften/hintergrund.htm#background_image

Beispiel:

body{
background-image:url(../bilder/body-Hintergrund.jpg);
background-repeat: no-repeat; //(repeat-x, repeat-y, repeat)
background-position: left top;
//oder
background-position: center top;
//oder
background-position: 10px 30px;  //(10 von links, 30 von oben)
}

ALLGEMEINE POSITIONIERUNG IM CSS

  • body{
  • background-image: url(grafi k.gif);     = Hintergrundbild liegt im selben Ordner wie CSS-Datei
  • background-position: right bottom;     = position des Hintergrundbildes.
  • background-repeat: no-repeat oder repeat;    = (keine) Wiederholung des Hintergrundes
  • background-size: cover;     = Anzeigegröße des Hintergrundbildes.
  • background-size:
  • cover = Fläckendeckendes Bild, füllt ganzen Bildschirm aus, Bild wird hierbei "abgeschnitten", wenn Größe nicht passt.
  • auto = Skaliert originalformat auf gesamte Breite des Bildschirms
  • contain = Bild wird auf Inhalts"größe" des Webseitencontents skaliert.

 

In HTML einbinden (index.htm)

index = startseite

  • Verknüpfung durch <img> Tag
  • width, height = Breite und Höhe, Maße des Bildes, können in px "100" oder in Prozent "30%" angegeben werden
  • alt = “...“ Beschreibung des Bildes, zur Orientierung für Blinde. Suchmaschinen erkennen so
  • den Bildinhalt. Berschreibung wird angezeigt, wenn Bild nicht darstellbar ist.
  • src = “button.png“ Dateiname und Verlinkung des Bildes
  • href="link" Verlinkt das Bild mit einer Webseite

<img src=“button.png“ width=“200“ height=“200“ alt=“Knopf mit Text“ href=“www.webseite.de“ >= Bild liegt im selben Ordner wie der HTML-Code <img src=“Bilder/button.png“ width=“20%“ height=“30%“ alt=“Knopf mit Text“ href=“www.webseite.de“ >= Bild liegt im Unterordner „Bilder“ !ACHTUNG!alt ist sehr wichtig beim Einfügen eines Bildes. Gründen siehe oben.

 

Videos zum Thema

Grundlagen für den Gebrauch von Bilder auf einer der Webseite in HTML mit dem IMG Element. Wichtige Attribute bei Bildern sind sicherlich CLASS, TITLE und ALT.

https://www.youtube.com/watch?v=_BArhD7NubE

Auch hier grundlegende Informationen wie man Bilder Bilder in HMTL einfügt. 
https://www.youtube.com/watch?v=XvKT3FWSLfo

Möchte man Hintergrundbilder im HTML verwenden, dann werden diese über CSS zugewiesen.
https://www.youtube.com/watch?v=u5Chq_GF_8k

Bilder werden mittlerweile nicht mehr nur über IMG eingebunden. Für responsives Webdesign können Bilder an bestimmte Bildschirmanforderungen geknüpft werden. Z.B. Handy im Hochformat hat andere Anforderungen als ein 5K iMac. Dann kommt das PICTURE Element hinzu.
https://www.youtube.com/watch?v=uLLqafzVIlw&list=PLPjKx80JC4CAWBNOp8z_LJqYIekU8MzKi&index=4

Bilder für das Web optimieren ist ein ergänzender Teilbereich. Natürlich sollte man sich Gedanken über Auflösung und Qualität sowie Speicherplatz machen.
https://www.youtube.com/watch?v=udaLENwDyXY

 

Bewertung: 
0
Bisher keine Bewertung

CSS (Cascading Style Sheets)

CSS (cascading style sheets) ermöglicht das Formatieren von HTML/XML Tags und ist somit also für das Design einer Website verantwortlich. Größter Vorteil ist natürlich das strikte Trennen von Inhalt und Layout/Design (.html und .css). Das ermöglicht schnelles (und vor allem einheitliches) Ändern von Formatierungen.

Weitere Vorteile sind zum Beispiel:
1.Datenreduzierung (<h1> muss nur einmal formatiert werden und nicht in jedem HTML-Dokument)
2.Ermöglicht eine bessere Übersicht in den Dokumenten (Jeder der schon einmal einen Newsletter gemacht hat (dort wird das CSS nicht ausgelagert) weiß was ich meine).
3.Einbinden mehrerer CSS-Dateien (media, print, style-switcher, …)

Schreibweise
Selektor {Eigenschaft: Wert;}
h1 {font-size:18px;}
Die Überschrift h1 soll 18 Pixel groß sein.
Das kann auch kompliziert werden.

body#home .content_hide_all > h1:hover,
body#webdesign .content_hide_all > h1:hover {cursor: help;}

Wir lesen den Selektor von hinten:
Wenn ein h1 Element mit der Maus überstrichen (:hover) wird und es sich nur in der Verschachtelungsebene (>) (hier wird also die Vererbung eingeschränkt) von der Klasse  content_hide_all befindet und auf der Seite mit der ID (Individualformat) vom Body home oder webdesign ist, dann ist der Mauszeiger ein Fragezeichen.

Ziel einer solchen langen Anweisung ist es, das HTML-Markup so simpel und kurz zu halten wie es möglich ist.

Einbinden von CSS in das HTML:
1.im <head> als <style type=“text/css“>Hier kommt das CSS rein!</style> (wird beim Newsletter gemacht)
2.im <head> als Link <link rel="stylesheet" type="text/css" media="screen" href="css/master.css" /> (das CSS wird hier ausgelagert)
3.als inline-style <li style="display:block">Text</li> (wird beim Newsletter gemacht)
4.als Import innerhalb einer CSS-Datei: @import url(screen/fancy/jquery.fancybox-1.3.1.css);

Links zu CSS:

Quizsammlung zum Thema CSS http://www.thestyleworks.de/quiz/index.shtml

 

Bewertung: 
0
Bisher keine Bewertung

CSS-Selektoren

Hier könnt ihr eure Notizen, Sammlungen von hilfreichen Links etc. zum Thema sammeln. Einige Beiträge gibt es bereits aus vorhergehenden Prüfungsvorbereitungen.

Weiterführende Links

http://css-selektoren.mozork.de/

http://jendryschik.de/wsdev/einfuehrung/css/selektoren

Tags: 
Bewertung: 
0
Bisher keine Bewertung

Boxmodell (CSS)

Bewertung: 
2
Durchschnitt: 2 (1 Stimme)

CSS-Selektoren Tutorial

Wozu sind Selektoren da?

Selektoren innerhalb einer CSS-Datei sprechen HTML-Tags an und weisen diesen Attribute (Farbe, Hintergrundfarbe, Textformatierung uswusf.) zu und geben dazu die entsprechenden Werte an.

Klingt gut, aber wie sieht so ein Selektor aus?

Die Syntax (Schreibweise) einer CSS-Regel ist wie folgt:

Selektor { Attribut: Wert; }

wobei man jedem Selektor auch mehrere Attribute zuweisen kann. Will man dies denn nun tun, so trennt man die einzelnen Attribute immer mit einem Semikolon voneinander ab.

Bsp.: Selektor { Attribut, Wert; Attribut: Wert; Attribut: Wert; … }

Welche Selektoren gibts denn so?

Der Universalselektor

Wie man ihn auch aus den SQL-Befehlen kennt, das *. Mit dem Sternchen (Asterisk) spricht man alle Elemente einer HTML-Datei an, das heißt, dass allen Elementen die Attribute zugewiesen werden, die man in so einer CSS-Regel notiert.

Bsp.: * { color: #fff; background-color: #000; }

Mit dieser CSS-Regel wird allen Elementen weiße Schriftfarbe und schwarze Hintergrundfarbe zugewiesen. Sinn macht das sicherlich keinen, es dient lediglich dem Zweck.

Der Tag- bzw Typ-Selektor

Will ich nun genauer vorgehen und nur bestimmte Elemente meiner HTML-Datei ansprechen, so kann ich dies indem ich zum Beispiel nur einer bestimmten Sorte von Tags Attribute zuweise. Das ist einfacher als einem Kind nen Lolli zu klauen, glaubt es mir:

Bsp.: h1 { color: #f00; font-size: 36px; font-weight: bold; }

So, damit haben wir jeder Überschrift höchster Ordnung (jedem Tag h1) die Werte "rote Farbe", "Schriftgröße 36 Pixel" und "Schriftschnitt fett" zugewiesen.

Der Klassen-Selektor

Jetzt wird es langsam spannender. Wir wollen jetzt eine Klasse definieren. Klassenselektoren kann man beliebig vielen Tags auf einer HTML-Seite zuweisen. Nehmen wir an, wir haben Überschriften zweiter Ordnung (h2) einmal in der linken Spalte einer Webseite auf weißem Hintergrund und einmal in der rechten Spalte auf schwarzem Hintergrund. Dumme Geschichte, denn wir haben ja vorher notiert:

h2 { color: #000; }

wodurch alle Überschriften der zweiten Ordnung nun schwarz sind und somit rechts nicht mehr lesbar.

Das Problem lösen wir einfach indem wir allen h2-Tags auf der rechten Seite folgenden Zusatz geben:

<h2 class="name">Überschrift</h2>

Jetzt können wir diese Überschriften gesondert ansprechen mit einem Klassenselektor:

.name { color: #fff; }

Die Notierung ist also ein Punkt und der Name, den man dem Tag als Wert zuweist. Der Name ist hierbei frei wählbar. Ob man also sinnvoll ausschreibt "rechts" bei unserem Beispiel oder "name" wie ich oder sowas schönes wie "mistmistmist" bleibt euch überlassen. Wichtig ist folgende Schreibweise:

.klassenname { Attribut: Wert; }

Der ID-Selektor

Wie der Klassenselektor kann man auch mit dem ID-Selektor einzelne Tags verändern, auch wenn man diese vorher schon mit einem Tag-Selektor verändert hat. Man sollte nur in das Tag des Elements das Attribut id notieren und sich wieder einen lustigen Namen einfallen lassen.

<h2 id="name">Noch eine Überschrift</h2>

Unterschiede zum Klassenselektor gibt es allerdings nicht nur in der Schreibweise! Oh ja, denn eine ID vergibt man nur ein einziges Mal in einer HTML-Datei. Wie auch in Datenbanken werden IDs nur einmal vergeben und damit hat sichs.

Merke: Klassen so oft man lustig ist, IDs nur ein einziges Mal vergeben.

Wie notiert man ID Selektoren nun in einer CSS-Datei? Ganz einfach:

#idname { Attribut: Wert; }

Also eine Raute mit dem ID-Namen, geschwungene Klammer und so weiter und so fort wie bisher.

Hier sind wir dann am Ende mit dem oberflächlichen Selektorengedönse angelangt. Ich werde auf Wunsch gerne noch erklären was Attributselektoren sind, wie man Kindselektoren notiert, welche Sonderzeichen es noch gibt neben Raute und Punkt und was diese dann so bewirken und was Pseudoselektoren sind (Letztere sind übrigens m.E. nicht zu verachten und sicherlich Prüfungsrelevant, bzw. kann ich mir nicht vorstellen, dass man die weglässt. Aber das weiß ja nur die zfa -__- ).

Pseudo-Selektoren

Wer da den Namen gewählt hat weiß ich nicht, aber er klingt sehr seltsam beim ersten Mal. Ein Pseudoselektor wird hinter einem Selektor angefügt und beschreibt bestimmte Zustände des Elements, welches man mit dem Selektor angesprochen hat.

Zum Beispiel haben Links vier verschiedene Zustände. Da wäre der "Normalzustand", wo der liebe Link einsam und allein auf der Website rumhängt und keiner mit ihm interagiert. Dies wäre der :link Zustand. Will man also diesem Zustand eines Links Eigenschaften zuweisen, macht man das so:

a:link { Attribut: Wert; }

Dann hätten wir noch die Links, welche schonmal besucht wurden. Sprich sie wurden bereits einmal vom Benutzer der Seite angeklickt und wechseln somit in den benutzten Zustand (klingt etwas schmutzig).

a:visited { Attribut: Wert; }

Der dritte Zustand ist der beliebte "Mouseover-Effekt" oder "Rollover-Effekt". Früher hat man sowas mit Javascript gelöst, heute geht das mit CSS viel einfacher:

a:hover { Attribut: Wert; }

Hierzu muss man sagen, dass es noch den zusätzlichen Zustand a:focus gibt, der für Barrierefreiheit und Menschen, die mit der Tastatur navigieren gedacht ist. Sprich, a:hover ist für Mausinteraktion und a:focus ist für Tastaturinteraktion (ganz grob formuliert).

a:focus { Attribut: Wert; }

Der vierte Zustand ist der aktive Zustand eines Links. Das wäre dann der Moment in dem der User ihn anklickt und direkt mit dem Link interagiert. Auch für diesen Zustand kann man Eigenschaften dem Link zuweisen, was über folgende CSS-Regel passiert:

a:active { Attribut: Wert; }

WICHTIG! Wenn man alle vier Zustände in einer CSS-Datei beschreibt, dann muss dies auch genau in der Reihenfolge passieren, die ich soeben verwendet habe. Warum das so ist? Wegen der Vererbung von Eigenschaften; Und glaubt mir, da wollt ihr nicht, dass ich zu detailiert werde, es ist einfach wichtig, dass die Reihenfolge eingehalten wird:

a:link,
a:visited,
a:hover,
a:focus,
a:active { Attribut: Wert; }
 
Es gibt noch weitere Pseudoselektoren, aber die werden die ZFA im allgemeinen Teil sicherlich nicht interessieren, vor allem da man diese erst "kürzlich" eingeführt hat in die Sprache CSS.

Kombinierte Selektoren

Wie ihr oben seht, habe ich die verschiedenen Selektoren durch Kommas getrennt und dann allen { Attribut: Wert; } zugewiesen und ja, das funktioniert auch. Zum Beispiel kann es ja sein, dass ich nicht will, dass all meine Überschriften fett geschrieben werden. Ich hab ne h1, ne h2 und ne h3 und alle drei sind se fett. Also notiere ich folgende CSS-Regeln:

h1 { font-weight: normal; }
h2 { font-weight: normal; }
h3 { font-weight: normal; }

Rischdisch? Ja, richtig, aber es geht viel einfacher mit einem "Kombiselektor":

h1, h2, h3 { font-weight: normal; }

Alle drei Überschriften sind nun nicht mehr fett, sondern normal ausgezeichnet und wir haben Platz, Zeit und Datenmenge bei der CSS-Datei gespart.

Kindselektoren (Sonderzeichen die Erste: ">")

Gerade haben wir etwas über die kombinierten Selektoren gelernt, nun kommen wir zu den Kindselektoren. Wie der Name bereits sagt, geht es darum Kinder von Elementen anzusprechen mit einer CSS-Regel um genau diese Kinder zu stylen.

Warum? Weil es ja sein kann, dass man für die komplette Seite festgelegt hat, dass alle Links rot und fett sein sollen, da man rot + fett = super findet. Jetzt haben wir aber auch eine super Navigationsleiste, welche rot hinterlegt ist und somit sieht man unsere Superlinks darauf nicht.

Was tun? Wir sprechen die Links in der Navigation gesondert an, indem wir einen Kindselektor schreiben. 

Bsp.: Vorausgesetzt wir haben einen Container (div) mit einer ID "nav" und haben darin die Navigation untergebracht in Form einer unsortierten Liste "ul", welche die Listenpunkte "li" enthält, welche wiederum die Links "a" enthalten, dann können wir diese Kindeskindeskindeskinder mit einer CSS-Regel direkt ansprechen:

#nav ul li > a:link { color: #000; }

Jetzt sind alle Links im Container "nav" mit der "ul" und den "li"s darin schwarz.

Ein einfacher Kindselektor wäre zum Beispiel:

body > p { Attribut: Wert; }

In diesem Fall stylen wir nicht den Body sondern alle Paragraphen, die Kindelemente des body-Tags sind. Andere Paragraphen auf der Seite, welche Kinder anderer Elemente sind, sind davon nicht betroffen! Klar soweit?

Elternselektor

Wäre sinnvoll, ne. Gibts aber nicht. Es gibt keine CSS-Regel mit einem "kleiner als" Klämmerchen und deswegen gibts da auch nix zu wissen. Weitergehen, es gibt hier nichts zu sehen!

Nachbarselektor (Sonderzeichen die Zweite: "+")

Ach, aber den gibts? Ja, den gibt es. Folgendes Beispiel macht das relativ eindeutig.

Bsp.:

<h2>Überschrift</h2>
<p>Erster Paragraph</p>
<p>Zweiter Paragraph</p>

Welch Dilemma, wir wollen nur den ersten Paragraphen verändern und den zweiten unberührt lassen. Wir machen wir das nun? Indem wir einen Nachbarselektor notieren:

h2 + p { Attribut: Wert; }

Damit sagen wir, dass nur Paragraphen, welche auf der gleichen Ebene wie das vorhergehende Element liegen angesprochen werden und diesem unmittelbar folgen.

 

Indirekter Nachbarselektor (Sonderzeichen zum Dritten: "~")

Einen hab ich noch! Und der inrekte Nachbarselektor funktioniert ähnlich dem Vorhergehenden.

Der Unterschied ist, dass nicht nur der erste Nachbar eines Elements angesprochen wird, sondern alle nachfolgenden Elemente gleichen Typs, welche Nachbarn auf gleicher Ebene zu dem Element sind.

Bsp.: Da nehmen wir das Beispiel von oben mit der Überschrift und den beiden Paragraphen nochmal. Nur das wir diesmal ein anderes Sonderzeichen in die CSS-Regel reinschreiben.

h2 ~ p { Attribut: Wert; }

Damit sind nun alle Paragraphen, welche dem h2-Element folgen angesprochen.

Attributselektoren (noch mehr Sonderzeichen: "[" und "]" und "=" und ")

Ja Himmel, hörts denn nicht bald auf? Nein, denn man kann Elemente eines HTML-Dokuments auch nach ihren Attributen ansprechen und umgestalten.

Wozu brauch ich das, wo ich doch IDs und Klassen und all die anderen Optionen habe? Dazu ziehen wir ein Beispiel zur Hand:

Wir haben eine Seite mit einem Formular für unsere Benutzer, mit dem sie uns mit ihren Adressdaten versorgen können, damit wir sie daheim besuchen und persönlich kennenlernen können. Wozu sonst benötigt man wohl Benutzerdaten? In diesem Formular haben wir Texteingabefelder für Vorname, Nachname und all die anderen Adressdaten, außerdem haben wir Checkboxen, wo sich unser Benutzer entscheiden kann, ob er vom Admin persönlich oder dem Designer der Seite besucht werden möchte. Schlussendlich dann natürlich noch den Absende-Button.

Jetzt findet der Designer die Standardoptik der Formularfelder und des Buttons endlangweilig. Ergo will er sie umgestalten. Das tut er über Attributselektoren. Jedes input-Feld hat sein persönliches Attribut. Zum Beispiel haben Absendebuttons immer das Attribut type="submit" und Texteingabefelder immer das Attribut type="text".

Man könnte natürlich hingehen und alle Inputfelder mit einem Typselektor ansprechen:

input { Attribut: Wert; }

aber viel mehr Sinn macht es doch, wenn wir die Textfelder vom Absendebutton trennen:

input[type="text"] { Attribut: Wert; }
input[type="submit"] { Attribut: Wert; }

Natürlich kann man jedwedes Element eines HTML-Dokuments auf diese Weise ansprechen. Zum Beispiel über das title-Attribut oder das alt-Attribut oder was einem sonst so einfällt. Ein letztes Beispiel, welches aber nur ganz eventuell vielleicht Sinn machen könnte:

Wir haben Bilder auf der Seite, denn Bilder sind hübsch. Einige haben eine Weite von 300 Pixeln (300px) andere dagegen sind breiter (600px). Jetzt wollen wir aber nur den schmaleren Bildern eine Eigenschaft zuweisen und nicht allen Bildern. Ergo folgende CSS-Regel mit einem Attributselektor:

img[width="300px"] { Attribut: Wert; }

Natürlich sind dies Beispiele, die ich nun zur Hand genommen habe, weil sie Sinn machen, es gibt auch einen simplen, standard, normalo Attributselektor, womit man Elemente anspricht, die ein bestimmtes Attribut beinhalten unabhängig vom Wert desselben:

img[width] { Attribut: Wert; }

Somit sind alle Bilder einer Seite, welche das Attribut width im Element notiert haben, angesprochen. Wichtig sind hierbei die eckigen Klammern, welche das Attribut beinhalten.

Fehler bitte melden/korrigieren und Fehlendes ergänzen. =)

Bewertung: 
4.75
Durchschnitt: 4.8 (4 Stimmen)

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)