Neizmantojot cascading stila lapas, veidlapas elementi tiks parādīti saskaņā ar izmantoto pārlūkprogrammu un operētājsistēma Noklusētie iestatījumi. bet izmantojot CSS. Ļauj izveidot veidlapas, kas atbilst jūsu vietnes dizainam.
Lēmums
Veidlapas elementa stils, tāpat kā jebkurš cits HTML elements, var iestatīt, izmantojot CSS.
Fig. 6.1. Noklusējuma veidlapa Firefoxi pārlūkprogrammā
Attēlots fig. 6.1 Veidlapa ir dekorēta saskaņā ar noklusējuma iestatījumiem, ko izmanto Firefox pārlūkprogrammā Windows XP. Tās sugas mainīsies, skatoties dažādās pārlūkprogrammās dažādās platformās. Zemāk ir tipiska forma:
"http://www.w3.org/1999/xhtml"lANG \u003d "EN-US"\u003e
Šīs veidlapas izskatu var mainīt, rakstot stilus elementiem:
veidlapa (robeža: 1px Dotted #aaaaa; polsterējums: 0 Platums: 100px; Krāsa: # 00008b; fona krāsa: # add8e6; robeža: 1px cietā # 00008b;) Textarea (platums: 200px; Augstums: 40px; Krāsa: # 00008b; Balsta krāsa: # add8e6; robeža: 1px ciets # 00008b;)
Tagad veidlapa izskatās attēlā. 6.2.
Diskusija
Kā jūs, iespējams, uzminējāt, sadaļas stilu HTML elementiem forma, ievade, textarea un izvēlieties Tie tiks piemēroti katrai no savām instancēm, kas atrodas lapā, ar kuru ir saistīta ar stila tabulas failu. Lai mainītu lauka lauka formu, mēs varam izmantot daudzas dažādas īpašības. CSS izmantošana Jūs varat pārvaldīt gandrīz visus lauka aspektus
:
Padome
Veidlapas un fona krāsa. Daļa no jūsu vietnes apmeklētāju var saskatīt krāsas slikti, un daļa var izmantot balss pārlūkprogrammu. Tādēļ krāsas nekad nevajadzētu veikt svarīgas funkcijas - piemēram, norādījumi, piemēram, "dzeltenās lauki, ir jāaizpilda" ir jābūt ar pilnu aizliegumu.
Apsveriet īpašības vērtību sīkāk:
Laboratorijas darba numurs 4
Cascading stila galdi (CSS)
Darba mērķis
Atbilst Cascading tabulu koncepcijai stili CSS., kā arī to izmantošanas praktisko iemaņu iegūšana.
Teorētiskā informācija.
Internet Explorer. piedāvā jūsu stilu, ko sauc par noklusējumu. Šis stils ietver baltu tīru fonu, melnu fontu krāsu, visas atsauces ir pasvītrotas un zilas, utt, ko darīt, ja jums tas nepatīk? Jūs jau zināt, kā tieši mainīt dažādus atribūtus. Pat tad, ja tie paši objekti ir vienādi, jūs jau zināt, kā lietot klases. Bet ir vēl viena iespēja. Lai norādītu visu dokumenta stilu, tiek izmantotas tā sauktās hierarhiskās stila tabulas (Cascade stila lapas - CSS), kas ir dažādu objektu īpašību kopums. Kaut kas viņi atgādina klases, bet, ja klase ir izveidota iekšpusē dokumentā, un to var izmantot, un varbūt ne, tad CSS, ja tas ir savienots, instalācijas tajā ietekmē visus objektus dokumentā.
Ievads CSS.
CSS ir ļoti līdzīgs klasēm, tikai ar atšķirību, ka stils ir aprakstīts tajos jau zināmo objektu. Lai iegūtu vizuālu piemēru, pārbaudiet savu istabu tagad (birojs, zāle ...), kurā jūs esat. Protams, jūs redzēsiet daudz dažādu priekšmetu (galds, krēsls, logs, dators). Katram no šiem objektiem ir raksturīgas īpašības, un jums ir nepieciešams veikt sarakstu ar šiem posteņiem un to īpašībām. Varbūt jums būs kaut kas šāds:
tabula:
Brūna krāsa
Materiāls - koka
dators:
balta krāsa
Materiāls - Plastmasas
Mērķis - darbam
Protams, jūs varat doties uz citu veidu, bet tikai CSS tiek apkopoti tieši tur, kur objekti, objekti izvirzās, un to īpašības ir nedaudz atšķirīgas. Piemēram, šeit ir šāda dokumenta izvilkums:
Ķermenis.
{
Fona krāsa: RGB (255,255,153);
Krāsa: RGB (51,51,153);
}
H3.
{
Krāsa: RGB (255,0,0);
Fonta ģimene: Arial, Helvetica;
}
Šeit ir jautāts, kāda būs ķermeņa un H3 elementa stils. Šīs iespējas, kas nav norādītas pēc noklusējuma.
CSS izveide neprasa īpašas pūles, un to var veikt vienkāršā piezīmjdatorā, lai gan šiem mērķiem un pastāv Īpašas programmasVeicināt darbu un skaidri parādot, kā nākotnes dokuments izskatīsies, izmantojot šo stilu. Meklējiet šādus programmas uz jūsu diska vai no paziņas.
2.2.Izveidot stila tabulu dokumentā
Ir divi veidi, kā savienot CSS. Pirmais ir to iestatīt stila elementā dokumenta sākumā kā klase. Tas tiek darīts kā šis (1. piemērs):
Šis dokuments
izmanto stila tabulas
Šajā piemērā ekrānā redzēsiet divas līnijas, kas sastāv no diviem objektiem: H3 un H3. Paskatieties, kurā ir kļuvis par noklusējuma stilu Internet Explorer. Bet mēs neesam snieguši norādījumus objektā pati par savu stilu. Tādējādi, neatkarīgi no tā, cik daudz jums ir apveltīti objekti H3 un H3, viņu stils vienmēr būs, kā jūs norādījāt stilistu galda.
2. 3. Stila tabula atsevišķs fails
Ja jums patīk izveidotais stils, un jūs vēlaties to izmantot visos dokumentos. Vai jūsu dokuments sastāv no komplekta HTML lapas Un visiem tiem ir jābūt tādam pašam stilam, jums nav nepieciešams ievadīt stila tabulas virknes katru reizi dokumenta sākumā.
Otrs veids, kā savienot CSS uz tīmekļa lapu, ir cSS izveide. Atsevišķā failā un pati lapa attiecas uz šo failu. Tad jūs varat rakstīt lapā tikai viena līnija un vēl stils tas būs, kā noteikts stilistā tabulā ārējais fails. Es domāju, ka nav nepieciešams runāt par šāda veida priekšrocībām.
Tātad, sākumā izveidojat tabulu pēc iepriekš minētajiem noteikumiem. Tad jūs pievienojat elementu
Lai string stila lapa būtu līdzīga šādai:Saite nozīmē, ka pašreizējā lapa Elements, rel un tips ir savienots, lai aprakstītu elementu kā stilizētu tabulu, bet Href satur adresi, uz kuru fails ir ar jūsu CSS.
Dinamiskas pārmaiņas CSS.
Jūs varat dinamiski mainīt nosaukumu plug-in ar stilistu galda, attiecīgi mainot stilu. Šeit ir funkcija, JScript valodā, kas, zvanot uz to, ja kāds stils jau ir piemērots, noņem to un savieno jaunu.
funkcija maiņa_style ()
(ja (docum.stylesheets.href! \u003d null)
document.stylesheets.href \u003d "Newstyle.css";
}
Ja stila tabula ir definēta HTML lapas iekšpusē, varat pievienot jaunas definīcijas, izmantojot Add Rule funkciju (objektu, stilu). Ja objekts ir objekts, un stils, stilistiskās iekārtas. Šeit ir piemērs, kurā pēc noklikšķināšanas uz pogas ir mainīta stilizēta tabula (2. piemērs):
Šis dokuments izmanto stila lapas
Tas ir punkts. Noklikšķiniet uz pogas, lai mainītu tās stilu
Pēc lapas pārskatīšanas ar šādu kodu jūs redzēsiet, kā notiek stila izmaiņas, pievienojot instalāciju stila lapai.
Klases
Klase ir vēl viens veids, kā instalēt, kā tekstam vajadzētu skatīties lapā. Būtībā jūs definējat stilu kopumu, piemēram, krāsu, fonta biezumu, tā lielumu un tā tālāk, bet nepiešķiriet to konkrētu tagu. Klase izskatās šādi:
Šis piemērs rada trīs klases: regulāru, superbig, autortiesības. Tālāk redzams, kā piemērot šīs klases teksta navigācijas slānī.
Superbig klase
Klase
Klases autortiesības
Varat arī piesaistīt klases tagu. Piemēram:
P.
{
Fonta lielums: 16PT;
Fonta svars: treknrakstā;
}
P.small
(Fonta lielums: 9pt;
Margin-Left: 5em;
Margin-Right: 5em;
}
Zemāk ir parādīts, kā piemērot klasi