Kaskádové styly – jazyk CSS by nef90815

VIEWS: 150 PAGES: 3

									                                                                        www.jakpsatweb.cz
Kaskádové styly – jazyk CSS
Kniha:

CSS pro úplné začátečníky
Lucie Grusová
Computr Press Brno 2003

http://knihy.cpress.cz/Pocitac/BookDoc.asp?DocID=0&BookID=759&DownloadSection=2

Kaskádové styly jsou založeny na textovém formátu.
Vhodný editor:
    Notepad Poznámkový blok
    TopStyle Lite

Základní části dokumentu CSS:

pravidlo
    selektor
                  definice stylu

              {                    ;               ;              }
         p          color:blue               font-size           120%


                  deklarace
                                       vlastnost
                                                       hodnota


Vložení CSS stylu:

    1. Přímo v html dokumentu – Řádkový styl

...
<p style=“color: blue“>Text odstavce.</p>
...

    2. Přímo v html dokumentu – Interní stylový dokument

v hlavičce head:
...
<style type=“text/css“>
<! --
p {color: blue}
-- >
</style>




CSS – styly                                                                          str. 1/3
    3. Externí stylový dokument

v hlavičce head
...
<link rel=”stylesheet” href=”styl.css” type=”text/css”>
...

styl.css
p {color: blue}


v XML dokumentu:
<?xml-stylesheet type=“text/css“ href=“styl.css“?>


    4. Externí styl volaný z dokumentu CSS

V hlavičce head:
...
<style type=“text/css“>
<! --
@import url(“styl.css”);
h1 {color: red}
-- >
</style>
...

Příkaz pro načtení stylového dokumentu lze použít i v externím souboru CSS:
V hlavičce head:

<link rel=”stylesheet” href=”nadpisy.css” type=”text/css”>
<style type=“text/css“>
<! --
@import url(“odstavce.css”);
body {font-size: 70%}
-- >
</style>

nadpisy.css
h1 {color: read}
h2 {color: blue}
h3 {color: green}

odstavce.css
p {color: yellow}




CSS – styly                                                                   str. 2/3
              Dědičnost vlastností nadřazeného prvku.
Některé vlastnosti díky dědičnosti přenášejí své hodnoty z jednoho prvku na druhý.

vlastnost body {color: blue} se aplikuje na všechny odstavce v těle dokumentu. Selektor p
zdědí vlastnost body.




                      Propojení CSS a dokumentu



                         +                          =



              
        různé dokumenty       +            jeden styl         =       stejný vzhled




           
             
                          +                               =




           
         HTML
                         +       různé styly                     =   rozdílný vzhled




CSS – styly                                                                          str. 3/3

								
To top