Liste CSS

CSS Tutorial » Liste CSS

Există trei tipuri diferite de liste în HTML:

Liste neordonate (<ul>) : - o listă de articole, în care fiecare articol din listă este marcat cu puncte..
Liste ordonate (<ol>) : - o listă de elemente, în care fiecare element al listei este marcat cu numere.
Lista definițiilor : - o listă de elemente, cu o descriere a fiecărui element.

Creați liste folosind stiluri CSS

CSS oferă diverse proprietăți pentru stilizarea și formatarea listelor ordonate și neordonate utilizate frecvent.
Aceste proprietăți ale listei CSS vă permit de obicei să:

Controlați forma sau aspectul markerului din lista.
Specificați o imagine pentru marker în locul unui punct sau număr.
Setați distanța dintre un marker și textul din listă.
Specificați dacă marcajul va apărea în interiorul sau în afara casetei care conține elementele listei.

În secțiunea următoare vom discuta despre proprietățile care pot fi utilizate pentru a proiecta liste HTML.

Diferiti markeri la articole din lista

Proprietatea de tip listă-stil specifică tipul marcatorului de listă.

Următorul exemplu prezintă unii dintre marcatorii de articole din listă disponibili:

Exemple

<!DOCTYPE html>

  <html>

  <head>

  <style>

  ul.a_lista {

  list-style-type: circle;

  }


ul.b_lista {

  list-style-type: square;

  }
ol.c_lista {

  list-style-type: upper-roman;

  }
ol.d_lista {

  list-style-type: lower-alpha;

  }

  </style>

  </head>

  <body>
<h2> Listas </h2>

  <p> Exemplu de liste neordonate: </p>

  <ul class = "a_lista">

  <li> Cafea </li>

  <li> Ceai </li>

  <li> Coca Cola </li>

  </ul>
<ul class = "b_lista">

  <li> Cafea </li>

  <li> Ceai </li>

  <li> Coca Cola </li>

  </ul>
<p> Exemplu de liste ordonate: </p>

  <ol class = "c_lista">

  <li> Cafea </li>

  <li> Ceai </li>

  <li> Coca Cola </li>

  </ol>
<ol class = "d_lista">

  <li> cafea </li>

  <li> Ceai </li>

  <li> Coca Cola </li>

  </ol>
</body>

  </html>

Etiquetas:Tutorial CSS - liste CSS ordonate si neordonate, exemple de lista, orizontale, stiluri, eliminare punct, derulante, liste css fanteziste, liste css in html,

Schimbați poziția marcatorilor de listă

În mod implicit, marcatorii pentru fiecare articol din listă sunt plasate în afara casetelor de afișare.

Cu toate acestea, puteți plasa și aceste marcaje sau gloanțe în casetele de afișare ale elementului de listă utilizând proprietatea list-style-position împreună cu valoarea din interior.
În acest caz, liniile se vor înfășura sub marker în loc să fie indentate. Iată un exemplu:

Exemplu

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="utf-8">

<title>Setarea poziției marcatorului listei</title>

<style> 

body{

font-size: 15px;

font-family: Verdana, Geneva, sans-serif;

}

ol li {

padding: 8px;

margin: 6px;

background-color: #DFDFFF;

}

ol.in li {

list-style-position: inside;

}

ol.out li {

list-style-position: outside;

}

</style>

</head>

<body>

<h2> Lista poziției marcatorului: în interior </h2>

<ol class = "en">

<li> Fixați centura de siguranță </li>

<li> Porniți motorul mașinii și aruncați o privire mai atentă asupra grupului de instrumente pentru orice semne de avertizare. </li>

<li>Uită-te cu atenție în jur și pleacă </li>

</ol>

<h2>Lista poziției marcatorului: exterior </h2>

<ol class = "out">

<li> Fixați centura de siguranță</li>

<li>Porniți motorul mașinii și aruncați o privire mai atentă asupra grupului de instrumente pentru orice semne de avertizare. </li>

<li>Uită-te cu atenție în jur și pleacă</li>

</ol>

</body>

</html>

Ștergeți setările implicite, eliminați punctul

Tipul listei-stil: nici o proprietate nu poate fi folosită și pentru a elimina marcaje / gloanțe - eliminați perioada .

Rețineți că lista are și umplutură și marjă implicite. Pentru a elimina acest lucru, adăugați marginea: 0 și padding:0 la <ul> sau <ol>:

Exemplu

<!DOCTYPE html>

  <html>

  <head>

  <style>

  ul.demo {

  list-style-type: none;

  margin: 0;

  padding: 0;

  }

  </style>

  </head>

  <body>


<p>Lista implicită:</p>

  <ul>

  <li> Cafea </li>

  <li> ceai </li>

  <li> Coca Cola </li>

  </ul>
<p> Eliminați punctele, marginile și fundalul: </p>

  <ul class = "demo">

  <li> Cafea </li>

  <li> Ceai </li>

  <li> Coca Cola </li>

  </ul>
</body>

  </html>

liste CSS ordonate si neordonate

eliminare punc din lista

liste css in html

Tags: Tutorial CSS - liste CSS ordonate si neordonate, exemple de lista, orizontale, stiluri, eliminare punct, derulante, liste css fanteziste, liste css in html

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.