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

CSS für Anfänger

Jessica Lyschik
June 07, 2017
Programming
0
58

CSS für Anfänger

Jessica Lyschik

June 07, 2017
Tweet

More Decks by Jessica Lyschik

See All by Jessica Lyschik
Performance 1x1
jessicalyschik
0
64
WordPress 5.3 - und Gutenberg!
jessicalyschik
0
110
CSS Grid in freier Wildbahn
jessicalyschik
0
64
CSS Grid in the wild
jessicalyschik
0
200
Keine Angst vor Gutenberg und WordPress 5.2
jessicalyschik
0
31
Keine Angst vor Gutenberg und WordPress 5.0
jessicalyschik
0
240
Einstieg in CSS Grid
jessicalyschik
1
420
Frauen in der IT und der WordPress Community
jessicalyschik
0
80
Warum Introversion nichts schlimmes ist
jessicalyschik
0
220

Other Decks in Programming

See All in Programming
和暦を正しく扱うための暦の話
nagise
10
4.8k
Milestoner
bkuhlmann
1
240
はてなリモートインターンシップ2022 インフラ 講義資料
hatena
4
2.1k
量子コンピュータ時代のプログラミングセミナー / 20221222_Amplify_seminar _route_optimization
fixstars
0
240
Enumを自動で網羅的にテストしてみた
estie
0
1.2k
AWSにおける標的型Bot対策
hacomono
0
400
AWSとCPUのムフフな関係
cmdemura
0
460
Makuakeの認証基盤とRe-Architectureチーム
bmf_san
0
400
domain層のモジュール化 / MoT TechTalk #15
mot_techtalk
0
110
Hono v3 - Do Everything, Run Anywhere, But Small, And Faster
yusukebe
4
130
Git Rebase
bkuhlmann
10
1.2k
僕が考えた超最強のKMMアプリの作り方
spbaya0141
0
180

Featured

See All Featured
Ruby is Unlike a Banana
tanoku
93
9.5k
Building Flexible Design Systems
yeseniaperezcruz
314
35k
Bootstrapping a Software Product
garrettdimon
299
110k
Unsuck your backbone
ammeep
659
56k
We Have a Design System, Now What?
morganepeng
37
5.9k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
217
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
19k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
5 minutes of I Can Smell Your CMS
philhawksworth
198
18k
Pencils Down: Stop Designing & Start Developing
hursman
114
10k
Six Lessons from altMBA
skipperchong
15
2.3k

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