Formatowanie treści#
Domyślny wygląd#
Wszystkie znaczniki mają domyślnie ustaloną prezentację (wygląd). Niektóre elementy mogą być odmiennie wyświetlane w różnych przeglądarkach (szczególnie w tych starszych). Najlepszym rozwiązaniem jest określenie wyglądu każdego elementu stosowanego na stronie, co w większości przypadków zapewni spójną interpretację, niezależnie od używanego oprogramowania.
W dodatku D specyfikacji CSS 2.01 zawarte zostały wytyczne, jak powinny prezentować się poszczególne elementy bez ingerowania użytkownika. Dodatek ma charakter zalecenia, nie standardu.
Co istotne, pełna prezentacja elementów (X)HTML nie może być wyrażona za pomocą właściwości CSS. Dotyczy to elementów replaced (img, object), elementów skryptowych (script, applet) oraz elementów formularzy i ramek.
Dla ciekawskich zamieszczam dwie ściągawki zestawiające własności poszczególnych elementów w różnych browserach:
- CSS2.1 User Agent Style Sheet Defaults - różne wersje przeglądarek.
- Internet Explorer User Agent Style Sheets - tylko i wyłącznie IE od wersji 6.
Więcej na temat domyślnego CSS w poszczególnych przeglądarkach, sposobach zapanowania nad wprowadzonym nieładem opiszę w kursie poświęconym kaskadowym arkuszom stylów. W tej chwili informacje na temat domyślnego wyglądu mogą okazać się przydatne przy dalszej analizie prezentowanych elementów.
Możesz już teraz sprawdzić specjalną stronę testową, w której zastosowałem najpopularniejsze znaczniki (X)HTML bez podpinania własnych reguł CSS.
Sposób wyświetlania elementów#
Elementy blokowe#
address, blockquote, body, dd, div, dl, dt, fieldset, form,
frame, frameset, h1, h2, h3, h4, h5, h6, iframe, noframes,
object, ol, p, ul, applet, center, dir, hr, menu, pre
{ display: block }Elementy list#
li { display: list-item }Tablice i elementy tablic#
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }Nagłówek dokumentu#
head { display: none }Odstępy (margin i padding) i prezentacja tekstu#
body { font-size: 1.12em; padding: 8px; line-height: 1.33 }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .83em 0 }
h3 { font-size: 1.17em; margin: 1em 0 }
h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu
{ margin: 1.33em 0 }
h5 { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
h6 { font-size: .67em; margin: 2.33em 0 }
h1, h2, h3, h4, h5, h6, b, strong
{ font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em, var, address
{ font-style: italic }
pre, tt, code, kbd, samp
{ font-family: monospace }
pre { white-space: pre }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir, menu, dd
{ margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol, ul ul, ol ol
{ margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
center { text-align: center }
br:before { content: "\A" }
/* An example of style for HTML 4.0's ABBR/ACRONYM elements */
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }
a[href] { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
bdo[dir="ltr"] { direction: ltr; unicode-bidi: bidi-override }
bdo[dir="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[dir="ltr"] { direction: ltr; unicode-bidi: embed }
*[dir="rtl"] { direction: rtl; unicode-bidi: embed }
/* Elements that are block-level in HTML4 */
address, blockquote, body, dd, div, dl, dt, fieldset,
form, frame, frameset, h1, h2, h3, h4, h5, h6, iframe,
noscript, noframes, object, ol, p, ul, applet, center,
dir, hr, menu, pre, li, table, tr, thead, tbody, tfoot,
col, colgroup, td, th, caption
{ unicode-bidi: embed }
/* End bidi settings */Prezentacja w druku#
@media print {
@page { margin: 10% }
h1, h2, h3, h4, h5, h6
{ page-break-after: avoid; page-break-inside: avoid }
blockquote, pre
{ page-break-inside: avoid }
ul, ol, dl { page-break-before: avoid }
}Prezentacja akustyczna#
@media speech {
h1, h2, h3, h4, h5, h6
{ voice-family: paul, male; stress: 20; richness: 90 }
h1 { pitch: x-low; pitch-range: 90 }
h2 { pitch: x-low; pitch-range: 80 }
h3 { pitch: low; pitch-range: 70 }
h4 { pitch: medium; pitch-range: 60 }
h5 { pitch: medium; pitch-range: 50 }
h6 { pitch: medium; pitch-range: 40 }
li, dt, dd { pitch: medium; richness: 60 }
dt { stress: 80 }
pre, code, tt { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
em { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
strong { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
dfn { pitch: high; pitch-range: 60; stress: 60 }
s, strike { richness: 0 }
i { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
b { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
u { richness: 0 }
a:link { voice-family: harry, male }
a:visited { voice-family: betty, female }
a:active { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}