Benutzer-Werkzeuge

Webseiten-Werkzeuge


css:start

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
css:start [2015-01-11 12:37] – [Links] Link zu meiner Link-Sammlung eingefügt a.kamolacss:start [2019-09-08 11:02] (aktuell) – "Debugging" eingefügt a.kamola
Zeile 1: Zeile 1:
 ====== CSS ====== ====== CSS ======
 +
 +===== Reset =====
 +
 +Meist wird zu Beginn eines Stylesheets die Standard-Darstellung der Browser "zurückgesetzt", z.B. mittels:
 +
 +<code css>
 +* {
 + margin: 0;
 + padding: 0;
 +}
 +</code>
 +
 +Alternativ dazu gibt es sogenannte "CSS Resets", die meist besser und umfangreicher sind:
 +
 +  * [[http://necolas.github.io/normalize.css/|normalize.css]]
 +
 +===== Debugging =====
 +
 +Fügt an alle HTML-Elemente einen transparent-roten Hintergrund und einen roten Rahmen an:
 +
 +<code css>
 +html * {
 +    background: rgba(255, 0, 0, .1);
 +    box-shadow: 0 0 0 1px red;
 +}
 +</code>
 +
 +Quelle: [[https://dev.to/dink/comment/f20o|DEV Community: Re: My Favorite CSS Hack]]
 +
 +===== Zentrieren =====
 +
 +[[http://howtocenterincss.com/|How To Center In CSS]]
 +
 +===== calc() =====
 +
 +[[https://developer.mozilla.org/en-US/docs/Web/CSS/calc|MDN: calc()]]
 +
 +===== Leerzeichen in der Content-Eigenschaft =====
 +
 +Reguläre Leerzeichen in der Eigenschaft ''content'' werden nicht immer angezeigt, statt dessen muss ein geschütztes Leerzeichen eingesetzt werden, dies geht z.B. mit dem Unicode ''U00A0'':
 +
 +<code css>
 +
 +p:after {
 + content: '\00a0';
 +}
 +
 +</code>
 +
 +Quelle: [[http://stackoverflow.com/a/5467676|Stack Overflow: Add a space (" ") after an element using :after]]
 +
 +===== Responsive Design =====
 +
 +> -webkit-text-size-adjust: 100%; has same effect as none in MobileSafari but doesn't prevent user from zooming text in desktop Safari.
 +
 +Quelle: [[https://twitter.com/shauninman/status/387088251082665984|@shauninman]]
 +
 +===== Animation =====
 +
 +  * [[animation|Animation mit CSS3]]
 +
 +===== Literatur =====
 +
 +  * Müller, Peter: //Einstieg in CSS: Webseiten gestalten mit HTML und CSS//. Rheinwerk Computing, 2015.
 +    * [[https://www.rheinwerk-verlag.de/3806/|Reihnwerk-Verlag: Einstieg in CSS: Webseiten gestalten mit HTML und CSS]]
  
 ===== Links ===== ===== Links =====
  
 +  * [[http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Guter_CSS-Stil|SELFHTML-Wiki: Guter CSS-Stil]]
   * [[https://pinboard.in/u:aberaberarne/t:css|Arnes Link-Sammlung zu CSS]]   * [[https://pinboard.in/u:aberaberarne/t:css|Arnes Link-Sammlung zu CSS]]
  
Zeile 10: Zeile 76:
  
   * [[https://www.codeschool.com/paths/html-css|Code School: HTML/CSS]]   * [[https://www.codeschool.com/paths/html-css|Code School: HTML/CSS]]
 +  * [[https://www.video2brain.com/de/videotraining/html-und-css-fuer-designer|video2brain: HTML und CSS für Designer]]
 +  * [[https://www.video2brain.com/de/videotraining/webprogrammierung-grundlagen|video2brain: Webprogrammierung: Grundlagen]]
 +  * [[https://www.video2brain.com/de/videotraining/css-layouts-fuer-fortgeschrittene|video2brain: CSS-Layouts für Fortgeschrittene]]
 +  * [[https://www.video2brain.com/de/videotraining/css-debuggen|video2brain: CSS debuggen]]
 +  * [[https://www.video2brain.com/de/videotraining/css3-fuer-webdesigner|video2brain: CSS3 für Webdesigner]]
 +  * [[https://www.video2brain.com/de/videotraining/animationen-in-css3|video2brain: Animationen in CSS3]]
css/start.1420976225.txt.gz · Zuletzt geändert: 2015-01-11 12:37 von a.kamola