HTML în forma sa pură nu oferă posibilități atât de bogate de decorare a paginii. Pentru a rezolva această problemă, se apelează stilurile CSS. Aproape fiecare element (eticheta HTML) are un atribut de stil. a căror valoare este descrierea stilurilor CSS ale acestei etichete. Stilurile de elemente sunt specificate de următorul model:
Stilurile CSS sunt enumerate printr-un punct și virgulă, fiecare reprezentând o pereche de "nume de stil: valoare de stil", separată printr-un colon. Stilul, ca regulă, descrie parametrii apariției elementului ca întreg sau a oricărui sub-element. Să luăm în considerare un exemplu:
Containerul de text "Bună ziua, lumea." Este închis în containerul de deschidere. span este o etichetă asociată, care în sine nu face modificări vizibile asupra conținutului său, dar vă permite să aplicați anumite stiluri CSS specificate în ea. Cel mai adesea este folosit în aceste scopuri. În eticheta noastră, există două stiluri CSS: un stil de tip font-familie cu o valoare verdana și un stil de dimensiune font cu o valoare de 10px. Stilul familiei font-ului specifică fontul textului, iar dimensiunea fontului este dimensiunea fontului. Astfel, textul "Bună ziua, lumea" va fi redat în font Verdana cu o dimensiune de 10 pixeli.
Ca și în HTML, cheia succesului este cunoașterea celor mai utile și mai comune stiluri CSS. Și în mod ideal - toate. Există o mulțime de ele, unele sunt comune pentru toate tipurile de elemente, unele sunt specifice pentru un anumit tip. Aici sunt unele stiluri foarte frecvente, pe lângă font-family, și font-size: background-color - culoarea de fundal a elementului, de exemplu, valoarea FF0000 roșii sau # corespunde culoarea roșie (a doua opțiune de înregistrare - o valoare de culoare hexazecimală în HTML, acesta poate fi obținut din tabelul HTML sau folosind un calculator special), culoarea - culoarea textului, text-align - alinierea orizontală a textului (stânga-stânga, centru-dreapta, justifica-lățimea). Familiarizați-vă cu stilurile existente va fi temele dvs. :).
Acum, să aruncăm o privire asupra unui exemplu: avem un meniu implementat folosind un tabel, în care fiecare celulă este un element de meniu:
Pentru fiecare celulă, există stiluri CSS care formează o vedere generală a meniului nostru:
Pentru selectarea elementelor în HTML există două atribute speciale - clasă și id. Aceste atribute au valori text și pot fi setate la orice element din pagina HTML. Diferența este că pe pagină pot exista mai multe elemente cu aceeași valoare a atributului de clasă, în timp ce un element cu o valoare specifică a atributului id poate fi doar unul pe pagină. exemplu:
Punctul din fața selectorului înseamnă că acest bloc de stil CSS este aplicat tuturor elementelor ale căror valori ale atributului de clasă sunt egale cu numele selectorului. Caracterul "#" din fața selectorului înseamnă că blocul de stil CSS este aplicat unui element cu valoarea atributului id egal cu numele selectorului. Adică, blocul cu selectorul .link se va aplica tuturor elementelor cu o clasă egală cu legătura, iar blocul cu selectorul # text1 se va aplica elementului al cărui id este text1.
Cu această metodă de definire a stilurilor, puteți descrie mai mult meniul nostru:
Selectorul #menu td va selecta toate celulele din interiorul elementului cu meniul id. Ați putea folosi clasa în loc de id, dar id accentuează unicitatea elementului nostru (un meniu de pe pagină).
Un lucru mai mult. Dacă un element intră sub selecția mai multor selectori, atunci se aplică stilurile CSS ale fiecărui bloc cu acești selectori, în timp ce stilurile repetate sunt înlocuite succesiv atunci când trec de la primul la ultimul bloc. Luați un exemplu:
Toate cele patru elemente de spațiere se încadrează în selectorul primului bloc de stiluri, al treilea element se află sub alegerea celor două selectori. Ambele blocuri conțin stilul de culoare, al treilea element va primi valoarea finală a acestui stil din al doilea bloc (adică albastru), deoarece acest bloc este situat mai jos.
care este situat, de obicei, în blocul capului. O pagină vă permite să specificați mai multe fișiere de stil CSS (pentru fiecare fișier eticheta proprie de legătură).
Stiluri stilate ale meniului experimental într-un fișier separat:
Conținutul fișierului style.css:
conținutul index.html:
Faceți cunoștință cu stilurile existente aici. Practică;)
Articole similare
Trimiteți-le prietenilor: