Scribd Logo
Upload

Welcome to Scribd!

  • Praktická Příručka CSS - 1. Díl - Úvod A Způsoby Použití CSS

    Uploaded by

    watson
    67 views3 pages
    IT

    Original Title

    Praktická Příručka CSS - 1. Díl - Úvod a Způsoby Použití CSS

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    IT

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    67 views3 pages

    Praktická Příručka CSS - 1. Díl - Úvod A Způsoby Použití CSS

    Uploaded by

    watson
    IT

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    lnek vytit n ze serveru WebTip

    Nzev lnku: Praktick pru ka CSS, 1. dl - vod a zp soby pou itCSS


    Datum publikovn: 17.07. 2001
    URL lnku: http://www.webtip.cz/art/wt_p_html/wt_cssserial_001.html (kliknt pro n vrat)
    Vechna pr va vyhrazena (c) 2000 Grafika Publishing s.r.o.
    Doslovn ani ste n pebr ntohoto materi lu nenpovoleno bez pedchoz
    ho p
    semnho svolen
    vydavatele - spole nosti Grafika Publishing s.r.o.

    Praktick pru ka CSS, 1. dl - vod a zpsoby pouit CSS


    vod
    Kask dov styly (angl. Cascading Style Sheets, zkratka CSS) jsou nadstavbou jazyka HTML
    ur enou k definov nvzhledu WWW str nek. V sou asnosti je platnou normou verze CSS2 a
    alespo jejj dro je podporov no vtinou novch grafickch prohl
    e (MSIE 5+, Netscape 6+,
    Mozilla, Opera 5+ a dal). Vtina prohl
    e ale podporuje jen ur it funkce CSS2, ppadn pouze
    CSS1; obecn jet nenCSS2 pln podporov no nikde a v pr ci s CSS obsahujnavc prohl
    e e
    mnoho chyb. Stupe implementace CSS v r znch prohl
    e ch je uveden v tto tabulce.
    Zkladn odkazy:
    kola CSS na W3C - http://www.w3.org/Style/CSS/
    Specifikace CSS2 - http://www.w3.org/TR/REC-CSS2
    Specifikace CSS1 (star) - http://www.w3.org/TR/REC-CSS1
    Pehled podpory CSS v prohl
    e ch
    CSS umo ujpiadit ka dmu prvku v HTML ur it vlastnosti (vzhled, zp sob zobrazen i jin
    prezentace, umstnatd.), a to v z vislosti na druhu zazen, na nm je WWW dokument
    prezentov n (obrazovka po ta e, TV, tisk rna, kapesnpo ta , mobilntelefon, slepeck vstup,
    zvukov vstup atd.). D le umo ujdefinovat vlastnosti pro tdy a identifik tory - objekty v
    HTML dokumentu, jejich tda nebo identifik tor odpovdajtm z definic v CSS, potom tyto
    vlastnosti pebraj.

    Zpsoby pouit
    Definice CSS mohou bt sou stHTML dokumentu nebo mohou bt v samostatnm souboru. K
    HTML dokumentu jsou potom pipojeny bhem jeho na t ndo prohl
    e e. Mo nosti definov n
    styl jsou:
    1. Pmo v HTML dokumentu, v sti ozna en p rovou zna kou <STYLE> v sekci <HEAD> :
    <HEAD>
    ...
    <STYLE type="text/css">
    seznam pravidel
    </STYLE>
    ...
    </HEAD>

    1z3

    2. V konkrtnzna ce (tagu) v HTML dokumentu:


    <XXX ... style="seznam vlastnost">

    3. V externm souboru; soubor se na t pomoc<LINK> v sekci <HEAD> :


    <HEAD>
    ...
    <LINK rel="stylesheet" type="text/css" href="cesta_k_souboru">
    ...
    </HEAD>

    4. V externm souboru; soubor se na t CSS direktivou @import v sekci <STYLE> (pouze v CSS2):
    <STYLE type="text/css">
    @import url("cesta_k_souboru");
    ...
    </STYLE>

    V externm souboru je pitom seznam pravidel, stejn jako v sekci <STYLE> . Syntaxe definic CSS je
    pops na v dal sti.

    Javascript
    Na ten CSS definice (tabulky styl , angl. stylesheets) jsou ulo eny v poli
    document.styleSheets[] . Ka d polo ka v poli odpov
    d jedn sekci <STYLE> (v etn soubor
    na tench direktivou @import ), nebo jednomu souboru na tenmu pomocpkazu <LINK> . Poad
    polo ek v poli pak odpovd poadna t nCSS. Obecn podporovan je pouze vlastnost
    disabled , kter (de)aktivuje dan stylesheet.
    document.styleSheets[n].disabled = true | false

    Praxe
    Seznam CSS vlastnostlze uvst pmo v HTML zna ce (tagu). To m smysl jen u ple itostnho
    stylov n. Pklad:
    <P style="color:red; text-align:right">Mj podpis</P>

    V sekci <STYLE> v z hlavlze definovat sou asn styly pro cel dokument. Kv li kompatibilit se
    starmi prohl
    e i je zvykem styly skrt do koment e, obdobn jako se to dl ve zna ce
    <SCRIPT> . P
    klad:
    <STYLE type="text/css>
    <!-H1 { color:blue }
    P { color:#404040; text-align:justify }
    ...
    -->
    </STYLE>

    Nejlepje ulo it definice do samostatnho souboru. Lpe se pak spravuja jedna tabulka styl navc

    2z3

    m e bt spole n pro cel web. Vzhled mnoha str nek se pak snadno zmnz sahem do jedinho
    souboru. Pklad:
    <LINK REL="stylesheet" type="text/css" href="/lib/moje.css">
    nebo
    <STYLE type="text/css>
    <!-@import url=("/lib/moje.css");
    -->
    </STYLE>

    Druh mo nost je pak vhodn tehdy, chceme-li, aby n mi definovan styly na etl pouze prohl
    e ,
    kter ji podporuje CSS2 - starprohl
    e e tento pkaz neznaja tabulku styl nena tou.
    Na ten tabulky styl m eme i vypnat a zapnat pomocsktipt . Pklad:
    <LINK REL="stylesheet" type="text/css" href="modre.css">
    <LINK REL="stylesheet" type="text/css" href="cervene.css">
    ...
    <script type="text/javascript">
    function ZmenCSS(x) {
    document.styleSheets[0].disabled = (x!='m');
    document.styleSheets[1].disabled = (x!='c');
    }
    </script>
    ...
    <button onclick="ZmenCSS('m')">Stranka v modrem stylu</button>
    <button onclick="ZmenCSS('c')">Stranka v cervenem stylu</button>
    ...

    Autor: Petr Stan


    ek
    E-mail: stanicek@mac.com

    3z3

    You might also like