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-02-28 06:34] – [Leerzeichen in der Content-Eigenschaft] Link-text zu Stack Overflow verbessert 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 ===== ===== Leerzeichen in der Content-Eigenschaft =====
Zeile 14: Zeile 50:
  
 Quelle: [[http://stackoverflow.com/a/5467676|Stack Overflow: Add a space (" ") after an element using :after]] 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]]
  
css/start.1425101662.txt.gz · Zuletzt geändert: 2015-02-28 06:34 von a.kamola