1- CSS Grundbefehle
Die Liste wird natürlich ständig aktualisiert ;-)
Note: Der Browser liest das CSS File von Oben nach unten -> das unterste Element hat priorität! Außer es ist ein inline-style Element vorhanden! Am mächtigsten ist dennoch der zusatz !important zwischen Befehl und Semlikon ;
ID = # ->Sollte EINMALIG sein!
CLASS = . ->werden öfter verwendet
Es können auf TYPEN zur bearbeitung ausgewählt werden:
[type='checkbox'] {
margin: 10px 0px 15px 0px;
}
Sollten die Formatdefinitionen von einer ID und einer CLASS in konflikt geraten,
ist die ID höher prioritisiert!
margin= Abstand außen
padding= Abstand innen
/* Dies ist ein Kommentar. Er besitzt keine Auswirkungen. */
Inline CSS Format:
<h2 style="color: red;">CatPhotoApp</h2>
oder:
<style>
h2 {color: red;}
</style>
Einem Element mehrere Klassen zuweisen:
<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
:hover -> Eigenschaften von einem Element wenn man mit der Maus drauffährt
background: url(https://i.imgur.com/MJAkxbh.png);
background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url(IMAGE_URL);
background-color: transparent;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
float: left, right
margin: auto -> zentrieren
transform:scale(2); ->Vergrößern, Verkleinern
transform: skewX(-32deg); ->X oder Y Achse eines Elements verschieben
width: 50%
Note: Der Browser liest das CSS File von Oben nach unten -> das unterste Element hat priorität! Außer es ist ein inline-style Element vorhanden! Am mächtigsten ist dennoch der zusatz !important zwischen Befehl und Semlikon ;
ID = # ->Sollte EINMALIG sein!
CLASS = . ->werden öfter verwendet
Es können auf TYPEN zur bearbeitung ausgewählt werden:
[type='checkbox'] {
margin: 10px 0px 15px 0px;
}
Sollten die Formatdefinitionen von einer ID und einer CLASS in konflikt geraten,
ist die ID höher prioritisiert!
margin= Abstand außen
padding= Abstand innen
/* Dies ist ein Kommentar. Er besitzt keine Auswirkungen. */
Inline CSS Format:
<h2 style="color: red;">CatPhotoApp</h2>
oder:
<style>
h2 {color: red;}
</style>
Einem Element mehrere Klassen zuweisen:
<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
:hover -> Eigenschaften von einem Element wenn man mit der Maus drauffährt
background: url(https://i.imgur.com/MJAkxbh.png);
background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url(IMAGE_URL);
background-color: transparent;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
float: left, right
margin: auto -> zentrieren
transform:scale(2); ->Vergrößern, Verkleinern
transform: skewX(-32deg); ->X oder Y Achse eines Elements verschieben
width: 50%