CSS Einführung CSS Frameworks - se.uni-hannover.de · 14.04.2010 CSS Einführung & CSS Frameworks...

14.04.2010

CSS Einführung&

CSS Frameworks

Leif Singerleif.singer@inf.uni-hannover.de

Seminar “Aktuelle Software-Engineering-Praktiken für das World Wide Web”

Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010

• Anfragen von Kommilitonen: mit reinsetzen

• Ihr entscheidet:• “Gasthörer” erwünscht / nicht erwünscht?

Übersicht

• Grundlagen– Selektoren– Einbindung– Positionierung– Probleme

• Basis-Stylesheets

• Domänenspezifische Sprachen für CSS

GRUNDLAGEN

Grundlagen

• HTML strukturiert Inhalte– sehr allgemeine Tags, wenig Darstellung ableitbar (“Tabelle”, “Liste”)

• CSS sorgt für Darstellung– Farben, Schriften, Hintergründe– Rahmen, Abstände– Positionierung

• CSS hat folgende Form:selector {declarations*}

Grundlagen

• ein Selektor sucht HTML-Elemente aus• Deklarationen ändern die Eigenschaften der selektieren

Elemente

• Schriftfarbe für alle Überschriften vom Typ “h1” auf weiß* setzen:

* hexadezimal “FFFFFF”, abgekürzt “FFF”

h1 {color: #fff;}

selector {declarations*}

Grundlagen

• ein Selektor sucht HTML-Elemente aus• Deklarationen ändern die Eigenschaften der selektieren

Elemente

• alle Links mit einer schwarzen, gestrichelten Linie mit einem Pixel Breite umranden, aber nur oben:

a {border-top: 1px solid #000;

selector {declarations*

Grundlagen

• mehrere Tags selektieren

• alle Überschriften in einer serifenlosen Schrift darstellen:

h1, h2, h3, h4, h5, h6 {font-family: sans-serif;

Grundlagen

• Verschachtelung berücksichtigen

• alle Bilder, die sich in Absätzen befinden, sollen den Text rechts* um sich herumfliessen lassen:

* das Bild “schwebt” links vom Text

p img {float: left;

Grundlagen

• Verschachtelung 2: nur direkte Nachfahren

• alle Links, die sich direkt in einer Tabellenzelle befinden, grün einfärben:

• passt auf ...

td > a {color: #0c0;

<td><a href=”#”>Color me green!</a>

Grundlagen

• Verschachtelung 2: nur direkte Nachfahren

• alle Links, die sich direkt in einer Tabellenzelle befinden, grün einfärben:

• passt nicht auf ...

td > a {color: #0c0;

<td><p><a href=”#”>Can I haz green?</a>

</p></td>

Grundlagen

• Pseudo-Klassen

• alle Links grün einfärben, wenn sich die Maus über ihnen befindet – sonst rot:

a:link {color: red;

}a:visited { /* breits besucht */color: red;

}a:hover { /* Maus darüber */color: green;

}a:active { /* beim Klicken */color: red;

Grundlagen

• weitere Pseudo-Klassen sind ...

:first-child/* das erste Kind vom angegeben Typ */

p:first-child i/* i-Elemente in den ersten p-Elementen */

p i:first-child/* die ersten i-Elemente in allen p-Elementen */

:focus/* Elemente, die Tastatur-Fokus haben */

:lang/* Elemente, die einer bestimmten Sprache zugeordnet sind */

Grundlagen

• Definition und Verwendung von Klassen

• alle Tabellenzellen der Klasse “number” sollen ihren Inhalt rechtsbündig ausrichten:

• HTML dazu:

td.number {text-align: right;

<td class=”number”>23

</td><td>Glas Milch

Grundlagen

• Definition und Verwendung von eindeutigen IDs

• die Links in der Liste mit der ID “navigation” sollen nicht unterstrichen sein:

• HTML dazu:

ul#navigation a {text-decoration: none;

<ul id=”navigation”><li><a href=”index.html”>Startseite</a></li><li><a href=”imprint.html”>Impressum</a></li>

EINBINDUNG

Einbindung von CSS

• “inline”:

• ... wenig sinnvoll: wird schnell unübersichtlich.

<p style=”text-align: right;”>Lorem ipsum dolor sit amet, ...

Einbindung von CSS

• per <style> im <head>:

• ebenfalls nicht so sinnvoll: wird mit jeder Seite neu geladen.

<head><style type="text/css">a {text-decoration: none;

}</style>

</head>

Einbindung von CSS

• per <link> im <head>:

• Super: wird nur einmal vom Browser geladen, liegt dann im Cache.

</head>

Einbindung von CSS

• per CSS @import-Direktive– immer zu Beginn eines CSS-Dokuments:

@import url(“style.css”);

Einbindung von CSS

• sinnvolle Auslagerung und Aufteilung möglich

• Organisation von Stylesheets ...– für verschiedene Medien (screen, handheld, print, ...)

• neu: CSS Media Queries ...‣ media="only screen and (max-device width:480px)"

– allgemeine CI bis seitenspezifische Styles– thematisch unterteilt– für verschiedene Browser

• Ladezeiten– importierte oder per <link> geladene Stylesheets müssen nur einmal

geladen werden, sind dann im Cache verfügbar

• Achtung – MSIE: maximal 31 Stylesheets je Datei laden

POSITIONIERUNG

CSS Positionierung

• es gibt zwei Arten von Elementen: block und inline

• inline-Elemente ...– nehmen sich so viel Platz wie sie brauchen

• block-Elemente ...– nehmen horizontal die ganze Breite (des Elternelements) ein– forcieren einen Zeilenumbruch

• interessant für Layouts: block-Elemente– Position und Dimensionen per CSS frei bestimmbar– Standard-Element für Positionierung: div (division – Unterteilung, Sektor)

Breite einer Box: “linke innere Seite des Rahmensbis rechts innere Seite des Rahmens”

... verschiedene Browser interpretieren das natürlich verschieden.

Inhalt

Padding

Margin

Rahmen ("border")

CSS Box Model

CSS Positionierung

• Elemente können per float: left und float: right bestimmen, dass sie an folgenden Elementen “kleben”

• Bild und Text, ohne floating

CSS Positionierung

• Elemente können per float: left und float: right bestimmen, dass sie an folgenden Elementen “kleben”

• Bild mit float: left – “klebt” links am Text– folgende Elemente, die nicht kleben möchten, sagen clear: left|right|both

CSS Positionierung

• relative Positionierung– Position nur relativ zur “natürlichen” Position “verrücken”– drücken weiterhin andere Elemente weg

• absolute Positionierung– Elemente nehmen relativ zu anderen keinen Platz mehr ein– schlecht für Layouts, die eben dieses Verhalten benötigen

... {position: absolute; top: 10px; right: 20px;}

... {position: relative; left: -20px;}

CSS Positionierung

• das Box Model ist zwar mächtig, aber nicht intuitiv– floating beeinflusst alle folgenden Elemente– Zentrierung über Trick mit dem Rand (margin)– vertikale Zentrierung noch umständlicher– Kästen, die eine Mindesthöhe haben, aber dennoch bei mehr Inhalt

mitwachsen – ebenfalls sehr umständlich (bspw. “Sidebars”)

• nicht zu vergessen: Unterschiede zwischen Browsern

• viel einfacheres Denkmodell: Zeilen und Spalten– passt sehr gut für sehr viele Fälle– in den 90ern mit Tabellen umgesetzt – aber dafür sind sie nicht da

PROBLEME MIT CSS

Probleme mit CSS

• keine Verschachtelung– Lesbarkeit leidet

• viele überflüssige Zeichen ...

ul#menu {...}ul#menu li {...}ul#menu li a {...}ul#menu li a:hover {...}ul#menu li a#active {...}ul#menu li a#active:hover {...}

Probleme mit CSS

• keine Variablen oder zumindest Konstanten– Farben einheitlich ändern

• hier soll der Hintergrund der Seite etwas dunkler sein als der Hintergrund des Inhalts– Änderungen an der einen Farbe bedingen Änderungen an der anderen– das sollte einfacher gehen: “etwas dunkler” kann man auch in Code

ausdrücken! – ... aber nicht in CSS.

body {background-color: #cc9900;

}div#content {background-color: #ffcc00;

Probleme mit CSS

• Positionierung umständlich– Box Model & Browserunterschiede– man löst immer wieder dieselben Probleme ...– Wieso das nicht einmal browserunabhängig für 99% der Anwendungsfälle

lösen?

• ... zwei Lösungsansätze:– Basis-Stylesheets

• Positionierung, aber auch Browserunterschiede, Typographie, Druckansicht– DSLs für CSS

• Lesbarkeit, Variablen, Redundanzen entfernen

‣ und viele Projekte ...

BASIS-STYLESHEETS

Basis-Stylesheets

• Hilfe bei Positionierung durch fertige Gitter

• “CSS Resets”

• professionelle Typographie

• konsistente Formulare

• vernünftige Voreinstellungen für den Druck

• “960 Grid System”, “Blueprint”, “Baseline”, ...

DEMO: BASELINE

DOMÄNENSPEZIFISCHE SPRACHEN FÜR CSS

Domänenspezifische Sprachen für CSS

• Sass kompiliert von einer CSS-artigen Sprache nach CSS– Verschachtelung, Variablen, Arithmetik, Mixins– @import wird durch Kompilierung aufgelöst – Anzahl der Dateien egal

• Compass verwendet Sass, unterstützt Basis-Stylesheets– bpsw. Blueprint

• Plugins für diverse serverseitige Frameworks– Ruby on Rails, Wordpress, ...– ... oder einfach beim Entwickeln immer kompilieren lassen

• Verschachtelung von Selektoren

ul#menu { list-style: none;}ul#menu li { display: inline;}ul#menu li a { text-decoration: none;}

• Verschachtelung von Selektoren

• Verschachtelung von Eigenschaften

div { border-top: 1px #000 solid; border-bottom: 1px #000 solid; border-left: 2px #f00 solid; border-right: 2px #f00 solid;}

• Verschachtelung von Eigenschaften

• Variablen

a { color: #c198f2;}

ul#menu { border-color: #c198f2;}

• Variablen

• Arithmetik – bspw. mit Farben

a { color: #c198f2;}

ul#menu { border-color: #8f66c0; /* etwas dunkler als die Links */}

• Arithmetik – bspw. mit Farben

• Mixins

#sidebar { border: 1px black solid; display: inline; float: left;}

#content img { background-color: #fafafe; display: inline; float: left;}

• Mixins

• Mixins mit Parametern

#header h1 { text-indent: -9999em; overflow: hidden; background-image: image_url(/images/logo.png); background-repeat: no-repeat; background-position: 50% 50%;}

li#overview { text-indent: -9999em; overflow: hidden; background-image: image_url(/images/overview.png); background-repeat: no-repeat; background-position: 20% 50%;}

• Mixins mit Parametern

DEMO: COMPASSBASIS-STYLESHEETS KOMBINIERT MIT SASS

ZUSAMMENFASSUNG

Zusammenfassung

• CSS Frameworks sind Abstraktionen auf CSS ...

• stellen fertige Lösungen bereit– Typographie, Formularelemente, ...

• stellen fertige Patterns bereit– insbesondere für Positionierung

• gleichen Schwächen der Sprache aus– verbesserte Lesbarkeit durch Verschachtelung– leichtere Änderungen durch Variablen und Farben-Arithmetik– Modularisierung durch Mixins

Zusammenfassung

• Ist der Mehraufwand gerechtfertigt? Für welche Aufgaben?

• Welche Ergänzungen sind sinnvoll? Welche nicht?

• Wer würde etwas davon selbst verwenden wollen?

CSS Einführung CSS Frameworks - se.uni-hannover.de · 14.04.2010 CSS Einführung & CSS Frameworks...

Documents

Transcript of CSS Einführung CSS Frameworks - se.uni-hannover.de · 14.04.2010 CSS Einführung & CSS Frameworks...

CSS Framework

Deine Kenntnisse - vwa-muenchen.de · Frontend-Entwicklung (JavaScript/JSON, HTML, CSS, JS) unter Einsatz gängiger Frameworks / Libraries (jQuery, Bootstrap) Konzeption, Gestaltung

CSS Best Practices

XHTML-CSS Kurzreferenz - webmaster-crashkurs.de · Die Kursreferenz soll beim Lernen von HTML und CSS unterstützen und als Spickzettel für HTML-Befehle und CSS Beschreibungen dienen.

HTML 5 und CSS 3 file · Web viewHTML 5 und CSS 3 Lernplattform:

Entwurf und Implementierung eines Fuzzing Frameworks …elib.dlr.de/116566/1/Masterarbeit_Dennis_Pfau.pdf · Entwurf und Implementierung eines Fuzzing Frameworks für das verteilte

Kapitel WT:III (Fortsetzung)...Cascading Stylesheets CSS [W3C status, reports, css home] Historie 1996 CSS Level 1. Recommendation. 2011 CSS Level 2 R1. Recommendation. 2016 CSS Level

CSS CYBER DEFENSE · CSS CYBER DEFENSE Zürich, März 2019 Center for Security Studies (CSS), ETH Zürich Nationale Cybersicherheits strategien im Vergleich – Herausforderungen

CSS - Das Umfassende Handbuch

CSS - Cascading Style Sheets · 26. April 2005 CSS - Cascading Style Sheets Rechenzentrum Universität Stuttgart Maria Vass

CSS – Cascading Style Sheets Gliederung: 1. Geschichte/ Entstehung von CSS 2. Sinn und Zweck von CSS 3. Syntax 1. Boxmodell 2. Anwendung 3. Selektoren.

App-Entwicklung mit HTML5, CSS und JavaScript. Inhalt Was ist PhoneGap Funktionsweise Unterstützte BS Architektur JS Frameworks & Plugin Entwicklungsumgebungen.

HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)

CSS Grundlagen Inhalt - esfl.bplaced.netesfl.bplaced.net/uebungen/thema_1/CSS-Grundlagen.pdfWas ist CSS? Mit Hilfe von CSS (Cascading Stylesheets) wird das Design einer HTML Website

Einstieg in CSS – Webseiten gestalten mit HTML und CSS › files › Shop › Documents › 101566_Leseprobe.pdf · CSS kennenlernen – Schriften, Farben und Hyperlinks Worin Sie

10 Auswahlkriterien für PHP Frameworks

CSS –Cascading Stylesheets fileCSS –Versionen 3 CSS 1 (1996) Erste Version von CSS Unterstützt Fonts, Farben, Alignments, etc. Von allen aktuellen Browsern unterstützt

CSS EINFÜHRUNG - luis.uni- · PDF fileSeite 6 November 2010 Vorteile CSS trennt Struktur von Gestaltung CSS bringt übersichtlichen HTML-Code CSS bietet Gestaltung nicht nur für

HTML 5 Css 3

CSS -- Cascading Style Sheets - techfak.uni-bielefeld.dejoern/edu/xml/xmllight04/xml3-screen.pdfÜbersicht • Wieso Cascading Style Sheets? • HTML und CSS • XML und CSS • Ausblick