Introducere
CSS (Cascading Style Sheets) este un limbaj de stilizare esențial în dezvoltarea web modernă. În timp ce HTML oferă structura și conținutul unei pagini web, CSS controlează aspectul vizual și layout-ul acesteia. În această parte a cursului, vom explora fundamentele CSS și cum poate fi utilizat pentru a transforma aspectul paginilor HTML.
Ce este CSS?
CSS este un limbaj care descrie cum elementele HTML ar trebui afișate pe ecran, pe hârtie sau în alte medii. Permite separarea conținutului (HTML) de prezentare (CSS), facilitând mentenanța și reutilizarea codului.
Cum se aplică CSS
Există trei metode principale de a aplica CSS la un document HTML:
- CSS Inline: Stiluri aplicate direct în elementele HTML folosind atributul
style. - CSS Intern: Stiluri definite în secțiunea
<head>a documentului HTML, în interiorul unui element<style>. - CSS Extern: Stiluri definite într-un fișier separat .css, legat de documentul HTML.
Exemplu de CSS Inline:
<p style="color: blue; font-size: 16px;">Acesta este un paragraf albastru.</p>Exemplu de CSS Intern:
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>Exemplu de CSS Extern:
<head>
<link rel="stylesheet" href="stiluri.css">
</head>Conținutul fișierului stiluri.css:
p {
color: blue;
font-size: 16px;
}Sintaxa CSS
Regulile CSS sunt compuse din două părți principale:
- Selector: Indică elementul HTML pe care îl stilizăm.
- Declarație: Conține una sau mai multe perechi proprietate-valoare.
selector {
proprietate: valoare;
alta-proprietate: alta-valoare;
}Selectori CSS
Selectori comuni în CSS:
- Selector de element: Selectează toate elementele de un anumit tip.
p {
color: red;
}- Selector de clasă: Selectează elementele cu o anumită clasă.
.clasa-mea {
font-size: 18px;
}- Selector de ID: Selectează un element cu un ID specific.
#id-unic {
background-color: yellow;
}- Selector de atribut: Selectează elementele cu un anumit atribut sau valoare a atributului.
input[type="text"] {
border: 1px solid gray;
}- Selector descendent: Selectează un element care este descendent al altui element.
div p {
margin-left: 20px;
}Proprietăți CSS de bază
Text și Font
p {
color: #333333;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
line-height: 1.5;
}Spațiere și Dimensiuni
div {
width: 300px;
height: 200px;
margin: 10px;
padding: 20px;
}Culori și Fundal
body {
background-color: #f0f0f0;
}
h1 {
color: #0066cc;
background-color: #ffffff;
}Border și Box Model
.container {
border: 1px solid black;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}Layout de bază cu CSS
Display și Position
.inline-element {
display: inline;
}
.block-element {
display: block;
}
.positioned-element {
position: relative;
top: 10px;
left: 20px;
}Flexbox
Flexbox este un model de layout modern care simplifică aranjarea elementelor într-un container.
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
}Responsive Design: Noțiuni de bază
Media queries permit aplicarea stilurilor în funcție de caracteristicile dispozitivului, cum ar fi lățimea ecranului.
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
.container {
width: 100%;
}
}Exemplu practic: Stilizarea unei pagini simple
Să aplicăm cunoștințele acumulate pentru a stiliza o pagină HTML simplă.
HTML:
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagina mea stilizată</title>
<link rel="stylesheet" href="stiluri.css">
</head>
<body>
<header>
<h1>Bine ați venit pe site-ul meu</h1>
<nav>
<ul>
<li><a href="#acasa">Acasă</a></li>
<li><a href="#despre">Despre</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="acasa">
<h2>Acasă</h2>
<p>Bine ați venit pe pagina mea de start!</p>
</section>
<section id="despre">
<h2>Despre mine</h2>
<p>Sunt un dezvoltator web pasionat.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Puteți să mă contactați la adresa: [email protected]</p>
</section>
</main>
<footer>
<p>© 2024 Site-ul Meu. Toate drepturile rezervate.</p>
</footer>
</body>
</html>CSS (stiluri.css):
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1rem;
}
header h1 {
margin: 0;
}
nav ul {
padding: 0;
list-style-type: none;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
section {
background-color: #fff;
margin-bottom: 20px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h2 {
color: #333;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
@media screen and (max-width: 600px) {
nav ul li {
display: block;
margin-bottom: 10px;
}
main {
padding: 10px;
}
}Concluzii și bune practici
- Separați întotdeauna conținutul (HTML) de prezentare (CSS).
- Utilizați fișiere CSS externe pentru o mai bună organizare și reutilizare a codului.
- Folosiți nume de clase și ID-uri descriptive și relevante.
- Mențineți specificitatea selectoarelor cât mai joasă posibil pentru a evita conflicte.
- Utilizați unități relative (em, rem, %) în loc de unități absolute (px) pentru o mai bună responsivitate.
- Testați site-ul pe diferite dispozitive și browsere pentru a asigura compatibilitatea.
- Învățați și aplicați principiile de design responsiv pentru a crea site-uri adaptabile la diferite dimensiuni de ecran.
Prin stăpânirea acestor concepte de bază ale CSS, veți putea transforma aspectul paginilor HTML și veți avea o bază solidă pentru a explora tehnici mai avansate de stilizare și layout.
Lasă un răspuns