Data trecută am terminat cu noţiunile de bază ale HTML-ului. Sigur, există mai multe tag-uri despre care nu am discutat, însă am ales să vorbesc doar pe scurt. Poate pe viitor voi aborda şi tag-urile mai puţin folosite într-o altă lecţie separată. Dar azi m-am gândit să vorbim şi despre CSS.
Ce este CSS?
Folosind CSS sau Cascading Style Sheets putem stiliza elementele HTML. Există 3 modalităţi de a scrie CSS:
1. import dintr-un fişier extern în head
<link rel=”stylesheet” href=”calea către fişier>
2. scrierea regulilor direct în head:
<style>…</style>
3. scrierea regulilor inline:
<div style=”…> </div>
Acum haideţi să ne uităm puţin la următorul document HTML:
Observăm că am creat 4 div-uri. Primul conţine o clasă numită „child-class” şi un id numit „the-important”. Al doilea, conţine clasa „class1”, clasa „child-class” şi clasa „grand-child-class”. Al treilea, clasa „class2” şi clasa „class1” iar ultimul div conţine id-ul „my-first-css” şi clasa „class1 class2”. Ne amintim că un div poate conţine un singur id şi oricâte clase. Bun. Acum, urmează să facem un nou document, pe care de regulă îl denumim style, dar care întotdeauna are extensia .css
Selectori
Dacă până acum am vorbit despre modalităţile de a scrie CSS, acum discutăm despre selectori în CSS. Pentru asta, avem 4 situaţii:
1. prin tag html:
div {
…
}
2. prin id:
#nume-id {
…
}
3. prin clasă:
.nume-clasă {
…
}
4. prin selectarea unor elemente care conţin mai multe clase:
.nume-clasă1.nume-clasă2 {
…
}
5. prin selectarea unui element descendent altui element:
.nume.clasă .nume-clasă2 {
…
}
Este important să acordăm atenţie modului în care scriem selectorii în CSS. De exemplu, observăm că la o primă vedere nu există nicio diferenţă între punctele 4 şi 5. Însă, este vorba doar de un spaţiu. Observăm că atunci când vrem să selectăm un element descendet altui element, vom scrie elemente cu SPAŢIU între ele, spre deosebire de selectarea elementelor care conţin mai multe clase. De asemenea, observăm că folosim # când e vorba de id-uri şi . când e vorba de clase.
Dar să revenim la exemplu nostru pe care l-am dat mai devreme. Obesrvăm că nu este afişată nicio informaţie, afară de titlu. Haideţi să stilizăm puţin pagina! Umăriţi cu atenţie ce atribute am folosit pentru a stiliza pagina. Avem color, width şi heigth pentru dimenisunile paginii, text-align, border, padding şi margin.
Pentru că ştiu că este destul de complicat de înţeles aceste noţiuni la început, putem vedea în următoarea imagine cum să diferenţiem între margin, border şi padding.
Şi…cam asta a fost tot pe ziua de azi! Sigur, există multe atribute în CSS. Acum noi le-am folosit doar pe cele de bază. Data viitoare, vreau să vorbim mai pe larg şi despre altele şi să stilizăm împreună un buton, folosind CSS.
Acesta a fost articolul de astăzi! Dacă ți-a plăcut, nu uita să arunci un ochi peste blog-ul nostru pentru mai multe articole interesante, în special pe categoria Web-ul în 100 de pași! De asemenea, ne găsești și pe TikTok, și pe Instagram!
