Komma im CSS-Element: mehrfach mehrere Werte werden definiert z. B. ... transition: width 4s;}
Leerzeichen: dazu addieren z. B. ... border: 1px solid #fff}
Blockelemente:
- Füllen das Elternelement vollständig aus
- Blockelemente stehen untereinander
- Blockelemente können bemaßt werden
Inline-Elemente:
- stehen nebeneinander, z.B in einem Block
- Inline-Elemente können nicht bemaßt werden
Inline-Block-Elemente:
- können auch nebeneinander stehen
- sind so ein Zwischenelement
- <img> ist ein Inline-Block-Element
Befehl:
- display:block ändert die Grundeigenschaften der Elemente und kann aus einem Inline-Element auch ein Block-Element machen und umgekehrt
#wiese {
background-image: url(bilder/gras.png);
background-repeat: repeat-x;
background-attachment: scroll;
background-position: 0 0;
background-size: x y; } auto = Bildgröße bleibt gleich
<body >
<div id="wiese">Muttischaf und Kind</div>
</body>
Die Reihenfolge der Bilder bestimmt die Ebenenfolge!!!
Hintergrund-Image ins CSS einfügen (Kurzversion):
background:
url(bilder/schaf2.png) no-repeat scroll 220px 150px/100px auto, Ebene 3
url(bilder/schaf1.png) no-repeat scroll 80px 120px/auto auto, Ebene 2
url(bilder/sonne200_frei.png) no-repeat scroll 600px -75px/auto, Ebene 1
url(bilder/gras.png) repeat-x scroll l 0 0/auto auto;
Hintergrundebene
height: 250px;
width: 750px;
margin: 5% auto;
border: 1px solid #333;
font-family: "Love Ya Like A Sister";
font-size: 28px;
color: #003F00;
padding: 40px 0 0 40px;
text-aling: center;}
Hintergrundbilder lassen sich nicht animieren!
Kindselektoren >
Kindselektoren bezeichnen unmittelbare Kindelemente. Kombination durch das Grösser-ZeichenMit dem Kindselektor (child selector) werden Elemente angesprochen, die direkte Nachfahren eines anderen Elements sind. Das Kennzeichen des Kindselektors ist die schließende spitze Klammer »
>«.div > a {color: #FF0000;}
p > a {color: green;}
div > p {font-family: Arial;}
div > p > a {text-decoration: none;}
Nachbarn- oder Geschwisterselektoren +
Geschwisterselektoren bezeichnen unmittelbar nachfolgende Selektoren, ist eine Folge!!h1+h2 {color: red;}
p+h2 {color: green;}
p+p+p {color: orange;}
Folgeselektoren ~ Tilde
Es folgt (auch nicht unmittelbar) was hinten steht, wird formatierth2~p {color: magenta;}
Attributsbezogene Selektoren
Ein Element besitzt ein Attributabbr[title] {border-bottom: 1px dotted #000;}
Ein Element besitzt ein Attribut mit exakt dem Wert x =
p[lang=de] {background: url(flags/deutsch_icon.jpg) no-repeat scroll 0 center;
Ein Element besitzt ein Attribut und das Attribut enthält Wert x *
a [href*="@"] {background: url(mail.gif) no-repeat scroll 0 center; padding: 0 0 0 16px;}
Attribut beginnt mit Wert x ^
a [href^="http://de.wikipedia"]
{background: url(wiki.jpg) no-repeat scroll 0 center; padding: 0 0 0 24px;}
Attribut endet mit Wert x $
a [href$="http://de.wikipedia"]
{background: url(acrobat.gif) no-repeat scroll 0 center; padding: 0 0 0 24px;}
target="_blank" = Verlinkung öffnet sich in einem neuem Fenster (macht man aber nicht mehr, nicht barrierefrei, zu viele Fenster, History geht verlohren, bei PDF-Dateien sinnvoll)
Mit der !important-Regel setzt man die Spezifität außer Kraft
#gruen {color: #005F00 !important;}
Keine Kommentare:
Kommentar veröffentlichen