Kako promijeniti marker na listi. Kako promijeniti boju markera html popisa pomoću CSS-a. Markeri s prije

CSS liste— skup svojstava odgovornih za dizajn popisa. Korištenje HTML popisa vrlo je uobičajeno pri izradi navigacijskih traka web stranice. Stavke popisa predstavljaju kolekciju blok elemenata.

Koristeći standardna CSS svojstva možete promijeniti izgled markera popisa, dodati sliku za marker, i promijeniti lokaciju markera. Visina bloka markera može se postaviti pomoću svojstva line-height.

Dizajniranje popisa pomoću CSS stilova

1. Tip markera popisa list-style-type

Svojstvo mijenja tip markera ili uklanja marker za popise s grafičkim oznakama i numerirane popise. Naslijeđeno.

Sintaksa

Ul (vrsta stila liste: ništa;) ul (vrsta stila liste: kvadrat;) ol (vrsta stila liste: ništa;) ol (vrsta stila liste: donja alfa;) Riža. 1. Primjer oblikovanja popisa s grafičkim oznakama i numeriranih popisa

2. Slike za stavke popisa list-style-image

Možete koristiti slike i gradijentne ispune kao oznake stavki popisa. Naslijeđeno.

Sintaksa

Ul (list-style-image: url("images/romb.png");) ul (list-style-image: linearni gradijent(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
Riža. 2. Dizajnirajte popis s grafičkim oznakama pomoću slike
Riža. 3. Dizajnirajte popis s grafičkim oznakama pomoću gradijenta

3. Lista-stil-pozicija

Ovo svojstvo pruža mogućnost postavljanja markera izvan ili unutar sadržaja stavke popisa. Naslijeđeno.

Danas bi svaka osoba trebala posjedovati računalne vještine i svladati barem minimalni skup programa. Standardni i najpopularniji uključuju Microsoft Word. Kada rade u Wordu, korisnici se suočavaju s potrebom da istaknu određene raspone teksta radi jasnoće. Vrlo često je potrebno umetnuti popis u dokument. To može biti popis s grafičkim oznakama ili numerirani - korisnik ima priliku kretati se prema situaciji.

Program vam omogućuje stvaranje bilo kakvih dokumenata, pisama i projekata, koristeći široke mogućnosti za učenje svih funkcija Microsoft Worda, morate potrošiti vrijeme, ali rezultat je vrijedan toga.

Popisi su potrebni kako bi tekst bio jasan i izražajan. Numerirani i označeni popisi na jednoj razini koriste se u većini dokumenata. U disertacijama i znanstvenim radovima koristi se višerazinska lista.

Numeriranje i oznake

Prije svega, morate odabrati paragrafe koji bi trebali biti oblikovani kao popis. To se može učiniti pomoću miša ili jednostavnim postavljanjem pokazivača na početak retka od kojeg počinje popis.

U MS Wordu postoji kartica "Početna", u kojoj možete odabrati željeni umetak u grupi "Odlomak". Korisnik klikne gumbe "Numeriranje" ili "Markeri", zatim koristi ravnalo za postavljanje uvlaka. Ova metoda je vrlo jednostavna i jasna, ali neiskusan korisnik može naići na skrivene poteškoće. Kada ponovno umetnete popise s grafičkim oznakama i numerirane popise, morat ćete ponovno urediti uvlake.

U slučaju kada je potrebno formatirati svaki popis zasebno i promijeniti parametre fonta, neće svaki korisnik programa moći ispraviti tekst, a štoviše, to će zahtijevati puno vremena i truda.

Numerirani popisi

Svaki element popisa označen je brojem, a numeriranje se automatski prilagođava. Za izradu i uređivanje popisa postoji gumb "Numeriranje" u grupi "Odlomak". Također možete koristiti funkciju "Numeriranje" u kontekstnom izborniku odabranog odlomka.

Opcije popisa:

• Format broja određuje koji će se znak pojaviti uz svaki element.
• Stil numeriranja može se odabrati ovisno o karakteristikama određenog dokumenta: arapski ili rimski brojevi, velika slova ili sl.
• Polje "Početna vrijednost" omogućuje odabir broja s kojim će započeti popis.
• U slučaju kada trebate izraditi sličan popis, ali ga ponovno numerirati, prikladno je koristiti funkciju "Pokreni novi popis". Potrebno je odabrati elemente i postaviti sve parametre.

Možete automatski umetnuti numerirani popis. Da biste to učinili, morate učiniti sljedeće:

• Na početku odlomka, prije unosa teksta, potrebno je staviti “1.”, zatim “Razmaknica” ili Tab. Odlomak će se pojaviti kao prva stavka na popisu.
• Dodavanjem odlomka ispred odlomka s "1)", a zatim pritiskom na razmaknicu ili tabulator, korisnik će stvoriti drugu vrstu popisa.
• Po analogiji se sastavljaju popisi sa slovima. U retke morate unijeti točku ili zagradu. Nakon svakog odlomka morate pritisnuti razmaknicu ili tabulator.

Automatski izradite popis s grafičkim oznakama

Popis s grafičkim oznakama možete umetnuti u Word na sljedeći način:

• Na početku odlomka morate upisati zvjezdicu ili znak veće od, a zatim pritisnuti razmaknicu ili tabulator.
• Automatski izradite popis s grafičkim oznakama. Možete ga omogućiti tako da odete na karticu "Datoteka" i odaberete grupu "Opcije". Na kartici "Pravopis" odaberite "Opcije automatskog ispravljanja". U odjeljku "AutoFormat" morate potvrditi okvire pored stilova.

Možete izraditi popis s grafičkim oznakama sljedećih vrsta:

Višerazinska lista

Označeni i numerirani popisi su elementi koje treba konfigurirati prema potrebi korisnika u određenom slučaju. Struktura se može uređivati ​​pomoću funkcije Define Multi-Level List. Zgodno je provjeriti kako su svi popisi prikazani u grupi "Popisi u dokumentima". Za promjenu postavki fonta za svaki pojedinačni font, višerazinski popis povezan je sa stilovima odlomaka.

Ključne opcije za postavljanje popisa na više razina

Prilikom postavljanja liste, koja se sastoji od nekoliko razina, morate obratiti pozornost na sljedeće parametre:

• Odabir razine i primjer njenog dizajna.
• Definiranje postavki fonta; ako je potrebno, možete postaviti konstantan dio broja.
• Odaberite vrstu numeriranja: simbol, slika, slova i druge opcije.
• Određivanje razine na kojoj se numeriranje ažurira.
• Definirajte uvlačenje i položaj teksta.
• Dodatne mogućnosti uređivanja.
• Odgovarajući stil odlomka i višerazinski popis.

Postavke koje su jednom stvorene mogu se automatski primijeniti na naredne popise. Ali ako postoji potreba za uređivanjem, morat ćete raditi sa svakim popisom zasebno. Ova se neugodnost može činiti beznačajnom, ali ako u tekstu postoji veliki broj popisa, oblikovanje će potrajati puno vremena.

Kako promijeniti stil markera?

Klikom na gumb "Markeri" možete odabrati opciju koja je prikladna u ovom slučaju. Da biste to učinili, idite na područje "Knjižnica" i kliknite na njega. Vrsta numeriranja odabire se na isti način: u području “Biblioteka numeriranja”.

Da biste numerirani popis ili popis s grafičkim oznakama pretvorili u tekst u Wordu, samo trebate pritisnuti odgovarajući gumb.

Svaki element teksta može se označiti posebnim markerom. Za formatiranje popisa prema zahtjevima određenog dokumenta morate odabrati naredbu “Definiraj novi marker”.

Nakon savladavanja svih značajki Microsoft Worda, rad s dokumentima bit će zadovoljstvo i nećete morati trošiti puno vremena na oblikovanje teksta. Popis s grafičkim oznakama, poput numeriranog, uključen je u gotovo svaki dokument i često se koristi, pa će korisniku programa biti korisno upoznati se s izradom popisa različitih vrsta.

Korištenje dijaloškog okvira Popis Možete promijeniti sljedeće opcije popisa s grafičkim oznakama:

Marker znak za bilo koji znak iz fontova instaliranih na računalu.

Veličina izbočine.

Udaljenost između simbola grafičke oznake i teksta.

Poravnanje.

U te svrhe morate ući u izbornik Format – popis i pritisnite tipku Promijeniti, nakon čega će se otvoriti dijaloški okvir Uredite popis s grafičkim oznakama, predstavljen na Sl. 4.25.

Riža. 4.25. Dijaloški prozor Uredite popis s grafičkim oznakama

Ispod je popis njegovih opcija:

Promjena formata numeriranog popisa

Na kartici se stvaraju numerirani popisi Numerirano(Slika 4.24). Ako predloženi formati numeriranog popisa nisu prikladni za dizajn određenog dokumenta, možete izraditi vlastiti format popisa klikom na gumb Promijeniti u dijaloškom okviru Popis na kartici Numerirano. Ovo će otvoriti dijaloški prozor Promijenitinumeriranpopis(Slika 4.26).

Riža. 4.26. Dijaloški prozor Uredite numerirani popis

Ispod su opcije u ovom dijaloškom okviru koje vam omogućuju promjenu formata numeriranog popisa.

Izrada popisa na više razina

Složenije vrste popisa nalaze se u mnogim vrstama dokumenata. To su tzv više razina popisi. Također koriste oznake ili numeriranje, a ponekad i kombinaciju oba. Ali njihova glavna razlika od prethodnih vrsta popisa je prisutnost nekoliko razina. Ovisno o razini, svakom se odlomku dodjeljuje simbol ili broj.

Riža. 4.27. Tab Više razina dijaloški okviri Popis.

Popisi s više razina razlikuju se od običnih popisa po prisutnosti uvlaka. Kao razina takvog popisa uzima se određena uvlaka.

Stvaranje višerazinskog popisa moguće je samo pomoću dijaloškog okvira Popis. Štoviše, razine postavlja sam izvođač, postavljajući određene alineje. Word analizira uvlake i, ovisno o njihovoj veličini, numerira ih, stvarajući razine.

Možete stvoriti modificirane formate numeriranja za različite razine višerazinskog popisa, ali samo jedan višerazinski format dopušten je po dokumentu.

Za izradu višerazinskog popisa morate izvršiti sljedeće korake:

1. Odredite fragment dokumenta koji bi trebao biti oblikovan kao popis.

2. Napravite uvlake za svaki odlomak pomoću gumba Povećanje uvlake na alatnoj traci Oblikovanje(ne možete koristiti tabulatore pri stvaranju uvlaka).

3. Odaberite odabrani fragment teksta.

4. Odaberite tim Format–Popis. U dijaloškom prozoru Popis idi na karticu Više razina(Slika 4.27).

5. Odaberite željenu vrstu višerazinskog popisa iz predloženih opcija. Klik u redu.

Danas ćemo shvatiti kako se stvaraju popisi na web stranici, koji se markeri koriste i testirati različite stilove za promjenu izgleda.

Dopustite da vas podsjetim kako su stilovi povezani s HTML stranicom:

Postoje popisi s grafičkim oznakama ili neuređeni css i numerirani.

Popis oznaka su slike različitih oblika: krugovi, kvadrati, čavke i slično. Zovu se i meci. Također možete koristiti vlastite crteže kao oznake za popis.

Numerirani popis predstavlja izlaz informacija označenih brojevima 1, 2, 3 itd.

Tipično, markeri su jednostavni crni krugovi, što je poznato korisniku, ali s druge strane, ne privlače puno pozornosti na tekst.

Ako odlučite ove šalice zamijeniti dizajnerskima, onda morate svladati stiliziranje popisa pomoću css-a. Što ćemo danas raditi?

Osnova bilo kojeg popisa sastoji se od sljedećeg koda web stranice:

• Prvi element liste
• Drugi element liste
• Zadnji element liste

Ovaj blok izgleda ovako:

• Prvi element liste
• Drugi element liste
• Zadnji element liste

CSS stil popisa markera

Zapisat ćemo vanjski izlaz u datoteku stila stil.css. Može se zvati drugačije, ali imati ekstenziju .css.

Standardni CSS markeri: krug (krug) - nepopunjeni krug, točka (disk) - ispunjeni krug, kvadrat (kvadrat) - ispunjeni kvadrat.

Generira popis u css kodu ul- uz njegovu pomoć postavljamo koji će od standardnih markera biti prikazan na stranici.

Na primjer, prikažimo popise pomoću kruga. Unos u css datoteci bit će ovakav:

Ul (list-style-type: krug)

Ali često je potrebno zamijeniti oznake ne u svim prikazanim popisima, već samo u određenim blokovima. Na primjer, promijenite u postovima, ali ne i u komentarima. U ovom slučaju ul kod ne bi trebao imati nikakvo značenje, a stil kruga trebao bi biti naveden samo za popise u objavama. Ovako kod izgleda bez vrijednosti:

Ul (list-style-type: ništa)

Ako ne možete pronaći kod u css datoteci odgovoran za prikaz popisa u bloku koji vam je potreban, tada upotrijebite dodatak za Firefox - Firebug ili u Google Chromu, desnom tipkom miša kliknite web stranicu bloga. Zatim "pogledajte kod elementa".

Na primjer, jedna od opcija za promjenu izgleda popisa u objavama u standardni krug, ako nema sadržaja za blok ul:

Post-sadržaj ul (list-style-type: circle)

Ili drugi primjer:

#content-blok ul(list-style-type:square)

Kompletan tečaj “Css praksa”

]]> ]]>

Poznavanje CSS-a neophodno je svakom webmasteru, jer je to univerzalni način za izradu kvalitetnog dizajna bez preopterećenja koda stranice.

Za one koji žele vrlo brzo naučite trikove stiliziranja css-a, ]]> preporučiti ]]> napredni tečaj "CSS praksa" Evgenija Popova.

Sljedeći članci:

Grafički markeri za popis.

Uvlaka popisa css.

Kako promijeniti css boju popisnog markera tako da se njegova boja razlikuje od boje teksta.

Ugniježđene liste. Kako napraviti horizontalnu listu u cssu. Promjena stila numeriranih popisa.

Preuzmite prekrasne oznake za popise stranica.

Korištenje popisa u članku ima pozitivan učinak i na SEO i na korisničku percepciju informacija. Postoji mnogo načina za lijep prikaz markera (sa slikom ili pomoću CSS-a). Pogledat ćemo prilično jednostavnu, ali elegantnu metodu mijenjanja oznaka popisa pomoću CSS-a.

Kako izgleda?

U ovom slučaju ne možemo bez novih tehnologija, naime CSS3 s podrškom za prethodnu pseudoklasu. Koristeći samo stilove i osnovni HTML izgled, transformirat ćemo dosadne standardne oznake koje ne zadovoljavaju moderne standarde.

U prvom slučaju koristit ćemo popis s grafičkim oznakama koji nam nudi oznaka

:
• Što imamo.
• Nije loše, zar ne?

Prema tome, u drugom slučaju, numerirani popis iz oznake

:
1. Lijevo od teksta nalazi se broj.
2. Nastavak liste za broj polja koja su nam potrebna.

Elementi su na istoj udaljenosti od početka tekstualnog bloka, što im daje dodatni šarm.

Lijep popis s grafičkim oznakama

Kao simboli mogu se koristiti različita značenja. Dovoljno je unijeti novi kod u svojstvo sadržaja.

HTML

• Element 1
• Element 2

CSS

ul ( list-style-type: none; ) ul li:before ( content: "\203A "; padding-right: 6px; font-size: 16px; color: #00bf80; font-weight: bold; )

Lijepa numerirana lista

Pomoću numeriranog popisa možete lijepo dizajnirati blok teksta na stranici ili stvoriti nešto zgodno i razumljivo, kao na početku ovog materijala.

HTML

1. Element 1
2. Element 2

CSS

ol ( margin-left: 63px; list-style-type: none; counter-reset: li; ) ol li:before ( content: counter(li); counter-increment: li 1; padding: 0px 6px; margin-left : -28px; veličina fonta: 12px; boja pozadine: #00bf80;

Ispravno formatirajte svoje članke kako korisnik ne bi povećao stopu odstupanja.