XSL die neue Sprache fürs Webdesign

Einführung in XSL

1. Was ist XSL?

XSL = eXtensible Stylesheet Language

Das was CSS (Cascading Style Sheets) bereits unter HTML ist, soll XSL unter XML werden. Eine Sprache die für die optische Gestaltung eines Dokumentes zuständig ist. Unter XML werden strukturelle oder semantische Auszeichnungen mit Hilfe von XSL in eine optische ansprechende und leicht änderbare Form gebracht. Stärker als unter HTML ist bei XML-Dokumenten eine Trennung von Semantik und Darstellung erforderlich.

2. Unterschiede zu CSS

Mit XSL können XML-Dokumente nach HTML konvertiert werden
XSL besitzt mehr Funktionen als CSS
Bei XSL kann man auch eigene Funktionen definieren
HTML-Elemente müssen unter XSL für jedes Dokument neu spezifiziert werden

3. Elemente von XSL

Eine XSL-Formatvorlage beginnt mit <XSL> und endet mit </XSL>

Alle Attribute innerhalb von XSL 1.0

Attribut	Eigenschaft	Voreinstellung	vererbt	Prozentangabe
absolute-position	auto \| absolute \| fixed \| inherit	auto	no	N/A
active-state	link \| visited \| active \| hover \| focus	no, a value is required	no	N/A
alignment-adjust	auto \| <percentage> \| <length> \| inherit	auto	no	see prose
auto-restore	yes \| no	no	yes	N/A
azimuth	<angle> \| [[ left-side \| far-left \| left \| center-left \| center \| center-right \| right \| far-right \| right-side ] \|\| behind ] \| leftwards \| rightwards \| inherit	center	yes	N/A
background	[<background-color> \|\| <background-image> \|\| <background-repeat> \|\| <background-attachment> \|\| <background-position> \| ]]inherit	not defined for shorthand properties	no	allowed on 'background-position'
background-attachment	scroll \| fixed \| inherit	scroll	no	N/A
background-color	<color> \| transparent \| inherit	transparent	no	N/A
background-image	<uri> \| none \| inherit	none	no	N/A
background-position	[ [<percentage> \| <length> ]{1,2} \| [ [top \| center \| bottom] \|\| [left \| center \| right] ] ] \| inherit	0% 0%	no	refer to the size of the box itself
background-position-horizontal	<percentage> \| <length> \| left \| center \| right \| inherit	0%	no	refer to the size of the padding-rectangle
background-position-vertical	<percentage> \| <length> \| top \| center \| bottom \| inherit	0%	no	refer to the size of the padding-rectangle
background-repeat	repeat \| repeat-x \| repeat-y \| no-repeat \| inherit	repeat	no	N/A
baseline-identifier	baseline \| before-edge \| text-before-edge \| middle \| after-edge \| text-after-edge \| ideographic \| alphabetic \| hanging \| mathematical \| inherit	see prose	no	N/A
baseline-shift	baseline \| sub \| super \| <percentage> \| <length> \| inherit	baseline	no	refers to the "line-height" of the parent area
blank-or-not-blank	blank \| not-blank \| any \| inherit	any	no	N/A
block-progression-dimension	auto \| <length> \| <percentage> \| <length-range> \| inherit	auto	no	see prose
border	[ <border-width> \|\| <border-style> \|\| <color> ] \| inherit	see individual properties	no	N/A
border-after-color	<color> \| inherit	the value of the 'color' property	no	N/A
border-after-style	<border-style> \| inherit	none	no	N/A
border-after-width	<border-width> \| <length-conditional> \| inherit	medium	no	N/A
border-before-color	<color> \| inherit	the value of the 'color' property	no	N/A
border-before-style	<border-style> \| inherit	none	no	N/A
border-before-width	<border-width> \| <length-conditional> \| inherit	medium	no	N/A
border-bottom	[ <border-top-width> \|\| <border-style> \|\| <color> ] \| inherit	see individual properties	no	N/A
border-bottom-color	<color> \| inherit	the value of the 'color' property	no	N/A
border-bottom-style	<border-style> \| inherit	none	no	N/A
border-bottom-width	<border-width> \| inherit	medium	no	N/A
border-collapse	collapse \| separate \| inherit	collapse	yes	N/A
border-color	<color>{1,4} \| transparent \| inherit	see individual properties	no	N/A
border-end-color	<color> \| inherit	the value of the 'color' property	no	N/A
border-end-style	<border-style> \| inherit	none	no	N/A
border-end-width	<border-width> \| inherit	medium	no	N/A
border-left	[ <border-top-width> \|\| <border-style> \|\| <color> ] \| inherit	see individual properties	no	N/A
border-left-color	<color> \| inherit	the value of the 'color' property	no	N/A
border-left-style	<border-style> \| inherit	none	no	N/A
border-left-width	<border-width> \| inherit	medium	no	N/A
border-right	[ <border-top-width> \|\| <border-style> \|\| <color> ] \| inherit	see individual properties	no	N/A
border-right-color	<color> \| inherit	the value of the 'color' property	no	N/A
border-right-style	<border-style> \| inherit	none	no	N/A
border-right-width	<border-width> \| inherit	medium	no	N/A
border-separation	<length-bp-ip-direction> \| inherit	.block-progression-direction="0pt" .inline-progression-direction="0pt"	yes	N/A
border-spacing	<length> <length>? \| inherit	0pt	yes	N/A
border-start-color	<color> \| inherit	the value of the 'color' property	no	N/A
border-start-style	<border-style> \| inherit	none	no	N/A
border-start-width	<border-width> \| inherit	medium	no	N/A
border-style	<border-style>{1,4} \| inherit	see individual properties	no	N/A
border-top	[ <border-top-width> \|\| <border-style> \|\| <color> ] \| inherit	see individual properties	no	N/A
border-top-color	<color> \| inherit	the value of the 'color' property	no	N/A
border-top-style	<border-style> \| inherit	none	no	N/A
border-top-width	<border-width> \| inherit	medium	no	N/A
border-width	<border-width>{1,4} \| inherit	see individual properties	no	N/A
bottom	<length> \| <percentage> \| auto \| inherit	auto	no	refer to height of containing block
break-after	auto \| column \| page \| even-page \| odd-page \| inherit	auto	no	N/A
break-before	auto \| column \| page \| even-page \| odd-page \| inherit	auto	no	N/A
caption-side	before \| after \| start \| end \| top \| bottom \| left \| right \| inherit	before	yes	N/A
case-name	<name>	none, a value is required	no, a value is required	N/A
case-title	<string>	none, a value is required	no, a value is required	N/A
character	<character>	N/A, value is required	no, a value is required	N/A
clear	start \| end \| left \| right \| both \| none \| inherit	none	no	N/A
clip	<shape> \| auto \| inherit	auto	no	N/A
color	<color> \| inherit	depends on user agent	yes	N/A
color-profile-name	<name> \| inherit		no	N/A
column-count	<number> \| inherit	1	no	N/A
column-gap	<length> \| <percentage> \| inherit	12.0pt	no	refer to width of the region being divided into columns.
column-number	<number>	see prose	no	N/A
column-width	<length>	see prose	no	N/A
content-height	auto \| <length> \| <percentage> \| inherit	auto	no	intrinsic height
content-type	<string> \| auto	auto	no	N/A
content-width	auto \| <length> \| <percentage> \| inherit	auto	no	intrinsic height
country	none \| <country> \| inherit	none	yes	N/A
cue	<cue-before> \|\| <cue-after> \| inherit	not defined for shorthand properties	no	N/A
cue-after	<uri> \| none \| inherit	none	no	N/A
cue-before	<uri> \| none \| inherit	none	no	N/A
destination-placement-offset	<length>	0pt	no	N/A
direction	ltr \| rtl \| inherit	ltr	yes	N/A
display-align	auto \| before \| center \| after \| inherit	auto	yes	N/A
dominant-baseline	auto \| autosense-script \| no-change \| reset-size \| ideographic \| alphabetic \| hanging \| mathematical \| inherit	auto	no	N/A
elevation	<angle> \| below \| level \| above \| higher \| lower \| inherit	level	yes	N/A
empty-cells	show \| hide \| inherit	show	yes	N/A
end-indent	<length> \| inherit	0pt	yes	refer to width of containing reference-area
ends-row	yes \| no	no	no	N/A
extent	<length> \| <percentage> \| inherit	0.0pt	no	refer to the corresponding height or width of the region reference-area.
external-destination	<uri-reference>	null string	no	N/A
float	before \| start \| end \| left \| right \| none \| inherit	none	no	N/A
flow-name	<name>	an empty name	no, a value is required	N/A
font	[ [ <font-style> \|\| <font-variant> \|\| <font-weight> ]? <font-size> [ / <line-height>]? <font-family> ] \| caption \| icon \| menu \| message-box \| small-caption \| status-bar \| inherit	see individual properties	yes	N/A
font-family	[[ <family-name> \| <generic-family> ],]* [<family-name> \| <generic-family>] \| inherit	depends on user agent	yes	N/A
font-height-override-after	use-font-metrics \| <length> \| inherit	use-font-metrics	no	refer to font's em-height
font-height-override-before	use-font-metrics \| <length> \| inherit	use-font-metrics	no	refer to font's em-height
font-size	<absolute-size> \| <relative-size> \| <length> \| <percentage> \| inherit	medium	yes, the computed value is inherited	refer to parent element's font size
font-size-adjust	<number> \| none \| inherit	none	yes	N/A
font-stretch	normal \| wider \| narrower \| ultra-condensed \| extra-condensed \| condensed \| semi-condensed \| semi-expanded \| expanded \| extra-expanded \| ultra-expanded \|inherit	normal	yes	N/A
font-style	normal \| italic \| oblique \| backslant \| inherit	normal	yes	N/A
font-variant	normal \| small-caps \| inherit	normal	yes	N/A
font-weight	normal \| bold \| bolder \| lighter \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| inherit	normal	yes	N/A
force-page-count	auto \| even \| odd \| end-on-even \| end-on-odd \| no-force \| inherit	auto	no	N/A
format	<string>	1.	no	N/A
glyph-orientation-horizontal	<angle> \| inherit	0	yes	N/A
glyph-orientation-vertical	auto \| <angle> \| inherit	auto	yes	N/A
grouping-separator	<character>	no separator	no	N/A
grouping-size	<number>	no grouping	no	N/A
height	<length> \| <percentage> \| auto \| inherit	auto	no	see prose
hyphenate	false \| true \| inherit	false	yes	N/A
hyphenation-character	<character> \| inherit	The unicode hyphen character u+2010	yes	N/A
hyphenation-keep	auto \| column \| page \| inherit	none	yes	N/A
hyphenation-ladder-count	no-limit \| <number> \| inherit	no-limit	yes	N/A
hyphenation-push-character-count	<number> \| inherit	2	yes	N/A
hyphenation-remain-character-count	<number> \| inherit	2	yes	N/A
id	<id>	see prose	no, see prose	N/A
indicate-destination	yes \| no	no	no	N/A
initial-page-number	auto \| auto-odd \| auto-even \| <number> \| inherit	auto	no	N/A
inline-progression-dimension	auto \| <length> \| <percentage> \| <length-range> \| inherit	auto	no	see prose
internal-destination	null string \| <idref>	null string	no	N/A
keep-together	<keep> \| inherit	.within-line=auto, .within-column=auto, .within-page=auto	yes	N/A
keep-with-next	<keep> \| inherit	.within-line=auto, .within-column=auto, .within-page=auto	no	N/A
keep-with-previous	<keep> \| inherit	.within-line=auto, .within-column=auto, .within-page=auto	no	N/A
language	none \| <language> \| inherit	none	yes	N/A
last-line-end-indent	<length> \| <percentage> \| inherit	0pt	yes	width of containing block
leader-alignment	none \| reference-area \| page \| inherit	none	yes	N/A
leader-length	<length-range> \| inherit	leader-length.minimum=0pt, .optimum=12.0pt, .maximum=100%	yes	refer to width of content-rectangle of parent area
leader-pattern	space \| rule \| dots \| use-content \| inherit	space	yes	N/A
leader-pattern-width	use-font-metrics \| <length> \| inherit	use-font-metrics	yes	Refer to width of containing box
left	<length> \| <percentage> \| auto \| inherit	auto	no	refer to height of containing block
letter-spacing	normal \| <length> \| <space> \| inherit	normal	yes	N/A
letter-value	auto \| alphabetic \| traditional	auto	no	N/A
linefeed-treatment	ignore \| preserve \| treat-as-space \| inherit	treat-as-space	yes	N/A
line-height	normal \| <length> \| <number> \| <percentage> \| <space> \| inherit	normal	yes	refer to the font size of the element itself
line-height-shift-adjustment	consider-shifts \| disregard-shifts \| inherit	consider-shifts	yes	N/A
line-stacking-strategy	line-height \| font-height \| max-height \| inherit	line-height	yes	N/A
margin	<margin-width>{1,4} \| inherit	not defined for shorthand properties	no	refer to width of containing block
margin-bottom	<margin-width> \| inherit	0	no	refer to width of containing block
margin-left	<margin-width> \| inherit	0pt	no	refer to width of containing block
margin-right	<margin-width> \| inherit	0pt	no	refer to width of containing block
margin-top	<margin-width> \| inherit	0	no	refer to width of containing block
marker-class-name	<name>	an empty name	no, a value is required	N/A
master-name	<name>	an empty name	no, a value is required	N/A
max-height	<length> \| <percentage> \| none \| inherit	0pt	no	refer to height of containing block
maximum-repeats	<number> \| no-limit \| inherit	no-limit	no	N/A
max-width	<length> \| <percentage> \| none \| inherit	none	no	refer to width of containing block
min-height	<length> \| <percentage> \| inherit	0pt	no	refer to height of containing block
min-width	<length> \| <percentage> \| inherit	depends on UA	no	refer to width of containing block
number-columns-repeated	<number>	1	no	N/A
number-columns-spanned	<number>	1	no	N/A
number-rows-spanned	<number>	1	no	N/A
odd-or-even	odd \| even \| any \| inherit	any	no	N/A
orphans	<integer> \| inherit	2	yes	N/A
overflow	visible \| hidden \| scroll \| auto \| inherit	auto	no	N/A
padding	<padding-width>{1,4} \| inherit	not defined for shorthand properties	no	refer to width of containing block
padding-after	<padding-width> \| <length-conditional> \| inherit	0pt	no	refer to width of containing block
padding-before	<padding-width> \| <length-conditional> \| inherit	0pt	no	refer to width of containing block
padding-bottom	<padding-width> \| inherit	0pt	no	refer to width of containing block
padding-end	<padding-width> \| inherit	0pt	no	refer to width of containing block
padding-left	<padding-width> \| inherit	0pt	no	refer to width of containing block
padding-right	<padding-width> \| inherit	0pt	no	refer to width of containing block
padding-start	<padding-width> \| inherit	0pt	no	refer to width of containing block
padding-top	<padding-width> \| inherit	0pt	no	refer to width of containing block
page-break-after	auto \| always \| avoid \| left \| right \| inherit	auto	no	N/A
page-break-before	auto \| always \| avoid \| left \| right \| inherit	auto	no	N/A
page-break-inside	avoid \| auto \| inherit	auto	yes	N/A
page-height	auto \| indefinite \| <length> \| inherit	auto	no	N/A
page-position	first \| last \| rest \| any \| inherit	any	no	N/A
page-width	auto \| indefinite \| <length> \| inherit	auto	no	N/A
pause	[<time> \| <percentage>]{1,2} \| inherit	depends on user agent	no	see descriptions of 'pause-before' and 'pause-after'
pause-after	<time> \| <percentage> \| inherit	depends on user agent	no	see prose
pause-before	<time> \| <percentage> \| inherit	depends on user agent	no	see prose
pitch	<frequency> \| x-low \| low \| medium \| high \| x-high \| inherit	medium	yes	N/A
pitch-range	<number> \| inherit	50	yes	N/A
play-during	<uri> mix? repeat? \| auto \| none \| inherit	auto	no	N/A
position	static \| relative \| absolute \| fixed \| inherit	static	no	N/A
precedence	true \| false \| inherit	false	no	N/A
provisional-distance-between-starts	<length> \| inherit	24.0pt	yes	refer to width of the containing box
provisional-label-separation	<length> \| inherit	6.0pt	yes	refer to width of the containing box
reference-orientation	0 \| 90 \| 180 \| 270 \| -90 \| -180 \| -270 \| inherit	0	yes (see prose)	N/A
ref-id	<idref> \| inherit	none, value required	no	N/A
region-name	xsl-region-body \| xsl-region-start \| xsl-region-end \| xsl-region-before \| xsl-region-after \| xsl-before-float-separator \| xsl-footnote-separator \| <name>	see prose	no, a value is required	N/A
relative-align	before \| baseline \| inherit	before	yes	N/A
relative-position	auto \| static \| relative \| inherit	static	no	N/A
rendering-intent	auto \| perceptual \| relative-colorimetric \| saturation \| absolute-colorimetric \| inherit	auto	no	N/A
retrieve-boundary	page \| page-sequence \| document	page-sequence	no	N/A
retrieve-class-name	<name>	an empty name	no, a value is required	N/A
retrieve-position	first-starting-within-page \| first-including-carryover \| last-starting-within-page \| last-ending-within-page	first-starting-within-page	no	N/A
richness	<number> \| inherit	50	yes	N/A
right	<length> \| <percentage> \| auto \| inherit	auto	no	refer to height of containing block
role	<string> \| none \| inherit	none	no	N/A
rule-style	none \| dotted \| dashed \| solid \| double \| groove \| ridge \| inherit	solid	yes	N/A
rule-thickness	<length>	1.0pt	yes	N/A
scaling	uniform \| non-uniform \| inherit	uniform	no	N/A
scaling-method	auto \| integer-pixels \| resample-any-method \| inherit	auto	no	N/A
score-spaces	true \| false \| inherit	true	yes	see prose
script	none \| auto \| <script> \| inherit	auto	yes	N/A
show-destination	replace \| new	replace	no	N/A
size	<length>{1,2} \| auto \| landscape \| portrait \| inherit	auto	N/A [XSL:no, is optional]	N/A
source-document	<uri>+ \| none \| inherit	none	no	N/A
space-after	<space> \| inherit	space.minimum=0pt, .optimum=0pt, .maximum=0pt, .conditionality=discard, .precedence=0	no	N/A (Differs from margin-bottom in CSS)
space-before	<space> \| inherit	space.minimum=0pt, .optimum=0pt, .maximum=0pt, .conditionality=discard, .precedence=0	no	N/A (Differs from margin-top in CSS)
space-end	<space> \| inherit	space.minimum=0pt, .optimum=0pt, .maximum=0pt, .conditionality=discard, .precedence=0	no	refer to the width of the containing area
space-start	<space> \| inherit	space.minimum=0pt, .optimum=0pt, .maximum=0pt, .conditionality=discard, .precedence=0	no	refer to the width of the containing area
space-treatment	ignore \| preserve \| inherit	preserve	yes	N/A
span	none \| all \| inherit	none	no	N/A
speak	normal \| none \| spell-out \| inherit	normal	yes	N/A
speak-header	once \| always \| inherit	once	yes	N/A
speak-numeral	digits \| continuous \| inherit	continuous	yes	N/A
speak-punctuation	code \| none \| inherit	none	yes	N/A
speech-rate	<number> \| x-slow \| slow \| medium \| fast \| x-fast \| faster \| slower \| inherit	medium	yes	N/A
src	<uri> \| inherit	none, value required	no	N/A
start-indent	<length> \| inherit	0pt	yes	refer to width of containing reference-area
starting-state	show \| hide	show	no	N/A
starts-row	yes \| no	no	no	N/A
stress	<number> \| inherit	50	yes	N/A
suppress-at-line-break	auto \| suppress \| retain \| inherit	auto	no	N/A
switch-to	xsl-preceding \| xsl-following \| xsl-any \| <name>[ <name>]*	xsl-any	no	N/A
table-layout	auto \| fixed \| inherit	auto	no	N/A
table-omit-footer-at-break	yes \| no	no	no	N/A
table-omit-header-at-break	yes \| no	no	no	N/A
text-align	start \| center \| end \| justify \| inside \| outside \| left \| right \| <string> \| inherit	start	yes	N/A
text-align-last	relative \| start \| center \| end \| justify \| inside \| outside \| left \| right \| <string> \| inherit	relative	yes	N/A
text-decoration	none \| [ [ underline \| no-underline] \|\| [ overline \| no-overline ] \|\| [ line-through \| no-line-through ] \|\| [ blink \| no-blink ] ] \| inherit	none	no, but see prose	N/A
text-indent	<length> \| <percentage> \| inherit	0pt	yes	refer to width of containing block
text-shadow	none \| [<color> \|\| <length> <length> <length>? ,]* [<color> \|\| <length> <length> <length>?] \| inherit	none	no, see prose	N/A
text-transform	capitalize \| uppercase \| lowercase \| none \|	none	yes	N/A
top	<length> \| <percentage> \| auto \| inherit	auto	no	refer to height of containing block
treat-as-word-space	auto \| yes \| no \| inherit	auto	no	N/A
unicode-bidi	normal \| embed \| bidi-override \| inherit	normal	no	N/A
vertical-align	baseline \| middle \| sub \| super \| text-top \| text-bottom \| <percentage> \| <length> \| top \| bottom \| inherit	baseline	no	refer to the 'line-height' of the element itself
visibility	visible \| hidden \| collapse \| inherit	visible	no	N/A
voice-family	[[<specific-voice> \| <generic-voice> ],]* [<specific-voice> \| <generic-voice> ] \| inherit	depends on user agent	yes	N/A
volume	<number> \| <percentage> \| silent \| x-soft \| soft \| medium \| loud \| x-loud \| inherit	medium	yes	refer to inherited value
white-space	normal \| pre \| nowrap \| inherit	normal	yes	N/A
white-space-collapse	false \| true \| inherit	true	yes	N/A
widows	<integer> \| inherit	2	yes	N/A
width	<length> \| <percentage> \| auto \| inherit	auto	no	refer to width of containing block
word-spacing	normal \| <length> \| <space> \| inherit	normal	yes	N/A
wrap-option	no-wrap \| wrap \| inherit	wrap	yes	N/A
writing-mode	lr-tb \| rl-tb \| tb-rl \| lr \| rl \| tb \| inherit	lr-tb	yes (see prose)	N/A
xml:lang	<country-language> \| inherit	not defined for shorthand properties	yes	N/A
z-index	auto \| <integer> \| inherit	auto	no	N/A

4. Einsatzmöglichkeiten von XSL

Mit Hilfe von XSL können XML-Dokumente in andere Dokumentformulare konvertiert werden.

5. Weiterführende Quellen

Extensible Stylesheet Language (XSL) Version 1.0 von W3.org

Internationale Mailingliste XSL

Deutschsprachige XSL-Seite vom bekannten Buchautor

XSL-Spezifikation (deutschsprachig)

Weblehre 1. April 2000

http://www.weblehre.de/verfahren/xsl.htm