Průvodce pro začátečníky a administrátory
Logo AdminXP.cz
Vlastní hledání


 

Selector

  • Selektor je jméno stylu, pro který bude definice vlastností uplatněna. Nejznámější jsou 3 typy: označení prvku HTML, třídy nebo ID objektu.
  • Property name - Jméno vlastnosti ze specifikace. Vlastností jsou desítky a je nutné používat specifikaci. Příkladem několika vlastností ovlivňujících písmo jsou: font-family, font-style, font-size, font-weight, text-decoration, text-align.
  • Value - Hodnota pro příslušnou vlastnost. K nalezení opět ve specifikaci. Povoleny jsou klíčová slova nebo hodnoty. Různé vlastnosti obvykle vyžadují různé hodnoty - pro typ písma se zadá jméno písma, pro velikost kombinace čísla a jednotky.

Porovnání CSS vs. HTML s omezeným použitím CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>CSS</title>
<style type="text/css">
<!--
H1 {font-family: Verdana; font-size: 10pt; margin-bottom : 0; margin-top : 0; text-align: center; font-style: italic; font-weight: bold; text-decoration: underline; color: Maroon;}
.tx {font-family: Arial; font-size: 7pt; margin-bottom : 0; margin-top : 0; color: Maroon; font-weight: bold; }
-->
</style>
</head>
<body>
<H1>Nadpis1</H1>
<p class="tx">Text1</p>
<H1>Nadpis2</H1>
<p class="tx">Text2</p>

</body>
</html>

 vs.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html401/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>HTML</title>
</head>
<body>
<p align="center" style="margin-top: 0; margin-bottom: 0"><font size="2" face="Verdana" color="#800000"><b><i><u>Nadpis1</u></i></b></font></p>
<p style="margin-top: 0; margin-bottom: 0"><font color="#800000" size="1" face="Arial"><b>Text1</b></font></p>
<p align="center" style="margin-top: 0; margin-bottom: 0"><font size="2" face="Verdana" color="#800000"><b><i><u>Nadpis2</u></i></b></font></p>
<p style="margin-top: 0; margin-bottom: 0"><font color="#800000" size="1" face="Arial"><b>Text2</b></font></p>

</body>
</html>
  • Většina atributů pro upřesnění vzhledu obsahu je podle specifikace HTML označená jako deprecated tzn. nemoderní a není doporučeno je používat.

Praktické používání - Zápisy stylů

  • 1.) Přímo u elementu (inline style) - Definice stylu v kódu pro jednotlivé elementy. Na rozdíl od stylů v hlavičce nebo v externím souboru se neuvádí selektor, ale pouze samotná definice. Není doporučeno s ohledem na problémovou a pracnou aktualizaci. Použití pro výjimečné případy, kdy výskyt stylu je v jednom nebo několika málo řádcích, a kdy není počítáno s aktualizací do budoucna.
<p style="font-family: Verdana; font-size: 10px; margin-bottom : 0; margin-top : 0; text-align : center">Text ....... </p>
  • 2. ) V hlavičce stránky - Definice stylu na začátku stránky. Nevýhodou je celková větší velikost každé stránky. Při použití externího souboru se stáhne soubor jen jednou a použije se i pro další stránky používající stejný soubor. Nepříjemná je pracnost opravy stylu v každé stránce.
<head>
<title>Cascading Style Sheet</title>

<style type="text/css">

<!--
FONT {font-family: Verdana; font-size: 10px;}
TD {font-family: Verdana; font-size: 10px;}
BODY {font-family: Verdana; font-size: 10px;}
P {font-family: Verdana; font-size: 10px;}
DIV {font-family: Verdana; font-size: 10px;}
A:link {COLOR: #003399}
A:visited {COLOR: #800080}
A:hover {color: #FF0000}
.tx0

{font-family: Verdana; font-size: 10px; margin-bottom : 0; margin-top : 0;}
.tx0s {font: Arial; font-size: 9px; margin-bottom : 0; margin-top : 0;}

-->

</style>

</head>

  • 3.) V externím souboru (stylesheets) - Použití definic stylů uložené v externím textovém souboru s příponou *.css (nejčastější a doporučovaná verze). Nevýhodou je problém s uložením stránky nebo odesláním elektronickou poštou, kdy při chybějícím souboru *.css se stránka zobrazí chybně. Příklad obsahu souboru:
FONT {font-family: Verdana; font-size: 10px;}
TD {font-family: Verdana; font-size: 10px;}
BODY {font-family: Verdana; font-size: 10px;}
P {font-family: Verdana; font-size: 10px;}
DIV {font-family: Verdana; font-size: 10px;}
A:link {COLOR: #003399}
A:visited {COLOR: #800080}
A:hover {color: #FF0000}
.tx0 {font-family: Verdana; font-size: 10px; margin-bottom : 0; margin-top : 0;}
.tx0s {font: Arial; font-size: 9px; margin-bottom : 0; margin-top : 0;}

Příklad hlavičky s odkazem na soubor pojmenovaný styl.css:

<head>
<title>Cascading Style Sheet</title>
<link rel="stylesheet" type="text/css" href="styl.css">
</head>

 

Příklad méně tradiční hlavičky s odkazem na více souborů:

<head>
<title>Cascading Style Sheet</title>
<link rel="stylesheet" type="text/css" href="styl.css">
 <link rel="stylesheet" type="text/css" href="styl2.css" media="screen"> 
<link rel="stylesheet" type="text/css" href="styl3.css" media="print">
</head>
  • Pro tento případ je méně známé: 1. Možnost používání více souborů *.css. 2. Používání typu nepovinné položky pro určování typu media, kdy je vyžadován rozdílný typ zobrazení na různých mediích (obrazovce, tiskárně nebo handheldu).

Hlavička, kdy externí soubor je načten pouze v případě, že prohlížeč podporuje CSS2

<STYLE type="text/css">
<!-- @import url("styl.css"); -->
</STYLE>
  • Prohlížeče nepodporující CSS nebo podporující CSS1, soubor nenačtou a styly budou ignorovány. Ideální pro použití v případech, kdy načtení stylů v některých prohlížečích způsobuje chybné zobrazení.
  • Jednotlivé zápisy lze kombinovat. Vpřípadě rozdílných parametrů má nejvyšší prioritu definice stylu přímo u elementu.

 

Různé typy medií

  • all - Suitable for all devices.
  • aural - Intended for speech synthesizers.
  • braille - Intended for braille tactile feedback devices.
  • embossed -Intended for paged braille printers.
  • handheld - Intended for handheld devices (typically small screen, monochrome, limited
    bandwidth).
  • print - Intended for paged, opaque material and for documents viewed on screen in print preview mode.
  • projection - Intended for projected presentations, for example projectors or print to transparencies.
  • screen - Intended primarily for color computer screens.
  • tty - Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. 
  • tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

 

Poznámky

  • Při návrhu je vhodné promyslet strukturu dokumentu bez použití CSS a potom optimalizovat pomocí CSS. Výsledkem může být lepší čitelnost v různých prohlížečích. V praxi a s použitím různých prohlížečů jsou některé stránky zcela nečitelné.
  • Pro kontrolu zobrazení využijte více verzí a typů prohlížečů. Pro rok 2003 je nejpoužívanější Internet Explorer 6. Doporučeno je prohlídnout stránky v Netscape Navigator (Mozilla) a Opeře.

  • Pro návrh a kontrolu stylů jsou užitečným pomocníkem specializované programy. Známým je například Topstyle nebo internetové kontrolní služby, z nejznámějších Validator na stránkách W3C.
  • Článek by měl být jemným úvodem pro vysvětlení a ukázku některých základů CSS. Podrobnosti hledejte ve specifikaci a na internetových stránkách specializovaných na problematiku CSS.


FAQ (Nejčastější otázky)

Encyklopedie

 

Seznam Odkazů



Pro webmastery O Serveru

Copyright © 2000 - 2015 AdminXP.cz - R 0.993