Elemente de CSS – Introducere

September 27, 2021

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 în CSS

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.

0 Comentarii

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Alte Articole

Tutorial CSS – Stilizarea unui buton folosind elemente de CSS

Tutorial CSS – Stilizarea unui buton folosind elemente de CSS

Data trecută am stabilit că următorul tutorial va fi despre stilizarea unui buton, ceva nu foarte complicat. Vom începe prin crearea unui document cu extensia .html, în cazul meu, l-am denumit index.html, iar apoi facem şi un document cu extensia .css, spre exemplu...

Tutorial HTML – Introducere

Tutorial HTML – Introducere

Dacă mi-ar fi spus cineva acum un an că voi ajunge să învăţ design web, HTML şi chiar programare, i-aş fi râs în faţă şi i-aş fi spus că e nebun. Dar aşa e: în urmă cu vreo jumătate de an m-am uitat la primul meu tutorial de design web şi am făcut chiar şi primul meu...

Tutorial HTML – Introducere

Tutorial HTML – Introducere

Dacă mi-ar fi spus cineva acum un an că voi ajunge să învăţ design web, HTML şi chiar programare, i-aş fi râs în faţă şi i-aş fi spus că e nebun. Dar aşa e: în urmă cu vreo jumătate de an m-am uitat la primul meu tutorial de design web şi am făcut chiar şi primul meu...