Matthias Scharwies: N

2019-08-11T15:05:16Z

Neue Seite

Jetzt kommt Farbe ins Spiel! Du kannst das Aussehen Deiner Webseite verändern!
__NOTOC__
{{Aufgabe|
#Lies den Text!
## Erkläre kurz in eigenen Worten, wozu man CSS verwendet.
# Analysiere das untenstehende [[#Code-Beispiel|Code-Beispiel]]!
## Analysiere und übersetze Dir die verwendeten Eigenschaften.
## Informiere Dich bei SELFHTML über erlaubte Werte!
# Verschönere Deine Webseite!}}

== CSS ==
'''Cascading Style Sheets''' (engl. für stufenförmige oder (hintereinander) geschachtelte Formatfestlegungen), kurz '''CSS''' genannt, sind eine deklarative Sprache für Stilvorlagen (engl. ''stylesheets''). Sie dienen dazu bei Markup-Sprachen wie [[HTML und CSS|HTML]] und {{wpde|XML}}-Sprachen wie [[SVG]] Inhalt und Präsentation voneinander zu trennen.

Der Inhalt eines HTML-Dokuments wird durch Elemente ausgezeichnet und strukturiert. Diese Elemente haben browsereigene Stile, z.B. ist die Standardschriftfarbe schwarz und Überschriften werden z.B. größer als Text in Absätzen angezeigt.

CSS (Cascading Style Sheets) ermöglicht eine eigene Formatierung für HTML-Elemente. Solche Eigenschaften können beispielsweise Farben, Schriftgrößen, Hintergrundfarben, Abstände, Schriftarten und das Layout festlegen.

Hier ein Vergleich: Links ohne CSS, rechts mit einer CSS-Beispielformatierung.
<div style="margin: 1em;">[[Datei:HTML_ohne_CSS.png|200px|Ein HTML-Dokument ohne CSS]] [[Datei:HTML_mit_CSS.png|200px|Ein HTML-Dokument mit CSS]]</div>

== Syntax ==
Eine Regel besteht aus dem Selektor für das Element, auf das die Regel wirken soll und CSS-Regelsätzen, die in geschweiften Klammern stehen und durch Semikolons voneinander getrennt sind.

Ein CSS-Regelsatz besteht aus Eigenschaften, denen ein Wert zugewiesen wird.

Beispiel:

<source lang="css">
p {
color: white;
background-color: blue;
}
</source>

Das Beispiel würde den Hintergrund des Absatzes blau färben und die Textfarbe weiß. Weitere Informationen finden sich in den [[#Weblinks|Weblinks]].

== Selektoren ==

Damit CSS-Formateigenschaften auf ein Element angewendet werden können, muss definiert werden, welche Elemente angesprochen werden. Dies geschieht über '''Selektoren'''. Als Selektoren bezeichnet man die Teile einer CSS-Regel, die vor dem Abschnitt aus geschweiften Klammern stehen.
Voneinander unabhängige Selektoren, denen dieselben Eigenschaften zugewiesen werden, können mit Kommata getrennt werden.

<source lang="css">
einfacher Selektor {
CSS-Eigenschaft: Wert;
}
erster Selektor,
zweiter Selektor {
CSS-Eigenschaft: Wert;
}
</source>

[[Datei:Selektor.png|Selektoren]]

=== Universalselektor ===
Der Universalselektor trifft auf alle Elemente zu und kann daher zumeist einfach weggelassen werden. Die beiden folgenden Regeln sind bedeutungsgleich.

<source lang="css">
* {
margin: 0;
}

{ margin: 0; }
</source>

=== Typselektor ===
Der Typselektor spricht Elemente anhand des Elementnamens an. Die Regel wird auf alle Elemente des entsprechenden Typs angewandt, egal an welcher Stelle des Dokuments sie notiert sind und welcher Klasse sie angehören oder welchen Bezeichner sie tragen.

<source lang="css">
p {
margin: 0;
}
</source>

=== Klassen- und ID-Selektor ===
Das Universalattribut <code>class</code> können Sie für fast alle Elemente vergeben. Sie sprechen es mit CSS über den Klassenselektor an, indem Sie den Klassennamen mit einem führenden Punkt ohne Leerzeichen direkt hinter den einfachen Selektor setzten. Die Regel

<source lang="css">
p.hinweis {
color: red;
}
</source>

spricht alle Elemente vom Typ <code>p</code> an, deren Attribut <code>class</code> den Wert <code>hinweis</code> enthält, beispielsweise folgende:

<source lang="html5">
<p class="hinweis">Bitte füllen Sie alle mit einem Asterisk (*) markierten Felder aus.</p>

<p class="fehler hinweis">Es ist ein Fehler aufgetreten.<p>
</source>

Der Selektor <code>.hinweis</code> spricht alle Elemente der Klasse <code>hinweis</code> an, egal welchen Typs, und ist äquivalent zu <code>*.hinweis</code>.

Der folgende kombinierte Klassenselektor spricht Elemente an, die sowohl zur Klasse <code>fehler</code> als auch zur Klasse <code>hinweis</code> gehören:

<source lang="css">
.fehler,
.hinweis {
margin: 0;
color: red;
}
</source>

Das Universalattribut <code>id</code> hat in HTML-Dokumenten eine besondere Bedeutung, weil sein Wert pro Dokument nur ein Mal auftreten darf und Elemente mit diesem Attribut als Zielanker eines Links dienen können. Aus der zweiten Eigenschaft ergibt sich auch die Notation des ID-Selektors in CSS: Es wird eine Raute (#) vorangestellt:

<source lang="css">
ul#navigation {
margin: 0;
}
</source>

=== Code-Beispiel ===
<source lang="html5>
<style>
h1 {
color: red;
padding-left: 20%;
}
h2 {
background-color: skyblue;
border: 1px solid blue;
border-radius: 10px;
}
p {
width: 10em;
}
</style></source>

{{HTML und CSS}}

== Interaktive Übungen ==
Mit '''CSS''' können Sie die Gestaltung von Webseiten festlegen. Diese interaktiven Übungen eignen sich, um die Fachbegriffe zu lernen und zu wiederholen.

=== Warum CSS ===
<div class="lueckentext-quiz">
Setze die passenden Begriffe ein:.

CSS ist eine deklarative Sprache, mit der das '''Aussehen'''   von Webseiten festgelegt werden kann. Nach dem Grundsatz der Trennung zwischen Inhalt und '''Präsentation''' ist '''HTML''' nur für die '''Auszeichnung''' des Inhalts zuständig.

Sie können CSS in einem '''style-Bereich''' im head oder besser in einem externen '''Stylesheet''' notieren. So können viele Webseiten auf ein '''zentrales''' Stylesheet zugreifen, das schnell geändert werden kann.

</div>

=== CSS-Regeln ===
<div class="lueckentext-quiz">
Setze die passenden Begriffe ein:.

Eine CSS-Regel besteht aus einem '''Selektor''', der bestimmte Elemente einer Webseite auswählt, die dann verändert werden.

Ihm folgt ein '''Regelsatz''' (oder mehrere) innerhalb einer geschweiften Klammer, bestehend aus einer '''Eigenschaft''' und dem dazugehörenden '''wert''' notiert sind.

Am Ende jedes Regelsatzes muss ein '''Semikolon''' stehen.

</div>

== Eigenschaften ==

<div class="zuordnungs-quiz">
Ordne die CSS-Eigenschaften den Beschreibungen zu.
{|
| letter-spacing|| Abstand der Buchstaben
|-
| padding || Innenabstand<br>der zur Breite/Höhe dazugezählt wird
|-
| margin || Außenabstand
|-
| border || Rand<br>der zur Breite/Höhe dazugezählt wird
|-
| outline || Außenlinie<br>die nicht zur Breite/Höhe dazugezählt wird
|-
| color || Textfarbe
|-
| background-color || Farbe des Hintergrunds
|-
| width || Breite
|-
| height || Höhe
|-
| font-size || Textgröße
|}
</div>

== Weblinks ==
* {{wpde|Cascading Style Sheets}}

* Selfhtml-Wiki: [https://wiki.selfhtml.org/wiki/CSS CSS]
: Portalseite mit deutschsprachiger Dokumentation und vielen Tutorials
* http://www.mediaevent.de/css/index.html
:Sehr ansprechendes Tutorial
* http://www.css-praxis.de/
:Eigentlich eine Seite zu einem Buch. Hier gibt es auch Tipps und ein Forum zu CSS.
*http://www.css4you.de
:CSS-Workshop, Eigenschaften, CSS-Referenz Level 1 und 2, Tipps und Tricks (seit 2005 nicht mehr aktualisiert)
* Einen Einblick in die Möglichkeiten von CSS kann man unter der Seite http://www.csszengarden.com/tr/deutsch/ bekommen.
*http://css-tricks.com/
:Tricks zu CSS(3) (und Javacript) auf Englisch

[[Kategorie:Informatik]]
[[Kategorie:Interaktive Übung]]

HTML und CSS/CSS - Versionsgeschichte

Matthias Scharwies: N