Introducere în CSS și stilizarea paginilor HTML (Curs HTML pentru începători, partea 5)

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:

  1. CSS Inline: Stiluri aplicate direct în elementele HTML folosind atributul style.
  2. CSS Intern: Stiluri definite în secțiunea <head> a documentului HTML, în interiorul unui element <style>.
  3. 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:

  1. Selector: Indică elementul HTML pe care îl stilizăm.
  2. Declarație: Conține una sau mai multe perechi proprietate-valoare.
selector {
    proprietate: valoare;
    alta-proprietate: alta-valoare;
}

Selectori CSS

Selectori comuni în CSS:

  1. Selector de element: Selectează toate elementele de un anumit tip.
   p {
       color: red;
   }
  1. Selector de clasă: Selectează elementele cu o anumită clasă.
   .clasa-mea {
       font-size: 18px;
   }
  1. Selector de ID: Selectează un element cu un ID specific.
   #id-unic {
       background-color: yellow;
   }
  1. Selector de atribut: Selectează elementele cu un anumit atribut sau valoare a atributului.
   input[type="text"] {
       border: 1px solid gray;
   }
  1. 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>&copy; 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

  1. Separați întotdeauna conținutul (HTML) de prezentare (CSS).
  2. Utilizați fișiere CSS externe pentru o mai bună organizare și reutilizare a codului.
  3. Folosiți nume de clase și ID-uri descriptive și relevante.
  4. Mențineți specificitatea selectoarelor cât mai joasă posibil pentru a evita conflicte.
  5. Utilizați unități relative (em, rem, %) în loc de unități absolute (px) pentru o mai bună responsivitate.
  6. Testați site-ul pe diferite dispozitive și browsere pentru a asigura compatibilitatea.
  7. Î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.


Comentarii

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *