Bez použití listů kaskádového stylu budou prvky formuláře zobrazeny v souladu s použitým prohlížečem a operační systém Výchozí nastavení. ale pomocí CSS. Umožňuje vytvářet formuláře odpovídající návrhu vašich stránek.
Rozhodnutí
Formový prvek styl, stejně jako každý jiný HTML prvek, lze nastavit pomocí CSS.
Obr. 6.1.. Výchozí zobrazení formuláře v prohlížeči Firefoxi
Na snímku obr. 6.1. Formulář je zdoben v souladu s výchozími nastaveními používaným prohlížečem Firefoxu v systému Windows XP. Jeho druh se změní při prohlížení v různých prohlížečích pod různými platformami. Níže je typická forma:
"http://www.w3.org/1999/xhtml"lang \u003d "en-nás"\u003e
Vzhled tohoto formuláře lze změnit psacími styly pro prvky:
formulář (hranice: 1px tečkovaná #aaaaaa; polstrování: 0 .5em;) Formulář div (okraj-dno: 1em;) vstup (barva: # 00008b; barva pozadí: # add8e6; ohraničení: 1px Solid # 00008b;) Vybrat ( Šířka: 100px; barva: # 00008b; background-color: # add8e6; ohraničení: 1px solid # 00008b;) Textarea (šířka: 200px; výška: 40px; barva: # 00008b; background-color: # add8e6; hranice: 1px solidní # 00008b;)
Formulář nyní vypadá na Obr. 6.2.
Diskuse
Jak jste pravděpodobně hádali, žádaná hodnota stylů pro HTML prvky formulář, vstup, textarea a vyberte Budou aplikovány na každou z jejich instance umístěných na stránce, s níž je spojen soubor tabulky ve stylu. Chcete-li změnit formulář pole pole, můžeme použít mnoho různých vlastností. Použití CSS můžete spravovat téměř všechny aspekty pole
:
Rada
Formuláře a barva pozadí. Část návštěvníků vašich stránek může rozeznat barvy špatně a část může použít hlasový prohlížeč. Proto by barvy by nikdy neměly provádět důležité funkce - například pokyny, jako jsou "žlutá pole, musí být v rámci úplného zákazu.
Zvažte hodnotu vlastností podrobněji:
Laboratorní práce číslo 4
Kaskádové stoly (CSS)
Účel práce
Seznamte se s konceptem kaskádových stolů styly CSS., stejně jako získávání praktických dovedností jejich použití.
Teoretické informace.
Internet Explorer. Nabídne vám svůj styl, nazývá výchozí. Tento styl zahrnuje bílé čisté pozadí, černou barvu písma, všechny reference jsou podtrženy a modré, atd., Co když se vám to všechno nelíbí? Už víte, jak změnit různé atributy přímo. I když jsou stejné objekty stejné, již víte, jak aplikovat třídy. Ale existuje další příležitost. Pro určení celého stylu dokumentu se používají tzv. Hierarchické tabulky stylů (Styl Cascade Style - CSS), které jsou sadou vlastností různých objektů. Něco, co se podobají třídám, ale pokud je třída vytvořena uvnitř dokumentu a lze ji použít, a možná ne, pak CSS, pokud je připojen, instalace v tomto dokumentu ovlivňují všechny objekty v dokumentu.
Úvod do CSS.
CSS je velmi podobná třídám, pouze s rozdílem, že styl je v nich popsán pro již známý objekt. Pro vizuální příklad zkontrolujte svůj pokoj (Office, Hall ...), ve které jste. Určitě uvidíte mnoho různých položek (tabulka, židle, okno, počítač). Každý z těchto objektů objektů má vlastnosti a musíte provést seznam těchto položek a jejich vlastnosti. Možná budete mít něco takto:
stůl:
hnědá barva
Materiál - dřevěný
počítač:
bílá barva
Materiál - plasty
Účel - pro práci
Samozřejmě můžete jít na jinou cestu, ale pouze CSS je sestaveno přesně tam, kde namísto objektů, objekty vyčnívají a jejich vlastnosti jsou trochu jiné. Zde je například výňatek tohoto dokumentu:
tělo.
{
Barva pozadí: RGB (255,255,153);
Barva: RGB (51,51,153);
}
h3.
{
Barva: RGB (255,0,0);
Font-Family: Arial, Helvetica;
}
Zde je dotázán, jaký styl tělesa a prvku H3 bude. Tyto možnosti, které nejsou ve výchozím nastavení určeny.
Vytváření CSS nevyžaduje zvláštní úsilí a lze provést v jednoduchém notebooku, i když pro tyto účely a existovat speciální programyUsnadnění práce a jasně ukazuje, jak budou budoucí dokument vypadat jako použití tohoto stylu. Vyhledejte tyto programy na disku nebo ze známých.
2.2.Vytvoření tabulky ve stylu v dokumentu
Existují dva způsoby připojení CSS. První je nastavit ji ve stylu prvku na začátku dokumentu jako třída. To se děje jako tento (příklad 1):
Tento dokument
používá tabulky stylů
V tomto příkladu na obrazovce uvidíte dva řádky sestávající ze dvou objektů: H3 a H3. Podívejte se, ve kterém se obrátil výchozí styl aplikace Internet Explorer. Ale nedělali jsme žádné instrukce v objektu sám o svém stylu. Tak, bez ohledu na to, kolik jste obdařili objekty H3 a H3, jejich styl bude vždy, jak jste uvedli ve stylistické tabulce.
2. 3. Styl tabulka v samostatný soubor
Pokud se vám líbí styl, který jste vytvořili a chcete jej použít ve všech vašich dokumentech. Nebo váš dokument se skládá ze sady HTML stránky A všichni musí mít stejný styl, nemusíte pokaždé vstoupit na struny tabulky ve stylu pokaždé na začátku dokumentu.
Druhý způsob připojení CSS na webovou stránku je vytváření CSS. V samostatném souboru a samotná stránka odkazuje na tento soubor. Pak můžete psát na stránku pouze jeden řádek a stále styl, který bude definován ve stylu tabulky externí soubor. Myslím, že to není nutné mluvit o výhodách takového způsobu.
Zpočátku vytvoříte tabulku podle výše uvedených pravidel. Pak přidejte do prvku
Chcete-li povolit styl stylu řetězce podobný následujícímu:Odkaz znamená to aktuální stránka Prvek, rel a typ jsou připojeny k popisu prvku jako stylizované tabulky, ale href obsahuje adresu, na kterou je soubor s CSS.
Dynamická změna CSS.
Můžete si dynamicky změnit název plug-in se stylistickou tabulkou, což odpovídajícím způsobem změníte samotný styl. Zde je funkce, v jazyce JScript, který při volání, pokud je již použitelný styl, odstraní jej a připojuje nový.
funkce Change_Style ()
(pokud (dokument.stylesheets.href! \u003d null)
dokument.stylesheets.href \u003d "newstyle.css";
}
Pokud je tabulka stylu definována uvnitř stránky HTML, můžete přidat nové definice pomocí funkce Addrubule (objekt, styl). Kde je objekt objekt a styl, stylistická instalace. Zde je příklad, ve kterém po kliknutí na tlačítko se změní stylizovaná tabulka (příklad 2):
Tento dokument používá stylové listy
To je odstavec. Klikněte na tlačítko pro změnu jeho stylu
Po zkontrolování stránky s takovým kódem se zobrazí, jak se vyskytne změny stylu přidáním instalace do listu.
Třídy
Class je další způsob, jak nainstalovat, jak by měl text podívat na stránku. V podstatě definujete sadu stylů, jako je barva, tloušťka písma, jeho velikost, a tak dále, ale nepřiřazují ji konkrétní značku. Třída vypadá takto:
Tento příklad vytváří tři třídy: pravidelné, superbig, autorská práva. Níže je uvedeno, jak tyto třídy aplikovat v textové navigační vrstvě.
Superbig Class.
Třída běžná
Copyright Copyright.
Můžete také specificky svázat značku třídy. Například:
P.
{
Velikost písma: 16pt;
Hmotnost písma: tučně;
}
P.Small.
(Velikost písma: 9pt;
Marže vlevo: 5em;
Právo okraje: 5em;
}
Níže je uvedeno, jak použít třídu