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
32

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
69
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
48
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
95
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
18
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
220
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
1
370
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
68
25329b7e3ef73310bfab649a0e17b0a2?s=48 jessicalyschik
0
170

Other Decks in Programming

See All in Programming
7850a83d81b034248782d63e7dcf7974?s=48 tatsuya4451
0
470
0b26590a0a8b0f1da140ed5de9b68379?s=48 usamik26
3
210
E66449b8260b07a1cf51c5ab5eaa8180?s=48 dunglas
3
2.4k
A2cd163fd3cfca5204b0d8f0c17eea29?s=48 yujif
2
250
13d64bff196e33cc6b352f226137d16e?s=48 monoqlo
0
210
345c78640c646c9c55083efd57fb6e54?s=48 kuritatu18
0
140
8f84b7d8869ef6005d89b378e8661f7c?s=48 masuda220
8
5.3k
7a33106dde82ecc65a220eaf9d131222?s=48 patrickjahr
0
130
042b7c0e45c53de46667f07de2fb2614?s=48 vixentael
0
390
9f33218af7ae5c04e102fcc3076f2f5c?s=48 yhkaplan
0
330
82d6167c4d14393c2e20b37a74b363c5?s=48 kasacchiful
0
230
29dd31db419a2e56cf6a8a11f9de98ee?s=48 masakazoo
2
500

Featured

See All Featured
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
482
150k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
6.8k
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
43
4.9k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
297
39k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
96
3.3k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
56
2k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
129
20k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
253
11k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
443
29k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
235
18k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
56k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
660
54k

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