Bez primjene kaskadnih stilova listova, elementi oblika bit će prikazani u skladu s korištenim preglednikom i operativni sistem Zadane postavke. ali koristeći CSS. Omogućuje vam kreiranje oblika koji odgovaraju dizajnu vaše web lokacije.
Odluka
Stil forme Element, kao i bilo koji drugi HTML element, može se podesiti pomoću CSS-a.
Sl. 6.1. Podrazumevani prikaz obrasca u Browser Firefoxi
Slika sl. 6.1 Obrazac je uređen u skladu s zadanim postavkama koje koristi Firefox pretraživač pod Windows XP. Njegova će se vrste mijenjati prilikom gledanja u razne preglednike pod različitim platformama. Ispod je tipičan oblik:
"http://www.w3.org/1999/xhtml"lang \u003d "en-nas"\u003e
Izgled ovog obrasca može se promijeniti pisanjem stilova za elemente:
obrazac (obrub: 1px tačkasta #Aaaaaa; Padding: 0.5EM;) OBRAZAC DIV (1EM;) Ulaz (boja: # 00008b; # add8e6; obrub: 1px solid # 00008b;) Odaberite ( Širina: 100px; Boja: # 00008b; BOJA: 1px Solid # 00008b;) Textarea (širina: 200px; Visina: 00008b; Boja pozadine: # Add8e6; granica: 1px solid # 00008B;)
Sada se obrazac izgleda na slici. 6.2.
Diskusija
Kao što ste vjerovatno nagađali, zadane vrijednosti stilova za HTML elemente obrazac, ulaz, tekstara i odaberite Oni će se primijeniti na svaku njihovu instancu koja se nalazi na stranici s kojom je povezana datoteka tablice u stilu. Da biste promijenili oblik polja polja, možemo koristiti mnogo različitih svojstava. Korištenje CSS-a možete upravljati gotovo svim aspektima polja
:
Vijeće
Obrasci i boju pozadine. Dio posjetilaca vaše web stranice može loše razabrati boje, a dio može koristiti glasovni preglednik. Stoga boje nikada ne bi trebale obavljati važne funkcije - na primjer, upute poput "žuti polja su potrebna za ispunjavanje" trebaju biti pod potpunom zabranom.
Razmislite o vrijednosti svojstava detaljnije:
Laboratorijski rad broj 4
Stolovi za kaskadne stilove (CSS)
svrha rada
Upoznajte koncept kaskadnih stolova styles CSS., kao i dobivanje praktičnih vještina njihove upotrebe.
Teorijske informacije.
Internet Explorer. Nudi vam svoj stil, nazvani zadani. Ovaj stil uključuje bijelu čistu pozadinu, crna boja fonta, sve su reference podvučene i plave, itd., Što ako vam se sve ovo ne sviđa? Već znate kako direktno promijeniti različite atribute. Čak i ako su isti objekti isti, već znate kako primijeniti klase. Ali postoji još jedna prilika. Da biste odredili cijeli stil dokumenta, koriste se takozvani hijerarhijski stilski stolovi (kaskadni listovi - CSS), koji su skup objekata različitih objekata. Nešto što nalikuju časovima, ali ako se klasa kreira unutar dokumenta i može se primijeniti, a možda ne, a zatim CSS, ako je povezana, instalacije u njemu utječu na sve objekte u dokumentu.
Uvod u CSS.
CSS je vrlo sličan časovima, samo s razlikom da je stil opisan u njima za već poznati objekt. Za vizualni primjer pregledajte svoju sobu sada (ured, hodnik ...) u kojem ste. Sigurno ćete vidjeti mnogo različitih predmeta (stol, stolica, prozor, računar). Svaki od ovih objekata objekata ima karakteristike i morate napraviti popis ovih predmeta i njihovih karakteristika. Možda ćete imati nešto kako slijedi:
tabela:
Smeđe boje
Materijal - Drveni
kompjuter:
Bijela boja
Materijal - plastika
Svrha - za posao
Naravno, možete otići na drugi način, ali samo CSS sastavlja se tačno gdje, umjesto objekata, predmeti strše, a njihove karakteristike su malo drugačije. Na primjer, ovdje je izlomak takvog dokumenta:
telo.
{
Boja pozadine: RGB (255,255,153);
Boja: RGB (51,51,153);
}
H3.
{
Boja: RGB (255,0,0);
Porodica sa font: Arial, Helvetica;
}
Ovdje se pita šta će biti stil tijela i H3 elementa. One opcije koje nisu navedene prema zadanim postavkama.
Stvaranje CSS-a ne zahtijeva posebne napore i može se izvesti u jednostavnoj bilježnici, iako u te svrhe i postoje posebni programiOlakšavanje rada i jasno pokazivanje kako će se budući dokument izgledati korištenje ovog stila. Potražite takve programe na vašem disku ili iz poznanika.
2.2.Stvaranje tablice stila u dokumentu
Postoje dva načina za povezivanje CSS-a. Prvo je postaviti u stil elementu na početku dokumenta, kao klasa. To se radi ovako (primjer 1):
Ovaj dokument
koristite tablice u stilu
U ovom primjeru, na ekranu ćete vidjeti dvije linije koje se sastoje od dva objekta: H3 i H3. Gledajte, u kojem se zadani stil Internet Explorera okrenuo. Ali nismo uputili nikakve upute u samom objektu o svom stilu. Dakle, bez obzira koliko ste obdarili predmeti H3 i H3, njihov stil će uvijek biti onakav koji ste naveli u stilističkom stolu.
2. 3. Stilski stol u odvojena datoteka
Ako vam se sviđa stil koji ste stvorili i želite ga koristiti u svim vašim dokumentima. Ili se vaš dokument sastoji od seta HTML stranice I svi moraju imati isti stil, ne trebate unositi žice u tablicu stila svaki put na početku dokumenta.
Drugi način za povezivanje CSS na web stranicu je stvaranje CSS-a. U zasebnoj datoteci, a sama stranica odnosi se na ovu datoteku. Zatim možete napisati samo jednu liniju i još uvijek stil, bit će definiran u stilističkom stolu u vanjska datoteka. Mislim da nije potrebno razgovarati o prednostima takvog načina.
Dakle, u početku kreirate tablicu, nakon gornjih pravila. Zatim dodajete elementu
Da biste omogućili listu stila niza sličan sljedećem:Link znači to trenutna stranica Element, rel i tip povezani su da bi se element opisao kao stilizirani stol, ali Href sadrži adresu na koju je datoteka sa vašim CSS-om.
Dinamična promjena CSS.
Možete dinamički promijeniti naziv dodatka sa stilističkim stolom, u skladu s tim, promjenom samog stila. Evo funkcije, na jscriptskom jeziku, koji, kada ga nazovete, ako se neki stil već primijeni, uklanja ga i povezuje novu.
funkcija Change_style ()
(ako (dokument.stylesheets.href! \u003d null)
dokument.stylesheets.href \u003d "newstyle.css";
}
Ako je tablica u stilu definirana unutar HTML stranice, možete dodati nove definicije pomoću funkcije adrule (objekt, stil). Ako je objekt objekt, a stil, respektivno, stilske instalacije. Evo primjera u kojem se nakon klika na tipku promijeni i stilizirana tablica (primjer 2):
Ovaj dokument koristi liste u stilu
Ovo je odlomak. Kliknite na gumb da biste promijenili svoj stil
Nakon pregleda stranice sa takvim kodom vidjet ćete kako se događa u stilu dodavanjem instalacije u stil lim.
Casovi
Klasa je još jedan način instaliranja načina na koji bi tekst trebao potražiti na stranici. U suštini, definirate set stilova, poput boje, debljine fonta, njegove veličine i tako dalje, ali ne dodjeljujte to određenoj oznaci. Klasa izgleda ovako:
Ovaj primjer stvara tri klase: redovno, superbig, autorska prava. Ispod je prikazano kako primijeniti ove klase u tekstualni navigacijski sloj.
Superbig klasa
Klasa redovna
Klasa Autorska prava
Takođe možete posebno vezati oznaku klase. Na primjer:
P.
{
Veličina fonta: 16pt;
Težina fonta: podebljana;
}
P.Small
(Veličina fonta: 9pt;
Margin-Left: 5EM;
Marža - desno: 5EM;
}
Ispod je prikazano kako primijeniti klasu