CSS3 an der Hochschule Ansbach | Karteikarten & Zusammenfassungen

Lernmaterialien für CSS3 an der Hochschule Ansbach

Greife auf kostenlose Karteikarten, Zusammenfassungen, Übungsaufgaben und Altklausuren für deinen CSS3 Kurs an der Hochschule Ansbach zu.

TESTE DEIN WISSEN

Hintergrundbild-Skalierung



Lösung anzeigen
TESTE DEIN WISSEN



  • background-size: 100px 100px;
    Hiermit wird das Bild auf exakte Werte skaliert. Der erste Wert bezieht sich auf die Breite, der zweite Wert auf die Höhe.
  • background-size: 75% 50%;
    Hiermit wird das Bild prozentual zur Box skaliert.Der erste Wert bezieht sich auf die Breite, der zweite Wert auf die Höhe.
  • background-size: contain;
    Hiermit wird das Bild so in die Box eingpasst, dass das Bild vollständig sichtbar bleibt. Es wird ein Letterbox-Verhalten in Kauf genommen.
  • background-size: cover;
    Hiermit wird das Bild so in die Box eingepasst, dass die im Verhältnis längere Seite beschnitten wird.
Lösung ausblenden
TESTE DEIN WISSEN

Box horizontal zentrieren

Lösung anzeigen
TESTE DEIN WISSEN

margin: 0 auto;

  • Wenn die Breite einer Box kleiner ist als die verfügbare Breite so wird die Box hierdurch horizontal zentriert.
  • Wenn der Wert "auto" für den linken und rechten Außenabstand gesetzt wird teilt der Browser die verfügbare Breite gleichmäßig als Außenabstand auf.
Lösung ausblenden
TESTE DEIN WISSEN

Normalisierung


Lösung anzeigen
TESTE DEIN WISSEN



  • Browser-Stylesheets können voneinander abweichen.
  • Um im Webdesign eine übergreifend einheitliche Grundlage für die Autoren-Styles nutzen zu können bietet sich eine CSS-Normalisierung an.
  • Häufig genutzt: https://github.com/necolas/normalize.css


Lösung ausblenden
TESTE DEIN WISSEN

Relative Längenmaße mit em

Bezug zur Schriftgröße des Elternelements

Lösung anzeigen
TESTE DEIN WISSEN
  • Die Einheit entspricht einer Verhältniszahl in Bezug auf die Schriftgröße des Elternelements. (1em = Schriftgröße des Elternelements)
  • Verschachtelte Elemente deren Schriftgröße auf Basis von em angegeben wurde potenzieren sich.
  • padding, margin und border beziehen sich oft auf die Schriftgröße, sie sind geeignet für em.

https://vorlesung.eric-bode.de/web/css3/einfuehrung/farb-und-massangaben/relative-laengenmasse-mit-em/index.html


           

Lösung ausblenden
TESTE DEIN WISSEN

Relative Längenmaße mit rem

em mit Bezug zur Wurzelebene

Lösung anzeigen
TESTE DEIN WISSEN
  • Die Einheit entspricht einer Verhältniszahl in Bezug auf die Schriftgröße des root-Elements. (1em = Schriftgröße des Root-Elements)
  • Die Verschachtelung spielt bei rem keine Rolle, da ausschließlich ein Bezug zum root-Element besteht.
  • Nur neueste Browser unterstützen rem.


https://vorlesung.eric-bode.de/web/css3/einfuehrung/farb-und-massangaben/relative-laengenmasse-mit-rem/index.html

Lösung ausblenden
TESTE DEIN WISSEN

Inline-Styles im HTML-Tag

Lösung anzeigen
TESTE DEIN WISSEN
  • Sie werden über das Attribut "style" definiert.
  • Sie eignen sich zum schnellen Testen von Styles auf Tag-Ebene.
  • Sie gelten ausschließlich für das Tag in dem sie definiert wurden.
  • Inline-Styles haben die höchste Priorität im Rahmen der Autoren-Styles und können nur mit der Angabe !important durch andere Styles überschrieben werden.


<!DOCTYPE html> 

<html lang="de">  

<head>    

<meta charset="utf-8">    

<title>Web Grundlagen: Die HTML-Grundstruktur</title>    

<meta name="description" content="Beschreibung der Seite">    

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">    

<link rel="stylesheet" href="normalize.css" media="screen">  

</head>  

<body style="background: black;">  

</body> 

</html>

Lösung ausblenden
TESTE DEIN WISSEN

Sheet

Lösung anzeigen
TESTE DEIN WISSEN
  • Das englische Sheet ist ein Blatt Papier bzw. im übertragenen Sinne eine Sammlung.
  • Hier handelt es sich um eine Ansammlung von Styles. Man spricht also von Stylesheet.
  • In der Praxis werden häufig je Aufgabenbereich eigene Stylesheets angelegt.
Lösung ausblenden
TESTE DEIN WISSEN

Absolute Längenmaße mit px

Lösung anzeigen
TESTE DEIN WISSEN
  • Das Pixel ist auf die Anzeige bzw. den Inhalt bezogen eine absolute Angabe.
  • Das Pixel ist bezogen auf Anzeigegeräte eine relative Maßeinheit, da die Auflösung variieren kann.
  • Für responsives Webdesign wird deshalb das viewport Meta-Tag verwendet um das Verhältnis von Gerätepixeln zu CSS-Pixeln zu definieren.


.box{

   width:  100px;

   lenght: 200px;

}

Lösung ausblenden
TESTE DEIN WISSEN

Stylesheet-Arten / Priorisierung

Lösung anzeigen
TESTE DEIN WISSEN

Stylesheets können unterschiedliche Quellen haben:
Browser-, Autoren- und Benutzer-Stylesheets

Nach folgender Reihenfolge wertet der Browser die Styles der unterschiedlichen Quellen aus:

  1. Wichtige Deklarationen (mit der Angabe !important) des Benutzers
  2. Wichtige Deklarationen (mit der Angabe !important) des Autors
  3. Deklarationen des Benutzers
  4. Deklarationen des Autors
  5. Deklarationen im Browser-Stylesheet

Innerhalb jeder Stufe wird anhand der Spezifizität der Selektoren unterschieden. Bei gleicher Spezifität entscheidet die Reihenfolge.

Lösung ausblenden
TESTE DEIN WISSEN

Externe Stylesheet-Datei

Lösung anzeigen
TESTE DEIN WISSEN
  • Die Styles liegen an einer zentralen Stelle.
  • Die Verwaltung von Styles die Seiten-übergreifend Geltung haben wird einfacher.
  • Gegenüber der Einbindung als Block im head wird anhand der Reihenfolge die Priorität ermittelt.
  • Diese Methode sollte im Zweifel die erste Wahl sein.

(In diesem Beispiel werden ein eigenes Stylesheet und eines zum Zweck der Normalisierung eingebunden. )

<!DOCTYPE html> 

<html lang="de">  

<head>    

<meta charset="utf-8">    

<title>Web Grundlagen: Die HTML-Grundstruktur</title>    

<meta name="description" content="Beschreibung der Seite">    

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">    

<link rel="stylesheet" href="normalize.css" media="screen">    

<link rel="stylesheet" href="styles.css" media="screen">  

</head>  

<body>  

</body> 

</html>

Lösung ausblenden
TESTE DEIN WISSEN

Style-Block im HTML-head

Lösung anzeigen
TESTE DEIN WISSEN
  • Sie werden als eigenständiger Bereich im head definiert.
  • Innerhalb dieses Bereichs gelten die Regeln von CSS (z.B.: /* */ für Kommentare statt <!-- -->)
  • Sie eignen sich zum schnellen Testen von Styles auf Dokument-Ebene.
  • Sie gelten ausschließlich für das Dokument in dem sie definiert wurden.
  • Die Reihenfolge der Einbindung entscheidet die Priorität der Styles gegenüber Styles die über eine Stylesheet-Datei eingebunden wurden.



<!DOCTYPE html> 

<html lang="de">  

<head>    

<meta charset="utf-8">    

<title>Web Grundlagen: Die HTML-Grundstruktur</title>    

<meta name="description" content="Beschreibung der Seite">    

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">    

<link rel="stylesheet" href="normalize.css" media="screen">    

<style>     

 /* Hier können Styles eingetragen werden */    

</style>  

</head>  

<body>  

</body> 

</html>

Lösung ausblenden
TESTE DEIN WISSEN

Cascading

Lösung anzeigen
TESTE DEIN WISSEN
  • Es können mehrere Stylesheets eingesetzt werden deren Styles sich gegenseitig ergänzen oder überschreiben können.
  • Die Entscheidung welcher Style verwendet wird basiert auf einer stufenweisen Abarbeitung.
Lösung ausblenden
  • 16587 Karteikarten
  • 456 Studierende
  • 83 Lernmaterialien

Beispielhafte Karteikarten für deinen CSS3 Kurs an der Hochschule Ansbach - von Kommilitonen auf StudySmarter erstellt!

Q:

Hintergrundbild-Skalierung



A:



  • background-size: 100px 100px;
    Hiermit wird das Bild auf exakte Werte skaliert. Der erste Wert bezieht sich auf die Breite, der zweite Wert auf die Höhe.
  • background-size: 75% 50%;
    Hiermit wird das Bild prozentual zur Box skaliert.Der erste Wert bezieht sich auf die Breite, der zweite Wert auf die Höhe.
  • background-size: contain;
    Hiermit wird das Bild so in die Box eingpasst, dass das Bild vollständig sichtbar bleibt. Es wird ein Letterbox-Verhalten in Kauf genommen.
  • background-size: cover;
    Hiermit wird das Bild so in die Box eingepasst, dass die im Verhältnis längere Seite beschnitten wird.
Q:

Box horizontal zentrieren

A:

margin: 0 auto;

  • Wenn die Breite einer Box kleiner ist als die verfügbare Breite so wird die Box hierdurch horizontal zentriert.
  • Wenn der Wert "auto" für den linken und rechten Außenabstand gesetzt wird teilt der Browser die verfügbare Breite gleichmäßig als Außenabstand auf.
Q:

Normalisierung


A:



  • Browser-Stylesheets können voneinander abweichen.
  • Um im Webdesign eine übergreifend einheitliche Grundlage für die Autoren-Styles nutzen zu können bietet sich eine CSS-Normalisierung an.
  • Häufig genutzt: https://github.com/necolas/normalize.css


Q:

Relative Längenmaße mit em

Bezug zur Schriftgröße des Elternelements

A:
  • Die Einheit entspricht einer Verhältniszahl in Bezug auf die Schriftgröße des Elternelements. (1em = Schriftgröße des Elternelements)
  • Verschachtelte Elemente deren Schriftgröße auf Basis von em angegeben wurde potenzieren sich.
  • padding, margin und border beziehen sich oft auf die Schriftgröße, sie sind geeignet für em.

https://vorlesung.eric-bode.de/web/css3/einfuehrung/farb-und-massangaben/relative-laengenmasse-mit-em/index.html


           

Q:

Relative Längenmaße mit rem

em mit Bezug zur Wurzelebene

A:
  • Die Einheit entspricht einer Verhältniszahl in Bezug auf die Schriftgröße des root-Elements. (1em = Schriftgröße des Root-Elements)
  • Die Verschachtelung spielt bei rem keine Rolle, da ausschließlich ein Bezug zum root-Element besteht.
  • Nur neueste Browser unterstützen rem.


https://vorlesung.eric-bode.de/web/css3/einfuehrung/farb-und-massangaben/relative-laengenmasse-mit-rem/index.html

Mehr Karteikarten anzeigen
Q:

Inline-Styles im HTML-Tag

A:
  • Sie werden über das Attribut "style" definiert.
  • Sie eignen sich zum schnellen Testen von Styles auf Tag-Ebene.
  • Sie gelten ausschließlich für das Tag in dem sie definiert wurden.
  • Inline-Styles haben die höchste Priorität im Rahmen der Autoren-Styles und können nur mit der Angabe !important durch andere Styles überschrieben werden.


<!DOCTYPE html> 

<html lang="de">  

<head>    

<meta charset="utf-8">    

<title>Web Grundlagen: Die HTML-Grundstruktur</title>    

<meta name="description" content="Beschreibung der Seite">    

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">    

<link rel="stylesheet" href="normalize.css" media="screen">  

</head>  

<body style="background: black;">  

</body> 

</html>

Q:

Sheet

A:
  • Das englische Sheet ist ein Blatt Papier bzw. im übertragenen Sinne eine Sammlung.
  • Hier handelt es sich um eine Ansammlung von Styles. Man spricht also von Stylesheet.
  • In der Praxis werden häufig je Aufgabenbereich eigene Stylesheets angelegt.
Q:

Absolute Längenmaße mit px

A:
  • Das Pixel ist auf die Anzeige bzw. den Inhalt bezogen eine absolute Angabe.
  • Das Pixel ist bezogen auf Anzeigegeräte eine relative Maßeinheit, da die Auflösung variieren kann.
  • Für responsives Webdesign wird deshalb das viewport Meta-Tag verwendet um das Verhältnis von Gerätepixeln zu CSS-Pixeln zu definieren.


.box{

   width:  100px;

   lenght: 200px;

}

Q:

Stylesheet-Arten / Priorisierung

A:

Stylesheets können unterschiedliche Quellen haben:
Browser-, Autoren- und Benutzer-Stylesheets

Nach folgender Reihenfolge wertet der Browser die Styles der unterschiedlichen Quellen aus:

  1. Wichtige Deklarationen (mit der Angabe !important) des Benutzers
  2. Wichtige Deklarationen (mit der Angabe !important) des Autors
  3. Deklarationen des Benutzers
  4. Deklarationen des Autors
  5. Deklarationen im Browser-Stylesheet

Innerhalb jeder Stufe wird anhand der Spezifizität der Selektoren unterschieden. Bei gleicher Spezifität entscheidet die Reihenfolge.

Q:

Externe Stylesheet-Datei

A:
  • Die Styles liegen an einer zentralen Stelle.
  • Die Verwaltung von Styles die Seiten-übergreifend Geltung haben wird einfacher.
  • Gegenüber der Einbindung als Block im head wird anhand der Reihenfolge die Priorität ermittelt.
  • Diese Methode sollte im Zweifel die erste Wahl sein.

(In diesem Beispiel werden ein eigenes Stylesheet und eines zum Zweck der Normalisierung eingebunden. )

<!DOCTYPE html> 

<html lang="de">  

<head>    

<meta charset="utf-8">    

<title>Web Grundlagen: Die HTML-Grundstruktur</title>    

<meta name="description" content="Beschreibung der Seite">    

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">    

<link rel="stylesheet" href="normalize.css" media="screen">    

<link rel="stylesheet" href="styles.css" media="screen">  

</head>  

<body>  

</body> 

</html>

Q:

Style-Block im HTML-head

A:
  • Sie werden als eigenständiger Bereich im head definiert.
  • Innerhalb dieses Bereichs gelten die Regeln von CSS (z.B.: /* */ für Kommentare statt <!-- -->)
  • Sie eignen sich zum schnellen Testen von Styles auf Dokument-Ebene.
  • Sie gelten ausschließlich für das Dokument in dem sie definiert wurden.
  • Die Reihenfolge der Einbindung entscheidet die Priorität der Styles gegenüber Styles die über eine Stylesheet-Datei eingebunden wurden.



<!DOCTYPE html> 

<html lang="de">  

<head>    

<meta charset="utf-8">    

<title>Web Grundlagen: Die HTML-Grundstruktur</title>    

<meta name="description" content="Beschreibung der Seite">    

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">    

<link rel="stylesheet" href="normalize.css" media="screen">    

<style>     

 /* Hier können Styles eingetragen werden */    

</style>  

</head>  

<body>  

</body> 

</html>

Q:

Cascading

A:
  • Es können mehrere Stylesheets eingesetzt werden deren Styles sich gegenseitig ergänzen oder überschreiben können.
  • Die Entscheidung welcher Style verwendet wird basiert auf einer stufenweisen Abarbeitung.
CSS3

Erstelle und finde Lernmaterialien auf StudySmarter.

Greife kostenlos auf tausende geteilte Karteikarten, Zusammenfassungen, Altklausuren und mehr zu.

Jetzt loslegen

Das sind die beliebtesten StudySmarter Kurse für deinen Studiengang CSS3 an der Hochschule Ansbach

Für deinen Studiengang CSS3 an der Hochschule Ansbach gibt es bereits viele Kurse, die von deinen Kommilitonen auf StudySmarter erstellt wurden. Karteikarten, Zusammenfassungen, Altklausuren, Übungsaufgaben und mehr warten auf dich!

Das sind die beliebtesten CSS3 Kurse im gesamten StudySmarter Universum

U6: CSS

TU München

Zum Kurs

Die all-in-one Lernapp für Studierende

Greife auf Millionen geteilter Lernmaterialien der StudySmarter Community zu
Kostenlos anmelden CSS3
Erstelle Karteikarten und Zusammenfassungen mit den StudySmarter Tools
Kostenlos loslegen CSS3