CSS für Anfänger

25329b7e3ef73310bfab649a0e17b0a2?s=47 Jessica Lyschik
June 07, 2017
Programming
0
17

CSS für Anfänger

25329b7e3ef73310bfab649a0e17b0a2?s=128

Jessica Lyschik

June 07, 2017
Tweet

More Decks by Jessica Lyschik

See All by Jessica Lyschik
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
28
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
44
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
23
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
37
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
8
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
210
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
1
330
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
53
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
140

Other Decks in Programming

See All in Programming
376e4eb9dc6c2e33d1330262edc4f109?s=48 janko_m
0
320
Da1305e5281b5208da85d14a356d01f3?s=48 taka1068
5
210
C44d9ff0fb47045ae04e3183694c7d68?s=48 wafuwafu13
0
290
C4b9a181d7fb82642b4c8c1df6ae2b87?s=48 louvre2489
1
160
30682a28206e455a1bc57d7d85cd1e14?s=48 shomasegi
3
300
82d6167c4d14393c2e20b37a74b363c5?s=48 kasacchiful
1
230
1ec68e792f99c958b8ffbd0aadaa182a?s=48 ikkou
5
160
94138d52371ef2791611f01dd41764f4?s=48 joekarlsson
0
130
465a530291aedb53fff5a6333e3dedaa?s=48 bk_18
0
210
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
0
180
820c51c7e79c45286e41a41a2a721c0f?s=48 saiten
6
330
0ed10d1154c696886ca483fe827cb299?s=48 thatjeffsmith
0
190

Featured

See All Featured
11c84dff30266b907714802088852677?s=48 jasonvnalue
80
7.9k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
356
62k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
164
18k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
236
23k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
165
6.8k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
113
7k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
648
110k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
3
340
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
23
3.7k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
215
16k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
80
3.9k

Transcript

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

  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

  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

  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; }

  5. Wo kann CSS definiert werden? Inline am HTML Element selbst:

    <h1 style="eigenschaft: wert;"> Überschrift </h1> Intern, im Kopfbereich (<head>) des HTML Dokuments: <style type="text/css"> h1 { eigenschaft: wert; } </style> Extern, als .css Datei welche im HTML Dokument verlinkt wird h1 { eigenschaft: wert; } p { eigenschaft: wert; } CSS FÜR ANFÄNGER - WORDPRESS MEETUP DORTMUND

  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

  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 */

  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

  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

  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

  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

  12. Danke für eure Aufmerksamkeit! :) Fragen? Wenn euch später noch

    etwas einfällt: @jessicalyschik CSS FÜR ANFÄNGER - WORDPRESS MEETUP DORTMUND