Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

KASKÁDOVÉ STYLY. 2 PRVNÍ STANDARD (CSS1) BYL PŘEDSTAVEN V ROCE 1996, PROTO STARŠÍ PROHLÍŽEČE ("ČTYŘKOVÉ" VERZE) IE A NN KASKÁDOVÉ STYLY NEPODPORUJÍ. SOUČASNÉ.

Podobné prezentace


Prezentace na téma: "KASKÁDOVÉ STYLY. 2 PRVNÍ STANDARD (CSS1) BYL PŘEDSTAVEN V ROCE 1996, PROTO STARŠÍ PROHLÍŽEČE ("ČTYŘKOVÉ" VERZE) IE A NN KASKÁDOVÉ STYLY NEPODPORUJÍ. SOUČASNÉ."— Transkript prezentace:

1 KASKÁDOVÉ STYLY

2 2 PRVNÍ STANDARD (CSS1) BYL PŘEDSTAVEN V ROCE 1996, PROTO STARŠÍ PROHLÍŽEČE ("ČTYŘKOVÉ" VERZE) IE A NN KASKÁDOVÉ STYLY NEPODPORUJÍ. SOUČASNÉ PROHLÍŽEČE JIŽ KASKÁDOVÉ STYLY PODPORUJÍ, OVŠEM DÍKY KONKURENČNÍMU BOJI NĚKTERÉ VLASTNOSTI FUNGUJÍ POUZE V NĚKTERÝCH PROHLÍŽEČÍCH A JINDE JSOU IGNOROVÁNY. CSS2 BYLO UVEDENO V ROCE 1998, OVŠEM PODPORUJÍ JEJ POUZE NĚKTERÉ NOVĚJŠÍ PROHLÍŽEČE.

3 3 U STYLOPISŮ (BUDE VYSVĚTLENO V DALŠÍ KAPITOLE) JE VHODNÉ POUŽÍVAT KOMENTÁŘŮ, KTERÉ SE LIŠÍ OD KOMENTÁŘŮ V HTML. /* komentářová poznámka */ NEJČASTĚJI SLOUŽÍ PRO POPSÁNÍ NASTAVENÍ PŘÍSLUŠNÉ ZNAČKY, TŘÍDY ČI PSEUDOTŘÍDY, COŽ SE UPLATNÍ PŘI POZDĚJŠÍ MODIFIKACI TĚCHTO PRVKŮ NEBO NAPŘ. PŘI LADĚNÍ STYLU.

4 4 NA INTERNETU JE SPOUSTA NÁSTROJŮ, KTERÉ UMOŽŇUJÍ VYTVÁŘET STYL VELMI POHODLNÝM ZPŮSOBEM. JEDEN TAKOVÝ PROGRAM VÁM ZDE NABÍZÍM. JMENUJE SE KM CSS EDITOR OD MIRKA KINTRA, KTERÝ JE ŠÍŘEN JAKO GNU LICENCE. MŮŽETE SI JEJ TEDY ZDARMA STÁHNOUT. NA ADRESE MUJWEB.ATLAS.CZ/WWW/KMTOOLS, JSOU TÉŽ ZDROJOVÉ KÓDY V OBJECT PASCALU.STÁHNOUTMUJWEB.ATLAS.CZ/WWW/KMTOOLS TO SAMOZŘEJMĚ NEVYLUČUJE TVORBU STYLŮ NAPŘ. V POZNÁMKOVÉM BLOKU (NOTEPAD) ČI JAKÉMKOLI ASCII EDITORU. NĚKDY JE PRÁVĚ TENTO ZPŮSOB RYCHLEJŠÍ, NEŽ POUŽITÍ NĚJAKÉHO SPECIALIZOVANÉHO

5 5 1. DEFINICE KASKÁDOVÝCH STYLŮ KASKÁDOVÝ STYL SE DEFINUJE TŘEMI ZPŮSOBY: * IN-LINE ZÁPISEM – ŘÁDKOVÝ STYL * STYLOPISEM – INTERNÍ STYLOVÝ DOKUMENT * EXTERNÍM STYLOPISEM – EXTERNÍ STYLOVÝ DOKUMENT

6 6 IN-LINE ZÁPIS SLOUŽÍ PRO NASTAVENÍ PARAMETRŮ KONKRÉTNÍ ZNAČKY. POKUD TEDY POTŘEBUJETE NASTAVIT POUZE KONKRÉTNÍ ZNAČKU, POUŽIJE SE U NÍ PARAMETR STYLE=" ". HODNOTOU TOHOTO PARAMETRU JE PAK SEZNAM ATRIBUTŮ, KTERÉ TUTO ZNAČKU OVLIVNÍ.... a) ŘÁDKOVÝ STYL

7 7 Ukákový příklad Text odstavce. ŘÁDKOVÝ STYL

8 8 VYTVOŘTE INTERNETOVOU STRÁNKU POMOCÍ ŘÁDKOVÉHO STYLU CSS. POZADÍ : MODRÉ NADPIS: H1 – ŽLUTÝ TEXT PRVNÍHO ODSTAVCE : ITALIC, X-LARGE, ČERVENÝ TEXT DRUHÉHO ODSTAVCE : OBLIQUE, SMALER, BÍLÝ TEXT TŘETÍHO ODSTAVCE: NORMAL, LARGER, ŠEDIVÝ CVIČENÍ

9 9 STYLOPIS SE DEKLARUJE V HLAVIČCE HTML STRÁNKY PÁROVOU ZNAČKOU. UVNITŘ TÉTO ZNAČKY JE PAK UVEDEN NÁZEV ZNAČKY (TZV. SELEKTOR ZNAČKY - BUDE POPSÁNO DÁLE), KTEROU NASTAVUJETE A VE SLOŽENÝCH ZÁVORKÁCH JE SEZNAM ATRIBUTŮ. JEDNOTLIVÉ ATRIBUTY S HODNOTAMI SE ODDĚLUJÍ STŘEDNÍKEM! STYLOPIS SE POUŽÍVÁ V PŘÍPADĚ, KDY CHCETE NASTAVIT SPOLEČNÉ VLASTNOSTI ZNAČEK NA JEDNÉ WWW STRÁNCE. b) INTERNÍ STYLOVÝ DOKUMENT

10 10 Ukákový příklad Nadpis první úrovně. Nadpis druhé úrovně. INTERNÍ STYLOVÝ DOKUMENT

11 11 CVIČENÍ VYTVOŘTE INTERNETOVOU STRÁNKU POMOCÍ INTERNÍHO CSS. POZADÍ : MODRÉ NADPIS: H1 – ŽLUTÝ TEXT ODSTAVCE : ITALIC, X-LARGE, ČERVENÝ

12 12 EXTERNÍ STYLOPIS SE POUŽÍVÁ PRO VÍCE SPOLEČNÝCH WWW STRÁNEK, KDE JE PAK ZARUČEN STEJNÝ DESIGN VŠECH STRÁNEK, VE KTERÝCH JE DEFINICE TOHOTO STYLU. PRAKTICKY JE TO REALIZOVÁNO EXTERNÍM SOUBOREM (NAPŘ. MUJ_STYL.CSS), V NĚMŽ JE STYL DEFINOVÁN A WWW STRÁNKOU, DO NÍŽ JE CSS STYL "NALINKOVÁN". TOTO OVŠEM NEVYLUČUJE POUŽITÍ RŮZNÝCH VLASTNOSTÍ NA JEDNOTLIVÝCH STRÁNKÁCH. Soubor muj_styl.css p { color: red; } h1 { font-size: 16pt; } WWW stránka obsahuje tzv. "linkovací řádek": DO KONKRÉTNÍ WWW STRÁNKY JE PAK EXTERNÍ SOUBOR NALINKOVÁN. POKUD VYTVÁŘÍTE URČITOU STROMOVOU STRUKTURU VAŠICH WWW STRÁNEK, NEZAPOMEŇTE UVÉST SPRÁVNOU CESTU K TOMUTO EXTERNÍMU SOUBORU! c) EXTERNÍ STYLOVÝ DOKUMENT

13 13 Ukákový příklad Nadpis první úrovně. Nadpis druhé úrovně. Nadpis třetí úrovně. h3 {color: green} EXTERNÍ STYLOVÝ DOKUMENT

14 14 SESKUPOVÁNÍ h1 {color: red} h1{font-variant: small-caps} h2{color: blue} h1{font-family: serif} h2{font-variant: small-caps} h1 {color: red; font-variant: small-caps; font-family:serif} h2 {color: blue; font-variant: small-caps} h1, h2{font-variant: small-caps} h1{color: red; font-family: serif} h2{color: blue}

15 15 2. SYNTAXE STYLŮ PRAVIDLO DEFINUJÍCÍ STYL SE SKLÁDÁ Z NEJMÉNĚ TŘÍ ZÁKLADNÍCH ČÁSTÍ: * SELEKTOR ZNAČKY * SLOŽENÉ ZÁVORKY A V NICH JE * STŘEDNÍKEM ODDĚLENÝ SEZNAM VLASTNOSTÍ V DEFINICI STYLU NEJSOU ROZLIŠOVÁNA MALÁ A VELKÁ PÍSMENA, OVŠEM STRIKTNÍ PRAVIDLA ŘÍKAJÍ, ŽE SELEKTORY JSOU PSÁNY MALÝMI PÍSMENY, A STEJNĚ TAK I JEJICH HODNOTY. selektor_značky { parametr: hodnota;}

16 16 SELEKTORY PRO URČENÍ ČÁSTI DOKUMENTU, JEJÍŽ VZHLED BUDE UPRAVOVÁN PODLE STYLU, SE POUŽÍVAJÍ SELEKTORY. VÝBĚR PRVKU PODLE JMÉNA VÝBĚR VŠECH PRVKŮ VÝBĚR PRVKU PODLE ATRIBUTU „id“ VÝBĚR PRVKU PODLE TŘÍDY VÝBĚR PRVKU PODLE JEHO UMÍSTĚNÍ

17 17 VÝBĚR PRVKU PODLE JMÉNA p {…………….} h1 {……………} TAKOVÝ ZÁPIS PROHLÍŽEČI ŘÍKÁ : „URČITÝM ZPŮSOBEM UPRAV VZHLED VŠECH PRVKŮ S ODPOVÍDAJÍCÍM NÁZVEM, KTERÉ NALEZNEŠ V DOKUMENTU“.

18 18 POKUD POTŘEBUJETE NASTAVIT SPOLEČNOU VLASTNOST PRO VÍCE SELEKTORŮ, TYTO SE PAK UVÁDÍ ZA SEBE ODDĚLENÉ ČÁRKOU TAK, JAK UKAZUJE NÁSLEDUJÍCÍ PŘÍKLAD. V NĚM JE UKÁZÁNO, JAK NADPISY 1. AŽ 6. ÚROVNĚ BUDOU VYCENTROVÁNY NA STŘED ŘÁDKU. h1, h2, h3, h4, h5, h6 { text-align: center; }

19 19 VÝBĚR VŠECH PRVKŮ * {…………….} UNIVERZÁLNÍ SELEKTOR – URČUJE, ŽE UVEDENÝ VZHLED BUDE APLIKOVÁN NA VŠECHNY ELEMENTY V DOKUMENTU BEZ ROZDÍLU.

20 20 IDENTIFIKÁTORY SE POUŽÍVAJÍ TEHDY, POKUD SE DANÝ PRVEK VYSKYTUJE NA STRÁNCE POUZE JEDNOU (NA ROZDÍL OD TŘÍD, KTERÉ JE MOŽNÉ POUŽÍVAT NA STRÁNCE VÍCEKRÁT). POUŽÍVAJÍ SE NAPŘ. PRO DEFINICI POZICOVANÝCH PRVKŮ NA STRÁNCE (HLAVIČKA, NAVIGACE, TĚLO, PATIČKA, ATP.). JEJICH NÁZEV SI MŮŽE UŽIVATEL VYTVOŘIT SÁM, PŘED NÍM VŠAK VŽDY MUSÍ BÝT ZNAK # (ZAHRÁDKA, HASH), VIZ UKÁZKA: VÝBĚR PRVKU PODLE ATRIBUTU „id“ #hlavicka { position: absolute; top: 0px; left: 0px; width: 30%; }

21 21 Z PŘEDCHOZÍHO ODSTAVCE JIŽ VÍTE, ŽE SE NA KONKRÉTNÍ STRÁNCE MŮŽE DANÝ IDENTIFIKÁTOR VYSKYTOVAT POUZE JEDNOU. JAK SE TEDY ZAPÍŠE DO STRÁNKY? POMOCÍ PARAMETRU id="nazev_identifikatoru", KTERÝ JE MOŽNÉ PSÁT KE VŠEM ZNAČKÁM, NEJČASTĚJI ALE K PÁROVÉ ZNAČCE, VIZ NÁSLEDUJÍCÍ UKÁZKA:... ZNAČKOU (TZV. KONTEJNEREM) SE TEDY ZADEFINUJE OBLAST S VLASTNOSTMI DEFINOVANÝMI POD PŘÍSLUŠNÝM IDENTIFIKÁTOREM POMOCÍ CSS. IDENTIFIKÁTORY SE NEPOUŽÍVAJÍ JEN V SOUVISLOSTI S CSS, ALE MNOHDY JE MŮŽETE NALÉZT U SKRIPTŮ (NAPŘ. JAVASCRIPTŮ), FLASHOVÝCH PRVKŮ, ATP. VÝBĚR PRVKU PODLE ATRIBUTU „id“

22 22 VÝBĚR PRVKU PODLE ATRIBUTU „id“ ČASTO SE STÁVÁ, ŽE POTŘEBUJEME UPRAVIT VZHLED JENOM JEDNOHO URČITÉHO PRVKU V DOKUMENTU (NAPŘ. POUZE PRVNÍHO ODSTAVCE). KDYBYCHOM JAKO SELEKTOR POUŽILI p, ÚPRAVA VZHLEDU BY SE TÝKALA VŠECH ODSTAVCŮ. PRO JEDNOZNAČNÉ URČENÍ PRVKU POUŽIJEME HODNOTU ATRIBUTU „id“ (IDENTIFIKÁTORU). HODNOTA „id“ MUSÍ BÝT UNIKÁTNÍ !! Ukákový příklad Text prvniho odstavce. Text druhého odstavce

23 23 NYNÍ SE ZAMĚŘÍME NA TZV. TŘÍDY STYLŮ, KTERÉ UMOŽŇUJÍ VE STYLOPISECH VYTVÁŘET NĚKOLIK RŮZNÝCH STYLŮ PRO JEDINOU ZNAČKU, PŘIČEMŽ STYLY SE LIŠÍ JMÉNEM SVÉ TŘÍDY. SETKÁVÁME SE TEDY S TZV. REGULÁRNÍMI TŘÍDAMI, KTERÉ MOHOU BÝT POUŽITY NAPŘ. V TEXTU, KDE JE POTŘEBA POUŽÍVAT RŮZNÉ STYLY ODSTAVCŮ. NÁZEV TŘÍDY SE OD SELEKTORU ODDĚLUJE (BEZ MEZER) TEČKOU. VÍCE PAK UKAZUJE NÁSLEDUJÍCÍ UKÁZKA S DEFINICÍ REGULÁRNÍ TŘÍDY. p.blok { text-align: justify; font-size: 1em; font-family: serif; } p.definice { text-align: center; font-style: italic; } VÝBĚR PRVKU PODLE TŘÍDY

24 24 PŘÍSLUŠNOU TŘÍDU PAK V HTML KÓDU POUŽIJETE POMOCÍ PARAMETRU class="název_třídy" (UVEDENÉHO U ZNAČKY, KDE BYLA REGULÁRNÍ TŘÍDA DEFINOVÁNA NAPŘ. TEDY ). REGULÁRNÍ TŘÍDU LZE POUŽÍT POUZE U TÉ ZNAČKY, U NÍŽ BYLA PŘÍSLUŠNÝM SELEKTOREM DEFINOVÁNA. MŮŽEME TÉŽ DEFINOVAT TZV. GENERICKÉ TŘÍDY, KTERÉ SE NEVZTAHUJÍ KE KONKRÉTNÍ ZNAČCE A JE MOŽNÉ JÍ POUŽÍT U JAKÉKOLI ZNAČKY, COŽ UKAZUJE I NÁSLEDUJÍCÍ PŘÍKLAD. U GENERICKÉ TŘÍDY NENÍ DEFINOVÁN ŽÁDNÝ SELEKTOR A DEFINUJE SE OPĚT PŘED NÁZVEM TŘÍDY TEČKOU..kurziva { font-style: italic; }

25 25 TUTO GENERICKOU TŘÍDU PAK V HTML KÓDU POUŽIJETE STEJNÝM ZPŮSOBEM JAKO TŘÍDU REGULÁRNÍ (NAPŘ. TEDY NEBO TÉŽ U JINÉ ZNAČKY ). U KASKÁDOVÝCH STYLŮ EXISTUJÍ JEŠTĚ TZV. PSEUDOTŘÍDY, KTERÉ SLOUŽÍ K DEFINICI STYLU ZOBRAZENÍ PRO URČITÉ STAVY ZNAČEK. JMÉNO ZNAČKY JE ODDĚLENO OD NÁZVU PSEUDOTŘÍDY DVOJTEČKOU A NÁZEV TŘÍDY JE JIŽ PŘEDDEFINOVÁN, COŽ NÁM NEUMOŽŇUJE DALŠÍ PSEUDOTŘÍDY VYTVÁŘET. NĚKTERÉ PSEUDOTŘÍDY SI ZDE UVEDEME, OSTATNÍ JE PAK MOŽNÉ NAJÍT V REFERENCI CSS NAPŘ. NA U ODKAZŮ SE POUŽÍVAJÍ TYTO PSEUDOTŘÍDY: a:link - pro nenavštívený odkaz a:active - pro odkaz, který je právě vyvoláván a:visited - pro navštívený odkaz a:hover - pro odkaz, nad nímž právě přejíždíte kurzorem myši a:focus - pro odkaz, který byl nastaven pomocí klávesy [TAB] (tabulátor)

26 26 DALŠÍ DVĚ PSEUDOTŘÍDY SE POUŽÍVAJÍ U ODSTAVCŮ: p:first-line - pro zvýraznění prvního řádku odstavce p:first-letter - pro zvýraznění prvního znaku odstavce (např. iniciála) CSS2 DEFINUJE JEŠTĚ NEKOLIK TYPŮ PSEUDOTŘÍD (NAPŘ. JAZYKOVOU PSEUDOTŘÍDU :lang(jazyk), RODIČOVSKOU PSEUDOTŘÍDU :first-child, MÍSTO PŘED :before A ZA :after, ATP.)

27 27 VÝBĚR PRVKU PODLE TŘÍDY NĚKDY JE POTŘEBA PRO VÍCE PRVKŮ, KTERÉ SPOLU NAVENEK NIJAK NESOUVISÍ, URČIT STEJNOU VLSTNOST ZOBRAZENÍ. Ukákový příklad První nadpis. Druhý nadpis. Text prvního odstavce. Text druhého odstavce.

28 28 VÝBĚR PRVKU PODLE JEHO UMÍSTĚNÍ Ukákový příklad V nadpisu je jedno významné slovo. Text odstavce obsahuje další důležité slovo. OZNAČUJE URČITÉ PRVKY PODLE JEJICH UMÍSTĚNÍ. p a em {……} - VYBERE OBA PRVKY

29 29 ZAJÍMAVÝM PRVKEM JSOU TZV. KONTEXTOVÉ SELEKTORY, KTERÉ ZARUČÍ POUŽITÍ KONKRÉTNÍHO STYLU V OKAMŽIKU, KDY SE V KÓDU STRÁNKY OBJEVÍ PŘÍSLUŠNÁ SEKVENCE, NAPŘ.: h2 em { color: red; } VÝBĚR PRVKU PODLE JEHO UMÍSTĚNÍ

30 30 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.

31 31 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. jednotkapopis emVýška aktuálního písma. Odpovídá šířce písmena 'M' exVýška písmene 'x' pxPixely - 1 pixel = 1 bod obrazovky

32 32 jednotkapopis inPalce - 1 in = 2,54 cm = 72 pt cmCentimetry mmMilimetry - 10 mm = 1 cm ptBody (pity) - 1 pt = 1/72 in = 1/12 pc pcBody (pica) - 1 pc = 12 pt

33 33

34 34 4. BARVY 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 (%)

35 35 5. DRUHY ELEMENTŮ 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).

36 36 6. RODINY PÍSEM 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)

37 37 7. VLASTNOSTI CSS - PÍSMO font - family 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’} 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"

38 38 font - style p {font-style: italic} p {font-style: oblique} p {font-style: normal} Normální, kurzíva, skloněný font-style: normal | italic | oblique

39 39 font - variant p {font-variant: small-caps} p {font-style: normal} Text kapitálkami tj. Velká písmena o velikosti malých font-variant: normal | small-caps

40 40 Nastaví tučnost textu font-weight: normal | bold | bolder | lighter | 100, 200, 300, 400, 500, 600, 700, 800, 900 font-weight

41 41 font-size

42 42 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) font

43 43 8. VLASTNOSTI CSS - BARVY Nastavuje barvu textu. Nastavit barvu můžete pomocí hexadecimálního tvaru (#OOOOO),hexadecimálního nebo pomocí názvů (black) style="color: red" color

44 44 Nastavuje barvu pozadíbarvu 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-color

45 45 Obrázek jako pozadí prvku background-image: url(cesta k obrázku) style="background-image: url('images/pozadi.gif')" background-image

46 46 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-repeat

47 47 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-attachment

48 48 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" background-position

49 49 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:absolute 8. VLASTNOSTI CSS - POZICE

50 50 Často se využívá u obrázků jsou-li odkazem, po najetí kurzoru se posunou dolů position: relative; top: xxx; left: xxx A:hover{position: relative; top: 2px} position:relative

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

52 52 9. RÁMEČKY A OKRAJE border-width Tučnost rámečku border-width: thin | medium | thick| 1px | 3px border-style Nastavuje typ rámečku jednolitý, tečkovaný, čárkovaný, dvojitý atd. border-style: none | dotted | dashed | solid double | groove | ridge | inset | outset

53 53 border-color Barva rámečku border-color: barva (#000000, red, green, rbg(50%,25%,25%))barva style="border: solid red 1px"

54 54

55 55 toto je objekt margin margin je prostor kolem objektu

56 56 padding toto je objekt a okraji padding je vnitřní okraj objekltu

57 57

58 58

59 TABULKY NADPIS TABULKY CAPTION-SIDE (TOP/ BOTTOM/ LEFT/ RIGHT) TABLE CAPTION { CAPTION-SIDE: BOTTOM} FORMÁTOVÁNÍ TABULKY TABLE-LAYOUT (AUTO / FIXED) SLUČOVÁNÍ RÁMŮ BORDER-COLLAPSE (COLLAPSE/ SEPARATE) TABLE.VYSLEDKY {BORDER-COLLAPSE: SEPARATE} ODSTUP MEZI RÁMY BORDER-SPACING ( VELIKOST/VELIKOST) ZOBRAZENÍ PRÁZDNÝCH BUNĚK EMPTY-CELLS (SHOW/ HIDE)

60 60 PROCVIČENÍ CSS

61 61 ŘEŠENÍ

62 62 OBECNÝ CSS PŘÍKLADY TABULEK

63 63 ÚPLNÝ RÁM

64 64 HTML KÓD

65 65 CSS ŠÍŘKA RÁMEČKU, STYL RÁMEČKU, BARVA RÁMEČKU NONE, HIDDEN, SOLID, DOUBLE, DOTTED, DASHED, GROOVE, RIDGE, INSET, OUTSET

66 66 HORIZONTÁLNÍ RÁM

67 67 HTML KÓD

68 68 CSS

69 69 VERTIKÁLNÍ RÁM

70 70 HTML KÓD

71 71 CSS

72 72 SPECIÁLNÍ RÁMOVÁNÍ

73 73 HTML KÓD

74 74 CSS

75 75 TABULKY PODOBNÉ TABULKÁM HTML

76 76 HTML KÓD

77 77 CSS

78 78 KOMPLEXNÍ PŘÍPAD RÁMOVÁNÍ

79 79 HTML KÓD

80 80 CSS

81 81 CVIČENÍ VYTVOŘTE V CSS JEDNODUCHÝ KALENDÁŘ NA MĚSÍC KVĚTEN. MOŽNÉ ŘEŠENÍ – MĚSÍC BŘEZEN

82 82 7. VLASTNOSTI PÍSMA

83 83 8. VLASTNOSTI BAREV

84 84 9. VLASTNOSTI TEXTU

85 VLASTNOSTI BOXŮ 1

86 VLASTNOSTI BOXŮ 2

87 VLASTNOSTI BOXŮ 3

88 KLASIFIKAČNÍ VLASTNOSTI

89 ŘÍZENÍ POZICE

90 End of Lecture Good Night.


Stáhnout ppt "KASKÁDOVÉ STYLY. 2 PRVNÍ STANDARD (CSS1) BYL PŘEDSTAVEN V ROCE 1996, PROTO STARŠÍ PROHLÍŽEČE ("ČTYŘKOVÉ" VERZE) IE A NN KASKÁDOVÉ STYLY NEPODPORUJÍ. SOUČASNÉ."

Podobné prezentace


Reklamy Google