Tài liệu Einstieg in CSS- P13 docx

| inherit inline-table- Elemente * nein alle nein visual border-top, border-right, border-bottom, border-left Rahmen an allen vier Seiten eines Elements [ || || border-top-col

Trang 1

Sje versäumen viele der Méglichkeiten von CSS, wenn Sie nur die be- kanntesten Eigenschaften verwenden Lernen Sie die ganze Palette kennen!

34.1 Eigenschaften von CSS 2.1

Nachfolgend finden Sie eine Ubersicht tiber samtliche Eigenschaf- ten der CSS-Version 2.1 Sie orientiert sich am Full Property Table des W3C fiir CSS 2.1

http://www.w3.org/TR/CSS21/propidx html

So lesen Sie die Tabellen

In der obersten Zeile jeder Tabelle finden Sie jeweils den Namen der Eigenschaft, darunter eine kurze Beschreibung Danach folgen die zulassigen Werte Angaben in spitzen Klammern bedeuten, dass Sie einen Wert in der passenden Mafbeinheit einsetzen mùủs- sen Andere Angaben beziehen sich auf erlaubte Schliisselbegriffe (Keywords) oder auf andere Eigenschaften Letztere sind wie Code ausgezeichnet

In der letzten Reihe finden Sie Informationen tiber den Stan-

dardwert (default), erlaubte Prozentangaben, Elemente, auf wel-

che die Eigenschaft angewendet werden darf, Angaben zur Ver- erbung sowie die Mediengruppe, fiir die die Eigenschaft gilt

Mediengruppen

Da CSS die Ausgabe in verschiedenen Medien vorsieht, fasst das W3C diese nach dem Einsatzzweck zu sogenannten Mediengrup- pen zusammen und ordnet diese wie folgt:

> Aural

aural, tv

> Interactive alle auRer print, projection

Trang 2

Definiert in einem Surround-System die horizontale Richtung, aus der

Sound kommt

leftwards | rightwards | inherit

background

Hintergrund eines Elements

[background-color || background-image || background-repeat ||

background-attachment || background-position] | inherit

: * siehe einzelne Eigenschaften Standard % Elemente Vererbt Medien ** nur far background:

scroll | fixed | inherit

background-color

Hintergrundfarbe eines Elements

<color> | transparent | inherit

transparent nein alle nein visual

<uri> | none | inherit

none nein alle nein visual

375

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark

Trang 3

center | right ] || [top| center | bottom ]] | inherit

** bezieht sich auf GréBe des

background-repeat

Wiederholung eines Hintergrundbildes

repeat | repeat-x | repeat-y | no-repeat | inherit

Standard % Elemente Vererbt Medien

collapse | separate | inherit

inline-table- Elemente

* nein alle nein visual

border-color Rahmenfarbe

[ <color> | transparent J{1,4} | inherit

transparent nein alle nein visual

— 376

Trang 4

border-spacing

Abstand der Rahmen von Tabellenzellen — nicht zu verwechseln mit

der Eigenschaft border

<length> <length> | inherit

inline-table- Elemente

border-top, border-right, border-bottom, border-left

Rahmen an allen vier Seiten eines Elements

[ <border-width> || <border-style> || border-top-color J |

inherit

<color> | transparent | inherit

* siehe einzelne Eigenschaften

* der Wert der Eigenschaft

¢ ol or

377

Trang 5

border-top-width, border-right-width, border-bottom-width,

medium nein alle nein visual

Die untere Position eines Elements

<length> | <percentage> | auto | inherit

** bezieht sich auf die HOhe des umgebenden Blocks Standard % Elemente Vererbt Medien

top | bottom | inherit

none | left | right | both | inherit

none nein Block-Level- nein visual

Trang 6

Beschneidet den sichtbaren Ausschnitt von Elementen

<shape> | auto | inherit

auto nein absolut nein visual

* abhangig vom Browser des

normal nein ‘before nein all

und :after Pseudo- Elemente

counter- increment Erhéht einen Zahler fiir ein Element

[ <identifier> <integer> J+ | none | inherit

none nein alle nein all

379

Trang 7

counter-reset

Setzt einen Zahler fiir ein Element zuriick

[ <identifier> <integer> ]+ | none | inherit

none nein alle nein all

Definiert einen Sound vor und nach einem Element

[ cue-before || cue-after ] | inherit

* nein alle nein aural

Definiert einen Sound nach einem Element

none nein alle nein aural

cue -before Definiert einen Sound vor einem Element

none nein alle nein aural

Trang 8

Definiert die Schreibrichtung

1tr | rt1 | inherit

inline nein alle nein visual

level | above | higher | lower | inherit

empty- cells

Bestimmt das Aussehen von leeren Tabellenzellen

show | hide | inherit

left | right | none | inherit

381

Trang 9

Verkuirzte Schreibweise flir Schrifteigenschaften

[ £ font-style || font-variant || font-weight J font-size [ / line-height ] font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit

des Eltern-Elements, standard % Elemente Vererbt Medien

font-style

Bestimmt den Schriftstil

normal | italic | oblique | inherit

font-variant Weist eine Schriftvariante zu

normal | small-caps | inherit

_— 382

Trang 10

columns und column groups

Die linke Position eines Elements

** bezieht sich auf die Breite

normal | <length> | inherit

line-height

Die Zeilenhöhe einer Schrift

normal | <number> | <length> | <percentage> | inherit

** bezieht sich auf die Schrift-

Standard % Elemente Vererbt Medien gre des Elements

383

Trang 11

> Standard % Elemente Vererbt Medien

inside | outside | inherit

Trang 12

Der AuÊenabstand von Elementen š 3

Standard % Elemente Vererbt Medien sẽ: hes ahESICH ali đi 'EYEIEE

des umgebenden Blocks —

*** bei Elementen mit tabl e- Display nur solche mit table-

margin-right, margin-left caption, table und inline- ——

Der rechte und linke AuRenabstand von Elementen ——

: ** bezieht sich auf Breite des _

Standard % Elemente Vererbt Medien umgebenden Blocks

*** bei Elementen mit tab] e- —— Display nur solche mit table-

caption, table und inline:

0 a alle *** nein visual Blocks

*** bei Elementen mit tab] e- — Display nur solche mit table -

max -height caption, table und inline:

Die maximale Hohe eines Elements

<length> | <percentage> | none | inherit

*** Auber non- replaced inline-Elemente, table

Die maximale Breite eines Elements

<length> | <percentage> | none | inherit

** bezieht sich auf die Breite a

none ja** alle *** nein visual Auer non-replaced

inl ine-Elemente, table

385

Trang 13

Die minimale Hohe eines Elements

<length> | <percentage> | inherit

*** AuBer non-replaced

inline-Elemente, table | Standard % Elemente Vererbt Medien

columns und column groups 0 ja alle *** nein visual

Die minimale Breite eines Elements

** bezieht sich auf die Breite des umgebenden Blocks Standard % Elemente Merern oc

*** Auber non-replaced 0 ja** alle *** nein visual

paged

Verkiirzte Schreibweise fiir Konturen von Elementen

{ outline-color || outline-style || outline-width ] | inherit

* nein alle nein visual,

interactive

outline -color Farbe der Konturen von Elementen

<color> | invert | inherit

invert nein alle nein visual,

Trang 14

visible | hidden | scroll | auto | inherit

nein kuảu nein visual

Elemente Vererbt Medien

alle *** nein visual

Elemente Vererbt Medien

alle *** nein visual

*** non-replaced Block-Level-

Elemente, table cells und Inline-Block-Elemente

des umgebenden Blocks

*** AuBer table-row-group,

table-header-group, table- footer-group, table-row

tab] e-column-group und

table-column

*** AuBer tabl e-row-group,

table-header-group, table- footer-group, table-row table-column-group und table-column

nh —« Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark

Trang 15

page- break-after

Seitenumbruch nach einem Element

auto nein Block-Level- nein visual,

auto nein Block-Level- nein visual,

avoid | auto | inherit

[ [<time> | <percentage>]{1,2} ] | inherit

pause-after

Pause nach einem Element

<time> | <percentage> | inherit

Trang 16

pause-before

Pause vor einem Element

<time> | <percentage> | inherit

play-during

Erlaubt das Abspielen eines Sounds im Hintergrund

<uri> [mix || repeat ] | auto | none | inherit

auto nein alle nein aural

Bestimmt die Positionierung von Elementen

Static | relative | absolute | fixed | inherit

static nein alle nein visual

389

Trang 17

Legt fest, wie Anfiihrungszeichen dargestellt werden

[<string> <string>]+ | none | inherit

des Benutzers Standard % Elemente Vererbt Medien

** bezieht sich auf Breite des umgebenden Blocks Standard % Elemente Vererbt Medien

auto IF Rida positionierte nein visual

digits | continuous | inherit

— 390

Trang 18

speak-punctuation

Legt die Aussprache von Satzzeichen fest

code | none | inherit

Definiert, ob Text ausgesprochen oder buchstabiert wird

normal | none spell-out | inherit

table -lay out

Legt fest, wie das Layout einer Tabelle beim Aufbau der Darstellung berechnet wird

auto | fixed | inherit

Trang 19

* left, wenn direction Itr, right wenn direction rtl

Elemente

* bezieht sich auf die Hohe

— 392

text-align

Bestimmt die Ausrichtung von Text

left | right | center | justify | inherit

text-decoration Erlaubt die »Dekoration« von Text

none | [ underline || overline || line-through || blink ] | inherit

Sorgt flr das Einriicken von Text

text-transform Verwandelt Text in Versalien, Kleinbuchstaben oder Initialen

capitalize | uppercase | lowercase | none | inherit

Die obere Positionierung eines Elements

_ nein positionierte nein visual

Elemente

Trang 20

unicode-bidi Wirkt in Kombination mit direction auf die Textrichtung

normal | embed | bidi-override | inherit

normal nein alle nein visual

** bezieht sich auf den Wert

| ine-height des Elements

*** Inline-Elemente und table cells

TET YTS

Bestimmt die Sichtbarkeit von Elementen

visible | hidden | collapse | inherit

** bezieht sich auf den

Standard % Elemente Vererbt Medien geerbten Wert

393

Trang 21

white-space

Definiert wie Zeilenvorschiibe in Verbindung mit Tabulatorspriingen und Leerzeichen gehandhabt werden

** bezieht sich auf Breite des

umgebenden Blocks Standard % Elemente Vererbt Medien

*** Auber non-replaced Inline-

Elemente, table rows und

table row groups

normal | <length> | inherit

Bestimmt die Stapelreihenfolge eines Elements

auto | <integer> | inherit

Trang 22

Mit CSS kénnen Sie Ihre Elemente prazise dimensionieren

Sie werden lernen,

> welche Mabeinheiten erlaubt sind,

> wann Sie relative oder absolute Einheiten anwenden und

> wie Sie Farben notieren

Trang 23

Einige der »beliebtesten« Fehler in CSS passieren meinen Schiilern oft

im Zusammenhang mit Werten Widmen Sie diesem Kapitel daher be- sondere Aufmerksamkeit Sie finden auf wenigen Seiten zusammen- gefasst, wie Sie Elemente bzw deren Eigenschaften sicher mit Werten versehen

Werte konnen unterschiedlich dargestellt werden Erlaubt sind:

> Schltisselbegriffe (Keywords)

Im Gegensatz zu Wertanga- > LA b

ben in HTML miissen diese engenangaven

in CSS immer mit einer Mab- > Prozentwerte einheit versehen sein Nur > Zahlen

wenn der Wert null ist, darf >» Zeichenketten (Strings) darauf verzichtet werden Ich >» URL

empfehle dennoch, immer :

eine Maeinheit zu setzen, > Farben

da Sie sonst bei spateren An-

derungen des Wertes még- licherweise nicht mehr wis- sen, um welche MaBeinheit 35 1 S ch li 5S elbegriffe

es sich handelte

Werte diirfen nicht nur numerisch und mit Makeinheiten, sondern

auch mit Schllisselbegriffen (Keywords) angegeben werden

Beispiele:

h6 {font-size: small;} /* small ist hier das Keyword */

Zulassige Schlisselbegriffe h2 {background: lavender;} /* lavender = Keyword */

fiir Eigenschaften entneh- men Sie bitte dem rechten Beachten Sie bitte, dass ein Schlisselbegriff nicht in Anfiihrungs- Klappentext des Buches zeichen stehen darf

35.2 Langenangaben

Die meisten Werte von Eigenschaften werden als Langen angegeben Dabei wird zwischen absoluten und relativen Maeinheiten unterschieden

Beispiele:

div#footer {width: 600px;} /* Relative Angabe */

div#header {width: 200mm;} /* Absolute MaBangabe flir Print */

_— 396

Định dạng
Số trang	30
Dung lượng	4,36 MB