CSS de bază: aspectul paginilor

Crearea de site-uri web nu este un loc de muncă pentru persoanele cu nervi slabi. În plus față de cunoștințe, trebuie să ai gânduri creative, preferințe perfectioniste și precizie filigrană atunci când marchezi o pagină. CSS în această chestiune este pur și simplu de neînlocuit. Și fiecare webmaster trebuie să-și cunoască elementele de bază.

Ce este CSS?

Cei care sunt familiarizați cu HTML, nu trebuie să spună că este vorba de un limbaj de marcare a paginii. Dar creatorii săi au decis să-i adauge etichete, responsabili de aspectul și designul. Numai cu această abordare, codul paginii a devenit prea voluminos și aproape greu de citit. Firește, acest mod a dus la nicăieri, deci a fost adoptată o soluție cuprinzătoare: HTML este responsabil pentru aspectul paginii, CSS pentru design vizual.

Abrevierea CSS reprezintă Foi de stil cascadă (foaie de stil cascadă). Se compune din parametrii care sunt responsabili pentru vizualizarea obiectelor din pagină.

Beneficiile CSS

Formularul de stil cascadă permite webmasterului nu numai să creeze o resursă frumoasă, ci și să facă codul lizibil, reducând semnificativ dimensiunea sa. Utilizând CSS, puteți specifica acești parametri care nu sunt posibili în marcajul HTML al paginii.

Cu CSS, puteți schimba literal aspectul paginilor de resurse cu doar câteva clicuri. Acest lucru este foarte convenabil, mai ales dacă site-ul are mai multe pagini. Toate modificările de proiectare se fac în foaia de stil cascadă, și nu prin modificarea parametrilor de pe fiecare pagină a resursei. Și numai datorită CSS puteți implementa marcarea blocului.

Conectarea CSS

Vorbind despre principiile de bază ale CSS, primul pas este să înveți cum să conectați o foaie de stil cascadă unui fișier HTML. Acest proces este destul de simplu. Primul pas este să creați un document HTML. Pentru cei care nu cunosc încă, ei o creează în programul Notepad. Apoi, utilizând funcția "Salvați ca", trebuie să specificați o extensie HTML.

Foaia de stil cascadă este creată în același mod, numai fișierul ar trebui să fie specificat cu extensia css. Documentul primit trebuie salvat în același director ca fișierele HTML. De exemplu, un document de stil este numit style.css. Pentru a le conecta la un document HTML, trebuie să utilizați eticheta , care este responsabil pentru conectarea fișierelor externe. Între etichete , este necesar să introduceți următoarele:

Poate că acesta este unul dintre modurile cele mai convenabile de a conecta fișiere externe.

Regula CSS

Studiul marcării CSS ar trebui să înceapă cu un studiu al sintaxei. Nu există etichete, scripturi sau parametri în foaia de stil cascadă. Există doar o regulă de urmat. Se compune dintr-un selector și un bloc de stiluri. De exemplu, în foaia de stil cascadă, este dată poziția: corp {fundal: culoare neagră: alb}.

Aici, corpul este selectorul care este responsabil pentru formarea stilului de fundal al corpului site-ului: negru și culoare: alb sunt proprietățile și semnificațiile lor. Ele sunt scrise printr-un punct și virgulă. Această poziție face fundalul site-ului negru, iar textul este alb.

selectoare

Continuăm introducerea intensivă în CSS. Structura paginilor va fi destul de dificilă fără cunoașterea selectorilor. Dacă totul este clar cu proprietățile și valorile lor, atunci cunoștințele suplimentare despre selectori vor ajuta la realizarea aspectului dorit al paginii.

Ce trebuie să știți despre selectori? În primul rând, soiurile lor:

• Identificatorul. Numele elementelor de pagină pot fi utilizate ca selectori. În cazul în care, de exemplu, trebuie să selectați un paragraf de text cu altă culoare, adăugați un identificator. Este specificat de parametrul id.

Merită să ne amintim că un identificator poate fi folosit o singură dată. În acest exemplu, selectorul este numit roz, dacă aveți nevoie de un alt identificator, pur și simplu trebuie să atribuiți un nume diferit (roz, verde, etc.).

clase. Selectorul de clasă este utilizat dacă doriți să setați aceiași parametri pentru mai multe obiecte. De exemplu, pentru două paragrafe de text, trebuie să specificați o culoare roșie.

Obiectele cu clase pot fi orice număr.

Pentru același obiect, puteți specifica atât clasa cât și identificatorul - aceasta nu contravine marcajului CSS. Dar, deoarece identificatorul are o prioritate mai mare, stilul va fi folosit pentru obiect. Când marcați o pagină în CSS, merită luată în considerare.

Identificatorii și clasele pot fi aplicate oricăror obiecte. Și dacă trebuie să specificați un stil pentru text și imagini, atunci nu puteți specifica numele elementului, așa cum a fost în exemplul respectiv (p # roz, p.red). Puteți pune doar un punct sau o latură. De asemenea, selectorii pot fi grupați. De exemplu, h1, h2, h3 {culoare: roșu-font-șase: 17px}.

Amenajarea paginii

Studiind aspectul paginilor, puteți înțelege că există mai multe varietăți:

• Tabelară. Când nu a existat nici o foaie de stil cascadă, acest marcaj a fost principalul. A permis plasarea celor mai exacte obiecte de resurse unele de altele. Dar codul se dovedește a fi prea mare și este slab indexat de motoarele de căutare. Un alt dezavantaj al acestei metode este viteza de descărcare. Până la încărcarea întregii mese, utilizatorul nu va vedea chiar începutul textului.
• Block. Acum aceasta este principala modalitate de aspect al paginii. Utilizarea sa a devenit posibilă numai datorită dezvoltării și îmbunătățirii foii de stil.

Avantajele aspectului blocului

Blocarea layout-ului paginii utilizând CSS are mai multe avantaje incontestabile. În primul rând, stilul de obiecte este separat de documentul HTML, care îmbunătățește foarte mult lizibilitatea codului și vă permite să faceți rapid modificări vizuale. În al doilea rând, este posibil să se suprapună un strat pe altul, iar acest lucru facilitează de mai multe ori procesul de poziționare. Firește, astfel de site-uri sunt încărcate mai rapid și indexate de motoarele de căutare. Amenajarea paginilor în CSS facilitează crearea unor efecte vizuale moderne.

Singurul dezavantaj al acestei abordări este o "înțelegere" diferită a browserelor. Unii oameni afișează resursa în forma în care webmaster-ul o vede. Dar există browsere care distorsionează imaginea, deci cu un număr mare de clase și selectori trebuie să utilizați hacks care vor face codul încrucișat browser-ului prietenos.

Cum se face un aspect al site-ului?

Primul lucru pe care ar trebui să începeți este să creați un aspect. Aceasta ar trebui să fie o imagine obișnuită cu extensia psd. După creare (cumpărare sau descărcare), este necesar să tăiați imaginea în blocuri și să o plasați într-un singur dosar (de preferință unul separat). Aceste fragmente vor fi folosite ca fundal pentru blocuri.

În documentul HTML pentru aspectul blocului utilizați eticheta

Primul lucru pe care trebuie să-l faceți după ce aspectul site-ului a fost tăiat în bucăți, în HTML, setați structura site-ului utilizând eticheta

Setați parametrii

De exemplu, puteți vedea clar modul în care sunt setați parametrii pentru blocurile CSS. Poziționarea aspectului paginii este specificată în pixeli, deși în majoritatea cazurilor este mai bine să se utilizeze procente. În fereastra browserului, acest site va arăta ca fiind "adaptat din diferite părți ale pânzei", deoarece în exemplul respectiv a fost folosită doar culoarea zonei blocului. Dar dacă o înlocuiți cu o imagine de fundal, puteți obține nu numai un produs frumos, dar și un produs destul de funcțional.

Între etichete

Acest exemplu este doar o mică parte a tot ceea ce un webmaster va trebui să facă față în timp ce lucrează la caracteristicile calitative ale resursei. Când creați o resursă web bună, puteți folosi adesea hacks pentru a obține funcționalitatea cross-browser. Editează codurile paginilor poate fi în editoare speciale, ceea ce simplifică foarte mult lucrarea, deși nu elimină webmasterul de necesitatea editării manuale.

Toată lumea poate crea un site independent. Principalul lucru este să înțelegem că atât CSS cât și HTML au fost create de oameni și destinate oamenilor. Elementele de bază aspecte de pagină disponibile tuturor, și crearea de web-resurse nu numai apanajul elitei, dar, de asemenea, poate fi destul de activități obișnuite toată lumea.