Principii pentru crearea HTML-pagini - despre stiluri și script-uri

materiale noi

Pe stiluri și script-uri

Paginile moderne nu ar trebui să fie similare cu cele care au avut loc în urmă cu doar câțiva ani. În primul rând, pentru că ei petrec formatare, prin intermediul HTML. În al doilea rând, pentru lucrul interactiv cu vizitatorul care sunt din ce în ce script-uri folosite. În HTML astăzi în scopul înregistrării Cascading Style Sheets utilizate pe scară largă, vom lua o privire scurtă acum, și că va fi foarte familiarizat îndeaproape în a treia parte a acestei cărți.

Care sunt foi de stil

Pentru a vizualiza formatarea folosind CSS (PSD HTML cu CSS), din nou rândul său, la exemplul prezentat în Listarea 1.5. Ca o regulă, titluri arata mai bine atunci când acestea sunt aliniate în centru. Acest lucru se poate face în două moduri: fie specifică, pentru fiecare dintre ele centrate sau a pus cele două într-o singură unitate. Pentru primul caz pentru a adăuga la partea de sus a documentului index.html (în partea a capului) următorul text:

Apoi, încorporați atât containerul antet DIV. Rezultatul ar trebui să fie un document similar celui prezentat în Listarea 1.8 (un exemplu gata este în Part_1 \ folderul Formatted).

Listarea 1.8. Efectuarea folosind CSS

În browser-ul dvs., acesta va arata exact la fel ca și în versiunea anterioară. În ambele cazuri, nu am deja formatat, și design de documente, care a folosit foaia de stil. În general, foaia de stil permite foarte flexibil să elibereze un document - antetele și alinierea paragrafelor, defini culoarea fontului și design, pentru a crea o margine în jurul obiectelor, și multe altele. Iar efectul foilor de stil poate fi distribuit ca un element specific sau întreaga pagină sau chiar pe mai multe pagini simultan. Acesta este motivul pentru care sunt numite în cascadă. Pentru a evita conflictele dintre tabelele de niveluri diferite, prioritățile zonei de influență definită. Esența lor este de a se asigura că mai aproape de elementul de stil este o descriere, prioritatea mai mare are.

Luați în considerare mai îndeaproape acest aspect. Pentru aceasta vom lua cea mai recentă versiune a index.html lungă suferință și adăugați la atributul etichetă de deschidere a stilului H2, în care subliniem că alinierea elementului trebuie să fie efectuată pe partea dreaptă:

Aceasta - pagina principală

Acum, dacă deschideți documentul într-un browser, șirul „Aceasta este - pagina principală“ nu este aliniată cu centrul și dreapta. Astfel, suntem convinși că, cu ajutorul built-STYLE foi de stil atribut au cea mai mare prioritate, deoarece se pare că stilul este definit în tag-ul - nici pe departe!

Anterior, sa constatat că efectul de foi de stil în cascadă pot fi distribuite la mai multe documente simultan. Pentru a face acest lucru, ei iau într-un CSS-fișier separat, și apoi se leagă de el de la un alt document. De exemplu, creați un fișier mystyle1.css următorul conținut:

Apoi se adaugă partea HEAD a liniei de fișier index.html:

Acum, titlurile au devenit roșu. Și orice document care are un link către mystyle1.css va avea antetele H1 și H2 roșu.

NOTĂ
Din exemplele de mai sus doar că am găsit deja cunoscut faptul că două proprietăți CSS - text-align și culoare. Primul este responsabil pentru alinierea textului, iar al doilea - pentru culoarea sa. Desigur, aceasta este doar o mică parte a posibilităților de foi de stil, dar până atunci, până când vom începe să studiem le mai dens, exemplele vor fi limitate, în general, numai aceste două proprietăți.

În plus față de aplicarea comună toate etichetele de definiții stil similar, puteți crea clase de caracteristici. De exemplu, dacă dorim să vedem în același document, un paragraf este nivelat pe centru, iar altele - pe ambele părți, putem crea clase corespunzătoare pentru elementul P. Acest lucru se face așa cum se arată în exemplul din listingul 1.9.

Listarea 1.9. Aplicarea clase CSS

. un text care ar trebui să fie plasate în centru.

. un text care trebuie să fie aliniate pe ambele părți.

Aici, în definirea stilului, am creat două clase pentru tag-ul: P Center și ambele. Pentru primele state care este necesar pentru a formata textul din mijloc, iar al doilea - pe ambele margini (sau cum este numit, pe lățimea ferestrei). Pentru a specifica care clasa de care aparține unui anumită etichetă este utilizat atributul CLASS. În cazul în care atributul CLASS nu este specificat, se va aplica formatarea, implicit (în cazul unui paragraf - aliniere la stânga).

În plus față de specificarea claselor de elemente, puteți face referire la un element specific, având în vedere un identificator unic - ID. Acest lucru se face prin determinarea stilului este în mod clar nu legat de oricare dintre elementele:

# Mystyle1.

Acest text ar trebui să fie de culoare verde!

Stil definit ca mystyle1 același nume va fi aplicat elementului, indiferent de ceea ce elementul este. Este important doar să știe că elementul identificatorul (ID) trebuie să fie unic, și anume pe pagina nu ar trebui să fie mai mult de un element cu un ID de, de exemplu, mystyle1.

Rețineți că clasele și identificatori pot fi partajate (ca în exemplul ID) și legat de tipul de celulă (ca în exemplul claselor P). De exemplu, dacă specificați clasa definită pentru P, un anumit element (de exemplu, H1), atunci o astfel de înregistrare nu funcționează. Prin urmare, în cazul în care aveți nevoie pentru a crea o clasă care poate fi utilizat cu oricare dintre elementele, utilizați următoarea sintaxă:

norme mai detaliate pentru determinarea claselor și ID-urile CSS sunt discutate în partea relevantă a cărții. În cele din urmă, trebuie remarcat faptul că în HTML 4 și atributele STYLE XHTML, clasa și ID-ul sunt furnizate pentru aproape toate elementele cu excepția celor care sunt proiectate pentru o parte HEAD și altele - cum ar fi SCRIPT și PARAM.

Care sunt pagini dinamice

Dynamic HTML (DHTML) - este numele interfeței de programare a aplicațiilor voluntare (API) pentru gestionarea elementelor de document, cunoscut sub numele de DOM, așa cum se aplică în HTML. Cu acesta, puteți schimba proprietățile practic toate elementele paginii. În practică, acest lucru înseamnă că puteți crea interactiv, interacțiunea cu pagina de utilizator.

NOTĂ
Dezvoltarea în continuare a AJAX DHTML a primit titlul și chiar a dus la apariția unor astfel de termen ca Web 2.0.

Până în prezent, toate browserele suporta schimbarea aspectului documentului „on the fly“, adică fără a restarta.

Listarea 1.10. Folosind un script

În acest caz, dacă doriți ca script-ul pentru a efectua la o dată, și ca răspuns la o acțiune de utilizator, utilizați atributele speciale HTML. De exemplu, în atributul onclick, puteți defini o funcție care va răspunde la mouse-ul click pe link-ul:

Aici este salutul

La fel ca fișiere și foi de stil, script-uri pot fi făcute în fișiere separate. Acest lucru se face folosind același element SCRIPT:

Desigur, zona de scenarii de aplicare este mult mai largă decât afișarea mesajelor: ele pot fi „on the fly“ pentru a crea pagini, gestiona proprietăți CSS, modificarea aspectului documentului, etc. Toate acestea vor fi discutate în a patra parte a acestei cărți.

SNK GSCP - o nouă bibliotecă pentru PHP 5!
Web Studio și Biblioteca Visual Workshop:
Standarde pentru web-tehnologie
v Monopoly. 2.0.2 Descărcări:
descarca produse software:
programe și cărți