Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS für Anfänger

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

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
51
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
67
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
46
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
72
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
18
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
220
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
1
370
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
67
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
160

Other Decks in Programming

See All in Programming
2f666b409bff87ec63f575f19d124c85?s=48 matteogrella
0
390
3a622e726b35fe71480166a16edcb66e?s=48 ariarijp
1
320
52cc8a838bf44a589d2572833b2dd1b9?s=48 palkan
1
130
E66449b8260b07a1cf51c5ab5eaa8180?s=48 dunglas
1
3.8k
13824f545937c1ae0a80739aea2e396c?s=48 mlopskr
0
250
3187acdb47cb44678ad716c3228bf91b?s=48 keeeeen
0
260
2c68dc672293cc3f8a7a57d3af86f15b?s=48 koukyo1994
1
280
2e8ff55bf441ac3101a36812010216c2?s=48 medup
0
220
102398563fd1bf878b35dc2d5ee67cbe?s=48 kamilahsantos
1
460
21d5f61fba6b2d522dadc5888d403a21?s=48 fujisawaryohei
0
130
102398563fd1bf878b35dc2d5ee67cbe?s=48 kamilahsantos
0
170
Fa37be48a20daa155e300c3c07365039?s=48 wisetlaloc
0
240

Featured

See All Featured
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
285
19k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
333
29k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
37
1.8k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
233
18k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
495
110k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
274
17k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
81
4.2k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
59
6.6k
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
344
27k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
63
10k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
66
3.1k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
29
2.2k

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