CSS für Anfänger

CSS für Anfänger WORDPRESS MEETUP DORTMUND JUNI 2018 JESSICA LYSCHIK

Ü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

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

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; }

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

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

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 */

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

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

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

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

Danke für eure Aufmerksamkeit! :) Fragen? Wenn euch später noch
etwas einfällt: @jessicalyschik CSS FÜR ANFÄNGER - WORDPRESS MEETUP DORTMUND

CSS für Anfänger

CSS für Anfänger

Jessica Lyschik

More Decks by Jessica Lyschik

Other Decks in Programming

Featured

Transcript

CSS für Anfänger WORDPRESS MEETUP DORTMUND JUNI 2018 JESSICA LYSCHIK

Über mich CSS FÜR ANFÄNGER - WORDPRESS MEETUP DORTMUND Jessica

Cascading Style Sheets Wird für das „Aussehen“ einer Webseite genutzt

Syntax Ein CSS Regelsatz besteht aus: - Einem Selektor oder

Wo kann CSS definiert werden? Inline am HTML Element selbst:

Selektoren HTML Elemente selbst: p, a, h1, img, div Klasse

Kaskade Wird ein Element mehrfach deklariert: die letzte Eigenschaft gilt!

Box-Modell Jedes HTML Element ist eine rechteckige Box Zu jedem

Was sonst noch möglich ist Flexbox: eindimensionales Layout https://flexboxfroggy.com/#de https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS in WordPress anpassen CSS FÜR ANFÄNGER - WORDPRESS MEETUP

Links zum tiefer Einsteigen http://wiki.selfhtml.org/wiki/CSS - viele Informationen auf deutsch

Danke für eure Aufmerksamkeit! :) Fragen? Wenn euch später noch