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
26

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
46
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
59
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
37
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
57
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
12
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
210
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
1
350
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
59
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
150

Other Decks in Programming

See All in Programming
Af64bc38c0ffcfcabdf430759ee491ce?s=48 lovee
2
220
3aae47c11fab74b1db6ec80cd6f49058?s=48 takahi5
3
210
B1196c22fd3ca181eec43e1b67823d3f?s=48 aftiopk
0
140
933291444e456bfb511a66a2fa9c6929?s=48 j5ik2o
1
640
9a3693c0c3d12f2fbae51792dd6a1344?s=48 akito0107
0
220
6d87223b5fcfb9a5a73007f77f134e28?s=48 taketora
0
120
B1196c22fd3ca181eec43e1b67823d3f?s=48 aftiopk
0
110
7b606c5039f083d13e2d2320ce6ddcfa?s=48 dqneo
3
340
Af64bc38c0ffcfcabdf430759ee491ce?s=48 lovee
9
2.9k
39adbc0cddb8c0ea8470c80248e9e71b?s=48 hyodol2513
0
630
Bbb17eeeecd3d9d06f4db310ab630a12?s=48 borkdude
2
220
877ac424e59bd3dd183859ef4cc9a08a?s=48 ryosukes
0
1.5k

Featured

See All Featured
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
18k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
71
3.6k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
587
200k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
23
3.9k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
294
39k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
328
36k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
775
200k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
237
23k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
656
54k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
63
3.7k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
87
3.9k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
73
7.5k

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