Lecția 13: Liste și Link-uri în CSS

by

Overview:

În această lecție, vom explora modul în care putem stiliza liste și link-uri folosind CSS pentru a îmbunătăți aspectul și funcționalitatea acestora pe o pagină web.

Key Concepts:

  1. Stilizarea Listelor:
    • Modificarea stilului marcatorilor și a numerotării listelor neordonate și ordonate.
    • Controlul distanței între elementele listei folosind list-style-type, list-style-image și list-style-position.
  2. Stilizarea Link-urilor:
    • Definirea stilului implicit, al link-urilor vizitate și al link-urilor la survol.
    • Modificarea culorii, sublinierii și a altor aspecte ale link-urilor.

Detailed Examples:

1. Stilizarea Listelor:
/* Stilizare pentru lista neordonată */
ul {
  list-style-type: square; /* Schimbarea marcatorului la pătrat */
}

/* Stilizare pentru lista ordonată */
ol {
  list-style-type: upper-roman; /* Schimbarea numerotării la cifre romane mari */
}

/* Controlul distanței dintre marcator și text */
ul, ol {
  list-style-position: inside; /* Marcatorul se află în interiorul containerului */
}

/* Utilizarea unei imagini personalizate pentru marcator */
ul.imagini-marcator {
  list-style-image: url('calea-catre-imagine.png');
}
2. Stilizarea Link-urilor:
/* Stilizare pentru link-uri */
a {
  color: #0077cc; /* Setarea culorii link-urilor */
  text-decoration: none; /* Eliminarea sublinierii implicite */
}

/* Stilizare pentru link-uri vizitate */
a:visited {
  color: #663399; /* Setarea culorii link-urilor vizitate */
}

/* Stilizare pentru link-uri la survol */
a:hover {
  text-decoration: underline; /* Adăugarea sublinierii la survol */
}

Exercițiul Practic: CSS – Stilizarea Listelor și Link-urilor

Pagina HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercițiul Practic: Stilizarea Listelor și Link-urilor</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Exercițiul Practic: Stilizarea Listelor și Link-urilor</h1>

  <ul class="lista-ordinata">
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
  </ul>

  <ol class="lista-neordonata">
    <li>Element A</li>
    <li>Element B</li>
    <li>Element C</li>
  </ol>

  <ul class="lista-imagini">
    <li>Element cu marcator imagine</li>
    <li>Element cu marcator implicit</li>
    <li>Element cu marcator imagine</li>
  </ul>

  <p class="link-default"><a href="#">Link implicit</a></p>

  <p class="link-visited"><a href="#">Link vizitat</a></p>

  <p class="link-hover"><a href="#">Link la survol</a></p>

</body>
</html>

Fișierul CSS (style.css):

/* Stilizare pentru lista ordonată */
.lista-ordinata {
  list-style-type: decimal;
}

/* Stilizare pentru lista neordonată */
.lista-neordonata {
  list-style-type: circle;
}

/* Stilizare pentru marcatori personalizați */
.lista-imagini {
  list-style-image: url('calea-catre-imagine.png');
  list-style-position: inside;
}

/* Stilizare pentru link-uri */
.link-default a {
  color: #0077cc; /* Culoare implicită a link-urilor */
  text-decoration: none; /* Eliminarea sublinierii implicite */
}

/* Stilizare pentru link-uri vizitate */
.link-visited a {
  color: #663399; /* Culoare link-uri vizitate */
}

/* Stilizare pentru link-uri la survol */
.link-hover a {
  text-decoration: underline; /* Adăugarea sublinierii la survol */
}