Nastavení vlastností CSS

Můžete definovat vlastnosti pro pravidla CSS, například písmo textu, obraz a barvu pozadí, vlastnosti mezer a rozvržení a vzhled elementů v seznamech. Nejdříve vytvořte nové pravidlo a pak nastavte libovolnou z následujících vlastností.

Zde je popis některých vlastností písma, které můžete v CSS nastavit.

Nastavuje pro styl rodinu písma (nebo řadu rodin). Prohlížeč zobrazí text pomocí prvního písma z řady, které je nainstalované v systému uživatele. Kompatibilitu s prohlížečem Internet Explorer zaručíte tím, že uvedete nejdřív písmo Windows. Atribut písma podporují oba prohlížeče.

Určuje styl písma normální, kurzívu nebo šikmé. Výchozí nastavení je Normální. Atribut stylu podporují oba prohlížeče.

Nastavuje výšku řádku, na kterém je umístěn text. Toto nastavení se tradičně nazývá proklad. Pokud chcete, aby se výška řádku počítala podle velikosti písma, vyberte volbu Normal, jinak zadejte přesnou hodnotu a vyberte jednotku měření. Atribut výšky řádku podporují oba prohlížeče.

Přidává podtržení, čáru nad, přeškrtnutí nebo blikání textu. Výchozí nastavení pro normální text je žádné. Výchozí nastavení pro odkazy je s podtržením. Pokud změníte nastavení odkazu na žádné, podtržení můžete z odkazů odstranit pomocí definice speciální třídy. Atribut ozdobení podporují oba prohlížeče.

Aplikuje na písmo relativní tloušťku. Normální se rovná 400; Tučné odpovídá 700. Atribut tloušťky podporují oba hlavní prohlížeče.

Nastaví pro text variantu kapitálky. Aplikace Dreamweaver tento atribut nezobrazuje v okně Dokument. Atribut varianty podporuje prohlížeč Internet Explorer, ale ne prohlížeč Navigator.

První písmena všech slov ve výběru změní na velká nebo nastaví v textu všechna písmena velká nebo všechna písmena malá. Atribut velikosti písmen podporují oba prohlížeče.

Nastavuje barvu textu. Atribut barvy podporují oba prohlížeče.

Definuje velikost textu. Specifickou velikost můžete zvolit tak, že vyberete číslo a jednotku měření, nebo můžete zvolit relativní velikost. Pokud chcete zabránit tomu, aby prohlížeče deformovaly text, použijte obrazové body. Atribut velikosti podporují oba prohlížeče.

Definice vlastností pozadí ve stylu CSS

Vlastnosti pozadí můžete aplikovat na libovolný element na webové stránce. Můžete například vytvořit styl, který přidá barvu pozadí a obraz pozadí libovolným elementům stránky, například za text, tabulce, stránce a podobně. Můžete také nastavit umístění obrazu pozadí.

Here is a description of some of the CSS background properties you can set.

Nastavuje obraz pozadí pro element. Atribut obrazu pozadí podporují oba prohlížeče.

Určuje, zda a jak se má obraz pozadí opakovat. Atribut Opakovat podporují oba prohlížeče.

• Možnost Neopakovat zobrazí obraz pouze jednou na začátku elementu.

• Možnost Opakovat zopakuje obraz dlaždicově ve vodorovném a svislém směru za elementem.

• Opakovat-x a Opakovat-y zobrazí vodorovný a svislý pruh obrazů. Obrazy jsou oříznuty tak, aby se přizpůsobily hranicím elementu.

Poznámka: Pomocí vlastnosti Opakovat můžete předefinovat tag body a nastavit obraz pozadí, který se dlaždicově ani jinak neopakuje.

Určuje, zda obraz pozadí zůstává na původní pozici nebo se roluje zároveň s obsahem. Některé prohlížeče se mohou chovat při volbě možnosti Fixed stejně jako při volbě možnosti Scroll. Toto nastavení podporuje prohlížeč Internet Explorer, ale ne prohlížeč Netscape Navigator.

Určuje počáteční pozici obrazu pozadí vhledem k elementu. Toto můžete použít pro zarovnání obrazu pozadí na střed stránky, vodorovně (X) nebo svisle (Y). Pokud je přichycení nastaveno na volbu Pevně, pozice je relativní k oknu dokumentu, ne k elementu.

Nastavuje barvu pozadí pro daný element. Atribut barvy pozadí podporují oba prohlížeče.

Definice vlastností bloku ve stylu CSS

Podle potřeby můžete definovat nastavení mezer a zarovnání tagů a vlastností.

Zvětšuje nebo zmenšuje mezeru mezi písmeny a znaky. Chcete-li mezeru mezi znaky zmenšit, zadejte zápornou hodnotu, například (‑4). Nastavením mezer znaků lokálně změníte nastavení zarovnání textu. Atribut Mezery znaků podporuje prohlížeč Internet Explorer 4 a novější a Netscape Navigator 6.

Určuje, o kolik se odsadí první řádek textu. Pomocí záporné hodnoty můžete vytvořit odsazení doleva, ale zobrazení závisí na prohlížeči. Aplikace Dreamweaver zobrazí tento atribut v okně dokumentu pouze v případě, že je tag aplikovaný na element na úrovni bloku. Atribut Text Indent podporují oba prohlížeče.

Určuje svislé zarovnání elementu, na který je aplikováno. Aplikace Dreamweaver zobrazí tento atribut v okně dokumentu pouze v případě, že je aplikovaný na tag <img>.

Určuje, jak se zarovná text v elementu. Atribut Text Align podporují oba prohlížeče.

Určuje způsob, jakým se zachází s prázdným místem v elementu. K dispozici jsou 3 volby: volba Normální prázdné místo sbalí; volba Pre s ním zachází, jako by byl text uzavřený mezi tagy pre (to znamená, že respektuje všechna prázdná místa včetně mezer, tabulátorů a zalomení); volba Nezalamovat určuje, že se text zalomí pouze v případě, že narazí na tag br. Aplikace Dreamweaver tento atribut nezobrazuje v okně Dokument. Atribut Whitespace podporuje prohlížeč Netscape Navigator a Internet Explorer 5.5.

Určuje, zda se element zobrazí a jakým způsobem se případně zobrazí. Žádné zakáže zobrazení elementu, ke kterému byl přiřazen.

Nastavuje mezery mezi slovy. Chcete-li nastavit určitou hodnotu, v rozbalovací nabídce vyberte volbu Hodnota a pak zadejte číselnou hodnotu. V druhé rozbalovací nabídce vyberte jednotku měření (například obrazové body, body a podobně).

Poznámka: Můžete zadat záporné hodnoty, ale zobrazení závisí na prohlížeči. Aplikace Dreamweaver tento atribut nezobrazuje v okně Dokument.

Definování vlastností rámečku ve stylu CSS

Chcete-li definovat nastavení pro tagy a vlastnosti, které ovládají umístění elementů na stránce, použijte kategorii Rámeček v dialogovém okně Definice pravidla CSS.

Při aplikování nastavení okraje a odsazení můžete nastavení použít na jednotlivé strany elementu nebo aplikovat stejné nastavení na všechny strany elementu pomocí nastavení Stejné pro všechny.

Umožňuje určit stranu, okolo které se ostatní elementy pohybují (v případě plovoucího prvku). Plovoucí element je ukotven k plovoucí straně a ostatní obsah se pohybuje okolo protější strany.

Například obrázek plovoucí doprava je ukotven vpravo a obsah, který přidáte později, se pohybuje nalevo od obrázku.

Další informace naleznete na adrese http://css-tricks.com/all-about-floats/

Určuje strany elementu, které nepovolují další plovoucí elementy.

Určuje velikost mezery mezi obsahem elementu a jeho rámečkem (nebo okrajem v případě, že nemá rámeček). Pokud chcete odsazení nastavit pro jednotlivé strany elementu, odznačte volbu Same For All.

Nastaví stejné vlastnosti odsazení Top, Right, Bottom a Left pro daný element.

Určuje velikost mezery mezi okrajem elementu (nebo odsazením v případě, že nemá okraj) a dalším elementem. Aplikace Dreamweaver zobrazí tento atribut v okně dokumentu pouze v případě, že je aplikován na element na úrovni bloku (odstavce, nadpisy, seznamy, a podobně). Pokud chcete okraj nastavit pro jednotlivé strany elementu, odznačte volbu Stejné pro všechny.

Nastavuje šířku a výšku elementu.

Definování vlastností okrajů ve stylu CSS

Chcete-li definovat nastavení pro okraje okolo elementů, například šířku, barvu a styl, použijte kategorii Okraj v dialogovém okně Definice pravidla CSS.

Nastavuje šířku okraje elementu. Atribut Width podporují oba prohlížeče. Pokud chcete šířku okraje nastavit pro jednotlivé strany elementu, odznačte volbu Same For All.

Nastaví u daného elementu stejné vlastnosti okraje nahoře, vpravo, dole a vlevo.

Nastavuje barvu okraje. Barvu můžete pro každou stranu nastavit nezávisle, ale zobrazení závisí na prohlížeči. Pokud chcete barvu okraje nastavit pro jednotlivé strany elementu, odznačte volbu Same For All.

Nastavuje styl vzhledu okraje. Způsob, jakým se styl zobrazí, závisí na prohlížeči. Pokud chcete styl okraje nastavit pro jednotlivé strany elementu, odznačte volbu Same For All.

Definování vlastností seznamů ve stylu CSS

Pomocí kategorie Seznam v dialogovém okně Definice pravidla CSS můžete definovat nastavení seznamů, například velikost a typ odrážky pro tagy seznamů.

Nastavuje vzhled odrážek nebo čísel. Volbu Typ podporují oba hlavní prohlížeče.

Určuje, zda se text položky seznamu zalamuje a odsazuje (vně) nebo se text zalamuje k levému okraji (uvnitř).

Umožňuje určit vlastní obraz pro odrážky. Klikněte na tlačítko Procházet (Windows) nebo Vybrat (Macintosh) a vyhledejte obraz nebo zadejte jeho cestu.

Definování vlastností umístění ve stylu CSS

Vlastnosti stylu pro Umístění určují, jak je na stránce umístěn obsah související s vybraným stylem CSS.

Z následujících vlastností ponechte prázdné ty, které nejsou pro styl podstatné:

Určuje, že by měl prohlížeč umístit vybraný element následujícím způsobem:

• Možnost Absolute umístí obsah pomocí souřadnic zadaných v polích umístění relativně k nejbližšímu absolutně nebo relativně umístěnému předchůdci nebo k levému hornímu rohu stránky (v případě, že neexistuje žádný absolutně nebo relativně umístěný předchůdce).

• Relative umístí blok obsahu relativně k poloze bloku v textu dokumentu podle souřadnic zadaných do polí umístění. Pokud například elementu zadáte relativní polohu horní a levé souřadnice 20ob, program posune element o 20ob doprava a o 20ob dolů od jeho normální polohy v toku textu. Chcete-li vytvořit kontext pro absolutně polohované potomky, můžete elementy umístit relativně s nebo bez horních, levých, pravých a spodních souřadnic.

• Fixed umístí obsah relativně k levému hornímu rohu prohlížeče podle souřadnic zadaných do polí umístění. Při rolování stránky zůstane obsah pevně v této poloze.

• Static umístí obsah na jeho místo v textu. Toto je standardní poloha všech umístitelných elementů HTML.

Určuje pořadí překrývání obsahu. Prvky s vyšším z-indexem se zobrazí nad elementy s nižším z-indexem (nebo vůbec). Hodnoty mohou být kladné nebo záporné. (Pokud je obsah umístěný absolutně, je jednodušší změnit pořadí překrývání pomocí panelu AP elementů.

Určuje, co se stane v případě, že obsah kontejneru (například DIV nebo P) přesáhne jeho velikost. Následující vlastnosti určují, jakým způsobem bude tato situace vyřešena:

• Visible zvětší velikost kontejneru tak, aby byl celý jeho obsah viditelný. Kontejner se rozšiřuje dolů a doprava.

• Hidden zachová velikost kontejneru a ořízne přesahující obsah. Posuvníky nejsou k dispozici.

• Scroll přidá kontejneru posuvníky bez ohledu na to, zda obsah přesahuje velikost kontejneru. Zapnutím posuvníků zabráníte zmatku, který někdy způsobuje dynamické zobrazování a skrývání posuvníků. Tato volba se nezobrazuje v okně dokumentu.

• Auto zobrazí posuvníky pouze v případě, že obsah přesáhne hranice svého kontejneru. Tato volba se nezobrazuje v okně dokumentu.

Definuje část obsahu, která je viditelná. Pokud určíte oblast oříznutí, můžete k ní přistupovat pomocí skriptovacího jazyka, například JavaScript, a manipulováním vlastností vytvořit speciální efekty, například vymazání. Tato vymazání můžete nastavit pomocí chování Změnit vlastnost.

Určuje umístění a velikost bloku obsahu. Způsob, jakým prohlížeč interpretuje umístění, závisí na nastavení pro Typ. Hodnoty velikosti se změní v případě, že obsah v bloku obsahu přesáhne určenou velikost.

Standardní jednotkou pro umístění a velikost jsou obrazové body. Můžete také vybrat následující jednotky: pc (pica), b (body), " (palce), mm (milimetry), cm (centimetry), (em), (ex) nebo % (procenta z hodnoty rodiče). Zkratky musí za hodnotou následovat bez mezery: například 3mm.

Určuje počáteční stav zobrazení obsahu. Pokud neurčíte viditelnost, obsah standardně zdědí hodnotu rodičovského tagu. Standardní viditelnost tagu body je viditelný. Vyberte jednu z následujících voleb viditelnosti:

• Možnost Inherit zdědí vlastnost viditelnosti z rodiče obsahu.

• Možnost Visible zobrazí obsah bez ohledu na hodnotu rodiče.

• Možnost Hidden skryje obsah bez ohledu na hodnotu rodiče.

Definování vlastností rozšíření ve stylu CSS

Vlastnosti stylů pro rozšíření zahrnují volby filtrů, nové stránky a ukazatele.

Změní obraz ukazatele, když se ukazatel nachází nad objektem ovládaným tímto stylem. Z rozbalovací nabídky vyberte volbu, kterou chcete použít. Tento atribut podporují prohlížeče Internet Explorer 4.0 a novější a Netscape Navigator 6.

Na objekt ovládaný stylem aplikuje speciální efekty, včetně rozostření a inverze. Z rozbalovací nabídky vyberte požadovaný efekt.

Při tisku vynutí novou stránku před nebo po objektu řízeném tímto stylem. Z rozbalovací nabídky vyberte volbu, kterou chcete použít. Tato volba není podporována ani jedním z prohlížečů ve verzi 4.0, ale v budoucích prohlížečích může být podpora dostupná.