HTML &CSS
HTML und CSS lernen
HTML und CSS lernen
Kartei Details
| Karten | 40 |
|---|---|
| Sprache | Deutsch |
| Kategorie | Informatik |
| Stufe | Universität |
| Erstellt / Aktualisiert | 02.11.2019 / 16.06.2025 |
| Weblink |
https://card2brain.ch/box/20191102_html_css
|
| Einbinden |
<iframe src="https://card2brain.ch/box/20191102_html_css/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>
|
CSS UNTERSCHIED ID UND KLASSEN erklären
Klassen dürfen als Wert des HTML-Attribut class= im HTML-Code mehrmals auftauchen
<span class="rot">Ich bin rot</span>
<span class="rot">Ich bin rot</span>
dürfen mit anderen Klassennamen verwendet werden:
<span class="rot durchgestrichen"> Ich bin rot und durchstrichen </span>
----------------------------
ID dürfen als Wert des HTML-Attributs id= im HTML-Code nur 1 x auftauchen
Welche Einbindungsmöglichkeiten gibt es für CSS?
Ziel: Starke Trennung von Inhalt und Gestaltung
Als externe Datei
Im Head als <style>Tag
Inline als style= Attribut
Was ist der Unterschied zwischen id= und class= bezüglich CSS und nenne typischen Anwendungsfälle
Die ID hat die höherer Priorität und darf nur 1 mal verwendet werden
Bsp. <p id="artikel" class="betont">Welche Farbe hat dieser Zeitungsartikel?</p>
Hier wird die ID artikel höher Priorisiert Egal in welcher Reihenfolge im CSS die Farben vergeben wurden
Was sind Pseudoklassen?
Eine Pseudoklasse in CSS ist ein Schlüsselbegriff, welcher hinter einen Selektor gestellt wird, um einen besonderen Zustand abzufragen. So steht beispielsweise :hover für Elemente, die gerade mit dem Mauszeiger berührt werden.
Was sind Pseudoelemente?
Wie auch pseudo-classes können Pseudoelemente einem Selektor hinzugefügt werden, aber statt einzelen Zustände ermöglichen Sie das gestalten eines einzelnen Teils von einem Element. Das Pseudoelement ::first-line richtet sich bspw. nur an die erste Zeile eines Elements.
Welch Masseinheiten gibt es in CSS?
px Pixels: (relative zur Anzeigedichte des jeweiligen Ausgabemedium, früher lange absolut) z.B. unser Bildschirm hätte eine Auflösung von 96px/inch => 254mm/96px ➔ unformatierter Text innerhalb vom Body-Tag hat 16px.
em relative Grösse zur jeweiligen Schriftgrösse vom Element (1em = size of the current font-size of the element itself)
rem relative Grösse zur jeweiligen Schriftgrösse von body/html (root) (4em = 4 x size of the current font-size of the body/html-Tag
% relativ zur aktuellen Grösse oder zum Elternelement
vh 1% of Viewport Height
vw 1% of Viewport Width
Ganz generell: welche Eigenschaften werden eher vererbt, welche nicht?
Vereblich:
color, font-famaly, font-style.......
Nicht Vererblich
Wenn border erblich wäre, hätten alle Elemente unterhalb eines Elements mit border ebenfalls einen Rahmen. Wenn background-image erblich wäre, würden Hintergrundbilder dichte Schichten bilden.
Was ist ein Browser im Web?
Ist ein Anzeigeprogramm für Websites mit Navigationsmöglichkeit. To browser heisst stöbern
Programmiersprachen vs. Auszeichnungssprache – wie hältst Du sie auseinander?
Bei der ersteren werden Kontrollstruktur angelegt und Entscheidungen getroffen, bei der zweiten werden Inhalte Inhalte strukturiert und formatiert.
Statische Website – was verstehst Du darunter?
Ist datenbankunabhängig (hartcodiert), ist zustandslos
Was verstehst Du unter Syntax beim Code schreiben
Eine fest definierte Schreibweise.
Aus was kann ein HTML-Tag bestehen?
Start- und Endtage, Attribute, Inhalt
Welche HTML-Tags muss man in HTML5 nicht mehr zwangsläufig mit / schliessen?
meta, br, img, link, doctype, input,
Auf was achtest Du bei der Ladereihenfolge von CSS-Stilvorlagen?
reset => main => ausgabespezifisch => inline-style
Erläutere den Begriff Semantik in Bezug auf HTML
Weist eine spezfische Bedeutung den Bestandteilen einer Website zu.
Deren Namen haben einen Bedeutung und dienen den Suchmaschinen und uns zur Orientierung.
Die Semantik ist ein Teilgebiet der Sprachwissenschaften. Im Zusammenhang mit HTML strebt man nach "bedeutungsvollem" Quellcode. Dies soll heißen, dass die Inhalte einer Internetseite sinnvoll gegliedert werden, womit man dem Text eine Struktur gibt.
p { }
Alle p-Elemente
/* Verändert die Farbe von p*/
p{
color: seagreen;
}
--------------------------------------------------------------------
/* Verändert die Farbe von h1*/
h1{
color: salmon;
}
p, a { }
Alle a-Elemente und p-Elemente
/* Alle p Elemente UND h1 ein Underline*/
h1, p{
text-decoration: underline;
}
p a { }
Alle a-Elemente innerhalb von p (alle Nachfahren) ****
/* Alle a Elmente innerhaln einers ul Element*/
ul a{
color: chartreuse;
}
--------------------------------------------------------------
/* Alle span in div's ( Egeal wie weit weg Grosseletrn usw.)*/
div span{
color: hotpink;
}
/*Diese Regeln macht die erste Spalte jeder Zeile in einer Tabelle fettgedruckt*/
#data-table-1 td:first-child {
font-weight: bolder;
.foo { }
Alle Elemente der Klasse ’foo’
/* Alle Klassen foo bekommen monospace*/
.foo{
font-family: monospace;
}
div.foo { }
Alle div-Elemente mit der Klasse ’foo’
/* Alle p mit der Klasse foo werden zentriert. ACHTUNG: Kein Leerzeichen zwischen foo und dem Punkt*/
p.foo{
text-align: center;
}
div#foo { }
Alle div-Elemente mit der id ’foo’ / Selektor für ID's
/* Das Elemet mit der id lol*/ --> geht auch h1#lol
#lol{
font-family: sans-serif;
}
td div.foo { }
Alle div-Elemente mit der Klasse ’foo’ innerhalb von td, d.h. innerhalb einer Tabellenzelle
a[title] { }
Alle a-Elemente, welche das Attribute-Eigenschaft title enthalten
vergleicht Elemente basierend auf dem Vorhandensein oder Wert eines bestimmten Attributs
<ul>
<li><a href="#internal">Internal link</a></li>
</ul>
/* Internal links, beginning with "#" */
a[href^="#"] {
background-color: gold;
}
a[title=klicken] { }
Alle a-Elemente, welche das Attribute title="klicken" enthalten
p > em { }
Child selector : Alle em-Elemente, welche Kinder (erste Einrückungsstufe) von p sind / Nur die direkten Kinder
div
span Text sapn --> Nur dieser ist aqua
p
span text2 span
p
span Text 3 span --> --> Nur dieser ist aqua
div
/* Nur die direkten Kinder span. Also nur die die dierekt under div sind*/
div > span{
color: aqua;
}
h1 + p { }
Adjacent Sibling Selector:
Das erste p Element, welches als "Vor"- Nachbar h1 hat
/* Nur der direkte Geschwister (Nur das erste) die nach der ID center in jedem div kommen sind gelb*/
#center + div{
color: yellow;
}
h1 ∼ p{ }
General Sibling Selector: Alle p-Elemente, welche nachstehende Geschwister von h1 sind
/* Alle Geschwister die nach der ID center kommen in jedem div sind rot*/
#center ~ div{
color: red;
}
a:hover
a-Element bei Mauskontakt
---------------------------------------------------------------------
a Element mit der Klasse Homepage bei Mauskontakt
a.homepage:hover {
background-color: #666;
}
a:focus
a-Element, wenn es fokussiert wird (reinklicken, mit Tabulator "reintaben")
-----------------------------------------------------------------
a Element mit der Klasse Homepage wenn es mit fokussiert wird (reinklicken, mit Tabulator "reintaben")
a.homepage:focus {
background-color: #666;
}
a:visited
a-Element nach dem Anklicken
----------------------------------------------------------------
a Element mitder Klasse Homepage nach dem Anklicken
a.homepage:visited {
color: #fff;
background: #555;
}
-
- 1 / 40
-
