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:
<!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">
</body>
<li> cafea </li>
<li> Ceai </li>
<li> Coca Cola </li>
</ol>
</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:
<!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>:
<!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>
</body>
<ul class = "demo">
<li> Cafea </li>
<li> Ceai </li>
<li> Coca Cola </li>
</ul>
</html>
liste CSS ordonate si neordonate
eliminare punc din lista
liste css in html
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.