Kask dov styly 3
Download
1 / 31

KASKÁDOVÉ STYLY 3 - PowerPoint PPT Presentation


  • 111 Views
  • Uploaded on

KASKÁDOVÉ STYLY 3. 3. DÉLKOVÉ JEDNOTKY. DÉLKOVÉ ÚDAJE SE ZAPISUJÍ JAKO CELÁ NEBO DESETINNÁ ČÍSLA S NEBO BEZ ZNAMÉNKA. DVOJICE PÍSMEN IDENTIFIKUJÍCÍ JEDNOTKY MUSÍ BÝT PŘIPOJENA IHNED ZA ČÍSLEM (TEDY BEZ MEZERY).

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' KASKÁDOVÉ STYLY 3' - cana


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

3. DÉLKOVÉ JEDNOTKY

DÉLKOVÉ ÚDAJE SE ZAPISUJÍ JAKO CELÁ NEBO DESETINNÁ ČÍSLA S NEBO BEZ ZNAMÉNKA. DVOJICE PÍSMEN IDENTIFIKUJÍCÍ JEDNOTKY MUSÍ BÝT PŘIPOJENA IHNED ZA ČÍSLEM (TEDY BEZ MEZERY).

PROCENTA SE ZAPISUJÍ JAKO CELÁ NEBO DESETINNÁ ČÍSLA S NEBO BEZ ZNAMÉNKA, ZA KTERÝMI IHNED NÁSLEDUJE ZNAK %. HODNOTY ZADANÉ JAKO PROCENTO SE RELATIVNĚ VZTAHUJÍ K NĚJAKÉ JINÉ HODNOTĚ, OD KTERÉ SE ODVODÍ ABSOLUTNÍ VELIKOST. POKUD POUŽÍVÁME PROCENTA, MUSÍME SI VŽDY UVĚDOMIT, OD KTERÉ HODNOTY SE BUDE ABSOLUTNÍ VELIKOST ODVÍJET. VĚTŠINOU SE JEDNÁ O ŠÍŘKU ELEMENTU.


S OHLEDEM NA ČITELNOST STRÁNEK SE SPÍŠE DOPORUČUJE POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE: ZOBRAZIT - VELIKOST TEXTU). POKUD JSOU OVŠEM NA STRÁNCE NASTAVENY ABSOLUTNÍ ROZMĚRY PRO TEXT, UŽIVATEL JE ODKÁZÁN NA VELIKOST TEXTU DEFINOVANOU AUTOREM.


4. BARVY POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:

Při specifikování barev máme několik možností. Tou první je použití jména barvy nebo příslušného HEXa kódu. Další možností je zapsat barvu přímo v RGB pomocí červené, zelené a modré složky barvy.

#rgb zkrácený zápis např. #f00 je červená

#rrggbb úplný zápis např. #ffff00 je žlutá

rgb(r, g, b) r, g, b jsou od 0 do 255

rgb(r%, g%, b%) r, g, b jsou od 0 do 100 (%)  


5. DRUHY ELEMENTŮ POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:

Blokové elementy jsou ty elementy, před i za kterými je zalomena řádka (např. h1 a p).

Inline elementy jsou běžnou součástí textu na řádce. Nemají okolo sebe žádná zalomení řádek (např. strong).

Nahrazované elementy jsou ty, které jsou nahrazeny nějakým obsahem a pro jejichž zařazení do okolního textu stránky jsou důležité pouze jejich rozměry (např. img a object).


6. RODINY PÍSEM POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:

Při zadávání písma je nutné myslet na to, že ne všichni čtenáři budou mít příslušné písmo na svém počítači nainstalováno (např. s ohledem na platformu). Proto se na závěr definice použitých písem používá zápis rodiny písem, do kterých použitý font patří. Pokud tedy prohlížeč definované písmo neumí zobrazit (není nainstalováno), sáhne si po standardním písmu, jež spadá do definované rodiny.

V následující tabulce jsou některé rodiny písem, které lze použít při definici fontu.

serif patková písma (např. Times New Roman)

sans-serif bezpatková písma (např. Arial)

coursive kurzíva

fantasy ozdobná písma

monospace neproporcionální písma (např. Courier New)  


7. VLASTNOSTI CSS - PÍSMO POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:

font - family

Vlastnost font-family nastavuje druh písma.

Možné je i použití více definic, pro případ, že některé písmo nebude k dispozici:

style="font-family: Verdana, Arial, Helvetica"

p {font-family: serif}

p {font-family: Times, serif}

p {font-family: cursive}

p {font-family: fantasy}

p {font-family: monospace}

p {‘Times New Roman’}


font - style POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:

Normální, kurzíva, skloněný

font-style: normal | italic | oblique

p {font-style: italic}

p {font-style: oblique}

p {font-style: normal}


font - variant POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:

Text kapitálkami tj. Velká písmena o velikosti malých

font-variant: normal | small-caps

p {font-variant: small-caps}

p {font-style: normal}


font-weight POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:

Nastaví tučnost textu

font-weight: normal | bold | bolder | lighter | 100, 200, 300,

400, 500, 600, 700, 800, 900


font- POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE: size


font POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:

Umožňuje nastavit vše předchozí v jediné vlastnosti

font: tloušťka velikost písmo styl

style="font: bold 10px Verdana italic"

Hodnoty musejí dodržovat své pořádí a vždy musí být obsažena hodnota pro tloušťku (jinak budou některé vlastnosti ignorovány)


8. VLASTNOSTI CSS - BARVY POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:

color

Nastavuje barvu textu.

Nastavit barvu můžete pomocí hexadecimálního tvaru (#OOOOO),

nebo pomocí názvů (black)

style="color: red"


background-color POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:

Nastavuje barvu pozadí

style="background-color: white"

Základem dobrého webu je nastavení barvy pozadí i v případě, že má být bílá

(implicitní nastavení).

Někteří návštěvníci mají implicitní barvu pozadí změněnou.

Černý text na černém pozadí... není dobře vidět.


background-image POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:

Obrázek jako pozadí prvku

background-image: url(cesta k obrázku)

style="background-image: url('images/pozadi.gif')"


background-repeat POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:

Opakování obrázku na pozadí donekonečna, jen jednou, podle osy x a y

repeat | no-repeat | repeat-x | repeat-y

style="background-image: url(images/js.gif); background-repeat: repeat-y"

Pozadí se bude opakovat jen vertikálně (osa y).

Když byste chtěli zobrazit pozadí jen jednou, použijte hodnotu no-repeat


background-attachment POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:

Pozadí, které se neposune při rolování stránky.

background-attachment: scroll | fixed

Hodnota fixed obrázek fixuje, připichuje na stránku.

Obrázek se při rolování neposunuje


background-position POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:

Pozice pozadí

background-positon:top| center| bottom| left center| right| 10px| 10%| 10ptstyle=

" background-image: url(images/pozadi.gif); background-repeat: no-repeat;

background-position: right 0px; top 50px"


8. VLASTNOSTI CSS - POZICE POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:

position:absolute

Nastaví pozici horního rohu objektu

na pozici 0;0 pomocí parametrů letf a top nastavíme pozici

od levého a horního okraje

position:absolute;

left: xxx; top: xxxstyle="position: absolute; left: 603px; top: 400px"

Takový prvek bude vzdálen 400px od horního okraje stránky a 603px od levého.


position:relative POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:

Často se využívá u obrázků jsou-li odkazem,

po najetí kurzoru se posunou dolů

position: relative; top: xxx;

left: xxx<style>A:hover{position: relative; top: 2px}</style>


z-index POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:

Velká vychytávka, pomocí z-index můžete nastavit, aby se objekty překrývaly

z-index: hodnota<span style="position: absolute;z-index: 1; color: red"> ------

</span>

<span style="color: blue; border: 1px solid gray;background-color:black">

<strong>ahoj</strong> </span>

0000000000000 ahoj


8. VLASTNOSTI BAREV POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:


9. VLASTNOSTI TEXTU POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:


10. VLASTNOSTI BOXŮ 1 POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:


10. VLASTNOSTI BOXŮ 2 POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:


10. VLASTNOSTI BOXŮ 3 POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:


11. KLASIFIKAČNÍ VLASTNOSTI POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:


11. ŘÍZENÍ POZICE POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:


End of lecture

End of Lecture POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE:

Good Night.


ad