Ce sunt foile de stil în cascadă (CSS) și pentru ce sunt acestea?
Într-un cuvânt, foile de stil cascadă sau CSS reprezintă un document cu un anumit cod. În acest document sunt prevăzute reguli speciale prin care se formează aspectul site-ului dvs. Pentru a înțelege utilitatea CSS, voi da un mic exemplu.
Să presupunem că creați un site web în HTML pur. Puteți prescrie manual toate etichetele, formând aspectul și designul site-ului dvs. De-a lungul timpului, numărul de materiale crește și brusc brusc doriți să schimbați designul puțin. De exemplu, pentru a face culoarea textului pe toate paginile site-ului dvs. nu negru, ci gri. Dacă utilizați cod HTML simplu, va trebui să schimbați manual codul pentru fiecare pagină individual, ceea ce va dura ceva timp. Toate acestea pot fi evitate prin simpla conectare a foii de stil. În acesta, puteți crea și modifica orice reguli care afectează instantaneu site-ul dvs. Ca urmare, schimbarea culorii pe întregul site durează doar câteva minute, indiferent de numărul de pagini de pe acesta.
Exemplul de mai sus demonstrează doar o mică parte a capabilităților foilor de stil cascadă. Dar, pentru a profita de o mică parte din ele, trebuie să aveți cel puțin o cunoaștere minimă a CSS. În continuare, în acest articol, intenționez să vă informez despre regulile de bază, cum să creați și să modificați regulile în foile de stil cascadă. Datorită acestor cunoștințe, puteți face ușor ajustări ale designului site-ului dvs. Deci, hai să mergem la afaceri.
Ce sunt regulile CSS (clase) și cum să le creezi?
Pentru a înțelege ce clase CSS sunt și ce rol joacă, recurg din nou la exemple. Să analizăm una dintre cele mai populare probleme care îi deranjează pe noii webmasteri - crearea de drepturi de autor. Dreptul de autor va arăta astfel:
și va fi o legătură. Dacă adăugăm doar codul de copyright la subsol, acesta va avea aspectul obișnuit. Adesea, acesta este un font comun pentru întregul site, culoarea legăturilor active și a hoverului și mulți alți parametri. Pentru a evita acest lucru, trebuie să creați o nouă regulă (clasă) în foaia de stil cascadă (CSS) și să o asociați cu dreptul de autor. Totul se face foarte simplu. Pentru a crea o clasă nouă, CSS deschide o foaie de stil pentru site-ul nostru (de obicei, un fișier stil.css care se află la radacina site-ului sau pe pielea pe care o folosiți) și, la sfârșit, adăugați următoarele linii:
O nouă clasă CSS constă dintr-un punct și un nume care se află imediat după el. Așadar, am creat o clasă CSS goală. Acum trebuie să creăm reguli care să determine aspectul stilului creat. Ele sunt scrise în paranteze "<>“. După fiecare regulă, o punct și virgulă ";"
De exemplu, vrem ca fontul dreptului de autor să fie negru, dimensiunea este de 12 pixeli, familia Tahoma și este centrat. Pentru a face acest lucru, trebuie să adăugăm următoarele în clasa CSS:
Deoarece drepturile de autor vor conține un link, vom adăuga încă o clasă pentru link-uri și le vom face gri închis:
Și clasa CSS pentru linkuri atunci când se hovering va face, de asemenea, gri închis:
După aceasta, putem adăuga doar la codul de subsol al drepturilor de autor și le aplicăm clasei pe care am creat-o
Dreptul de autor creat de noi va deveni negru, iar când se va deplasa, va deveni gri închis, aproape negru.
Sper că acest exemplu v-a ajutat să înțelegeți funcțiile stilurilor CSS și, de asemenea, v-ați ajutat să învățați cum să vă creați și să editați cele existente. Dar această lucrare cu foi de stil în cascadă nu se sfârșește. Să ne uităm la modul de conectare a foii de stil la site-ul nostru.
Acest lucru se face foarte simplu. Pentru aceasta, deschideți pagina pentru editarea site-ului nostru și adăugați-o în partea de sus a etichetelor
line:Din moment ce un simplu site-uri HTML nu este aproape utilizat, în scopul de a conecta o foaie de stil pentru întregul site dintr-o dată, va trebui să deschideți fișierul header.php (site-ul capac) și adăugați codul de la acesta.
Tipuri de reguli de foi de stil cascadă.
În CSS, puteți să creați propriile reguli și să le modificați pentru etichetele existente. Să ne uităm la primul tip de reguli. De exemplu, luați o etichetă paragraf. Implicit, are deja propriile reguli, care determină apariția sa. Pentru a le schimba, trebuie să facem următoarele. Deschideți foaia de stil și creați reguli pentru toate paragrafele.
Deoarece regula este creată pentru o anumită etichetă, trebuie doar să-i înregistrați numele fără un punct și diferite paranteze. După aceea, deschideți bretelele curbate, unde vor fi scrise reguli specifice CSS, care vor determina aspectul paragrafelor. De exemplu, faceti textul tuturor paragrafelor gri deschis, dimensiunea fontului de 12 pixeli si faceti casca de fonturi Verdana. Pentru a face acest lucru, scrieți următoarele:
După cum puteți vedea, proprietatea este scrisă mai întâi și apoi valoarea acesteia. Spre deosebire de HTML simplu, în loc de semnul "=", scrie ":", după care vom pune punct și virgulă. Aceasta înseamnă că descrierea acestei proprietăți este completă.
Acesta a fost primul tip de regulă. Acum, hai să trecem la cel de-al doilea. De exemplu, dorim să facem un punct separat printre altele. De exemplu, faceți-o albastră. Pentru aceasta trebuie să facem următoarele. Deschideți foaia de stil și creați o nouă regulă.
Pentru ao aplica în practică, va trebui să deschidem codul documentului cu textul pe care dorim să îl schimbăm și să îl adăugăm în etichetă
regula CSS pe care am creat-o.
Acum, să examinăm al treilea tip de regulă pe care îl puteți aplica oricărei etichete. Pentru a le crea, trebuie să faceți următoarele:
După cum puteți vedea, nu există valori înaintea punctului. Aceasta înseamnă că această regulă CSS poate fi aplicată oricărei etichete. Pentru a face acest lucru, trebuie doar să-l înregistrați în locul potrivit. De exemplu, pentru antetul H2.
Acum, antetul va lua forma pe care tu o vei da, folosind foi de stil în cascadă.
Următorul punct de discutat este acela de a da același stil mai multor etichete. Pentru a face acest lucru, în loc să duplicați stilul, puteți să listați toate etichetele cu o virgulă. Acest lucru va ajuta la evitarea codului inutil. În practică, va arăta astfel:
În exemplul de mai sus, aplicăm o regulă pentru paragrafele și titlurile din nivelul al doilea și al treilea. În plus, CSS vă permite de asemenea să creați reguli imbricate. De exemplu, dorim ca toate cuvintele bold în paragraf să fie roșii. Acest lucru se face foarte simplu. Pentru aceasta, creați o nouă regulă CSS și adăugați etichetele de care avem nevoie.
Acum, toate cuvintele care sunt marcate cu etichete puternice și se încadrează în paragrafe își vor schimba culoarea în roșu. În acest fel, puteți modifica aspectul textului selectat nu numai prin caractere aldine, ci și prin alte etichete, de exemplu, etichetele em care sunt responsabile pentru reprezentarea italică.
În cele din urmă, să examinăm regulile pentru stările de legătură. În HTML, link-urile sunt create după cum urmează:
Curba curbelor prescrie proprietățile corespunzătoare pentru fiecare regulă CSS.
Asta e tot. Mult noroc și să vă văd în curând pe paginile blogului dmitriydenisov.com
Ați găsit o eroare? Selectați-l și apăsați pe Ctrl + Enter
Versiune imprimabilă