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
38

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
52
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
79
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
50
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
130
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
24
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
230
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
1
390
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
70
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
170

Other Decks in Programming

See All in Programming
B546a9b97d993392e4b22b74b99b91fe?s=48 javiergs
PRO
0
140
6afbe110d33ef7e859fb8649b86bae55?s=48 mashabow
0
710
0c217b9a7dd0aa31ed40bd0f453727e1?s=48 ramsey
PRO
1
250
C6b97a47d5406cfdef50a5c755751c16?s=48 sorami
2
550
Fb0a40e5e7a9dc85520f1646fd41eb44?s=48 higuuu
1
180
7eca3e06edc3c69004aaf57de51900c2?s=48 ajstarks
3
5.8k
Db8a7eb9cf22f26cedce8295a53c8d7c?s=48 kawazu
0
370
33b8caffacdb02e62cd9141a8aeb35aa?s=48 tanakahiroki1
0
440
Add1036688abcb2e3dbff7c3090f7e35?s=48 imtnd
0
940
20ddbe9b7cfdde5e2dfeb8d8714d5de8?s=48 tarugoconf
0
1.7k
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
0
230
404a34d5e0d3d7b38237a8cbecf4c18a?s=48 seiseikai123
0
1.2k

Featured

See All Featured
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
272
17k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
62
7k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
37
3k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
110
11k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
97
4k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
56
5.8k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
224
120k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
262
37k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
324
54k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
73
4k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
277
17k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
196
16k

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