li css culoare. Adăugați marcatori sau numerotare textului

Proprietatea list-style-position specifică dacă marcatorul trebuie poziționat în interiorul sau în afara elementelor listei. Această proprietate poate lua două valori:

• exterior - marcatorul este situat în stânga conținutului (acesta este implicit)
• interior - marcatorul se află în interiorul articolului din listă împreună cu conținutul

Acum puteți rescrie exemplul anterior, astfel încât indentarea din partea stângă să fie eliminată, dar marcatorii nu ies de la marginea browserului:

• Cafea
• Ceai

• Cafea
• Ceai

• Cafea
• Ceai

În exemplu, un chenar a fost adăugat fiecărui element din listă pentru a afișa vizual limitele elementelor din listă.

Acest articol tutorial va acoperi lucrul cu liste în CSS, veți învăța cum să schimbați tipul de marcator, poziția marcatorului în raport cu elementul din listă, să vă creați propriile marcatori și chiar să schimbați culoarea marcatorului.

Cred că știți deja că HTML 5 utilizează două tipuri principale de liste (excluzând listele de descriere și elementele de meniu):

• lista numerotata (ordonata) - element HTML
  1. lista cu marcatori (neordonate) – element HTML

     CSS ne oferă o mulțime de opțiuni pentru formatarea aspectului acestor liste, să ne uităm la cele principale.

     Schimbarea tipului de marker

     Prima proprietate pe care aș dori să o iau în considerare este această proprietate list-style-type , aceasta specifică tipul marcatorului articolului din listă.

     Meniurile de navigare, de exemplu, sunt adesea formate din liste obișnuite cu marcatori (element HTML

     ), în mod implicit al cărui marcator este afișat sub forma unui cerc umplut, pentru a-l elimina trebuie să utilizați proprietate CSS m list-style-type cu valoarea none :
     ul(tip-listă-stil: niciunul; /* eliminați marcatorul din listă */ }

     Pentru listele cu marcatori (neordonate) (element HTML

     ) există trei tipuri de marcatori: sub formă de cerc umplut (discul este valoarea implicită), un marker sub formă de cerc gol (cerc) și sub formă de pătrat (pătrat) și pentru numerotate ( ordonate) liste (articol
     ) toate opțiunile rămase. Lista completă este prezentată în următorul tabel:

     Sens	Descriere
     nici unul Element din listă Element din listă Element din listă	Marcatorul nu este afișat.
     disc Element din listă Element din listă Element din listă	Un marker în formă de cerc umplut. Aceasta este valoarea implicită.
     armean Element din listă Element din listă Element din listă	Marcator numeric (numerotare tradițională armeană).
     cerc Element din listă Element din listă Element din listă	Marker în formă de cerc.
     cjk-ideografice Element din listă Element din listă Element din listă	Numere ideografice simple.
     zecimal Element din listă Element din listă Element din listă	Marcator numeric (numere arabe zecimale care încep cu 1).
     zecimal-înainte-zero Element din listă Element din listă Element din listă	Marcator numeric (numere arabe zecimale care încep cu 1 și urmate de un zero înainte - 01, 02, 03...).
     georgian Element din listă Element din listă Element din listă	Marcator numeric (numerarea tradițională georgiană - an, ban, gan, ..., he, tan, in, in-an...).
     ebraică Element din listă Element din listă Element din listă	Marcator numeric (numerotare tradițională ebraică).
     hiragana Element din listă Element din listă Element din listă	Marker numeric (silabar japonez Hiragana - a, i, u, e, o, ka, ki...).
     hiragana-iroha Element din listă Element din listă Element din listă	Marker numeric (silabar japonez Hiragana Iroha - i, ro, ha, ni, ho, he, to, ...).
     katakana Element din listă Element din listă Element din listă	Marker numeric (silabar japonez Katakana - A, I, U, E, O, KA, KI, ...).
     katakana-iroha Element din listă Element din listă Element din listă	Marker numeric (silabar japonez Katakana iroha - I, RO, HA, NI, HO, HE, TO, ...).
     alfa inferior Element din listă Element din listă Element din listă	Litere ascii mici (a, b, c, d...z).
     greacă inferioară Element din listă Element din listă Element din listă	Litere grecești mici (α, β, γ, δ etc.).
     latină inferioară Element din listă Element din listă Element din listă	Litere latine mici (a, b, c, d,...z).
     inferior-roman Element din listă Element din listă Element din listă	numere romane în litere mici(i, ii, iii, iv, v etc.).
     pătrat Element din listă Element din listă Element din listă	Marker în formă de pătrat.
     alfa superioară Element din listă Element din listă Element din listă	Litere ascii majuscule (A, B, C, D,...Z).
     super-latină Element din listă Element din listă Element din listă	Litere mari latine (A, B, C, D,...Z).
     super-romantic Element din listă Element din listă Element din listă	Cifre romane cu litere mari (I, II, III, IV, V etc.).

     Vă rugăm să rețineți că valorile hebrew , cjk-ideographic , hiragana , hiragana-iroha , katakana , katakana-iroha nu sunt acceptate de browser Internet Explorer .

     Să ne uităm la un exemplu de utilizare a proprietății list-style-type în text:

     /* listă cu valoarea implicită a tipului de marcator (disc). */
     • Element din listă
     • Element din listă
     • Element din listă
     /* listă numerotată cu tip marker inferior-roman */
     1. Element din listă
     2. Element din listă
     3. Element din listă
     /* listă cu marcatori cu cerc tip marcator */
     • Element din listă
     • Element din listă
     • Element din listă

     În acest exemplu, am creat două stiluri, primul setează tipul de marcator - cifre romane cu litere mici (valoarea romană mai mică), l-am aplicat unei liste numerotate (element HTML

     ), și la o listă cu marcatori (element HTML
     ) am aplicat un stil care stabilește ca tipul de marker să fie un cerc gol (cerc de valoare).

     Rezultatul exemplului nostru:

     Vă rugăm să rețineți că puteți aplica proprietatea list-style-type chiar și unui singur element de listă (element HTML

     • ) pentru a vă seta tipul de marcator sau pentru a crea stiluri care vor aplica un anumit marcator elementelor de listă pare sau impare, așa cum se vede în exemplul următor:
       • Element din listă
       • Element din listă
       • Element din listă
       • Element din listă
       • Element din listă
       • Element din listă
       • Element din listă
       • Element din listă

       În acest exemplu am stilizat totul ciudat elemente de listă - a indicat tipul de marker pătrat, iar culoarea textului a fost indicată verde. Chiar Elementele listei au primit următorul stil: roşu culoarea textului și absenta marker.

       Rezultatul exemplului nostru:

       Poziția marcatorului față de elementul din listă

       Rezultatul exemplului nostru:

       Orez. 71 Un exemplu de utilizare a proprietății list-style-position (locația marcatorului / numărului în liste).

       Creează-ți propriile markere

       Mai devreme sau mai târziu va trebui să creați marcatori de listă cu propriul design, datorită proprietății CSS list-style-image putem implementa această dorință în proiectul dumneavoastră.

       Sintaxa proprietății este următoarea:

       ol( list-style-image : url("imagini/primer.png"); /* specifica calea relativa catre imagine */ } ul( lista-stil-imagine : ; /* specifica calea absoluta catre imagine */ }

       Valoarea dintre paranteze corespunde căii către imaginea pe care intenționați să o utilizați ca marcator. Calea către imagine poate fi absolută sau relativă. Când specificați o cale relativă, punct important asta este trebuie specificat în raport cu plasarea foii de stil, nu pentru pagină.

       Dacă intenționați să vă proiectați propriile markere, atunci va trebui să utilizați un program de editare grafică sau să utilizați deja un seturi gata făcute. Vă rugăm să rețineți că, chiar dacă ați făcut totul corect, este posibil ca imaginea să nu se încarce pe pagină, în acest caz, trebuie să editați imaginea, astfel încât fundalul să devină transparent;

       Să ne uităm la un exemplu de utilizare a marcatorilor personalizați într-un document:

       .test(listă-stil-imagine: url("http://site/images/mini5.png"); /* specifică calea absolută către imagine care va fi folosită ca marker */ }
       • Element din listă
       • Element din listă
       • Element din listă

       În acest exemplu precizăm cale absolută la imaginea care va fi folosită ca marker.

       Rezultatul exemplului nostru:

       Schimbarea culorii markerului în CSS

       Pentru a încheia acest articol, să ne uităm la o modalitate avansată de a schimba culoarea markerului fără a schimba culoarea elementului, cu folosind CSS proprietatea de conținut și pseudo-elementul discutat anterior :before:

       • Element din listă
       • Element din listă
       • Element din listă

       Esența acestei metode este că înainte de fiecare element al listei (element HTML

     • ) inserați un conținut generat de pseudo-element (:înainte) (conținutul proprietății CSS), care este identic în aspect marker într-o listă cu marcatori (element HTML
       ), doar culoarea deja necesară sarcinii noastre.

       Vă rugăm să rețineți că în acest exemplu a fost folosită proprietatea padding-right, care ne-a permis să facem o indentație internă la dreapta în fiecare element de listă (element HTML

       • ). Dacă în în acest caz, Dacă nu aplicați această proprietate, markerul va fi poziționat aproape de text, ceea ce este neatractiv din punct de vedere vizual. Lucrul cu interne și marginile externe elementele vor fi discutate în detaliu în următorul articol al manualului „”.

         Întrebări și sarcini pe această temă

         Înainte de a trece la subiectul următor, finalizați sarcinile practice:

         
         

         Dacă întâmpinați dificultăți la finalizare sarcină practică Puteți oricând deschide exemplul într-o fereastră separată și inspectați pagina pentru a înțelege ce cod CSS a fost folosit.

         2016-2019 Denis Bolshakov, puteți trimite comentarii și sugestii cu privire la activitatea site-ului la [email protected]

         Sarcină

         Setați culoarea marcatorilor din listă fără a schimba culoarea textului.

         Soluţie

         Există două moduri de a schimba culoarea markerilor, să le numim simple și complicate. O metodă simplă este de a intra

       • adăugați o etichetă , iar apoi plasăm textul în interiorul acestuia. Cu alte cuvinte, în locul schemei tradiționale
       • text
       creați un design
       • text
       . În acest caz, culoarea marcatorilor este determinată de proprietatea stilului de culoare pentru selectorul LI, iar culoarea textului este determinată de selectorul SPAN (exemplul 1).

       Exemplul 1: Utilizarea etichetelor imbricate

       HTML5 CSS 2.1 IE Cr Op Sa Fx

       • Vioară
       • Chitară
       • Cimpoiele
       • Flaşnetă
       • Celesta

       Rezultatul acestui exemplu este prezentat mai jos (Figura 1).

       Orez. 1. Marcatori care diferă ca culoare față de textul principal

       În ciuda simplității sale, metoda este incomodă, mai ales în cazul listelor mari, deoarece acum va trebui să adăugați o etichetă la fiecare element din listă. . Prin urmare, să ne uităm la o metodă inteligentă bazată în întregime pe CSS.

       Internet Explorer	Chrome	Operă	Safari	Firefox	Android	iOS
       8.0+	1.0+	7.0+	3.1+	1.0+	1.0+	1.0+

       Ideea este aceasta: eliminăm marcatorii de listă inițiali prin proprietatea list-style-type și adăugăm propriile noștri marcatori folosind pseudo-elementul :before și proprietatea conținut. Acest link vă permite să inserați orice text sau simbol înaintea unui element, în acest caz LI . Mai mult, tipul de text (culoare, font, fundal etc.) poate fi controlat și prin stiluri, așa cum este demonstrat în exemplul 2. Aici simbolul paragraf ¶ este folosit ca marcatori.

       Exemplul 2: Utilizarea pseudo-elementului:before

       HTML5 CSS 2.1 IE Cr Op Sa Fx

       • Nord
       • Sud
       • Vest
       • Orientul

       Rezultatul acestui exemplu este prezentat în Fig. 2.

       

       Orez. 2. Markere create folosind stiluri

       
       
       

       Schimbați culoarea marcatorilor din lista HTML fără a utiliza intervalul (6)

       Pentru mine, cea mai bună opțiune este să folosesc pseudo elemente CSS, așa că pentru disc bullet disc ar arăta astfel:

       ul ( list-style-type: none; ) li (poziție: relativ; ) li:before (conținut: ""; afișare: bloc; poziție: absolut; lățime: 5px; /* ajustați în funcție de nevoile dvs. */ înălțime: 5px; /* ajustați pentru a se potrivi nevoilor dvs. */ border-radius: 50% /* ajustați în funcție de nevoile dvs. */ top: 0.5em;

       • primul
       • doilea
       • treilea
       • lățimea și înălțimea ar trebui să fie egale pentru a menține indicatoarele rotunjite
       • puteți seta raza de frontieră la zero dacă doriți să aveți gloanțe pătrate

       Pentru mai multe stiluri de marcatori, puteți folosi alte forme CSS https://css-tricks.com/examples/ShapesOfCSS/ (alegeți-o pe aceasta care nu necesită pseudo elemente precum triunghiuri)

       Mă întrebam dacă există o modalitate de a schimba culoarea gloanțelor din listă.

       am o lista:

       • Casa
       • Grădină

       Nu este posibil să inserați nimic în li, cum ar fi „span” și „p”. Pot schimba culoarea gloanțelor, dar nu și textul într-un mod inteligent?

       Dacă poți folosi o imagine, o poți face. Și fără o imagine, nu veți putea schimba culoarea glonțului, nu textul.

       Folosind o imagine

       Li ( list-style-image: url(images/yourimage.jpg); )

       Fără a folosi o imagine

       Apoi trebuie să editați marcajul HTML și să includeți intervalul în interiorul listei și să colorați atât intervalul, cât și intervalul cu culori diferite.

       Mi-a plăcut foarte mult și răspunsul lui Mark - am nevoie de un set de UL de diferite culori și, evident, ar fi mai ușor să folosesc doar o clasă. Iată ce am folosit pentru portocală, de exemplu:

       Ul.orange (stil listă: niciunul; padding: 0px; ) ul.orange > li:before (conținut: „\25CF”; dimensiunea fontului: 15px; culoare: #F00; margine-dreapta: 10px; padding: 0px ;linie-inaltime: 15px;

       De asemenea, am descoperit că codul hexadecimal pe care l-am folosit pentru „conținut:” era diferit de cel al lui Marc (cercul acela hexagonal mi s-a părut prea înalt, mi se pare că stă perfect la mijloc, am găsit și alte câteva forme (pătrate, triunghiuri). , cercuri etc.)

       Putem combina list-style-image cu svg-uri pe care le putem încorporați în css! Această metodă oferă un control incredibil asupra „gloanțelor” care pot deveni orice.

       Pentru a obține un cerc roșu, utilizați următorul CSS:

       "); }

       Dar acesta este doar începutul. Acest lucru ne permite să facem orice nebunie dorim cu aceste gloanțe. cercurile sau dreptunghiurile sunt ușor, dar orice puteți desena cu svg, puteți merge acolo! Vedeți exemplul de măr de mai jos:

       ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ( list-style-image: url ("data:image/svg+xml, "); ) ul ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul.bulls-eye ( list-style-image: url("data:image/svg+xml, "); ) ul.multi-color ( list-style-image: url("data:image/svg+xml, "); }

       • Cercuri mari!
         • Dreptunghiuri mari!
         • b
           • Cercuri mici!
           • c
             • Dreptunghiuri mici!
       • Taurii
       • ochi.
       • Multi
       • culoare

       Atribut lățime/înălțime

       Unele browsere necesită setarea atributelor de lățime și înălțime

       Codificări

       Bazându-ne atât pe soluțiile lui @Marc, cât și pe cele ale @jessica, aceasta este soluția pe care o folosesc:

       Li (poziția:relativ; ) li:before (conținut:""; afișare: bloc; poziție: absolut; lățime: 6px; înălțime:6px; chenar-rază:6px; stânga: -20px; sus: .5em; fundal- culoare: #000;

       Eu folosesc em pentru dimensiunile fontului, așa că dacă setați partea de sus la .5em, acesta va fi întotdeauna plasat în mijlocul primului rând de text. Am folosit left:-20px deoarece aceasta este poziția implicită left:-20px în browsere: parent padding/2

       Știu că aceasta este o întrebare cu adevărat, foarte veche, dar mă jucam cu asta și am venit cu o modalitate pe care nu o văzusem. Dați listei o culoare, apoi înlocuiți culoarea textului cu ::first-line selector::first-line . Nu sunt un expert, așa că poate fi ceva în neregulă cu această abordare care îmi lipsește, dar pare să funcționeze.

       li (culoare: albastru; ) li::prima linie (culoare: negru; )

       • Casa
       • Grădină

       Puteți utiliza liste cu marcatori sau numerotate pentru a organiza textul sau pentru a afișa un proces secvenţial Prezentări PowerPoint.

       

       Schimbarea culorii și stilului markerilor și înțelegerea limitărilor

       Puteți schimba culoarea, stilul sau dimensiunea marcatorilor sau numerelor din prezentarea PowerPoint și, de asemenea, puteți schimba numărul cu care doriți să începeți.

       

       Aplicați stiluri personalizate pentru mai multe diapozitive

       Cel mai bun mod Aplicați stiluri de listă personalizate tuturor diapozitivelor dintr-o prezentare - schimbați masterul de diapozitive. Orice setări de listă pe care le faceți pentru slide master vor fi salvate și aplicate tuturor diapozitivelor. De asemenea, puteți edita sau crea unul sau mai multe machete de diapozitive care includ stiluri de listă personalizate și să le adăugați în locurile din prezentarea dvs. unde doriți să utilizați stilurile listei.

       Listează limitări în PowerPoint

       Nu puteți face lucruri cu liste în PowerPoint pe care le puteți utiliza în alții Programe de birou, de exemplu Word. De exemplu, PowerPoint nu acceptă următoarele caracteristici:

       Întrebări și răspunsuri

       Faceți clic pe titlul secțiunii de mai jos pentru instrucțiuni detaliate.

       De ce văd un singur marcator, indiferent de câte linii adaug?

       Asigurați-vă că utilizați text câmpul este marcatori sau numere, nu un câmp titluri. ÎN text câmp de fiecare dată când apăsați o tastă, apare un număr sau un marcator ENTER. Când apăsați CTRL+ENTER, obțineți linii suplimentare fără marcatori (pentru detalii sau note pe o linie cu marcatori sau numerotate).

       
       

       În câmp titluri textul este de așteptat să fie un titlu sau un titlu pe o singură linie. Puteți folosi numere sau marcatori, dar veți număra toate liniile de text ca o singură linie, rezultând un marcator sau număr.

       Cum se anulează crearea de marcatori de fiecare dată când se adaugă o linie?

       Pentru a opri crearea de marcatori și numere și pentru a reveni la text, faceți clic markere sau numerotare din nou pentru a-l dezactiva.

       De asemenea, puteți apăsa ENTER și apăsați tasta BACKSPACE pentru a șterge un marcator sau un număr. Apoi puteți adăuga text sau apăsați Enter pentru a adăuga linii goale suplimentare.

       Cum să folosiți mai multe niveluri de markere?

       Pentru a crea o sublistă într-o listă, plasați cursorul la începutul liniei pe care doriți să o indentați, apoi pe fila Acasăîn grup paragraf faceți clic pe butonul crește nivelul listei .

       

       1 . Reduceți nivelul listei (indentare)

       2 . Măriți nivelul listei (indentare)

       Pentru a muta textul înapoi la un nivel inferior în listă, plasați cursorul la începutul liniei și apoi pe filă Acasăîn grup paragraf faceți clic pe butonul reduce nivelul listei.

       Cum pot mări sau micșora spațiul dintre un marcator sau un număr și textul de pe o linie?

       Pentru a mări sau micșora spațiul dintre un marcator sau un număr și textul de pe o linie, plasați cursorul la începutul liniei de text. Pentru a vizualiza rigla, pe fila vedereîn grup Spectacol bifați caseta riglă. Pe riglă, faceți clic pe fila (așa cum se arată în imaginea de mai jos) și trageți indicatorul pentru a modifica distanța dintre marcator sau număr și textul corespunzător.

       Rigla afișează trei marcaje diferite pentru a indica indentarea definită pentru câmpul de text.

       

       1 . Indentarea primului rând - indică locația caracterului sau a numărului marcant. Dacă un paragraf nu este marcat cu marcatori, aceasta indică poziția primului rând de text.

       2 . Left Indent - Ajustează valorile atât pentru prima linie, cât și pentru marcatorii de indentare și menține distanța relativă a acestora.

       3 . proeminență - indică locația liniilor reale de text. Dacă un paragraf nu este marcat cu marcatori, acesta indică locația celei de-a doua rânduri (și rândurile ulterioare) de text.

       Cum pot schimba marcatoarele implicite cu un alt simbol?

       Pentru a schimba marcatoarele implicite în PowerPoint pe un computer Windows, urmați acești pași:

       
       

       Când inserați un diapozitiv sau o casetă de text pentru marcatori, vor apărea noi opțiuni implicite pentru marcatori.

       Pentru mai multe informații despre lucrul cu master, consultați Schimbarea unui master de diapozitive.

       Folosiți marcatori sau numerotarea pentru a afișa cantitati mari text sau proces secvenţial în Microsoft PowerPoint prezentare 2010.