CSS pravila za prilagodbu izgleda popisa na html stranici. Svojstvo stila popisa (vrsta, slika, položaj)

Pozdrav, dragi čitatelji bloga. Danas će biti još jedan članak o svojstvima kaskadnih listova stilova. U tome pričati ćemo o stiliziranju pomoću CSS pravila.

Općenito, liste se razlikuju među elementima bloka. To je zbog činjenice da uključuju grafičke oznake i numeriranje koje postavlja sam preglednik.

Svojstvo stila popisa - dizajn popisa na html stranici

U CSS jezik Postoje tri svojstva koja počinju sa stilom popisa, a odgovorna su za dizajn popisa s grafičkim oznakama i numeriranih popisa. Osim toga, tu je i unaprijed pripremljeno pravilo u stilu popisa koje vam omogućuje smanjenje količine koda.

Sva ova svojstva mogu se koristiti i za html li elemente i za ul i ol elemente. Jedina je razlika u tome što ako su pravila napisana za određenu vrijednost liste li, tada će se primijeniti samo na nju. A ako su ista css pravila napisana za ul ili ul spremnike, tada će se primijeniti na sve elemente li sadržane u tim spremnicima.

Počnimo s atributom lista-stil-tip, koji postavlja vrsta markera ili numeriranje za stavke popisa:

list-style-type: disk|krug|kvadrat|decimala|decimala-početna-nula|donja-rimska|gornja-rimska|donja-grčka|donja-alfa|donja-latinica|gornja-alfa|gornja-latinica|armenski| gruzijski|nijedan|naslijediti

Kao što vidite, svojstvo list-style-type ima mnogo dostupnih vrijednosti, koje mogu odrediti i vrstu markera i različite vrste numeriranje.

• disk - marker u obliku crnog kruga (zadana vrijednost za popise s grafičkim oznakama).
• krug - marker u obliku nepopunjenog kruga.
• kvadrat - marker u obliku kvadrata. Može biti svijetla ili tamna, ovisno o pregledniku.
• decimal - numeriranje arapskim brojevima (zadana vrijednost za numerirane liste).
• decimal-leading-zero - numeriranje arapskim brojevima od 01 do 99 s vodećom nulom.
• donji rimski - numeriranje malim rimskim brojevima.
• gornji rimski - numeriranje velikim rimskim brojevima.
• donji-grčki - numeriranje malim grčkim slovima.
• small-alpha i lower-latin - numeriranje malim latiničnim slovima.
• upper-alpha i upper-latin - numeriranje velikim latiničnim slovima.
• armenski - numeriranje tradicionalnim armenskim brojevima.
• gruzijski - numeriranje tradicionalnim gruzijskim brojevima.
• nema - označavanje i numeriranje se uopće neće provoditi.

Ovako će izgledati stavke popisa u pregledniku različita značenja lista-stil-tip:

Na koristeći CSS stilova, nije bitno koji se element (OL ili UL) koristi za izradu popisa. OL i UL razlikuju se samo u zadanom ponašanju, a sa svojstvom list-style-type možete jednostavno pretvoriti jednu vrstu liste u drugu.

Stilski atribut lista-stil-slika omogućuje postavljanje kao marker stavke popisa grafička slika . Kada koristite atribut list-style-image, vrijednost atributa list-style-type se zanemaruje:

lista-stil-slika: nijedan|<интернет-адрес файла изображения>|naslijediti

Značenje nikakav uklanja oznaku slike i postavlja je na normalnu, ne grafičku. Ovo je zadano ponašanje.

Kada navedete adresu slikovne datoteke, slika će biti umetnuta umjesto oznake. Kao i kod upotrebe, možete koristiti i apsolutni i relativne adrese. Ako preglednik ne može učitati sliku, koristit će se zadani marker ili numeriranje ili ono što je navedeno u svojstvu u tipu stila liste.

Primjer popisa sa slikom kao oznakom:

• prva stavka popisa;


• druga stavka popisa;


• treća stavka na popisu.

A evo kako to izgleda:

• prva stavka popisa;
• druga stavka popisa;
• treća stavka na popisu.

Jasno je da je pri odabiru slike kao markera bolje odabrati malu sliku.

I posljednje CSS svojstvo iz niza stilova popisa je lista-stil-pozicija koji vam omogućuje da odredite mjesto grafičke oznake ili numeriranje unutar stavke popisa. Mogu postojati dvije opcije za vrijednost:

list-style-position: unutra|vani

U slučaju vrijednosti iznutra marker ili numeriranje se postavljaju kao unutar popisa iu slučaju vani izvan li elemenata. Zadana vrijednost je izvan i marker je pomaknut van.

Primjer popisa s različitim vrijednostima pozicije stila popisa:

• u prvom paragrafu sve je standardno;
• u drugom paragrafu, list-style-position postavljen je na unutar. U tom slučaju, imajte na umu da je druga linija postavljena u ravnini s markerom;
• u ovom trenutku list-style-position jednak je izvana.

Prefabricirano CSS pravilo stila popisa

Sljedeće CSS svojstvo stila popisa prefab je za stiliziranje popisa. Omogućuje vam da napišete sva tri CSS pravila o kojima smo govorili u jedno jedino. Redoslijed određivanja vrijednosti u njemu može biti bilo koji, a preglednik će prema zadanim postavkama preuzeti parametre koje ne navedete u stilu popisa.

Vrijednosti u pravilu kompilacije u stilu popisa trebaju biti odvojene razmacima:

lista-stil: lista-stil-tip lista-stil-slika lista-stil-pozicija;

Pravo CSS pravilo za stiliziranje popisa moglo bi izgledati otprilike ovako:

list-style: krug url (http://site/images/marker.png) izvan;

Dakle, svojstvo stila popisa omogućuje značajno smanjenje količine koda, jer je umjesto tri pravila dovoljno postaviti samo jedno.

Kao što je gore spomenuto, vrijednosti se mogu navesti bilo kojim redoslijedom i u bilo kojoj količini. Tako npr. da bi se uklonite oznake s popisa izbornika dovoljno je napisati:

list-style: nijedan;

Isto se može učiniti pomoću svojstva list-style-type:

list-style-type: nijedan;

Ovdje ću završiti priču o dizajniranju html lista pomoću kaskadnih listova stilova. Da saznam o drugima CSS svojstva x možete čitati članke iz odjeljka "" i ne zaboravite se pretplatiti na ažuriranja bloga. Vidimo se opet!

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. Dizajn 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.

Pozdrav, dragi čitatelji bloga. Danas će biti još jedan članak u kasici prasici. Usredotočit će se na dizajn koristeći pravila kaskadnih stilskih listova. Ovdje je sve vrlo jednostavno, ali ipak sam odlučio ovoj temi posvetiti zaseban post.

Malo ranije već smo uspjeli saznati kako, kako i kako možete raditi s. Pa, malo ranije smo detaljno ispitali sve vrste i njihove razne kombinacije naznačiti upravo taj element HTML kôd, za koje ćete morati primijeniti određena svojstva stiliziranja.

Stil liste - dizajn lista u HTML kodu

Dakle, u jeziku za označavanje stilova postoje tri zasebna pravila koja počinju sa stilom popisa, a koja služe za konfiguraciju izgled popisi (numerirani ili s grafičkim oznakama) u kodu web dokumenata. Osim toga, postoji unaprijed pripremljeno CSS pravilo stila popisa, koje vam omogućuje malo smanjenje količine koda. Ali prvo o svemu.

Ono što ćemo sada razmotriti može se koristiti za oboje HTML elementi LI, te za elemente Ul i Ol (listove s oznakama i brojevima). Koja će biti razlika u korištenju stila popisa za ove oznake?

Zapravo, možete saznati je li svojstvo naslijeđeno ili ne na web stranici validatora (pročitajte o tome na priloženoj poveznici) u odjeljku posvećenom specifikaciji kaskadnih stilskih listova. U stupcu "Naslijeđeno", "Da" će se pojaviti nasuprot naslijeđenih pravila:

Počnimo s lista-stil-tip, koji vam omogućuje postavljanje vrste označavanja za pojedine elemente Popis HTML-a. Za ovo pravilo vrijede sljedeće vrijednosti:

1. Ništa - označavanje se uopće neće provesti (list-style-type:none; primijenjeno na ovu stavku i stoga nema oznaku)
2. Disk je ispunjeni krug (list-style-type:disc; koristi se za ovaj redak)
3. Krug - krug kao oznaka
4. Kvadrat - kvadrat kao oznaka
5. Decimalno - arapski brojevi (list-style-type:decimal;)
6. niži alfa — slova mala slova
7. upper-alpha - velika latinična slova
8. lower-roman — male rimske brojke
9. upper-roman - rimski brojevi velikim slovima

Što mislite, što je korišteno za izradu gornjeg popisa, Ul ili Ol? Zeznuto pitanje. Ispostavilo se da to više nije bitno, iako sam u ovom konkretnom slučaju koristio Ol, ali promjenom u Ul izgled će ostati isti, jer je za svaki element postavljen sa svojim CSS vrijednost lista pravila tipa stila.

U stvari, Ul i Ol se razlikuju samo po zadanom ponašanju (Ul oznake i Ol brojevi). No, ako želite, možete jednostavno pretvoriti jedan stil popisa u drugi koristeći list-style-type. Font koji se koristi za označavanje brojeva ili slova potpuno je isti kao onaj koji ste definirali za sadržaj LI oznaka. Na primjer, promjenom boje fonta za popis promijenit ćemo i boja markera:

1. Promijenila je boju teksta (list-style-type:lower-roman;color:red) i promijenila boju markera

Idemo dalje na sljedeći CSS vlasništvo - lista-stil-pozicija. Pomoću njega možete postaviti položaj (postavljanje) područja s markerom. Postoje samo dvije moguće vrijednosti za to:

Oni. U osnovi, u poziciji stila popisa označavamo gdje treba postaviti područje s markerima - izvan elementa LI (izvan) ili unutar njega (unutar). Prema zadanim postavkama, područje s markerom je izvan granica, tj. koristi se vrijednost izvana.

Pogledajmo ovo na primjeru. U prvom elementu popisa posebno ću napisati list-style-position:inside i vidjet ćemo što će se dogoditi:

1. Ovdje je sve zadano
2. Ovako će izgledati postavljanje područja markera s unutrašnjošću. Imajte na umu da se drugi red u ovom elementu i marker nalaze na istoj razini
3. Ovdje je sve zadano

List-style-image i prefab Css pravilo

Zatim imamo List-style-image - omogućuje vam da odredite sliku koja će se koristiti kao oznaka. Ovo je pravilo prema zadanim postavkama postavljeno na Ništa (tj. slika se ne koristi kao oznaka), ali možete napisati funkciju Url() tako da navedete stazu do slike, koja će kasnije djelovati kao oznaka na ovom popisu:

To bi moglo izgledati ovako:

Slika u stilu popisa: url(https://site/images/list_star.png);

1. Ovdje je sve zadano
2. Ovako bi moglo izgledati korištenje slike kao markera. Jasno je da možete odabrati prikladniju sliku za ovu svrhu.
3. Na primjer, kao ovdje.

Kao što se sjećate, u članku o rekao sam da se slike odnose na inline elementi(zapravo, za preglednik ovo je isto slovo, ali ponekad vrlo veliko).

Ovdje slika zauzima mjesto markera (slova ili brojeva). U ovom slučaju, visina retka s elementom popisa povećat će se ako umetnete veliku sliku kao oznaku (kao što se dogodilo u drugom elementu primjera danog malo iznad).

U funkcionalnosti za sliku stila popisa možete navesti obje slike. Ako se slika ne učita, koristit će se zadani marker ili numeriranje ili ono što je navedeno u tipu stila popisa za ovaj element popisa.

Da biste napisali sva tri gore opisana CSS pravila u jedno, možete upotrijebiti List-style, koji je unaprijed pripremljen za dizajniranje popisa. Redoslijed kojim su navedene vrijednosti nije bitan. One vrijednosti koje ne navedete u stilu popisa preglednik će eksplicitno interpretirati sa zadanim vrijednostima.

Gdje mogu vidjeti zadane vrijednosti? Da, sve je tu - u CSS specifikaciji W3C validatora u stupcu "Initial value" nasuprot svojstvima koja vas zanimaju:

Vrijednosti za pojedinačna svojstva u prefab pravilu u stilu liste odvojene su razmacima. Mjesto, kao što je već spomenuto, nije važno:

U praksi bi to moglo izgledati ovako:

List-style: inside upper-roman url(https://site/images/list_star.png);

Vrijednosti možete koristiti bilo kojim redoslijedom i bilo kojim brojem (počevši od jedan). Inače, izbornici se na web stranicama najčešće kreiraju pomoću popisa, a koristi se svojstvo List-style za uklanjanje oznaka s popisa izbornika, koji su tu potpuno nepotrebni:

List-style-type:none;

List-style:none;

Sretno ti! Vidimo se uskoro na stranicama bloga

Više videa možete pogledati ako odete na

Moglo bi vas zanimati

Prikaz (blok, nijedan, inline) u CSS-u - postavite vrstu prikaza Html elemenata na web stranici Kako konfigurirati izmjeničnu boju pozadine redaka tablica, popisa i drugih Html elemenata na web mjestu pomoću pseudo-klase nth-child
Float i clear u CSS - alatima raspored blokova
Čemu služi CSS, kako povezati kaskadne stilske listove HTML dokument i osnovna sintaksa ovog jezika
Pozicioniranje sa Z-indexom i CSS-om Pravilo kursora za promjenu pokazivača miša
Položaj (apsolutni, relativni i fiksni) - metode Html pozicioniranje elementi u CSS-u (pravila lijevo, desno, gore i dolje)
CSS svojstva text-decoration, vertical-align, text-align, text-indent za ukrašavanje teksta u Html-u

Vanjski stilski list omogućuje koncentriranje informacija o formatiranju web mjesta u jednoj datoteci. Za referencu na vanjski list css stilovi treba u tijelu nakon naslova napiši sljedeći redak

Atribut href navodi stazu do vanjske datoteke lista stilova. Ova linija moraju biti napisani u tekstu svih web stranica na kojima se treba koristiti vanjski stilski list.

Na taj se način promjene koje napravite u datoteci style.css odmah odražavaju na svim stranicama koje referenciraju tu datoteku.

Privatni styling

Ako stil trebate primijeniti privatno, u odnosu na zasebnu instancu deskriptora, tada trebate koristiti atribut STYLE. Ova tehnika omogućuje vam da u potpunosti iskoristite stilove bez potrebe za stvaranjem listova stilova. Privatna upotreba stilova može se koristiti čak i ako stranica već sadrži unutarnju ili vezu na vanjsku tablicu stilova, jer privatni stil ima najveći prioritet.

Primjer:

ID atribut

Ako trebate primijeniti stil na pojedinačni element web-stranice, tada trebate koristiti ID atribut.

Da biste to učinili, potrebno je dodijeliti identifikator željenoj oznaci elementa stranice. Zatim možete definirati svojstva u unutarnjem ili vanjskom listu stilova ovog elementa. Navedeni atributi oblikovanja bit će postavljeni samo za element označen navedenim identifikatorom.