Bez použitia kaskádových štýlov sa zobrazia prvky formulára v súlade s použitým prehliadačom a operačný systém Predvolené nastavenia. ale pomocou CSS. Umožňuje vytvárať formuláre zodpovedajúce dizajnu vašej stránky.
Rozhodnutie
Štýl prvku, podobne ako akýkoľvek iný HTML prvok, možno nastaviť pomocou CSS.
Obr. 6.1. Predvolený formulár Zobraziť v prehliadači Firefoxi
Na obrázku obr. 6.1 Formulár je zdobený v súlade s predvolenými nastaveniami, ktoré používa prehliadač Firefoxom v systéme Windows XP. Jeho druh sa zmení pri prezeraní v rôznych prehliadačoch pod rôznymi platformami. Nižšie je typická forma:
"http://www.w3.org/1999/XHTML"lang \u003d "EN-US"\u003e
Vzhľad tohto formulára môže byť zmenený písaním štýlov pre prvky:
formulár (hranice: 1px bodkovaný #AAAAAAAA; PADTING: 0 .5EM;) FORMULÁRNY DIV (ROZHNUTIE DOPLOUTOVÉHO: 1EM; Šírka: 100px; Farba: # 00008b, na pozadí-Farba: # add8e6; Hranica: 1px Pevná # 00008b;) TEXTAWARE (Šírka: 200px; Výška: 40px; Farba: # 00008b; na pozadí - farba: # add8e6; hranice: 1px pevná látka # 00008b;)
Teraz vyzerá forma na obr. 6.2.
Diskusia
Ako ste pravdepodobne uhádli, žiadané štýly pre HTML prvky formulár, vstup, textArea a vyberte Budú sa aplikovať na každú z ich inštancie umiestnenej na stránke, s ktorou je súbor štýl tabuľky spojený. Ak chcete zmeniť formu polí polí, môžeme použiť mnoho rôznych vlastností. Pomocou CSS môžete spravovať takmer všetky aspekty poľa
:
Rada
Formuláre a farbu pozadia. Časť návštevníkov vašich stránok môže rozoznať farby zle a časť môže použiť hlasový prehliadač. Farby by preto nemali nikdy vykonávať dôležité funkcie - napríklad pokyny, ako sú "žlté polia, sú potrebné na vyplnenie" by mali byť v úplnom zákaze.
Podrobnejšie zvážte hodnotu vlastností:
Laboratórne pracovné číslo 4
Kaskádové štýlové tabuľky (CSS)
práce
Spĺňajú koncepciu kaskádových tabuliek Štýly CSS., ako aj získanie praktických zručností ich používania.
Teoretické informácie.
Internet Explorer. ponúka váš štýl, nazývané predvolené. Tento štýl zahŕňa biele čisté pozadie, čierna farba písma, všetky odkazy sú podčiarknuté a modré, atď., Čo ak sa vám to páči? Už viete, ako zmeniť rôzne atribúty. Aj keď sú rovnaké objekty rovnaké, už viete, ako aplikovať triedy. Ale existuje ďalšia možnosť. Ak chcete zadať celý štýl dokumentu, používajú sa takzvané hierarchické štýlové tabuľky (Cascade štýlové listy - CSS), ktoré sú súborom vlastností rôznych objektov. Niečo, čo sa podobajú triedam, ale ak je trieda vytvorená vo vnútri dokumentu a môže byť aplikovaná, a možno nie, potom CSS, ak je pripojené, inštalácie v ňom ovplyvňujú všetky objekty v dokumente.
Úvod do CSS.
CSS je veľmi podobné triedam, len s rozdielom, že štýl je opísaný v nich pre už známy objekt. Pre vizuálny príklad skontrolujte svoju izbu (kancelária, haly ...), v ktorej ste. Určite uvidíte mnoho rôznych položiek (tabuľka, stolička, okno, počítač). Každý z týchto objektov má vlastnosti, a musíte urobiť zoznam týchto položiek a ich vlastnosti. Možno budete mať niečo nasledovné:
tabuľka:
Hnedá farba
Materiál - drevený
počítač:
biela farba
Materiál - plasty
Účel - pre prácu
Samozrejme, môžete ísť na iný spôsob, ale len CSS je zostavený presne tam, kde namiesto objektov, predmety vyčnievajú a ich vlastnosti sú trochu iné. Napríklad tu je výňatok takéhoto dokumentu:
telo.
{
pozadia-farba: RGB (255,255,153);
Farba: RGB (51,51,153);
}
H3.
{
Farba: RGB (255,0,0);
FONT-RODINA: ARIAL, HELVETICA;
}
Tu sa spýta, aký štýl tela a prvku H3 bude. Tieto možnosti, ktoré nie sú štandardne uvedené.
Vytvorenie CSS nevyžaduje špeciálne úsilie a môže sa vykonávať v jednoduchom notebooku, hoci na tieto účely a existuje Špeciálne programyUľahčenie práce a jasne ukazuje, ako budúci dokument bude vyzerať ako použitie tohto štýlu. Pozrite sa na takéto programy na disku alebo z známych.
2.2.Vytvorenie tabuľky štýlu v dokumente
Existujú dva spôsoby pripojenia CSS. Prvým je nastaviť ho do prvku štýlu na začiatku dokumentu, ako trieda. Toto sa robí takto (príklad 1):
Tento dokument
používa tabuľky štýlov
V tomto príklade na obrazovke uvidíte dva riadky pozostávajúce z dvoch objektov: H3 a H3. Pozrite sa, v ktorom sa zmenil predvolený štýl programu Internet Explorer. Ale nerobili sme žiadne pokyny v samotnom objekte o jeho štýle. Takže bez ohľadu na to, koľko máte obdĺžnikové objekty H3 a H3, ich štýl bude vždy špecifikovaný v stylistickom stole.
2. 3. Tabuľka štýlu v samostatný súbor
Ak sa vám páči štýl, ktorý ste vytvorili, a chcete ho použiť vo všetkých dokumentoch. Alebo váš dokument pozostáva zo súboru HTML Stránky A všetky z nich musia mať rovnaký štýl, nemusíte zadať struny štýl tabuľky zakaždým na začiatku dokumentu.
Druhý spôsob, ako pripojiť CSS na webovú stránku vytvorenie CSS. V samostatnom súbore a stránka sám odkazuje na tento súbor. Potom môžete písať na stránke len jeden riadok a stále štýl, ktorý bude definovaný v stylistore v tabuľke externý súbor. Myslím, že nie je potrebné hovoriť o výhodách takéhoto spôsobu.
Najprv vytvoríte tabuľku podľa vyššie uvedených pravidiel. Potom pridáte prvok
Ak chcete povoliť reťazec štýlový list podobný nasledujúcim:Odkaz znamená, že aktuálna stránka Prvok, rel a typ sú pripojené k opisu prvku ako štylizované tabuľky, ale HREF obsahuje adresu, na ktorú je súbor s vaším CSS.
Dynamická zmena CSS.
Môžete tedamicky zmeniť názov plug-in so stylistom, podľa toho zmeniť štýl sám. Tu je funkcia, v jazyku JScript, ktorý pri volaní, ak je akýkoľvek štýl už aplikovaný, odstraňuje ho a pripojí nový.
funkcia Zmeniť_style ()
(ak (dokument.styleshesseets.href! \u003d null)
dokument.styleshesheets.href \u003d "newstyle.css";
}
Ak je tabuľka štýlu definovaná vo vnútri stránky HTML, môžete pridať nové definície pomocou funkcie addrule (objekt, štýl). Tam, kde je objekt objekt a štýl, štýlové inštalácie. Tu je príklad, v ktorom po kliknutí na tlačidlo sa zmení štylizovaný stôl (príklad 2):
Tento dokument používa štýlové listy
Toto je odsek. Kliknutím na tlačidlo zmeníte svoj štýl
Po skontrolovaní stránky s takýmto kódom sa uvidíte, ako sa zmení štýl pridaním inštalácie do štýlu.
Triedy
Trieda je iný spôsob, ako inštalovať, ako sa má text pozrieť na stránku. V podstate definujete súbor štýlov, ako je farba, hrúbka písma, jeho veľkosť, a tak ďalej, ale nepridelite ju špecifickú značku. Trieda vyzerá takto:
Tento príklad vytvára tri triedy: pravidelné, superbig, autorské práva. Nižšie je uvedené, ako tieto triedy aplikovať v textovom navigačnej vrstve.
Trieda SuperBig
Pravidelný
Trieda Copyright
Môžete tiež špecificky viazať značku triedy. Napríklad:
P. \\ t
{
Veľkosť písma: 16PT;
FONT-HMOTNOSŤ: tučné;
}
P.small
(Veľkosť písma: 9PT;
LESTOVANÉ NÁKLADY: 5EM;
RIGHT-RIGHT: 5EM;
}
Nižšie je uvedené, ako aplikovať triedu