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

CSS für Anfänger

Avatar for Jessica Lyschik Jessica Lyschik
June 07, 2017
Programming
0
200

CSS für Anfänger

Avatar for Jessica Lyschik

Jessica Lyschik

June 07, 2017
Tweet

More Decks by Jessica Lyschik

See All by Jessica Lyschik
Performance 101
Avatar for Jessica Lyschik jessicalyschik
0
46
Performance 1x1
Avatar for Jessica Lyschik jessicalyschik
0
140
WordPress 5.3 - und Gutenberg!
Avatar for Jessica Lyschik jessicalyschik
0
190
CSS Grid in freier Wildbahn
Avatar for Jessica Lyschik jessicalyschik
0
170
CSS Grid in the wild
Avatar for Jessica Lyschik jessicalyschik
0
390
Keine Angst vor Gutenberg und WordPress 5.2
Avatar for Jessica Lyschik jessicalyschik
0
100
Keine Angst vor Gutenberg und WordPress 5.0
Avatar for Jessica Lyschik jessicalyschik
0
350
Einstieg in CSS Grid
Avatar for Jessica Lyschik jessicalyschik
1
590
Frauen in der IT und der WordPress Community
Avatar for Jessica Lyschik jessicalyschik
0
140

Other Decks in Programming

See All in Programming
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
120
AIともっと楽するE2Eテスト
Avatar for Yohei Maeda myohei
7
2.8k
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
Avatar for nrs nrslib
2
860
PHPでWebSocketサーバーを実装しよう2025
Avatar for kubotak kubotak
0
290
Hack Claude Code with Claude Code
Avatar for Akihiro Okuno choplin
4
2.2k
AI時代の『改訂新版 良いコード／悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
Avatar for MinoDriven minodriven
20
8k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
Avatar for Ahmed EBEN HASSINE ahmedbhs123
0
200
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
Avatar for bash0C7 bash0c7
1
790
脱Riverpod？fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
Avatar for Takuma Osada ostk0069
0
240
技術同人誌をMCP Serverにしてみた
Avatar for 74th(Atsushi Morimoto) 74th
1
660
Google Agent Development Kit でLINE Botを作ってみた
Avatar for Kento.Yamada ymd65536
2
260
Team operations that are not burdened by SRE
Avatar for zosokh kazatohiei
1
320

Featured

See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.4k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
It's Worth the Effort
Avatar for 3n 3n
185
28k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
42
7.4k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.5k
A better future with KSS
Avatar for Kyle Neath kneath
238
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.7k

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