Skip to content

Lecția 8: Fundamentele CSS

Overview:

În această lecție, vom explora fundamentele CSS (Cascading Style Sheets), care sunt esențiale pentru stilizarea și prezentarea paginilor web. CSS oferă posibilitatea de a controla aspectul vizual al elementelor HTML și de a crea pagini web atractive și bine structurate.

Key Concepts:

  1. Selectori CSS:
    • Selectori sunt folosiți pentru a identifica elementele HTML cărora li se va aplica stilul.
    • Exemple: p pentru paragrafe, .clasa pentru elemente cu o anumită clasă, #id pentru elemente cu un anumit ID.
  2. Proprietăți și Valori:
    • Proprietăți definesc ce caracteristici ale elementelor se modifică, cum ar fi color, font-size, margin, etc.
    • Valori sunt setările specifice asociate proprietăților, cum ar fi red pentru culoare sau 20px pentru dimensiunea fontului.
  3. Box Model:
    • Elementele HTML sunt reprezentate ca și “cutii” în CSS.
    • Modelul cutiei include margini, padding și border în jurul conținutului unui element.
  4. Flexbox și Grid:
    • Tehnici avansate de structurare și aliniere a elementelor pe pagină.
    • Flexbox oferă un mod flexibil de a aranja elementele într-un container.
    • Grid permite crearea unui sistem bidimensional de rânduri și coloane.

Detailed Examples:

1. Stilizare de Bază:
/* Stilizare pentru paragrafe */
p {
  color: #333;
  font-size: 16px;
}

/* Stilizare pentru clase */
.clasa {
  background-color: #f0f0f0;
  padding: 10px;
}

/* Stilizare pentru ID-uri */
#id {
  border: 1px solid #999;
  margin: 10px;
}
2. Modelul Cutiei (Box Model):
/* Modelul cutiei pentru toate elementele */
div {
  width: 200px;
  height: 100px;
  padding: 20px;
  margin: 10px;
  border: 2px solid #ccc;
}
3. Utilizarea Flexbox:
/* Utilizarea Flexbox pentru aliniere */
.container {
  display: flex;
  justify-content: space-between;
}

.item {
  flex: 1;
  margin: 10px;
}

Exercițiul Practic: Fundamentele CSS

Task:

  1. Creați o pagină HTML simplă care să includă cel puțin două paragrafe, un div și un container flex.
  2. Utilizați CSS pentru a stiliza elementele și a evidenția diferențele între ele.

Pagina HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lecția 8 - Fundamentele CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Exercițiul Practic: Fundamentele CSS</h1>

  <p>Acesta este un paragraf obișnuit.</p>

  <div class="highlight">
    <p class="special">Acesta este un alt paragraf într-un div.</p>
  </div>

  <div class="flex-container">
    <div class="flex-item">Element 1</div>
    <div class="flex-item">Element 2</div>
    <div class="flex-item">Element 3</div>
  </div>

</body>
</html>

Fișierul CSS (style.css):

/* Stilizare pentru paragrafe */
p {
  color: #333;
  font-size: 16px;
}

/* Stilizare pentru div */
.highlight {
  background-color: #f0f0f0;
  padding: 10px;
  margin: 20px;
}

/* Stilizare pentru clasa special */
.special {
  font-weight: bold;
  color: #ff0000;
}

/* Stilizare pentru container flex */
.flex-container {
  display: flex;
  justify-content: space-around;
}

/* Stilizare pentru elementele flex */
.flex-item {
  flex: 1;
  margin: 10px;
  padding: 10px;
  border: 1px solid #999;
}