CSS für Anfänger

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

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
35
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
51
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
30
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
44
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
9
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
210
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
1
340
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
57
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
150

Other Decks in Programming

See All in Programming
8cc27471bcdeb2858fca212586a208b4?s=48 takahia1988
0
330
Fc815be82d09a2e922d4000b65b9f83b?s=48 74th
1
430
0eba807ea367a2b648480d20f52d3af3?s=48 haco
0
210
3e049ed33195d00a8b745b16c63dce6e?s=48 leew
0
150
42a6a049ac8f5265f31858a9509217fb?s=48 uhooi
0
240
64c1a3841da6d254ac11d9d842e04ce4?s=48 dalinaum
1
340
5f69045a2ca496221cfc624405917cdf?s=48 runningcode
1
170
Dee939e8aa52d13793b2f0c5e463777b?s=48 julep
1
150
354e3e2cfb772abdf62bd92c92f89547?s=48 tarunpothulapati
0
130
15217910de00471b472fecae440c6daf?s=48 ditn
2
360
4cd9f68f08d2200de34043e4ce049d03?s=48 yagieng
4
440
6dc67d02d6b322ee317cece9b045317d?s=48 kalupas226
0
130

Featured

See All Featured
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
23
3.7k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
346
20k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
331
29k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
166
19k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
9
1.1k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
113
25k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
237
23k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
87
3.2k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
296
39k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
258
24k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
255
19k

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