Proiectare listă: grupul de proprietăți în stil listă în CSS

Listele sunt un element important al unei pagini web. Ele ajută la structurarea informațiilor și la prezentarea acestora într-o formă ușor de utilizat. În plus, sub formă de liste, meniurile și panourile de navigație sunt adesea alcătuite. Gestionarea poziției și a aspectului elementului de marcare permite un grup de proprietăți Stilul de listă CSS.

Tipuri de liste

Sunt liste ordonate și neordonate. Primul marker poate fi orice caracter care nu se schimbă de la un punct la altul, în al doilea rând, fiecare element al listei are un marker propriu, care determină localizarea sa printre altele.

În listele ordonate pentru marcare, numerele sau literele diferitelor sisteme și alfabete sunt de obicei utilizate.

În funcție de gradul de cuibărire, de un nivel și de mai multe niveluri. Fiecare nivel are de multe ori propriul element de marcare.

Utilizarea listelor atunci când creați meniuri sau bare de navigare este încurajată de cea mai recentă versiune a standardului HTML, deoarece acest element are o semnificație semantică importantă.

Afișați în CSS

Fiecare element este un container bloc cu un tip special de afișare: list-item. În mod implicit, această valoare este setată pentru elementele li situate în interiorul containerelor ul și ol și oferă un marcator înaintea blocului.

Dacă este necesar, acest tip de afișare poate fi setat pentru orice container HTML. Noul element de etichetare este proiectat folosind grupul de proprietăți în stilul CSS.

p {display: list-item-list-style-type: zecimal-}

Toate cele trei proprietăți sunt moștenite de copii care au afișat: list-item și, dacă este necesar, necesită o suprascriere explicită.

Poziția marcatorului de listă

Prima proprietate a grupului este poziția de listă. Determină dacă marcajele rămân în blocul de text sau sunt mutate din acesta.

Proprietatea ia una din două valori:

• în interior,
• în afara.

Diferența dintre ele este deosebit de vizibilă în cazul elementelor multi-linie.

.list1 {list-stil-position: exterior -} list2 {list-style-position: inside-}

Valoarea prestabilită este în afara și marcatorul de listă este mutat din cutie.

Aspectul markerului

Al doilea tip de tip de proprietate - tip de listă - controlează tipul de marcator și poate lua mai mult de cincisprezece valori.

În mod implicit, lista numerică utilizează cifre arabe, iar pentru o listă cu marcatori, se utilizează punctul. Dar proprietățile în stilul de listă din CSS vă permit să modificați aceste setări și chiar să eliminați complet marcatorii.

Marcatori lista neordonată:

• disc - un punct obișnuit, plin de culoarea textului;
• cerc - un cerc gol cu ​​un curs în culoarea textului;
• pătrat - pătratul umbrit.

Pentru liste ordonate de opțiuni este mult mai mult:

Unele valori se duplică reciproc, de exemplu, alfa inferior și inferior latin, iar altele nu sunt acceptate de un număr de browsere și fonturi.

Dacă este necesar, marcajele de tip comandat pot fi aplicate la listele neordonate ul și invers.

În mod separat, selectați valoarea none, care ascunde markerii din lista de orice tip. Este utilă în special atunci când creați panouri de navigare atunci când doriți să păstrați semantica listei, dar elementele de marcare nu se încadrează în proiect. De asemenea, proprietatea este adesea folosită pentru stilul definit de utilizator.

.listă {list-style-type: none;}

Marcator personalizat

În loc de anumite tipuri de elemente de marcare CSS, puteți utiliza orice imagine. Pentru a face acest lucru, trebuie să transmiteți o legătură către el la proprietatea listă-stil-imagine.

Puteți folosi chiar imagini în format GIF - animația va fi salvată. Este important să vă amintiți acest lucru Stilul de listă CSS afișează o imagine în dimensiune completă.

.listă {list-style-image: url (imagine.jpg) -line-height: 25px;}

De exemplu:

În plus față de fișierele imagine, puteți utiliza funcțiile CSS ale gradientelor radiale sau liniare:

.listă {list-style-image: radial-gradient (albastru deschis, aqua, albastru) -}

Forma markerului rămâne pătrată.

Sintaxă combinată

Toate proprietățile care definesc afișarea marcatorului de listă pot fi combinate într-un singur stil CSS list.

listă: listă-tip-listă-stil-poziție-listă-stil-imagine

Proprietățile specifice sunt listate într-un spațiu, nu pot rupe ordinea, dar oricare dintre ele poate fi omisă:

.list1 {list-style: none;} .list2 {style-list: upper-roman interior -} list3 {list-style: inside url (/images/img1.jpg)

Pentru a reseta stilurile la parametrii originali, există o valoare inițială, care poate fi trecută la oricare dintre cele patru proprietăți enumerate.

Folosind un grup de stil de listă de proprietăți CSS în combinație cu efectele de direcționare, puteți crea liste frumoase unice care să atragă atenția utilizatorului.