CSS für Anfänger

Transcript

1. CSS für Anfänger
   WORDPRESS MEETUP DORTMUND JUNI 2018
   JESSICA LYSCHIK
   

   View Slide

2. Über mich
   CSS FÜR ANFÄNGER - WORDPRESS MEETUP DORTMUND
   Jessica Lyschik
   1988 in Nürnberg geboren, Wahl-Münsteranerin
   Fachinformatikerin für Anwendungsentwicklung
   Webentwicklerin, Schwerpunkt Front-End /
   Themes
   Co-Organisatorin des WordPress Meetup Münster /
   Osnabrück
   Auf Twitter & Instagram: @jessicalyschik
   

   View Slide

3. Cascading Style Sheets
   Wird für das „Aussehen“ einer Webseite genutzt
   Ermöglicht die Trennung von Struktur (HTML) und Design (CSS)
   Beispiele: Farben, Schriftarten, Positionierung, Abstände, Responsivität, Layout
   CSS FÜR ANFÄNGER - WORDPRESS MEETUP DORTMUND
   

   View Slide

4. Syntax
   Ein CSS Regelsatz besteht aus:
   - Einem Selektor oder einer Gruppe von
   Selektoren
   - Gefolgt von einem durch geschweifte
   Klammern begrenzter Bereich, der
   Deklaration
   - In dem eine oder mehrere Eigenschaften
   mit Werten definiert werden
   CSS FÜR ANFÄNGER - WORDPRESS MEETUP DORTMUND
   div, p {
   text-align: center;
   }
   

   View Slide

5. Wo kann CSS definiert werden?
   Inline am HTML Element selbst:
   Überschrift
   Intern, im Kopfbereich () des HTML Dokuments:
   h1 { eigenschaft: wert; }
   Extern, als .css Datei welche im HTML Dokument verlinkt wird
   h1 { eigenschaft: wert; }
   p { eigenschaft: wert; }
   CSS FÜR ANFÄNGER - WORDPRESS MEETUP DORTMUND
   

   View Slide

6. Selektoren
   HTML Elemente selbst: p, a, h1, img, div
   Klasse an einem Element. Im CSS mit Punkt vorne dran: ".meineklasse"
   ID an einem Element. Im CSS mit einer Raute vorne dran: "#meineid"
   Pseudoklassen, werden nicht im HTML definiert: "a:hover"
   Pseudoelemente, werden nicht im HTML definiert: "#meineid::before"
   CSS FÜR ANFÄNGER - WORDPRESS MEETUP DORTMUND
   

   View Slide

7. Kaskade
   Wird ein Element mehrfach deklariert: die
   letzte Eigenschaft gilt!
   Spezifität: Gewichtung der Angaben, je
   nachdem wie der Selektor definiert wird
   http://wiki.selfhtml.org/wiki/CSS/Kaskade#Sp
   ezifit.C3.A4t
   Mit !important kann man die Spezifität
   außer Kraft setzen – aber nur in
   Ausnahmefällen!
   CSS FÜR ANFÄNGER - WORDPRESS MEETUP DORTMUND
   h1 /* A=0, B=0, C=1, Spezifität 0 0 1 */
   ul li /* A=0, B=0, C=2, Spezifität 0 0 2 */
   p:first-child /* A=0, B=1, C=1, Spezifität 0 1 1 */
   ul.nav /* A=0, B=1, C=1, Spezifität 0 1 1 */
   #author /* A=1, B=0, C=0, Spezifität 1 0 0 */
   #editor p /* A=1, B=0, C=1, Spezifität 1 0 1 */
   

   View Slide

8. Box-Modell
   Jedes HTML Element ist eine rechteckige Box
   Zu jedem Element sind noch definierbar: Padding, Border und Margin
   box-sizing: content-box; box-sizing: border-box;
   Gesamt: 532 x 282 Gesamt: 500 x 250
   Inhalt: 500 x 250 Inhalt: 468 x 218
   CSS FÜR ANFÄNGER - WORDPRESS MEETUP DORTMUND
   

   View Slide

9. Was sonst noch möglich ist
   Flexbox: eindimensionales Layout
   https://flexboxfroggy.com/#de https://css-tricks.com/snippets/css/a-guide-to-flexbox/
   CSS Grid: zweidimensionale Layouts
   http://cssgridgarden.com/#de https://css-tricks.com/snippets/css/complete-guide-grid/
   CSS Animationen:
   http://animista.net https://css-tricks.com/almanac/properties/a/animation/
   CSS FÜR ANFÄNGER - WORDPRESS MEETUP DORTMUND
   

   View Slide

10. CSS in WordPress anpassen
    CSS FÜR ANFÄNGER - WORDPRESS MEETUP DORTMUND
    „Zusätzliches CSS“ im Customizer, seit WordPress 4.7
    Seit Version 4.9 mit Syntax Highlighting und Fehlerüberprüfung
    Nur für das aktuelle Theme
    Beim Themewechsel bleiben die Änderungen in der Datenbank gespeichert
    

    View Slide

11. Links zum tiefer Einsteigen
    http://wiki.selfhtml.org/wiki/CSS - viele Informationen auf deutsch
    https://www.w3schools.com/css - noch mehr Informationen auf englisch
    https://www.codecademy.com/ru/tracks/htmlcss - interaktives Tutorial, englisch
    https://css-tricks.com - informativer Blog, auch mit Themen für Fortgeschrittene
    https://codepen.io - zum Ausprobieren im Browser!
    CSS FÜR ANFÄNGER - WORDPRESS MEETUP DORTMUND
    

    View Slide

12. Danke für eure Aufmerksamkeit! :)
    Fragen?
    Wenn euch später noch etwas einfällt: @jessicalyschik
    CSS FÜR ANFÄNGER - WORDPRESS MEETUP DORTMUND
    

    View Slide