10 exemple de cod CSS simple pe care le puteți învăța în 10 minute

10 exemple de cod CSS simple pe care le puteți învăța în 10 minute

Odată ce ați început să folosiți codul HTML, probabil că veți fi interesat să adăugați mai multe pachete vizuale la paginile dvs. web. CSS este cel mai bun mod de a face acest lucru. CSS vă permite să aplicați modificări pe întreaga pagină fără a vă baza pe stilul în linie.





Iată câteva exemple CSS simple pentru a vă arăta cum să efectuați câteva modificări de stil de bază pe pagina dvs. web.



1. Cod CSS de bază pentru formatarea ușoară a paragrafelor

Stilizarea cu CSS înseamnă că nu trebuie să specificați un stil de fiecare dată când creați un element. Puteți spune doar „toate paragrafele ar trebui să aibă acest stil special” și sunteți bine să mergeți.





Să presupunem că doriți fiecare paragraf (

, una dintre etichetele HTML pe care ar trebui să le știe toată lumea) să fie puțin mai mare decât de obicei. Și cu text gri închis, în loc de negru.

Legate de: Foaia de cheat HTML



Codul CSS pentru aceasta este:

p { font-size: 120%; color: dimgray; }

Simplu! Acum, ori de câte ori browserul redă un paragraf, textul va moșteni dimensiunea (120 la sută din normal) și culoarea („dimgray”).



Dacă sunteți curios cu privire la culorile textului simplu pe care le puteți utiliza, consultați acest lucru Lista de culori CSS de la Mozilla.

2. Exemplu CSS pentru schimbarea cazului de caractere

Doriți să creați o denumire pentru paragrafe care ar trebui să fie cu majuscule mici? Un eșantion CSS pentru aceasta ar fi:



p.smallcaps { font-variant: small-caps; }

Pentru a crea un paragraf complet format din majuscule mici, utilizați o etichetă HTML ușor diferită. Iată cum arată:

Your paragraph here.

Adăugarea unui punct și a unui nume de clasă la un element specifică un subtip al acelui element definit de o clasă. Puteți face acest lucru cu text, imagini, linkuri și aproape orice altceva.

Dacă doriți să schimbați un set de text într-un caz specific, utilizați aceste exemple de cod CSS:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

Ultima scrie cu majusculă prima literă a fiecărei propoziții.

Modificările stilului nu sunt limitate la paragrafe. Există patru culori diferite cărora li se poate atribui un link: culoarea standard, culoarea vizitată, culoarea în cursă și culoarea activă (pe care o afișează în timp ce faceți clic pe el). Utilizați acest exemplu de cod CSS:

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

Cu legături, fiecare „a” este urmat de două puncte, nu de un punct.

Fiecare dintre aceste declarații schimbă culoarea unui link într-un context specific. Nu este nevoie să schimbați clasa unui link pentru a-l schimba de culoare.

În timp ce textul subliniat indică în mod clar un link, uneori pare mai frumos să renunți la acel subliniat. Acest lucru se realizează cu atributul „decorare text”. Acest exemplu CSS arată cum să eliminați sublinierile de pe linkuri:

a { text-decoration: none; }

Orice element cu linkul („a”) va rămâne nesubliniat. Doriți să-l subliniați atunci când utilizatorul trece peste el? Pur și simplu adăugați:

a:hover { text-decoration: underline; }

De asemenea, ați putea adăuga acest text-decor la linkurile active pentru a vă asigura că sublinierea nu dispare atunci când se face clic pe link.

Doriți să atrageți mai multă atenție asupra link-ului dvs.? Un buton de legătură este o modalitate excelentă de a face acest lucru. Acesta necesită încă câteva linii:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

Să explicăm acest exemplu de cod CSS.

Includerea tuturor celor patru stări de legătură asigură faptul că butonul nu dispare atunci când un utilizator trece deasupra sau face clic pe el. De asemenea, puteți seta diferiți parametri pentru hover și linkuri active, de exemplu, schimbarea butonului sau a culorii textului.

Culoarea de fundal este setată cu culoare de fundal, iar culoarea textului cu culoare. Împletirea definește dimensiunea casetei --- textul este umplut cu 10 px pe verticală și 25 px pe orizontală.

Aliniere text asigură afișarea textului în centrul butonului, în loc să fie dezactivat pe o parte. Decorarea textului, ca în ultimul exemplu, elimină sublinierea.

ferestrele 10 schimbă pictogramele meniului de pornire

Codul CSS „display: inline-block” este puțin mai complicat. Pe scurt, vă permite să setați înălțimea și lățimea obiectului. De asemenea, se asigură că pornește o nouă linie atunci când este inserată.

6. Exemplu de cod CSS pentru crearea unei casete de text

Un paragraf simplu nu este foarte interesant. Dacă doriți să evidențiați un element pe pagina dvs., vă recomandăm să adăugați un chenar. Iată cum puteți face asta cu un șir de cod CSS simplu:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Acesta este simplu. Creează o margine purpurie solidă, lată cu cinci pixeli, în jurul oricărui paragraf de clasă importantă. Pentru ca un paragraf să moștenească aceste proprietăți, trebuie doar să îl declarați astfel:

Your important paragraph here.

Acest lucru va funcționa indiferent de cât de mare este paragraful.

Există multe stiluri de margini diferite pe care le puteți aplica; în loc de „solid”, încercați „punctat” sau „dublu”. Între timp, lățimea poate fi „subțire”, „medie” sau „groasă”. Codul CSS poate defini grosimea fiecărui chenar în mod individual, astfel:

border-width: 5px 8px 3px 9px;

Rezultă astfel o margine superioară de cinci pixeli, o margine dreaptă de opt, o parte inferioară de trei și o dimensiune a marginii stângi de nouă pixeli.

7. Aliniați elementele cu codul CSS de bază

Pentru o sarcină comună, centrarea elementelor cu cod CSS este surprinzător de neintuitivă. Odată ce ați făcut-o de câteva ori, totuși, devine mult mai ușor. Aveți câteva modalități diferite de a centra lucrurile.

Pentru un element de bloc (de obicei o imagine), utilizați atributul margin:

.center { display: block; margin: auto; }

Acest lucru asigură faptul că elementul este afișat ca un bloc și că marja de pe fiecare parte este setată automat. Dacă doriți să centrați toate imaginile pe o anumită pagină, puteți adăuga chiar „margin: auto” la eticheta img:

img { margin: auto; }

Pentru a afla de ce funcționează în acest fel, consultați Explicația modelului cutiei CSS la W3C .

Dar dacă doriți să centrați textul cu CSS? Utilizați acest exemplu de CSS:

.centertext { text-align: center; }

Doriți să utilizați clasa „centru text” pentru a centra textul într-un paragraf? Pur și simplu adăugați acea clasă la

etichetă:

This text will be centered.

8. Exemple CSS pentru reglarea căptușelii

Completarea unui element specifică cât spațiu ar trebui să fie pe fiecare parte. De exemplu, dacă adăugați 25 de pixeli de umplutură în partea de jos a unei imagini, următorul text va fi împins cu 25 de pixeli în jos. Multe elemente pot avea căptușeală, nu doar imagini.

Să presupunem că doriți ca fiecare imagine să aibă 20 de pixeli de umplutură pe laturile stânga și dreapta și 40 de pixeli în partea de sus și de jos. Execuția de bază a codului CSS pentru aceasta este:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

Cu toate acestea, există o instrucțiune CSS mai scurtă, care prezintă toate aceste informații într-o singură linie:

img { padding: 40px 25px 40px 25px; }

Aceasta setează umpluturile de sus, dreapta, jos și stânga la numărul potrivit. Datorită utilizării doar a două valori (40 și 25), puteți să o faceți și mai scurtă:

img { padding: 40px 25px }

Când utilizați doar două valori, prima valoare este setată pentru partea de sus și de jos, în timp ce a doua va fi la stânga și la dreapta.

9. Evidențiați rândurile de tabel cu codificare CSS

Codul CSS face ca tabelele să arate mult mai frumos decât grilele implicite. Adăugarea culorilor, ajustarea chenarelor și adaptarea mesei la ecranele mobile sunt ușor. Acest exemplu simplu CSS vă arată cum să evidențiați rândurile de tabel când le faceți mouse-ul peste ele.

tr:hover { background-color: #ddd; }

Acum, ori de câte ori treceți mouse-ul peste o celulă de masă, acel rând își va schimba culoarea. Pentru a vedea câteva dintre celelalte lucruri interesante pe care le puteți face, consultați Pagina W3C pe tabele CSS fanteziste .

10. Exemplu CSS pentru schimbarea imaginilor între transparent și opac

Codul CSS vă poate ajuta să faceți lucruri interesante și cu imagini. Iată un exemplu CSS pentru a afișa imagini cu o opacitate mai mică decât deplină, astfel încât acestea să apară ușor „albite”. Când treceți mouse-ul peste imagini, acestea sunt aduse la opacitate deplină:

img { opacity: 0.5; filter: alpha(opacity=50); }

Atributul „filtru” face același lucru cu „opacitatea”, dar Internet Explorer 8 și versiunile anterioare nu recunosc măsurarea opacității. Pentru browserele mai vechi, este o idee bună să îl includeți.

Acum că imaginile sunt ușor transparente, le puteți face complet opace la trecerea cu mouse-ul:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

10 exemple CSS cu cod sursă

Cu aceste exemple de cod CSS, ar trebui să aveți o idee mult mai bună despre modul în care funcționează CSS. Șabloane CSS poate ajuta, dar înțelegerea elementelor brute este vitală.

Cele 10 exemple de cod CSS ușor recapitulate:

  1. Formatare ușoară a paragrafului
  2. Schimbați litere mari
  3. Schimbați culorile linkului
  4. Eliminați linkurile subliniate
  5. Creați un buton de legătură
  6. Creați o casetă de text
  7. Aliniați elementele în centru
  8. Reglați căptușeala
  9. Evidențiați rândurile de masă
  10. Faceți imaginile opace

Revizualizându-le din nou, veți observa mai multe modele pe care le puteți aplica viitoarelor coduri. Și atunci știi că ai început să devii un maestru CSS. Dar amintirea poate fi dificilă. Poate doriți să marcați această pagină pentru referințe viitoare.

Acțiune Acțiune Tweet E-mail Foaia de trucuri Proprietăți esențiale CSS3

Stăpâniți sintaxa CSS esențială cu foaia de trucuri a proprietăților CSS3.

Citiți în continuare Subiecte asemănătoare
  • Programare
  • Web design
  • CSS
  • Scripting
Despre autor Christian Cawley(1510 articole publicate)

Editor adjunct pentru securitate, Linux, bricolaj, programare și tehnică explicată și producător de podcasturi cu adevărat util, cu o vastă experiență în asistență pentru desktop și software. Colaborator la revista Linux Format, Christian este un jucător Raspberry Pi, un iubitor de Lego și un fan retro al jocurilor.

Mai multe de la Christian Cawley

Aboneaza-te la newsletter-ul nostru

Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

Faceți clic aici pentru a vă abona