Ilma kaskaadi stiilide lehtedeta kuvatakse vormi elemendid vastavalt kasutatud brauserile ja operatsioonisüsteem vaikeseaded. aga cSS-i kasutamine. Võimaldab teil luua vorme, mis vastavad teie saidi kujundusele.
Otsus
Vormi elemendi stiil, nagu iga teine \u200b\u200bHTML-element, saab seadistada CSS-i abil.
Joonis fig. 6.1. Vaikimisi vormi vaade Firefoxi brauseris
Pildil joonis fig. 6.1 Vorm on kaunistatud vastavalt Firefoxi brauseri vaikeseadetele Windows XP all. Selle liigid muutuvad erinevate brauserite vaatamise ajal erinevate platvormide all. Allpool on tüüpiline vorm:
"http://www.w3.org/1999/xhtml"lang \u003d "en-USA"\u003e
Selle vormi välimust saab muuta elementide stiilide kirjutamise teel:
vorm (piir: 1px punkti #aaaaa; polsterdamine: 0.5em;) moodustavad div (marginaalne allosas: 1EM;) sisend (värv: # 00008b; taustavärv: # ADD8E6; piir: 1px tahke # 00008b;) Laius: 100px; Värv: # 00008B; taustavärv: # ADD8E6; piir: 1px tahke # 00008b;) Textarea (laius: 200px; kõrgus: 40px; Värv: # 00008b; taustvärv: 1px tahke aine # 00008b;)
Nüüd kujuneb vorm joonisel fig. 6.2.
Arutelu
Nagu te ilmselt arvasite, näitavad HTML-elementide stiilide seadistuspunktid vorm, sisend, tekst ja valige Neid rakendatakse igale nende eksemplarile, mis asub leheküljel, kus stiililaua fail on seotud. Väljade väljade kujundamiseks saame kasutada palju erinevaid omadusi. CSS-i kasutamine saate hallata peaaegu kõiki välja aspekte
:
Nõukogu
Vormid ja taustavärv. Osa teie saidi külastajatest võib eristada värve halvasti ja osa võib kasutada häälebrauserit. Seetõttu ei tohiks värvid kunagi olulisi funktsioone täita - näiteks juhiseid nagu "kollased väljad on kohustatud täitma" peaks olema täieliku keelu all.
Mõtle omaduste väärtus üksikasjalikumalt:
Laboratoorse töö number 4
Cascading stiilis tabelid (CSS)
töö eesmärk
Kohtuge kaskaadide tabelite kontseptsioonile stiilid CSS., samuti nende kasutamise praktiliste oskuste saamine.
Teoreetiline teave.
Internet Explorer. pakub teie stiili, mida nimetatakse vaikimisi. See stiil hõlmab valget puhast tausta, musta fondi värvi, kõik viited on allajoonitud ja sinised jne, mis siis, kui sa ei meeldi see kõik? Sa juba teate, kuidas vahetada erinevaid atribuute. Isegi kui samad objektid on samad, te teate juba klasside rakendamist. Kuid on veel üks võimalus. Kogu dokumendi stiili täpsustamiseks kasutatakse nn hierarhilise stiili tabelite (Cascade stiilis lehed - CSS), mis on erinevate objektide omaduste kogum. Midagi, mida nad sarnanevad klassidesse, kuid kui klass on dokumendi sees loodud ja seda saab rakendada, ja võib-olla mitte, siis CSS-i, kui see on ühendatud, mõjutavad selle seadmed dokumendis kõik objektid.
Sissejuhatus CSS-ile.
CSS on klasside puhul väga sarnane, vaid erinevusega, mida stiili kirjeldatakse juba teadaoleva objekti jaoks. Visuaalse näite jaoks kontrollige oma tuba nüüd (kontor, hall ...), kus sa oled. Kindlasti näete palju erinevaid esemeid (tabel, tool, aken, arvuti). Igal neist objekti objektil on omadused ja teil on vaja teha nende esemete nimekirja ja nende omadustest. Võib-olla on teil midagi järgmist:
tabel:
Pruun värv
Materjal - puidust
arvuti:
valge värv
Materjal - plastid
Eesmärk - töö jaoks
Loomulikult võite minna teisele võimalusele, kuid ainult CSS-i kompileeritakse täpselt, kus objektide asemel objektid ulatuvad ja nende omadused on veidi erinevad. Näiteks siin on väljavõte sellise dokumendi:
keha.
{
Taustvärv: RGB (255,255,153);
Värv: RGB (51,51,153);
}
H3.
{
Värv: RGB (255,0,0);
Font-perekond: Arial, Helvetica;
}
Siin küsitakse, milline on keha ja H3 elemendi stiil. Need valikud, mida vaikimisi ei ole määratud.
CSS-i loomine ei nõua erilist pingutust ja seda saab teha lihtsas sülearvutis, kuigi nendel eesmärkidel ja eksisteerivad eriprogrammidTöö hõlbustamine ja selgelt, mis näitab, kuidas tulevane dokument näeb välja selle stiili abil. Otsige selliseid programme kettale või tuttavatele.
2.2.Dokumendi stiililaua loomine
CSS-ühenduse ühendamiseks on kaks võimalust. Esimene on selle määramiseks dokumendi alguses stiilis element klassina. Seda tehakse sellisena (näide 1):
See dokument
kasutab stiili tabelite
Selles näites näete ekraanil kaks rida, mis koosnevad kahest objektist: H3 ja H3. Vaata, kus Internet Exploreri vaikimisi stiil on pöördunud. Kuid me ei teinud objekti oma stiili endale juhiseid. Seega, olenemata sellest, kui palju teil on õnnistatud objekte H3 ja H3, on nende stiil alati teie stiilis tabelis määratud.
2. 3. Stiillaud eraldi fail
Kui sulle meeldib teie loodud stiil ja soovite seda kasutada kõigis teie dokumentides. Või teie dokument koosneb komplekti HTML-leheküljed Ja kõik nad peavad olema sama stiil, te ei pea sisestama stringid stiilis tabelis iga kord alguses dokumendi.
Teine võimalus CSS-i veebilehe ühendamiseks on cSS-i loomine. Eraldi faili ja lehekülg ise viitab sellele faili. Siis saate kirjutada lehel ainult üks rida ja ikka veel stiil, mis on määratletud stiilis tabelis väline fail. Ma arvan, et ei ole vaja rääkida sellistest viisidest kasust.
Niisiis, kui esmalt loote tabeli, järgides ülaltoodud reegleid. Siis lisate elemendile
Et võimaldada string stiilis leht sarnane järgmistega:Link tähendab seda käesolev lehekülg Element, rel ja tüüp on ühendatud elemendi kirjeldamiseks stiliseeritud tabelina, kuid HREF sisaldab aadressi, millele fail on teie CSS-iga.
Dünaamiline muutus CSS.
Saate dünaamiliselt muuta plug-in stilist tabelis, vastavalt muuta stiili ise. Siin on funktsioon, JScripti keeles, mis seda kutsudes, kui mõni stiil on juba rakendatud, eemaldab selle ja ühendab uue.
funktsioon Change_STYLE ()
(If (Document.Stylesesheets.Href! \u003d null)
Document.Stylesheets.href \u003d "Newstyle.css";
}
Kui stiili tabel on määratletud HTML-leheküljel, saate lisada uusi määratlusi ADDRULE funktsiooni abil (objekt, stiil). Kui objekt on objekt ja stiil, stilistilised seadmed. Siin on näide, kus pärast nupu klõpsamist muudetakse stiliseeritud tabelit (näide 2):
See dokument kasutab stiili lehed
See on lõik. Selle stiili muutmiseks klõpsake nupul
Pärast sellise koodiga lehekülje läbivaatamist näete, kuidas stiili muutused tekib paigalduse lisamisega stiililehele.
Klassid
Klass on teine \u200b\u200bvõimalus selle lehekülje otsimiseks teksti installimiseks. Sisuliselt defineerite stiilide komplekt, näiteks värv, fondi paksus, selle suurus jne, kuid ei anna seda konkreetse sildiga. Klass näeb välja selline:
See näide loob kolm klassi: regulaarne, superbig, autoriõigus. Allpool on näidatud, kuidas neid klasside teksti navigeerimiskihi rakendada.
Superbig klass
Regulaarne klass
Klassi autoriõigus
Samuti saate konkreetselt seostada klassi tag. Näiteks:
P.
{
Fondi suurus: 16pt;
Font-kaal: julge;
}
P.small
(Fondi suurus: 9pt;
marginaal-vasak: 5em;
marginaal-õigus: 5em;
}
Allpool on näidatud, kuidas klassi rakendada