• Keine Ergebnisse gefunden

CSS-Einführung | informatikZentrale

N/A
N/A
Protected

Academic year: 2022

Aktie "CSS-Einführung | informatikZentrale"

Copied!
7
0
0

Wird geladen.... (Jetzt Volltext ansehen)

Volltext

(1)

CSS  

Einführung  

(2)

HTML  (XHTML,  HTML  5)  

"Beschreibt"  das  Dokument  in  struktureller  und   inhaltlicher  Hinsicht  und  definiert  bspw.:  

-­‐   Absätze  

-­‐   ÜberschriNen  

-­‐   Meta-­‐InformaPonen   -­‐   Listen  

usw.  

(3)

CSS  

"Cascading  Style  Sheets"  

 

"Gestaltet"  das  Dokument  in  grafischer  Hinsicht:  

-­‐   TexSormaPerung   -­‐   PosiPonen  

-­‐   Rahmen  

-­‐   (Hintergrund-­‐)Farben  

usw.  

(4)

Beispiel:  css  Zen  Garden  

csszengarden.com  

Gleicher HTML-Quelltext,

unterschiedliche Layouts!

(5)

Beispiel:  css  Zen  Garden  

(6)

Beispiel:  css  Zen  Garden  

(7)

Beispiel:  css  Zen  Garden  

Quelltext  

<body id="css-zen-garden">

<div class="page-wrapper">

<section class="intro" id="zen-intro">

<header role="banner">

<h1>CSS Zen Garden</h1>

<h2>The Beauty ...</h2>

</header>

<div class="summary" id="zen-summary" ...>

<p>A demonstration of what can be ...</p>

<p>Download the example ...</p>

</div>

Referenzen

ÄHNLICHE DOKUMENTE

CSS-Klasse zu Steuerelement hinzuf¨

[r]

font-family: serif | sans-serif | monospace font-size: 1.0em | 1.0rem. font-weight: normal | bold font-style: normal

[r]

Zeilenumbruch, falls nicht alle Elemente auf die Hauptachse passen flex-wrap: nowrap | wrap | wrap-reverse;. Shorthand f¨ ur flex-direction und flex-wrap

/* CSS beim Start der Animation */. }

[r]

list-style-image Grafik