Tag 14

Einbindung von Grafiken

• man setzt Grafiken mit mehrern Icons ein um weniger Speicherplatz zu benötigen
• Trick: man positioniert die Grafik, so das nur ein Icon sichtbar ist
  
   
• <style type="text/css">
  div {width:118px; height:38px; border: 1px solid #ccc;
  margin: 1em 0; background: url(social_media.png)}
  
  div:hover {background-image: url(social_media02.png)}
  
  .sprite01 {}
  .sprite02 {width: 39px;}
  .sprite03 {width: 39px; background-position: -40px 0;}
  .sprite04 {width: 39px; background-position: -80px 0;}
  </style>

Die Pseudoklassen

• Das Pseudo-Element :first-Letter
  p:first-letter {float: left; font-size: 24px;color: #7F0000;}
• Das Pseudo-Element: First-Line
  p:first-line {} braucht man nicht in der Praxis!
• Die Pseudoklassen :before und :after (siehe unten) Vor und danach
  h2:before {content:"Die Stadt"; color: red;}
  h2:after {content:url(smile.png);}
  a:after {content: " ("attr(href)")"; color:#000;} (für das Drucken Links wichtig, wird noch mal daneben geschrieben)

• Das Pseudo-Element :last-child und first-child gut für Listen, kann man den ersten und den letzen Punkt definieren  Erstes bzw. letztes Kindelement
• Das Pseudo-Element :nth-child (7n-1) kann man ausgewählte Punkt in der Liste/Tabelle definieren  ntes-Kindelement
  td:nth-child(3) {text-align:right;}bestimmt die Zeile
  td:nth-child(odd) {background: #ccc;} odd = Ungerade
  td:nth-child(even) {background: #FFBF00;} even =Gerade
  table {width: 640; border-collapse: collapse;}Zellen greifen ineinander
• Achtung: keine Leerzeichen zwischen den runden Klammern!
•  Das Pseudo-Element :lang unterschiedliche Sprachen Sprache

Das Clearfix-Problem
kann die Abstände zwischen den <div> -Bereich regulieren, bzw. ausweiten
Immer so: .clearfix:after {content: "."; clear: both; display: block; height: 0; visibility: hidden;}

Allgemeine Infos:
Bei einer Liste: ul {list-style: none;} Punkte weg!
display: block; aus einem Anker a wird ein Elternelement!
Runde Ecken im Uhrzeigersinn: border-radius: 6px 6px 0 0;

Abhängige Selektoren
z. B. in der id noch ein 2 Element einfügen
#gelb h2 {font-family: "Arial"; color: red;}
#rot h2 {font-family: "Palatino Linotype"; color: yellow;}