Culoarea markerului Ul. Schimbați culoarea marcatorilor din lista HTML fără a utiliza intervalul

Dacă ați încercat vreodată să schimbați stilurile CSS ale numerelor de linii (cifre) în liste ordonate

, atunci probabil ați întâmpinat probleme. Este imposibil să ajungeți la stilurile acestor elemente folosind selectoare CSS. Dar, destul de des, designul interfeței implică schimbarea culorii, fundalului, dimensiunii, etc.

Iată cel mai simplu exemplu de listă fără stil:

html

1. Plantați un copac
2. Construiește o casă
3. Crește un fiu

Să ne uităm la mai multe moduri de a rezolva problema de mai sus.

În mod tradițional, un mod stângaci.

Modul tradițional de a rezolva această problemă este ascunderea numerelor de linie care sunt atribuite automat de browser. În acest caz, este utilizată proprietatea list-style: none; .

css

li( list-style: none; ) .num( culoare: alb; fundal: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; lățime: 40px; înălțime: 40px)

html

1. 1 Plantați un copac
2. 2 Construiește o casă
3. 3 Crește un fiu

De acord, pare redundant și inflexibil. Ascundem numerele de secvență atribuite automat și le înlocuim cu valori specificate manual, aglomeram aspectul etc.

Să vedem cum putem obține același rezultat fără a înfunda aspectul și a folosi pseudo-element::before și proprietățile CSS content , counter-increment , counter-reset .

Un mod frumos și corect.

Mai întâi vom furniza codul și demonstrația, apoi ne vom da seama ce este.

css

ol( counter-reset: myCounter; ) li( list-style: none; ) li:before (contor-increment: myCounter; content:counter(myCounter); culoare: alb; fundal: #2980B9; display: inline-block; aliniere text: margine: 5px 10px; înălțime linie: 40px;

html

1. Plantați un copac
2. Construiește o casă
3. Crește un fiu

După cum puteți vedea, codul html rămâne curat și frumos. În acest caz, toate stilurile elementelor listei sunt transferate în css.

Să privim punct cu punct:

• li::inainte– creează un pseudo-element în interiorul listei, care ia locul primului copil.
• counter-reset:myCounter;– resetează contorul myCounter css din fiecare
  .
  1. contra-increment: myCounter;– incrementează contorul css myCounter pentru fiecare pseudo-element::before .
  2. continut:counter(myCounter);– imprimă valoarea curentă a contorului myCounter în interiorul pseudo-elementului::before.

Mai multe detalii despre contoarele CSS pot fi găsite în

Pentru a distinge cumva liniile unei liste cu marcatori de textul principal, puteți face culoarea marcatorilor din listă diferită de culoarea textului.

Valoarea implicită este un punct negru. Dacă pur și simplu setați culoarea elementului li, atunci nimic nu va funcționa - culoarea va fi setată pe întreaga linie și trebuie doar să schimbați culoarea markerului (culoarea ul li a punctelor).

Cum se schimbă culoarea glonțului folosind CSS

1. Ascunderea marcatorilor listei originale folosind proprietatea tip-list-stil
2. Adăugarea propriilor markeri folosind un pseudo-element :înainte si proprietati conţinut. Acest lucru vă va permite să inserați orice text sau caracter înaintea elementului li.
3. Aspectul markerului poate fi controlat prin stiluri CSS, schimbând culoarea, fontul, fundalul și multe altele. Am folosit font Montserrat aldine.
li ( list-style-type: none; /* Ascunde markerii impliciti */ ) li:before ( font-family: "Montserrat", sans-serif; font-weight: 400; culoare: #d7002e; /* culoarea marcatorului * / conținut: " " /* Marker */ padding-right: 7px /* Indentare de la marcator la text */ )

Dacă aveți o situație în care marcatorii apar în locuri inutile, de exemplu în meniul principal sau într-un meniu duplicat în subsol, atunci acest lucru poate fi remediat cu ușurință. Doar adăugați un element părinte care conține liste ale căror culori de marcare trebuie să le schimbăm. Am adăugat cuvântul articol iar acum aceste modificări se aplică numai zonei de conținut a site-ului.

articol li (list-style-type: niciunul; /* Ascunde marcatorii impliciti */ ) articol li:before ( familia de fonturi: „Montserrat”, sans-serif; greutatea fontului: 400; culoare: #d7002e; /* Culoare marcator */ conținut: " "; /* Marcator */ padding-right: 7px; / * Indentarea de la marcator la text */ )

Putem combina list-style-image cu svg s, pe care le putem încorpora î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 numai următorul css:

Ul ( list-style-image: url("data:image/svg+xml, "); }

Dar acesta este doar începutul. Acest lucru ne permite să facem orice nebunie dorim cu aceste gloanțe. cercurile sau dreptunghiurile sunt ușoare, dar orice puteți desena cu un svg poate fi pus 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

Atribute latime/inaltime

În unele browsere pentru

Există două moduri populare de a schimba culoarea gloanțelor, astfel încât acestea să difere de culoarea textului.

Utilizare

În interiorul fiecărui element

1. investim , iar apoi plasăm textul în interiorul acestuia. Cu alte cuvinte, în locul schemei tradiționale

2. text

creați un design

3. text

În acest caz, culoarea marcajelor 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

• Vioară
• Chitară
• Cimpoiele
• Organ organ
• 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 voluminoase, deoarece acum va trebui să adăugați la fiecare element de listă .

Utilizare::inainte

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

4. . Mai mult, tipul de text (culoare, font, fundal etc.) poate fi controlat și prin stiluri, așa cum este demonstrat în exemplul 2.

   Exemplul 2: Utilizarea pseudo-elementului ::before

   • Nord
   • Sud
   • Vest
   • Orientul

   Rezultatul acestui exemplu este prezentat în Fig. 2.

   Puteți utiliza liste cu marcatori sau numerotate pentru a organiza textul sau pentru a afișa un proces secvenţial într-o prezentare 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

   Cea mai bună modalitate de a aplica stiluri de listă personalizate tuturor diapozitivelor dintr-o prezentare este să 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 din PowerPoint pe care le puteți utiliza în alte programe Office, cum ar fi 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 . Indentația 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 caracter?

   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.

   Utilizați marcatori sau numerotarea pentru a afișa mult text sau proces secvențial într-o prezentare Microsoft PowerPoint 2010.

   
   

   Utilizați marcatori sau numerotarea pentru a afișa mult text sau proces secvenţial într-o prezentare Microsoft Office PowerPoint 2007.