Reguli CSS pentru personalizarea aspectului listei pe pagina html. Proprietatea stilului listei (tip, imagine, poziție)

Salutare dragi cititori ai site-ului blogului. Astăzi va exista un alt articol despre proprietățile foilor de stil în cascadă. În ea va fi despre stilarea cu reguli CSS.

În general, listele se evidențiază printre elementele bloc. Acest lucru se datorează faptului că includ marcatori și numerotare, care sunt plasate de browserul însuși.

Proprietatea stilului listei - designul listei pe pagina html

V Limbajul CSS Există trei proprietăți care încep cu stil-listă care sunt responsabile pentru stilul listelor cu marcatori și numerotate. În plus, există și o regulă combinată în stil de listă care vă permite să reduceți cantitatea de cod.

Toate aceste proprietăți sunt valabile atât pentru elementele html li, cât și pentru elementele ul și ol. Singura diferență este că, dacă regulile sunt scrise pentru o anumită valoare a listei li, atunci aceasta va fi aplicată numai acesteia. Și dacă aceleași reguli css sunt scrise pentru containerele ul sau ul, atunci ele vor fi aplicate tuturor elementelor li incluse în aceste containere.

Să începem cu atributul tip-stil-listă care apune tip de markere sau numerotare la articolele din lista:

tip-stil de listă: disc | cerc | pătrat | zecimală | zecimal-lea-zero | mai jos-roman | super-roman | mai jos-greacă | mai jos-alfa | mai jos-latină | upper-alpha | super-latină | armean | georgian | niciunul | moștenire

După cum puteți vedea, proprietatea list-style-type are multe valori disponibile care pot specifica atât tipul markerului, cât și tipuri diferite numerotare.

• disc - marcator sub forma unui cerc negru (valoare implicită pentru listele cu marcatori).
• cerc - un marcator sub forma unui cerc deschis.
• pătrat - un marker sub formă de pătrat. Poate fi deschis sau întunecat, în funcție de browser.
• zecimală - numerotare cu cifre arabe (valoare implicită pentru listele numerotate).
• decimal-leading-zero - numerotare cu cifre arabe de la 01 la 99 cu zero la început.
• inferior-roman - numerotare cu cifre romane mici.
• superior-roman - numerotare cu cifre romane mari.
• greacă inferioară - numerotare cu litere mici grecești.
• alfa inferior și latină inferior - numerotarea cu litere mici latine.
• upper-alpha și upper-latin - numerotarea cu litere mari latine.
• armeană - numerotare folosind numere tradiționale armenești.
• georgian - numerotare folosind numere tradiționale georgiane.
• nici unul - Marcarea și numerotarea nu se vor efectua deloc.

Așa vor arăta elementele din listă într-un browser sensuri diferite list-style-type:

La folosind CSS stiluri nu contează ce element (OL sau UL) este folosit pentru a crea lista. OL și UL diferă doar prin comportamentul lor implicit și cu proprietatea de tip list-style puteți transforma cu ușurință o vizualizare listă în alta.

Atribut de stil listă-stil-imagine vă permite să setați ca marker lista articolelor imagine grafică ... Când se utilizează atributul list-style-image, valoarea atributului list-style-type este ignorată:

list-style-image: niciuna |<интернет-адрес файла изображения>| mostenesc

Sens nici unul elimină marcatorul de imagine și îl setează la normal, nu la grafic. Acesta este comportamentul implicit.

Când specificați adresa fișierului imagine, o imagine va fi inserată în locul marcatorului. Ca și în uz, atât absolute cât și adrese relative... Dacă browserul nu poate încărca imaginea, atunci va fi folosit marcatorul sau numerotarea implicită sau ceea ce este scris în proprietate în tipul de stil listă.

Exemplu de listă cu o imagine ca marcator:

• primul articol din listă;


• al doilea articol de pe listă;


• al treilea articol de pe listă.

Și iată cum arată:

• primul articol din listă;
• al doilea articol de pe listă;
• al treilea articol de pe listă.

Este clar că atunci când alegeți o imagine ca marker, este mai bine să selectați o imagine mică.

Și ultima proprietate CSS din seria de stil listă - list-style-position, care vă permite să specificați locația marcatorului sau numerotarea în elementul din listă. Pot exista două opțiuni ca valoare:

list-style-position: interior | exterior

În caz de valoare interior marcatorul sau numerotarea se plaseaza parca in interiorul listei, iar in cazul in afaraîn afara elementelor li. Valoarea implicită este în exterior, iar marcatorul este mutat în exterior.

Un exemplu de listă cu diferite valori de poziție de stil de listă:

• în primul paragraf, totul este implicit;
• în al doilea paragraf, poziţia-stil-listă este setată la interior. În acest caz, rețineți că a doua linie este la același nivel cu marcatorul;
• în acest moment, poziţia-stil-listă este în afara.

Regulă de tip listă CSS compus

Următorul stil de listă de proprietăți CSS este un prefabricat pentru listele de stiluri. Vă permite să scrieți toate cele trei reguli CSS discutate mai sus într-una singură. Ordinea de specificare a valorilor în ea poate fi oricare și parametrii pe care nu îi specificați în stilul de listă, browserul îi va lua pe cei impliciti.

Separați valorile în regula prefabricată în stil listă cu spații:

list-style: list-style-type list-style-image list-style-position;

O regulă CSS reală pentru listele de stil ar putea arăta cam așa:

list-style: cerc URL (http: //site/images/marker.png) exterior;

Astfel, proprietatea de tip listă vă permite să reduceți semnificativ cantitatea de cod, deoarece în loc de trei reguli, trebuie să specificați doar una.

După cum am menționat mai sus, valorile pot fi specificate în orice comandă și cantitate. Deci, de exemplu, pentru a eliminați marcatorii din lista de meniu intrare suficientă:

stil-listă: niciunul;

Același lucru se poate face folosind proprietatea list-style-type:

list-style-type: niciunul;

Aceasta încheie povestea mea despre stilarea listelor html folosind foi de stil în cascadă. Pentru a afla despre ceilalți Proprietăți CSS x, puteți citi articole din secțiunea „” și nu uitați să vă abonați la actualizările blogului. Pana data viitoare!

liste CSS- un set de proprietăți care sunt responsabile pentru proiectarea listelor. Utilizarea listelor HTML este foarte comună atunci când se creează bare de navigare pe site. Elementele din listă reprezintă o colecție de elemente bloc.

Cu proprietăți CSS standard puteți modificați aspectul marcatorului de listă, adăugați o imagine pentru marker, și schimbați locația markerului... Înălțimea blocului de marcare poate fi setată cu proprietatea line-height.

Liste de stiluri cu stiluri CSS

1. Tip de marcator de listă list-style-type

Proprietatea modifică tipul markerului sau elimină markerul pentru liste marcate și numerotate. Mostenit.

Sintaxă

Ul (tip de stil de listă: niciunul;) ul (tip de stil de listă: pătrat;) ol (tip de stil de listă: niciunul;) ol (tip de stil de listă: alfa inferior;)
Orez. 1. Un exemplu de proiectare a listelor marcate și numerotate

2. Imagini pentru elementele listei-stil-imagine

Imaginile și umplerile cu gradient pot fi folosite ca un marcator pentru elementele din listă. Mostenit.

Sintaxă

Ul (list-style-image: url ("imagini / romb.png");) ul (list-style-image: liniar-gradient (# FF7A2F 0, # FF7A2F 50%, # FFB214 50%);)
Orez. 2. Design listă cu puncte folosind imaginea Orez. 3. Stilizarea unei liste cu marcatori cu un gradient

3. Locația marcatorului de listă list-style-position

Această proprietate oferă posibilitatea de a poziționa marcatorul în afara sau în interiorul conținutului articolului din listă. Mostenit.

Salutare dragi cititori ai site-ului blogului. Astăzi va fi un alt articol în pușculiță. Se va vorbi despre stilizarea folosind regulile de foi de stil în cascadă. Totul este foarte simplu aici, dar cu toate acestea am decis să dedic o postare separată acestui subiect.

Puțin mai devreme, am reușit deja să aflăm cum, cum și cum puteți lucra cu. Ei bine, și chiar și puțin mai devreme, am examinat în toate detaliile toate felurile și ale lor diverse combinatii pentru a specifica exact acel element Cod HTML cărora va trebui să aplicați anumite proprietăți de styling.

Stil listă - design de liste în cod HTML

Deci, în limbajul de marcare a stilului, există trei reguli separate, începând cu stilul de listă, care servesc la personalizare aspect liste (numerotate sau marcate) în codul documentului web. În plus, există un stil combinat de listă de reguli Css, care vă permite să reduceți oarecum cantitatea de cod. Dar mai întâi lucrurile.

Ceea ce vom analiza acum cu dvs. este permis să le folosim pe ambele Elemente HTML LI și pentru elementele Ul și Ol (liste marcate și, respectiv, numerotate). Care este diferența în aplicarea stilului de listă acestor etichete?

De fapt, puteți afla dacă o proprietate este moștenită sau nu pe site-ul validatorului (citiți despre linkul furnizat) în secțiunea dedicată specificației foilor de stil în cascadă. În coloana „Moștenit”, lângă regulile moștenite, va apărea „Da”:

Sa incepem cu tip-stil-listă, care vă permite să setați tipul de marcare pentru elemente individuale Lista HTML... Următoarele valori sunt valabile pentru această regulă:

1. Niciunul - nu va exista niciun marcaj (tip listă-stil: niciunul; aplicat acestui articol și, prin urmare, nu are marcator)
2. Disc - cerc umplut (tip listă: disc; tocmai aplicat acestei linii)
3. Cerc - un cerc ca marcator
4. Pătrat - un pătrat ca marcator
5. Decimală - cifre arabe (tip listă: zecimal;)
6. alfa inferior - scrisori litere mici
7. upper-alpha - litere mari latine
8. low-roman - cifre romane minuscule
9. upper-roman - cifre romane majuscule

Ce elemente credeți că au fost folosite Ul sau Ol pentru a crea lista de mai sus? Întrebare capcană. Se pare că acest lucru nu mai este important, deși în acest caz particular am folosit Ol, dar schimbându-l în Ul - aspectul va rămâne același, deoarece este setat pentru fiecare element de unul singur Valoarea CSS reguli de tip de stil de listă.

În esență, Ul și Ol diferă doar în comportamentul lor implicit (Ul - mărci și Ol - numere). Dar dacă doriți, puteți transforma cu ușurință un tip de listă în altul folosind tipul de listă. Fontul folosit pentru codificarea cu cifre sau litere este exact același cu cel definit pentru conținutul etichetelor LI. De exemplu, prin schimbarea culorii fontului pentru listă, vom schimba și culoarea markerului:

1. S-a schimbat culoarea textului (list-style-type: low-roman; culoare: roșu) și s-a schimbat culoarea markerului

Să trecem de la urmând CSS proprietate - listă-stil-poziție... Cu acesta, puteți seta poziția (plasarea) zonei cu un marker. Există doar două opțiuni de valoare pentru el:

Acestea. de fapt, în list-style-position indicăm unde să plasăm zona cu markeri - în afara elementului LI (în exterior) sau în interiorul acestuia (în interior). În mod implicit, zona cu marcatorul este mutată în exterior, adică. valoarea este in afara.

Să vedem asta cu un exemplu. În primul element al listei, voi scrie în mod specific list-style-position: inside și vom vedea ce se întâmplă:

1. Totul aici este implicit
2. Acesta este modul în care va arăta amplasarea zonei de marcare în interior. Rețineți că a doua linie din acest element și marcatorul sunt la același nivel
3. Totul aici este implicit

Listă-stil-imagine și regulă css de colecție

În continuare, avem la rândul nostru List-style-image - vă permite să setați o imagine care va fi folosită ca marker. Această regulă este setată la Niciunul în mod implicit (adică nicio imagine nu este folosită ca marcator), dar puteți scrie funcționalitatea Url () specificând calea către imagine, care va acționa ulterior ca un marcator în această listă:

Ar putea arăta astfel:

List-style-image: url (https: //site/images/list_star.png);

1. Totul aici este implicit
2. Așa ar putea arăta folosind o imagine ca marker. Este clar că poți alege o imagine mai potrivită în acest scop.
3. De exemplu, ca aici.

După cum vă amintiți, în articolul despre am spus că se referă imaginile elemente inline(de fapt, pentru browser aceasta este aceeași literă, dar uneori de o dimensiune foarte mare).

Iată imaginea și se potrivește în locul markerului (litere sau cifre). În același timp, înălțimea liniei cu elementul din listă va fi mărită dacă inserați o imagine mare ca marcator (cum s-a întâmplat în al doilea element al exemplului de mai sus).

În funcționalitatea pentru stilul de listă, imaginile pot fi specificate ca imagini. Dacă imaginea nu este încărcată, atunci va fi folosit marcatorul sau numerotarea implicită sau ceea ce este scris în tipul de stil de listă pentru acest element de listă.

Pentru a scrie toate cele trei reguli CSS descrise mai sus într-una singură, va fi posibil să utilizați List-style, care este un compus pentru proiectarea listelor. Ordinea în care sunt specificate valorile este irelevantă. Valorile pe care nu le specificați în stil Listă vor fi interpretate explicit de browser cu valorile implicite.

Unde pot vedea valorile implicite? Da, totul este în același loc - în specificația validatorului CSS W3C în coloana „Valoare inițială” vizavi de proprietățile care vă interesează:

Valorile proprietăților individuale din regula prefabricată în stil Listă sunt separate prin spații. Locațiile, așa cum am menționat deja, nu sunt importante:

În practică, ar putea arăta astfel:

Stil listă: în interiorul url-ului roman superior (https: //site/images/list_star.png);

Puteți utiliza valori în orice ordine și în orice număr (începând de la unul). Apropo, cu ajutorul listelor, meniurile sunt cel mai adesea formate pe site-uri și proprietatea List-style este folosită pentru a se asigura că pentru a elimina marcatorii din listele de meniu care sunt complet inutile acolo:

List-style-type: niciunul;

Stil listă: niciunul;

Multă baftă! Ne vedem curând pe paginile site-ului blogului

puteți viziona mai multe videoclipuri accesând

S-ar putea să fiți interesat

Afișare (block, none, inline) în CSS - setați tipul de afișare a elementelor HTML pe pagina web Cum să configurați culoarea de fundal alternativă a rândurilor de tabele, liste și alte elemente HTML pe un site folosind pseudo-clasa a n-a-copil
Float și clear în CSS - instrumente aspectul blocului
Pentru ce este CSS, cum să conectați foile de stil în cascadă document HTMLși elementele de bază ale sintaxei acestui limbaj
Poziționare cu Z-index și CSS Regula cursorului pentru a schimba cursorul mouse-ului
Poziția (absolută, relativă și fixă) - moduri poziționare html elemente în CSS (reguli stânga, dreapta, sus și jos)
Proprietăți CSS text-decorare, vertical-align, text-align, text-indent pentru decorarea textului în Html

Foaie de stil externă vă permite să concentrați informații despre formatarea site-ului într-un singur fișier. Pentru a face referire la foaia exterioară stiluri css in corp după titlu scrie următorul rând

Atributul href specifică calea către fișierul extern foaie de stil. Șirul dat trebuie să fie scris în textul tuturor paginilor Web în care urmează să fie utilizată foaia de stil externă.

Astfel, modificările aduse fișierului style.css se reflectă imediat pe toate paginile care leagă la acest fișier.

Definiție privată a stilurilor

Dacă trebuie să aplicați un stil într-un mod privat, în raport cu o instanță separată a descriptorului, atunci pentru aceasta trebuie să utilizați atributul STYLE. Această tehnică vă permite să profitați din plin de stilurile oferite evitând obligația de a crea foi de stil. Utilizarea privată a stilurilor poate fi folosită chiar dacă pagina conține deja o foaie de stil internă sau un link către o foaie de stil externă. stilul privat are cea mai mare prioritate.

Exemplu:

atribut ID

Dacă vrei să aplici un stil la element individual Pagina web, trebuie să utilizați atributul ID.

Pentru a face acest lucru, trebuie să atribuiți un identificator etichetei elementului de pagină necesară. Puteți defini apoi în foaia de stil internă sau externă proprietățile a acestui element... Marcajele de formatare specificate vor fi instalate numai pentru elementul marcat cu identificatorul specificat.