Cookie Consent

Buffl uses cookies to provide you with a better experience. You can find more information in our privacy policy.

Buffl
Buffl
1.Semester betriebliches Informationsmanagement

4CSS!!!!!!!

NC
by Noemy C.

Wann benutzt man ein style-Attribut?

  • ein einziges Element wird direkt formatiert

  • Universalattribut-> darf an fast allen XHTML -Elementen notiert werden

  • Benutzt wenn Angaben nur ein einziges Mal für ein bestimmtes Element vorgenommen werden

  • Mit hilfe style-tags direkt im Quellcode angegeben

  • Gewünschten Eigenschaften sind nur einem Element zugewiesen

  • Vorteile gehen verloren: übergreifenden Befehl festzulegen, der dann alle h1 Elemente im HTML-Dokument gilt, größere Wartungs-/Erstellungsaufwand

Beispiel: h1 in rot und schriftgröße 12

<h1 style=”color:red;font-size:12px;”>Dies ist eine rote Überschrift</h1>

Wann wird das link-Element verwendet und wie wird es eingebunden?

  • Die beste Methode, CSS in ein XHTML-Dokument zu integrieren

  • Die externe Einbindung des Cascading Style Sheets

  • im Dokumentenkopf notiert und verweist auf ein externes Stylesheet. So können mehrere (viele!) Web-Seiten das gleiche Stylesheet verwenden, woraus sich ein Teil der Vorteile von CSS ergeben.

  • die Attribute rel, media, href und title mit angegeben, wobei media und title optional sind:

< link rel="stylesheet" href="stylesheet.css">

Quelle: Einbindung von CSS in XHTML --> über das <link> -Element

Wann wird das style-Element verwendet?

style-Elemente werden dazu verwendet, CSS-Regeln zu notieren, die im gesamten XHTML-Dokument gelten sollen. Es kann ein vollständiges Stylesheet enthalten, wo Regeln festgehalten werden, die dann alle Elemente dieses Typs formatieren.

Quelle: Einbindung von CSS in XHTML --> Über das style-Element

Was bewirkt das Attribut href?

Das Attribut href teilt dem Browser eine URL mit, unter der das Stylesheet gespeichert ist.

Quelle: Einbindung von CSS in XHTML --> über das link-Element

Was bewirkt das Attribut title?

Das Attribut title gibt dem Stylesheet einen Namen, so dass ein Anwender zwischen verschiedenen Darstellungen wählen kann, bspw. eine normale Darstellung und eine Darstellung mit hohem Kontrast:

< link rel="stylesheet" type="text/css" href="http:style-regular.css" title="normaler Kontrast"> < link rel="stylesheet alternate" type="text/css" href="style-highcontrast.css" title="hoher Kontrast">

Mit allen anderen Verwendungen von title (z.B. bei href)  wird nur ein Element benannt und ist keine Interaktion verbunden.

Quelle: Einbindung von CSS in XHTML --> über das link-Element

Was gibt das Attribut media im link-Element an?

Das Attribut media gibt an, für welche Ausgabemedien das referenzierte Stylesheet bestimmt ist. Es kann eine einzelne Medienbeschreibung sein oder eine durch Kommata getrennte Liste.

Mögliche Werte des Attributs media:

  • screen (Bildschirm)

  • print (Drucker)

  • tv (Fernseher)

  • tty (Fernschreiber)

  • aural (Sprachausgabe)

  • braille (Blindenschrift)

  • ...

Quelle: Einbindung von CSS in XHTML --> über das <link>-Element

Was gibt das Attribut rel im link-Element an?

Das Attribut rel im link-Element gibt die Beziehung des Elementes an. So erkennen alle Browser, dass es ein Stylesheet gibt, das sie auf das Dokument anzuwenden haben.

Quelle: Einbindung von CSS in XHTML --> über das link-Element

Was ist ein Deklarationsblock?

Ein Deklarationsblock beginnt mit einer offenen geschweiften Klammer "{" und endet mit der dazugehörenden schließenden geschweiften Klammer. Üblicherweise enthält ein Deklarationsblock eine oder mehrere Deklarationen, die durch ein Semikolon getrennt sind. 

Quelle: CSS Regeln --> Regeln zu CSS

Beispiel: {font-family;Arial, font-size 12 pt;color:red}

Was ist ein Selektor?

Der Selektor ist Bestandteil einer CSS-Regel und gibt an, welches XHTML-Element beschrieben werden soll.

Quelle: CSS Regeln --> Regeln zu CSS

Beispiel: body

Was ist eine Deklaration?

Deklarationen bestehen aus einer Eigenschaft, gefolgt von einem Doppelpunkt, gefolgt von einem Wert, bspw. color:red;

Quelle: CSS Regeln --> Regeln zu CSS

Beispiel: font-family: Arial

Was ist Vererbung?

Vererbung bezeichnet den Prozess, mit dem die Werte von CSS-Eigenschaften an verschiedene verschachtelte Tags weitergegeben werden. So ist beispielsweise das <p>-Tag immer mit einem <body>-Tag umgeben, so dass dem <body>-Tag zugewiesene Eigenschaften automatisch dem <p>-Tag vererbt werden. 

Quelle: Vererbung --> Vererbung

Was macht die Eigenschaft background-color?

Die Eigenschaft background-color bestimmt die Hintergrundfarbe des Elements.

Quelle: Eigenschaften und Werte von CSS --> color 

Was macht die Eigenschaft border-color?

Mit border-color kann man für ein Element die Rahmenfarbe bestimmen, hier können auch wieder die Untereigenschaften angegeben werden.

Quelle: Eigenschaften und Werte --> Weitere 

Was macht die Eigenschaft border-style und welche Werte können dabei angegeben werden?

Mit der Eigenschaft border-style kann man verschiedene Schmuckrahmen verwenden.

  • None/hidden (kein bzw. unsichtbarer Rahmen )

  • vdotted (gepunktet),

  • dashed (gestrichelt),

  • solid (durchgezogen),

  • double (doppelt durchgezogen),

  • groove/ridge/inset/outset(3D-Effekt)

Quelle: Eigenschaften und Werte --> Weitere

Was macht die Eigenschaft border-width?

Mit border-width kann man die Dicke des Rahmens um ein Element bestimmen (thin, medium, thick). Man kann die Untereigenschaften von border-width (border-top/right/bottom/left/-width) für verschiedene Rahmenbreiten oben, rechts, unten und links verwenden.

Quelle: Eigenschaften und Werte --> Weitere

Was macht die Eigenschaft color?

Die Eigenschaft color bestimmt die Vordergrundfarbe/Schriftfarbe eines Elements.

Quelle: Eigenschaften und Werte von CSS --> color

Was macht die Eigenschaft font-family?

Die Eigenschaft font-family bestimmt die Schriftart eines Textelements (z.B. Arial, Verdana...)

Quelle: Eigenschaften und Werte --> font

Was macht die Eigenschaft font-size?

Die Eigenschaft font-size bestimmt die Schriftgröße eines Textelements, diese kann in Punkten, in Prozent oder in Pixeln angegeben werden

Quelle: Eigenschaften und Werte -->  font

Was macht die Eigenschaft font-style?

Die Eigenschaft font-style gibt an, ob eine normale oder schräg laufende Schriftauszeichnung eines Textelements gewählt wird. Hier werden die Werte normal, italic und oblique angegeben.

Quelle: Eigenschaften und Werte --> font

Was macht die Eigenschaft font-weight?

Die Eigenschaft font-weight bestimmt die Schriftdicke eines Textelements. Als Werte werden hier normal, für eine normal dicke Schrift, und bold, für eine Fettgedruckte Schrift angegeben.

Quelle: Eigenschaften und Werte --> font

Was macht die Eigenschaft letter-spacing?

Die Eigenschaft letter-spacing gibt das Abstandsverhalten zwischen Zeichen an.

Quelle: Eigenschaften und Werte --> Abstände

Was macht die Eigenschaft list-style-type?

Die Eigenschaft list-style-type gibt das Erscheinungsbild der Listenelementmarkierung geordneter und ungeordneter Listen an, beziehungsweise die Art der Nummerierung geordneter Listen

  • none (es werden keine Listenelementmarkierung verwendet)

  • disc (gefüllter Kreis)

  • circle (leerer Kreis)

Quelle: Eigenschaften und Werte --> Weitere

Was macht die Eigenschaft margin-bottom?

Man kann mit margin-bottom bestimmen, wie viel Abstand ein Element zu seinem Nachfolgerelement nach unten hin hat.

Quelle: Eigenschaften und Werte --> Abstände

Was macht die Eigenschaft margin-left?

Die Eigenschaft margin-left gibt den linken Rand eines Elements an oder den Abstand zum links davon liegenden Element.

Quelle: Eigenschaften und Werte --> Abstände

Was macht die Eigenschaft margin-right?

Die Eigenschaft margin-right gibt den rechten Absatz/Rand eines Elements an oder den Abstand zum rechts davon liegenden Element.

Quelle: Eigenschaften und Werte --> Abstände

Was macht die Eigenschaft margin-top?

Mit der Eigenschaft margin-top kann man bestimmen wie viel Abstand ein Element zu seinem Vorgängerelement oder zu seinem Elternelement hat.

Quelle: Eigenschaften und Werte --> Abstände

Was macht die Eigenschaft text-align?

Die Eigenschaft text-align ermöglicht eine Textausrichtung, die Inhalte können linksbündig (left), rechtsbündig (right) oder zentriert (center) ausgerichtet werden. Bei justify werden die Inhalte beidseitig, im sogenannten Blockabsatz ausgerichtet.

Quelle: Eigenschaften und Werte --> Weitere

Was macht die Eigenschaft text-decoration?

Die Eigenschaft text-decoration ermöglicht Ausschmückungen, die dem Text eines Elements hinzugefügt werden können.

Quelle: Eigenschaften und Werte --> Weitere 

Beispiele:

None= wird der Text nicht ausgeschmückt

Underline= wird der Inhalt des Elements unterstrichen

Overline= wird der Inhalt des Elements überstrichen

Line-through= wird der Inhalt des Elements durchgestrichen

Was macht die Eigenschaft text-indent?

Mit der Eigenschaft text-indent erreicht man einen Texteinzug

Quelle: Eigenschaften und Werte --> Weitere

Was macht die Eigenschaft word-spacing?

Die Eigenschaft word-spacing gibt das Abstandsverhalten zwischen Wörtern an.

Quelle: Eigenschaften und Werte --> Abstände

Was sind Beispiele für Verstöße gegen die Barrierefreiheit?

  • mangelnde Struktur und Auszeichnung der Inhalte

  • keine Skalierbarkeit der Schriftgröße

  • blinkende oder animierte Texte

  • zu kleine oder schwer erkennbare aktive Elemente

  • fehlende Kontrolle über Text- und Hintergrundfarbe

  • zu kleine klick-/touchbare Bedienelemente

  • ...

Quelle: Barrierefreiheit --> Barrierefreiheit

Was sind Regeln in CSS und wie ist eine Regel aufgebaut?

Ein Stylesheet besteht im Wesentlichen aus einer Menge von Regeln. Regeln bestehen aus mindestens einem Selektor und einem Paar geschweifter Klammern, Deklarationsblock genannt, der eine Liste mit null oder mehr durch Semikola voneinander abgetrennten Deklarationen enthält

Beispiel für eine Regel:

h1 {font-family:Verdana; font-size:26pt; color:red}

Quelle: CSS Regeln --> Regeln zu CSS

Was sind Vorteile von CSS?

  • vereinfachen das Schreiben von Webseiten

  • trennen Layout/Darstellung vom Inhalt

  • gleiche Elemente werden einheitlich formatiert

  • flexibel

  • erhöhen die Wartbarkeit der Webseiten

  • Reduzieren die Kosten der Erstellung und Pflege von Webseiten, vor allem bei umfangreichen Web-Sites

Quelle: Einführung --> Das Cascading Style Sheet

Welche Formatierungsmöglichkeiten für Texte gibt es?

Um den Text in einem XHTML-Dokument mit CSS formatieren zu können, dienen u.a. die Eigenschaften color, font-family, font-style, font-weight und font-size.

Siehe auch "text-decoration".

Quelle: Eigenschaften und Werte --> font 

Welche Komponenten hat eine CSS-Regel?

  • Selektor: gibt an welches Element beschrieben werden soll

  • Eigenschaft. gibt an welche Eigenschaft des Elements formatiert werden soll

  • Wert: gibt den Wert der Eigenschaft an und gibt so mit an wie das Element formatiert werden soll

  • Beispiel: h1 { color: red; }

    h1 ist der Selektor color ist die Eigenschaft red ist der Wert

    Die CSS-Regel bewirkt, dass alle Überschriften h1 im Browser mit roten Buchstaben dargestellt werden.

    Quelle: CSS Regeln --> Regeln zu CSS

Welche Nachteile entstehen bei Verwendung eines style-Attributs?

  • keine Trennung von Struktur und Präsentation - was ja eigentlich Ziel der Verwendung von CSS ost

  • nur ein einziges Element wird formatiert

Welche Werte gibt es bei geordneten Listen?

Die Eigenschaft list-style-type definiert, wie die Aufzählungszeichen einer geordneten Liste (ol, ordered list) gebildet werden.

Im folgenden eine Auswahl der möglichen Werte:

  • decimal (Dezimale Nummerierung)

  • decimal-leading-zero (Dezimale Nummerierung mit führender Null)

  • lower-roman (Nummerierung in römischen Kleinbuchstaben)

  • upper-roman (Nummerierung in römischen Großbuchstaben)

  • lower-alpha (Nummerierung mit Kleinbuchstaben)

  • upper-alpha (Nummerierung mit Großbuchstaben)

  • ...

Quelle: Eigenschaften und Werte --> Weitere, siehe ggf. auch  W3C schools

Wie definiert man Pseudoelemente und Pseudoklassen?

Um Pseudoelemente oder Pseudoklassen zu definieren gibt es eine spezielle Syntax. Sie werden zentral in einem style-Bereich notiert. Bei diesen Elementen notiert man zuerst das betroffene XHTML-Elemente, z.B. a-Element für Verweise. Dahinter folgt ein Doppelpunkt und dahinter eine erlaubte Angabe, z.B.:

  • link (für noch nicht besuchte Verweisziele)

  • visited (für bereits besuchte Verweisziele)

  • focus (für mit der Tastatur ausgewählte Verweise)

  • hover (für Verweise während der Anwender mit der Maus drüber fährt)

  • active (für angeklickte Verweise)

Wie gibt man den Farbwert an?

Der Farbwert kann entweder als RGB-Farbwert oder als Schlüsselwort angegeben werden. Diese Werte können in einer Farbtabelle nachgelesen werden. Meist entsprechen die Namen der englischen Bezeichnung wie bspw. red, blue, white usw.

Eine Übersicht über die Farbnamen und die damit verbundenen RGB-Werte findet sich wiederum bei W3Schools.

Quelle: Eigenschaften und Werte von CSS --> color

Wie kann CSS in ein XHTML-Dokument eingebunden werden?

CSS kann auf drei Arten in ein XHTML-Dokument eingebunden werden

  1. Einbindung per style-Attribut

  2. Einbindung per style-Element

  3. Einbindung per link-Element

Quelle: Einbindung von CSS in XHTML --> Einbindung von CSS in XHTML

Wie wird das style-Attribut benutzt?

Hier werden die Attribute direkt ins Element eines XHTML-Dokuments eingebunden. D. h. innerhalb des einleitenden HTML-Tags erfolgt die Einbindung über das Attribut style, hinter dem die jeweils gewünschten Formatdefinitionen notiert werden.

Quelle: Einbindung von CSS in XHTML --> Über das style-Attribut

Wie wird das style-Element eingebunden?

Das style-Element wird innerhalb des Dokumentenkopfs head notiert. Bei der Einbindung mit dem style-Element muss das type Attribut immer angegeben werden. Das type Attribut ist der Hinweis für den Browser, um welche Art Stylesheet es sich handelt.

Quelle: Einbindung von CSS in XHTML --> Über das style-Element

Wobei hilft CSS?

CSS dient der Trennung von Layout und Inhalt. Dieses Prinzip findet sich bspw. auch in Form der Formatvorlagen(kataloge) bei Word oder der Funktion "Zellen formatieren" bei Excel.

Bei HTML bzw. XHTML handelt es sich um eine sog. Auszeichnungszeichnungssprache, also eine Sprache zur Strukturierung und Beschreibung von Inhalten. CSS ergänzt HTML/XHTML um die Möglichkeit, zu beschreiben, wie Inhalte ausgegeben oder angezeigt werden können. CSS (Cascading Style Sheets) sind der offizielle Standardmechanismus zum Definieren von Text- und Seitenlayouts für die Anzeige im Webbrowser (oder in anderen Medien).

Quelle --> Einführung --> Das Cascading Style Sheet

Wofür steht das "cascading" in CSS?

Cascading deutet auf die Vererbung der Eigenschaften hin. So werden bspw. für den body definierte Eigenschaften auch an die im body der XHTML-Seite enthaltenen p-Elemente vererbt, können aber durch spezifische Regeln für das p-Element überschrieben oder ergänzt werden.

Wofür steht RGB?

  • RGB steht für Rot-Grün-Blau

  • beschreibt den Sachverhalt, dass in der additiven Farbmischung jede (!) Farbe durch diese drei Grundfarben gemischt werden können, wobei die Grundfarben in unterschiedlichen Intensitäten eingehen.

  • In der Computertechnik stellt das Byte als Folge von 8 Bits einen elementaren Wertebereich dar.

  • Es können 256 Werte ausgdrückt werden, da jedes der 8 Bits einen von zwei Zuständen (0 oder 1) annehmen kann.

  • Aus der Kombinatorik der Mathematik wissen wir, dass 28 eben 258 ergibt. Wenn man 256 Intensitäten für rot mit 256 Intensitäten für Grün und die wiederum mit 256 Intensitäten von Blau kombiniert, können 256 x 256 x 256 (16.777.216) verschiedene Mischfarben bzw. Farbtöne erzeugt werden.

In XHTML (und vielen anderen Anwendungen) werden die Werte nicht als Dezimalzahl (Werte zur Basis 10) sondern als Hexadezimalwerte (Werte zur Basis 16) angegeben. Dabei repräsentieren die Buchstaben A, B, C, D, E und F die dezimalen Zahlenwerte 10, 11, usw. bis 15.

Ein RGB-Farbwert von #FF0000 ist somit das kräftigste Rot, #FFFEFE das blasseste Rot. #FF00FF ist Violett, #FFFF00 Gelb, #FFFFFF Weiß und #000000 Sxhwarz. Das Zeichen "#" gibt an, dass es sich bei den folgenden Werten um Hexadezimalzahlen haben.

Die Arbeitsweise kann hier praktisch nachvollzogen werden. 

Wozu dienen Pseudoelemente und Pseudoklassen?

Mittels Pseudoklassen und Pseudoelementen kann man Deklarationen für XHTML-Bestandteile definieren, die sich nicht durch ein eindeutiges XHTML-Elemente ausdrücken lassen, z.B. ein ‘‘noch nicht besuchter Verweis‘‘. Die Pseudoelemente und Pseudoklassen sind ein häufig genutzte Features des a-Elements.

Quelle: Pseudoelemente und Pseudoklassen --> Pseudoelemente und Pseudoklassen

Welcher Vererbungsbaum gibt die korrekte Vererbung der Eigenschaften eines Eltern-Elements an ein Kind-Element wieder?

1

Erstelle den CSS Abschnitt für die oben aufgeführte Webseite

Join Course
Preview

Author

Noemy C.

Information

Last changed

Report course
© 2023 Buffl GmbH