Embedded Files
příklad rok.css T: 30. 4.
u stylopisu nastav vlastnosti pro celý web rok.
stáhněte si a (nakonec i nahrajte vše hotové na svoji Endoru) do webu rok testovací soubor testcss.html.
U souboru rok.css vyzkoušejte nastavit následující vlastnosti (volba barev je pouze orientační - můžete si nastavit vlastní barevnost):
U těla body:
nastavíme kromě barvy ( #FFDAB9) obrázek na pozadí, který se bude opakovat svisle a vše bude proto posunuto=>vnější odsazení - margin-left o šířku obrázku:
obrázek na pozadí(rok.jpg) musíme uložit do složky obr ve webu rok a musí být upraven (jeho šířka - 200px)
body{
background: #FFDAB9 url(obr/rok.jpg);
background-repeat: repeat-y;
margin-left: 220px;
}
vždy uložíme a prohlídneme testovací soubor a i vliv na celý web - soubory rok.html, jaro.html,...
nezapomínáme na ; na koncích a hlídáme si párové {}
Upravíme nadpis h1:
nastavíme velikost textu, kurzívu, vnitřní odsazení, barvu pozadí a barvu textu.
h1{
font-size: 24px;
font-style: italic;
padding: 20px;
background: #B45D33;
color: #FEFF4A;
}
padding - vnitřní odsazení (vnitřní okraj) znamená, že se zvětší prostor uvnitř odstavce (je to vidět na barvě pozadí nadpisu - pruh je vyšší)
Další nadpisy:
kromě barvy textu a velikosti nastavíme u h2 kapitálky, u h3 zarovnání na střed, dolní ohraničení střední tloušťky dvojité barvou maroon, šířka odstavce nadpisu bude 50% šířky stránky (bude se měnit s velikostí okna v prohlížeči 50% => bude poloviční).
h2{
font-size: 18px;
color: Maroon;
font-variant: small-caps;
}
h3{
font-size: 16px;
text-align: center;
border-bottom: medium double maroon;
width: 50%;
}
border: thin solid #FF9839;
border-radius: 20px;
U souboru podzim.html upravíme texty jako nadpisy úrovně h2 a h3.
Odrážky
Zformátujeme odrážky ul -> odrážku chci mít obrázek slunečnice - musím soubor upravit (ořez, zmenšení, uložení, pojmenování) a "začlenit" do webu => ul.png uložíme do složky obr webu rok (nezapomeneme nahrát taky na Endoru); text odrážky bude tučné písmo; pozadí odlišeno barvou #FFE8D2 ;
z vnějšku vlevo bude odsazeno 80px, vnitřní odsazení vlevo 60px zajistí "podbarvení" i slunečnice; ohraničíme tence jednoduchou čarou #FF9839 barvou, se zaoblenými rohy.
ul{
list-style-image: url(obr/ul.png);
font-weight: bold;
background: #FFE8D2;
margin-left: 80px;
padding-left: 60px;
}
Identifikátory
V testovacím souboru je použita vrstva div (Používá se k seskupování souvisejících prvků- částí stránky. Ty můžeme pak pomocí ID jednoduše zastylovat.)
V html vše, co chceme např. ohraničit středně tlustou dvojitou bílou čarou obalíme tagem <div> - viz testovací soubor - a v css zastylujeme.
div{
border: medium double white;
}
konkrétní vrstvu s identifikátorem <div id='vrstva1'> pak můžeme dále zastylovat - ohraničit středně silnou dvojitou černou čarou s kulatými třemi rohy, nastavit bílé pozadí a přesnou šířku 400px; vnitřní odsazení je 15px kvůli kulatým rohům Vznikne nám pak jakási"bublina".
#vrstva1 {
border: medium double black;
border-radius: 0px 20px 20px 20px;
background: white;
width: 400px;
padding: 15px;
}
V css se zapisuje před názvem identifikátoru #(název bez mezer, diakritiky první vždy znak ne číslo takže vrstva1 ne 1vrstva)
table{
background: #6CFDFF;
padding:6px;
border: 5px solid navy;
}
td{
background: #C6FEFF;
padding: 6px;
border: 2px outset blue;
}
Tabulky
U tabulek nastavíme barvu pozadí tmavší #6CFDFF u celé table a světlejší #C6FEFF (varianty modré) dále vnitřní odsazení (uvidíme to pozadí) 6px; a ohraničení -> tloušťkupx styl barvu.
Třídy
pro odlišení více prvků - např buněk s čísly v tabulce použijeme třídu class <td class='cislo'> bude zarovnáno vpravo a odsazeno 4px, aby se "nelepilo" na ohraničení.
.cislo{
text-align: right;
padding-right: 4px;
}
Podobně třída radek1 pomůže zformátovat první řádek v tabulce -> zarovníní na střed; tučné písmo; červená barva; vnitřní odsazení nahoře a dole 4px; a nastavení šířka 100px
.radek1{
text-align: center;
font-weight: bold;
color: Red;
padding: 4px 0px 4px 0px;
width: 100px;
}
V css se zapisuje před názvem třídy . tečka (název bez mezer, diakritiky první vždy znak ne číslo takže radek1 ne 1radek))
a nakonec číslovaný seznam římskými číslicemi (nebo a b c)
ol{
list-style: upper-roman; (nebo lower-alpha;)
}
Odsazení a ohraničení
Doplň stylopis u webu cr podle vlastní fantazie. T: 30. 4.
Až budeš mít stylopisy v obou webech hotové pošli mail na ivt.rgazs@gmail.com
předmět: Třída Příjmení Styly (případně pokud nebude něco fungovat, nebo budeš mít problém, piš hned)
Page updated
Google Sites
Report abuse