Ul boja markera. Promjena boje grafičkih oznaka u HTML popisu bez korištenja raspona

Ako ste ikada pokušali promijeniti CSS stilove brojeva redaka (znamenki) u uređenim popisima

, onda ste vjerojatno naišli na probleme. CSS selektorima nemoguće je doći do stilova ovih elemenata. Ali prilično često dizajn sučelja uključuje promjenu njegove boje, pozadine, veličine itd.

Evo najjednostavnijeg primjera nestilizirane liste:

html

1. Posadite drvo
2. Sagradite kuću
3. Odgajati sina

Pogledajmo nekoliko načina rješavanja gornjeg problema.

Tradicionalno nespretan način.

Tradicionalni način rješavanja ovog problema je skrivanje brojeva redaka koje preglednik automatski dodjeljuje. U ovom slučaju koristi se svojstvo list-style: none; .

css

li( list-style: none; ) .num( boja: bijela; pozadina: #2980B9; prikaz: inline-block; text-align: center; margina: 5px 10px; line-height: 40px; width: 40px; height: 40 px)

html

1. 1 Posadite drvo
2. 2 Sagradite kuću
3. 3 Odgajati sina

Slažem se, izgleda suvišno i nefleksibilno. Sakrivamo automatski dodijeljene redne brojeve i zamjenjujemo ih ručno određenim vrijednostima, zatrpavamo izgled itd.

Pogledajmo kako možemo postići isti rezultat bez začepljenja izgleda i korištenja pseudo-elementa::before i CSS svojstava content, counter-increment, counter-reset.

Lijep i ispravan način.

Prvo ćemo dati kod i demo, a onda ćemo shvatiti što je što.

css

ol( counter-reset: myCounter; ) li( list-style: none; ) li:before ( counter-increment: myCounter; content:counter(myCounter); boja: bijela; pozadina: #2980B9; display: inline-block; text-align: margin: 5px 10px; line-height: 40px;

html

1. Posadite drvo
2. Sagradite kuću
3. Odgajati sina

Kao što vidite, html kod ostaje čist i lijep. U ovom slučaju, sav stil elemenata popisa prenosi se u css.

Pogledajmo točku po točku:

• li::prije– stvara pseudoelement unutar liste, koji zauzima mjesto prvog djeteta.
• poništavanje brojača:mojBrojač;– resetira myCounter css brojač unutar svakog
  .
  1. protupovećanje: mojBrojač;– povećava css brojač myCounter za svaki pseudoelement::before.
  2. sadržaj:brojač(mojBrojač);– ispisuje trenutnu vrijednost brojača myCounter unutar pseudoelementa::before.

Više detalja o css brojačima možete pronaći u

Kako biste nekako razlikovali retke popisa s grafičkim oznakama od glavnog teksta, boju grafičkih oznaka na popisu možete razlikovati od boje teksta.

Zadana je crna točka. Ako jednostavno postavite boju na li element, tada ništa neće raditi - boja će biti postavljena na cijelu liniju, a vi samo trebate promijeniti boju markera (ul li boja točaka).

Kako promijeniti boju grafičkih oznaka pomoću CSS-a

1. Skrivanje izvornih oznaka popisa pomoću svojstva lista-stil-tip
2. Dodavanje vlastitih oznaka pomoću pseudoelementa :prije i svojstva sadržaj. To će vam omogućiti umetanje bilo kojeg teksta ili znaka prije elementa li.
3. Izgled markera može se kontrolirati pomoću CSS stilova, mijenjajući boju, font, pozadinu itd. Koristio sam podebljani font Montserrat.
li (list-style-type: none; /* Sakrij zadane markere */) li:before (font-family: "Montserrat", sans-serif; font-weight: 400; boja: #d7002e; /* Boja markera * / content: " " /* Marker */ padding-right: 7px; /* Uvlaka od markera do teksta */ )

Ako imate situaciju u kojoj se markeri pojavljuju na nepotrebnim mjestima, na primjer u glavnom izborniku ili u duplikatu izbornika u podnožju, to se lako može popraviti. Samo dodajte nadređeni element koji sadrži popise čije boje markera trebamo promijeniti. Dodao sam riječ članak i sada se ove promjene odnose samo na područje sadržaja stranice.

članak li ( list-style-type: none; /* Sakrij zadane oznake */ ) članak li:before ( font-family: "Montserrat", sans-serif; font-weight: 400; color: #d7002e; /* Boja markera */ content: " "; /* Marker */ padding-right: 7px; / * Uvlačenje od markera do teksta */ )

Možemo kombinirati list-style-image sa svg s, koji možemo ugraditi u css! Ova metoda nudi nevjerojatnu kontrolu nad "metcima" koji mogu postati bilo što.

Da biste dobili crveni krug koristite samo sljedeći css:

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

Ali ovo je tek početak. To nam omogućuje da s ovim mecima radimo bilo koju ludost koju želimo. krugovi ili pravokutnici su jednostavni, ali sve što možete nacrtati svg-om možete staviti tamo! Pogledajte primjer jabuke jabuke u nastavku:

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, "); }

• Veliki krugovi!
  • Veliki pravokutnici!
  • b
    • Mali krugovi!
    • c
      • Mali pravokutnici!
• Bikovi
• oči.
• Multi
• boja

Atributi širine/visine

U nekim preglednicima za

Postoje dva popularna načina za promjenu boje grafičkih oznaka tako da se razlikuju od boje teksta.

Korištenje

Unutar svakog elementa

1. ulažemo , a zatim u njega smjestimo tekst. Drugim riječima, umjesto tradicionalne sheme

2. tekst

izraditi dizajn

3. tekst

U ovom slučaju, boja markera određena je svojstvom stila boje za selektor li, a boja teksta određena je selektorom raspona (primjer 1).

Primjer 1: Korištenje ugniježđenih oznaka

• Violina
• Gitara
• Gajde
• Organ organ
• Celesta

Rezultat ovog primjera prikazan je u nastavku (slika 1).

Riža. 1. Markeri koji se bojom razlikuju od glavnog teksta

Unatoč svojoj jednostavnosti, metoda je nezgodna, posebno s voluminoznim popisima, jer sada ćete morati dodati svakoj stavci popisa .

Upotreba::prije

Poanta je sljedeća: uklanjamo izvorne markere popisa putem svojstva list-style-type i dodajemo vlastite markere pomoću pseudoelementa ::before i svojstva content. Ova poveznica omogućuje umetanje bilo kojeg teksta ili simbola ispred elementa, u ovom slučaju

4. . Štoviše, tip teksta (boja, font, pozadina itd.) također se može kontrolirati putem stilova, kao što je pokazano u primjeru 2.

   Primjer 2: Korištenje pseudoelementa ::before

   • Sjeverno
   • Jug
   • Zapad
   • Istočno

   Rezultat ovog primjera prikazan je na sl. 2.

   Možete koristiti popise s grafičkim oznakama ili numerirane popise za organiziranje teksta ili prikaz sekvencijalnog procesa u PowerPoint prezentaciji.

   

   Promjena boje i stila markera i razumijevanje ograničenja

   Možete promijeniti boju, stil ili veličinu grafičkih oznaka ili brojeva u svojoj PowerPoint prezentaciji, a možete promijeniti i broj s kojim želite započeti.

   

   Primijenite prilagođene stilove na više slajdova

   Najbolji način za primjenu prilagođenih stilova popisa na sve slajdove u prezentaciji je promjena master slajda. Sve postavke popisa koje napravite na masteru slajdova bit će spremljene i primijenjene na sve slajdove. Također možete urediti ili stvoriti jedan ili više izgleda slajdova koji uključuju prilagođene stilove popisa i dodati ih na mjesta u svojoj prezentaciji gdje želite koristiti svoje stilove popisa.

   Popis ograničenja u programu PowerPoint

   Ne možete raditi stvari s popisima u PowerPointu koje možete koristiti u drugim programima sustava Office, kao što je Word. Na primjer, PowerPoint ne podržava sljedeće značajke:

   Pitanja i odgovori

   Pritisnite naslov odjeljka u nastavku za detaljne upute.

   Zašto vidim samo jedan marker bez obzira na to koliko redaka dodam?

   Provjerite koristite li tekst polje su markeri ili brojevi, a ne polje titule. U tekst polje svaki put kada pritisnete tipku, pojavljuje se broj ili oznaka ENTER. Kada pritisnete CTRL+ENTER, dobit ćete dodatne retke bez grafičkih oznaka (za pojedinosti ili bilješke o retku s grafičkim oznakama ili numeriranom retku).

   
   

   Na terenu titule očekuje se da će tekst biti naslov ili naslov kao jedan redak. Možete koristiti brojeve ili grafičke oznake, ali će se svi reci teksta računati kao jedan redak, što će rezultirati jednom grafičkom oznakom ili brojem.

   Kako poništiti stvaranje markera svaki put kada se doda linija?

   Za prestanak stvaranja grafičkih oznaka i brojeva i povratak na tekst kliknite oznake ili numeriranje ponovno da biste ga onemogućili.

   Također možete pritisnuti ENTER i pritisnuti tipku BACKSPACE za brisanje oznake ili broja. Zatim možete dodati tekst ili pritisnuti Enter da dodate dodatne prazne retke.

   Kako koristiti više razina markera?

   Da biste stvorili podpopis unutar popisa, postavite pokazivač na početak retka koji želite uvući, a zatim na karticu Dom u grupi paragraf kliknite gumb povećati razinu popisa .

   

   1 . Smanji razinu popisa (uvlaka)

   2 . Povećaj razinu popisa (uvlaka)

   Za pomicanje teksta natrag na nižu razinu na popisu, postavite kursor na početak retka, a zatim na karticu Dom u grupi paragraf kliknite gumb smanjiti razinu popisa.

   Kako mogu povećati ili smanjiti razmak između grafičke oznake ili broja i teksta u retku?

   Da biste povećali ili smanjili razmak između grafičke oznake ili broja i teksta u retku, postavite pokazivač na početak retka teksta. Za prikaz ravnala, na kartici pogled u grupi Pokazati potvrdite okvir vladar. Na ravnalu kliknite karticu (kao što je prikazano na slici ispod) i povucite pokazivač kako biste promijenili udaljenost između grafičke oznake ili broja i odgovarajućeg teksta.

   Ravnalo prikazuje tri različita markera za označavanje uvlake definirane za tekstualno polje.

   

   1 . Uvlaka prvog retka - označava mjesto stvarnog znaka grafičke oznake ili broja. Ako odlomak nije označen grafičkim oznakama, to označava položaj prvog retka teksta.

   2 . Lijeva uvlaka - prilagođava vrijednosti prvog retka i markera uvlake i održava njihov relativni razmak.

   3 . izbočina - označava mjesto stvarnih redaka teksta. Ako odlomak nije označen grafičkim oznakama, on označava mjesto drugog retka (i sljedećih redaka) teksta.

   Kako mogu promijeniti zadane grafičke oznake u drugi znak?

   Da biste promijenili zadane grafičke oznake u programu PowerPoint na računalu sa sustavom Windows, slijedite ove korake:

   
   

   Kada umetnete slajd ili tekstualni okvir za grafičke oznake, pojavit će se nove zadane opcije grafičkih oznaka.

   Za više informacija o radu s matricama pogledajte Promjena matrice slajda.

   Koristite grafičke oznake ili numeriranje da biste prikazali puno teksta ili sekvencijalni proces u prezentaciji Microsoft PowerPoint 2010.

   
   

   Koristite grafičke oznake ili numeriranje da biste prikazali puno teksta ili sekvencijalni proces u prezentaciji Microsoft Office PowerPoint 2007.