Kako promijeniti marker na listi. Kako promijeniti boju markera html liste koristeći CSS. Markeri sa prije

CSS liste— skup svojstava odgovornih za dizajn lista. Korištenje HTML lista je vrlo uobičajeno prilikom kreiranja navigacijskih traka na web stranici. Stavke liste predstavljaju kolekciju blok elemenata.

Koristeći standardna CSS svojstva možete promijenite izgled markera liste, dodajte sliku za marker, i promijeniti lokaciju markera. Visina bloka markera može se podesiti pomoću svojstva line-height.

Dizajniranje lista koristeći CSS stilove

1. Tip markera liste lista-stil-tip

Svojstvo mijenja tip markera ili uklanja marker za liste sa nabrajanjem i brojevima. Naslijeđeno.

Sintaksa

Ul (tip-stil-liste: nema;) ul (tip-stil-liste: kvadrat;) ol (tip-stil-liste: nema;) ol (tip-stil-liste: niži-alfa;) Rice. 1. Primjer dizajniranja lista sa nabrajanjem i brojevima

2. Slike za stavke liste lista-stil-slika

Možete koristiti slike i gradijentne ispune kao markere stavki liste. Naslijeđeno.

Sintaksa

Ul (list-style-image: url("images/romb.png");) ul (list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
Rice. 2. Dizajnirajte listu sa nabrajanjem koristeći sliku
Rice. 3. Dizajnirajte listu sa nabrajanjem koristeći gradijent

3. Pozicija u stilu liste

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

Danas bi svaka osoba trebala posjedovati kompjuterske vještine i savladati barem minimalni set programa. Standardni i najpopularniji uključuju Microsoft Word. Kada rade u Wordu, korisnici se suočavaju s potrebom da istaknu određene opsege teksta radi jasnoće. Vrlo često je potrebno ubaciti listu u dokument. Ovo može biti lista sa nabrajanjem ili numerisana - korisnik ima priliku da se kreće u skladu sa situacijom.

Program vam omogućava da kreirate bilo koje dokumente, pisma i projekte, koristeći široke mogućnosti za učenje svih funkcija Microsoft Worda, trebate potrošiti vrijeme, ali rezultat je vrijedan toga.

Liste su neophodne da bi tekst bio jasan i izražajan. U većini dokumenata koriste se numerisane i označene liste na jednom nivou. U disertacijama i naučnim radovima koristi se lista na više nivoa.

Numeracija i markeri

Prije svega, trebate odabrati paragrafe koji bi trebali biti formatirani kao lista. To se može učiniti pomoću miša ili jednostavno postavljanjem kursora na početak reda od kojeg lista počinje.

U MS Word-u postoji kartica “Početna” u kojoj možete odabrati željeni umetak u grupi “Paragraf”. Korisnik klikne na dugme „Numerisanje“ ili „Markeri“, a zatim pomoću ravnala postavlja uvlake. Ova metoda je vrlo jednostavna i jasna, ali neiskusan korisnik može naići na skrivene poteškoće. Kada ponovo umetnete liste sa nabrajanjem i numerisane liste, moraćete ponovo da uredite uvlake.

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

Numerisane liste

Svaki element liste je označen brojem, a numeracija se automatski prilagođava. Da biste kreirali i uređivali liste, postoji dugme „Numerisanje“ u grupi „Paragraf“. Također možete koristiti funkciju “Numeriranje” u kontekstualnom izborniku odabranog pasusa.

Lista opcija:

• Format broja određuje koji će se znak pojaviti pored svakog elementa.
• Stil numeracije se može odabrati ovisno o karakteristikama određenog dokumenta: arapski ili rimski brojevi, velika slova itd.
• Polje “Start value” vam omogućava da odaberete broj s kojim će lista početi.
• U slučaju kada trebate napraviti sličnu listu, ali je iznova numerirati, zgodno je koristiti funkciju „Pokreni novu listu“. Potrebno je odabrati elemente i postaviti sve parametre.

Možete automatski umetnuti numerisanu listu. Da biste to uradili potrebno je da uradite sledeće:

• Na početku pasusa, prije unosa teksta, potrebno je staviti “1.”, zatim “Space” ili Tab. Paragraf će se pojaviti kao prva stavka na listi.
• Dodavanjem prefiksa paragrafu sa "1)", a zatim pritiskom na razmak ili Tab, korisnik će kreirati drugu vrstu liste.
• Po analogiji se sastavljaju liste sa slovima. U redove morate unijeti tačku ili zagradu. Nakon svakog pasusa morate pritisnuti razmak ili Tab.

Automatski kreirajte listu sa nabrajanjem

Možete umetnuti listu s nabrajanjem u Word na sljedeći način:

• Na početku pasusa morate otkucati zvjezdicu ili znak veće od, a zatim pritisnuti razmak ili Tab.
• Automatski kreirajte listu sa nabrajanjem. Možete ga omogućiti tako što ćete otići na karticu "Datoteka" i odabrati grupu "Opcije". Na kartici "Spelling" odaberite "AutoCorrect Options". U odjeljku „Automatsko oblikovanje“ morate označiti okvire pored stilova.

Možete kreirati listu s nabrajanjem sljedećih tipova:

Lista na više nivoa

Liste sa nabrajanjem i brojevima su elementi. Treba ih konfigurirati prema potrebi korisnika u određenom slučaju. Struktura se može uređivati ​​pomoću funkcije Definiši višerazinsku listu. Zgodno je provjeriti kako se sve liste prikazuju u grupi „Liste u dokumentima“. Da biste promijenili postavke fonta za svaki pojedinačni font, lista na više nivoa je povezana sa stilovima pasusa.

Ključne opcije za postavljanje liste na više nivoa

Prilikom postavljanja liste, koja se sastoji od nekoliko nivoa, morate obratiti pažnju na sljedeće parametre:

• Odabir nivoa i primjer njegovog dizajna.
• Definiranjem postavki fonta, ako je potrebno, možete postaviti konstantan dio broja.
• Odaberite vrstu numeracije: simbol, slika, slova i druge opcije.
• Određivanje nivoa na kojem se ažuriranje numeracije.
• Definirajte uvlačenje i položaj teksta.
• Dodatne opcije za uređivanje.
• Odgovarajući stil pasusa i lista na više nivoa.

Postavke koje su jednom kreirane mogu se automatski primijeniti na sljedeće liste. Ali ako postoji potreba za uređivanjem, morat ćete raditi sa svakom listom posebno. Ova neugodnost može izgledati beznačajna, ali ako postoji veliki broj lista u tekstu, formatiranje će potrajati dosta vremena.

Kako promijeniti stil markera?

Klikom na dugme "Markeri" možete odabrati opciju koja je prikladna u ovom slučaju. Da biste to učinili, idite na područje "Biblioteka" i kliknite na njega. Tip numeracije se bira na isti način: u oblasti „Biblioteka numeracije“.

Da biste numerisanu ili označenu listu pretvorili u tekst u Wordu, potrebno je samo da pritisnete odgovarajuće dugme.

Svaki element teksta može se označiti posebnim markerom. Da biste formatirali listu u skladu sa zahtjevima određenog dokumenta, morate odabrati naredbu “Definiraj novi marker”.

Nakon što savladate sve funkcije Microsoft Worda, rad s dokumentima bit će užitak i nećete morati trošiti puno vremena na formatiranje teksta. Lista sa nabrajanjem, kao i numerisana, nalazi se u gotovo svakom dokumentu i često se koristi, pa će korisniku programa biti korisno da se upozna sa kreiranjem lista različitih tipova.

Korišćenje dijaloškog okvira Lista Možete promijeniti sljedeće opcije liste sa nabrajanjem:

Simbol markera na bilo koji simbol iz fontova instaliranih na računaru.

Veličina izbočine.

Udaljenost između simbola metka i teksta.

Poravnanje.

Za ove svrhe morate ući u meni Format – Lista i pritisnite dugme Promjena, nakon čega će se otvoriti dijaloški okvir Uredite listu s nabrajanjem, predstavljen na sl. 4.25.

Rice. 4.25. Prozor dijaloga Uredite listu s nabrajanjem

Ispod je lista njegovih opcija:

Promijenite format numerirane liste

Na kartici se kreiraju numerisane liste Numerisano(Sl. 4.24). Ako predloženi formati numerisanih lista nisu prikladni za dizajn određenog dokumenta, možete kreirati sopstveni format liste klikom na Promjena u dijaloškom okviru Lista na kartici Numerisano. Ovo će otvoriti prozor za dijalog Promjenanumerisanlista(Sl. 4.26).

Rice. 4.26. Prozor dijaloga Uredite numerisanu listu

Ispod su opcije u ovom dijaloškom okviru koje vam omogućavaju da promijenite format numerirane liste.

Kreiranje višeslojnih lista

Složenije vrste lista nalaze se u mnogim vrstama dokumenata. To su tzv više nivoa liste. Oni također koriste ili oznake ili numeraciju, a ponekad i kombinaciju oboje. Ali njihova glavna razlika od prethodnih vrsta lista je prisustvo nekoliko nivoa. U zavisnosti od nivoa, svakom paragrafu se dodeljuje simbol ili broj.

Rice. 4.27. Tab Više nivoa dijaloški okviri Lista.

Liste na više nivoa razlikuju se od običnih lista po prisutnosti uvlaka. Određeno uvlačenje se uzima kao nivo takve liste.

Kreiranje liste na više nivoa moguće je samo pomoću dijaloškog okvira Lista. Štaviše, nivoe postavlja sam izvođač, postavljajući određene indente. Word analizira uvlake i, u zavisnosti od njihove veličine, numeriše ih, stvarajući nivoe.

Možete kreirati modifikovane formate numerisanja za različite nivoe liste na više nivoa, ali je dozvoljen samo jedan format liste na više nivoa po dokumentu.

Da biste kreirali listu na više nivoa, morate izvršiti sljedeće korake:

1. Odredite fragment dokumenta koji treba da bude formatiran kao lista.

2. Kreirajte uvlake za svaki pasus koristeći dugme Povećaj uvlačenje na traci sa alatkama Formatiranje(ne možete koristiti tabove kada kreirate uvlake).

3. Odaberite odabrani fragment teksta.

4. Odaberite tim Format–Lista. U prozoru za dijalog Lista idite na karticu Više nivoa(Sl. 4.27).

5. Izaberite željeni tip višeslojne liste od predloženih opcija. Kliknite uredu.

Danas ćemo shvatiti kako se kreiraju liste na web stranici, koji se markeri koriste i testiramo različite stilove da promijenimo izgled.

Dozvolite mi da vas podsjetim kako su stilovi povezani sa HTML stranicom:

Postoje css liste sa nabrajanjem ili neuređene i numerisane.

Lista markera su slike različitih oblika: krugovi, kvadrati, čavke i slično. Nazivaju se i mecima. Također možete koristiti svoje vlastite crteže kao markere za listu.

Numerisana lista predstavlja izlaz informacija označenih brojevima 1, 2, 3, itd.

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

Ako odlučite zamijeniti ove šalice dizajnerskim, onda morate savladati stiliziranje liste koristeći css. To ćemo raditi danas.

Osnovu bilo koje liste čini sljedeći kod web stranice:

• Prvi element liste
• Drugi element liste
• Poslednji element liste

Ovaj blok izgleda ovako:

• Prvi element liste
• Drugi element liste
• Poslednji element liste

Css stil markera liste

Zapisaćemo eksterni izlaz u datoteku stila style.css. Može se zvati drugačije, ali ima ekstenziju .css.

Standardni CSS markeri: krug (krug) – nepopunjen krug, tačka (disk) – popunjen krug, kvadrat (kvadrat) – popunjen kvadrat.

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

Na primjer, prikažimo liste koristeći krug. Unos u css fajlu će biti ovako:

Ul (tip-stil liste: krug)

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

Ul (tip-stil liste: nema)

Ako ne možete pronaći kod u css datoteci koji je odgovoran za prikaz liste u bloku koji vam je potreban, tada koristite dodatak za Firefox - Firebug ili u Google Chromu, kliknite desnim klikom na web stranicu bloga. Zatim “pogledajte kod elementa”.

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

Post-content ul (tip-stil-liste: krug)

Ili drugi primjer:

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

Završiti kurs “Css praksa”

]]> ]]>

Poznavanje CSS-a neophodno je svakom webmasteru, jer je to univerzalan način da se napravi kvalitetan dizajn bez preopterećenja koda stranice.

Za one koji žele naučite css stilske trikove vrlo brzo, ]]> preporučiti ]]> napredni kurs "CSS praksa" Evgenija Popova.

Sljedeći članci:

Grafički markeri za listu.

Uvlačenje liste css.

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

Ugniježđene liste. Kako napraviti horizontalnu listu u css-u. Promijenite stil numeriranih lista.

Preuzmite prekrasne markere za liste lokacija.

Upotreba lista u članku ima pozitivan učinak i na SEO i na percepciju informacija korisnika. Postoji mnogo načina da lijepo prikažete markere (sa slikom ili korištenjem CSS-a). Pogledaćemo prilično jednostavan, ali moderan metod promene markera liste pomoću CSS-a.

Kako izgleda?

U ovom slučaju ne možemo bez novih tehnologija, odnosno CSS3 sa podrškom za pseudo-klasu pre. Koristeći samo stilove i osnovni HTML izgled, transformisaćemo dosadne standardne markere koji ne zadovoljavaju moderne standarde.

U prvom slučaju koristićemo listu sa nabrajanjem koju nam oznaka nudi

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

Prema tome, u drugom slučaju, numerisana lista iz oznake

:
1. Lijevo od teksta je 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.

Lepa lista sa nabrajanjem

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 (sadržaj: "\203A "; padding-right: 6px; font-size: 16px; boja: #00bf80; font-weight: bold; )

Lepa numerisana lista

Koristeći numerisanu listu, možete ili 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: pozadina: #00bf80;

Pravilno formatirajte svoje članke tako da korisnik ne povećava stopu posete početne stranice.