Exemplu 1. Schimbarea fundalului.
În acest exemplu, vom examina modul în care puteți schimba fundalul din director. Inițial, directorul arată astfel:
Selectăm cu Firebug (butonul F12) elementul de care avem nevoie:
Caseta roșie înconjoară codul pe care îl inserăm acum. După salvare, culoarea de fundal a elementului sa schimbat la cea selectată:
Exemplu 2. Modificați culoarea butonului.
Selectăm elementul necesar:
Adăugați codul care modifică culoarea butonului înainte de a da clic pe:
Și făcând clic pe butonul "Salvați". uita-te la rezultatul:
Exemplul 3. Schimbarea fontului.
Acum modificați fontul butonului "Coș de cumpărături". Selectăm elementul de care avem nevoie, căutăm partea dorită a codului:
Vrem să facem această inscripție albastră, să afișeze imaginea mărită și cu caractere italice. Pentru a face acest lucru, lipiți următorul cod:
Și vedem cum sa schimbat butonul "Coșul de cumpărături".
Exemplul 4. Modificarea stilului anteturilor.
În acest caz, trebuie să prezentăm independent, în mod independent, regula necesară pentru această clasă. Modificați culoarea anteturilor în verde, faceți fontul mai mare și italic:
Și după salvarea modificărilor, să vedem cum se schimbă antetele:
Exemplu 5. Schimbarea stilului de legătură.
De îndată ce dăm clic pe acest link, fișierul style.css se deschide pe linia 165 și vedem cum sunt descrise regulile de legătură.
Pseudo-clasa link-ul este responsabil pentru link-uri nevisite, vizitate pentru vizitat. Clasa pseudo-cursă este declanșată atunci când cursorul este plutind. Schimbarea culorii de link-uri nevizitate pe verde, culoarea de vizitat - în roșu, iar când vă mutați culoarea violet se va face și elimina link-urile de subliniere (pentru că este în regula de text-decoration: none):
Link-urile par foarte diferite:
Exemplul 6. Schimbarea și dimensiunea blocului.
Regula de marjă corespunde distanței dintre elemente. pentru distanța dintre conținutul elementului și limita sa este umplutura. Puteți modifica lățimea blocului utilizând regula de lățime. Alegeți un element pe care îl vom schimba:
Acum, să înregistrăm următoarele modificări: măriți umplutura la 100 de pixeli și setați marja de marjă la început și la stânga cu 50 de pixeli:
Aspectul elementului va fi după cum urmează:
Acum schimbați lățimea elementului. Selectați elementul dorit:
și adăugați regula modificată pentru clasa .right_block - reduceți lățimea lățimii cu 200 de pixeli:
Acum, blocul a devenit considerabil mai restrâns:
Exemplul 7. Cadrele de blocare.
Puteți schimba marginea blocurilor utilizând regula de frontieră - de exemplu, setați rotunjirea cu raza de margine. De asemenea, în acest exemplu, vom examina cum să adăugăm o umbră unui element folosind umbra cutie.
Puneți mai mult rotunjire pe element - măriți valoarea razei de graniță la 50 de pixeli, faceți grosimea marginii (5 pixeli) și faceți-o verde, adăugați și o umbra neagră de jos și în dreapta cu umbra în cutie:
În cele din urmă, elementul va arăta astfel:
Exemplul 8. Ascundeți elementul.
Puteți ascunde orice element utilizând regula: niciuna dintre reguli. De exemplu, ascundem inscripția în subsolul site-ului:
Acum textul selectat din subsol nu va fi vizibil pentru utilizatori:
Exemplu 9. Înlocuiți logo-ul.
Inițial, șabloanele au o anumită dimensiune a logo-ului și, pentru a umple mai mult imaginea, trebuie mai întâi să ascundeți logo-ul existent și să încărcați o nouă imagine utilizând fundalul.
Deci, logo-ul a arătat astfel:
Acum faceți modificările necesare. Încărcați o nouă imagine fie pe site-ul dvs. web sau într-o gazdă terță parte și specificați link-ul de acolo.
După introducerea acestor reguli, logo-ul arată astfel:
Articole similare
Trimiteți-le prietenilor: