CSS pravila za prilagođavanje izgleda liste na html stranici. svojstvo stila liste (vrsta, slika, pozicija)

Pozdrav, dragi čitaoci blog stranice. Danas će biti još jedan članak o svojstvima kaskadnih stilskih listova. U njoj razgovaraćemo o stiliziranju sa CSS pravilima.

Općenito, liste se izdvajaju među blok elementima. To je zbog činjenice da oni uključuju markere i numeraciju, koje postavlja sam pretraživač.

Svojstvo stila liste - dizajn liste na html stranici

AT CSS jezik Postoje tri svojstva koja počinju sa stilom liste i odgovorna su za stilizovanje lista sa nabrajanjem i brojevima. Osim toga, postoji prefabrikovano pravilo u stilu liste koje vam omogućava da smanjite količinu koda.

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

Počnimo s atributom tip-stil liste, koji postavlja vrsta markera ili numerisanje za stavke liste:

tip-stila liste: disk|krug|kvadrat|decimalni|decimalni-vodeća-nula|donji-rimski|gornjorimski|donji-grčki|donji-alfa|donji-latinski|gornji-alfa|gornji-latinski|jermenski| gruzijski|nijedno|nasledi

Kao što možete vidjeti, svojstvo tip-stil liste ima mnogo dostupnih vrijednosti koje mogu postaviti i stil markera i različite vrste numerisanje.

• disk - crni krug marker (podrazumevano za liste sa nabrajanjem).
• krug - marker u obliku nepopunjenog kruga.
• kvadrat - kvadratni marker. Može biti svijetlo ili tamno, ovisno o pretraživaču.
• decimalni - numerisanje arapskim brojevima (podrazumevana vrednost za numerisane liste).
• decimalna-vodeća-nula - arapski brojevi od 01 do 99 sa početnom nulom.
• donji rimski - numerisanje malim rimskim brojevima.
• gornjorimski - numeracija velikim rimskim brojevima.
• donji grčki - numeracija manjim grčkim slovima.
• niža alfa i niža latinica - numeracija malim latiničnim slovima.
• gornja alfa i gornja latinica - numeracija velikim latiničnim slovima.
• armenski - numeracija tradicionalnim jermenskim brojevima.
• gruzijski - numeracija tradicionalnim gruzijskim brojevima.
• nema - označavanje i numerisanje se uopšte neće vršiti.

Ovako će izgledati stavke liste u pretraživaču sa različita značenja tip-stil liste:

At koristeći CSS stilova nije bitno koji element (OL ili UL) se koristi za kreiranje liste. OL i UL se razlikuju samo po svom zadanom ponašanju, a sa svojstvom list-style-type, možete lako pretvoriti jedan prikaz liste u drugi.

atribut stila slika u stilu liste vam omogućava da postavite kao marker spisak stavki grafička slika . Kada koristite atribut list-style-image, vrijednost atributa list-style-type se zanemaruje:

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

Značenje nijedan uklanja marker slike i postavlja ga na običan, a ne grafički. Ovo je zadano ponašanje.

Kada odredite adresu datoteke slike, slika će biti umetnuta umjesto markera. Kao i kod upotrebe , i apsolutno i relativne adrese. Ako pretraživač ne uspije učitati sliku, tada će se koristiti zadani marker ili numeriranje ili bilo šta što je navedeno u svojstvu tipa-stil liste.

Primjer liste sa slikom kao markerom:

• prva stavka na listi;


• druga stavka na listi;


• treća stavka na listi.

A evo kako to izgleda:

• prva stavka na listi;
• druga stavka na listi;
• treća stavka na listi.

Jasno je da je prilikom odabira slike kao markera bolje odabrati malu sliku.

I posljednje CSS svojstvo iz serije u stilu liste - pozicija-stil liste, koji vam omogućava da odredite lokaciju metka ili broja u stavci liste. Mogu postojati dvije opcije za vrijednost:

list-style-position: unutra|spolja

U slučaju vrijednosti unutra marker ili numeracija se postavlja takoreći unutar liste iu kućištu vani izvan li elemenata. Zadana vrijednost je van i marker se pomiče van.

Primjer liste s različitim vrijednostima pozicije u stilu liste:

• u prvom pasusu sve je po defaultu;
• u drugom pasusu list-style-position je postavljen na unutra. U ovom slučaju, imajte na umu da je druga linija postavljena u ravni sa markerom;
• u ovom trenutku pozicija-stil liste je izvan.

Prilagođeno pravilo u stilu liste CSS

Sljedeće svojstvo stila CSS liste je prefabrikovano za stiliziranje lista. Omogućava vam da zapišete sva tri CSS pravila o kojima smo gore govorili u jedno. Redoslijed specificiranja vrijednosti ​​u njemu može biti bilo koji, a parametre koje ne postavite u stilu liste će pretraživač po defaultu preuzeti.

Odvojite vrijednosti u prefab u stilu liste s razmacima:

list-style: list-style-type list-style-image list-style-position;

Pravo CSS pravilo za stiliziranje lista može izgledati otprilike ovako:

stil liste: krug url (http://site/images/marker.png) izvana;

Dakle, svojstvo u stilu liste može značajno smanjiti količinu koda, jer je umjesto tri pravila dovoljno navesti samo jedno.

Kao što je gore spomenuto, vrijednosti se mogu specificirati bilo kojim redoslijedom i bilo kojim brojem. Tako, na primjer, da bi uklonite markere sa liste menija dovoljno da napišem:

stil liste: nijedan;

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

tip-stil liste: nijedan;

Ovim je završena priča o dizajnu html lista pomoću kaskadnih stilskih tablica. Učiti o drugima CSS svojstva x, možete čitati članke iz odjeljka "" i ne zaboravite se pretplatiti na ažuriranja bloga. Vidimo se uskoro!

CSS liste- skup svojstava odgovornih za dizajn lista. Upotreba HTML lista je vrlo česta kada se kreiraju trake za navigaciju na sajtu. Elementi liste predstavljaju skup blok elemenata.

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

Stiliziranje lista sa CSS stilovima

1. Tip markera liste lista-stil-tip

Svojstvo mijenja tip markera ili uklanja marker za liste sa oznakama 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 dizajna bulletiranih i numeriranih lista

2. Slike za elemente slike u stilu liste

Slike i gradijentne ispune mogu se koristiti kao markeri 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. Dizajn bulleted list koristeći sliku Rice. 3. Stiliziranje liste s nabrajanjem s gradijentom

3. Popis lokacije markera lista-stil-pozicija

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

Pozdrav, dragi čitaoci blog stranice. Danas će biti još jedan članak u kasici prasici. Fokusiraće se na dizajn koristeći pravila kaskadnih stilskih listova. Ovdje je sve vrlo jednostavno, ali sam ipak odlučio da ovoj temi posvetim poseban post.

Nešto ranije, već smo uspjeli naučiti kako, kako i kako možete raditi. Pa, malo ranije, detaljno smo ispitali sve vrste i njihove razne kombinacije da navedete taj element html kod A za koji želite primijeniti određena svojstva stila.

Stil liste - dizajn liste u HTML kodu

Dakle, u jeziku za označavanje stila, postoje tri odvojena pravila koja počinju sa stilom liste koja služe za prilagođavanje izgled liste (numerisane ili označene) u kodu web dokumenata. Osim toga, postoji prefabrikovano pravilo u stilu liste Css, koje vam omogućava da donekle smanjite količinu koda. Ali prvo stvari.

Ono što ćemo sada razmotriti s vama može se koristiti za Html elementi LI, a za elemente Ul i Ol (liste sa nabrajanjem i brojevima, respektivno). Koja bi bila razlika u primjeni stila liste na ove oznake?

Zapravo, možete saznati da li je svojstvo naslijeđeno ili ne na web stranici validatora (pročitajte o tome na dostavljenom linku) u odjeljku o specifikaciji kaskadnih tablica stilova. U koloni "Naslijeđeno" nasuprot naslijeđenih pravila bit će "Da":

Počnimo sa tip-stil liste, koji vam omogućava da postavite vrstu označavanja za pojedinačne elemente html lista. Sljedeće vrijednosti su dozvoljene za ovo pravilo:

1. Ništa - neće biti označavanja (list-style-type:none; primijenjeno na ovu stavku i stoga nema marker)
2. Disk - popunjen krug (za ovaj red, tip-stil liste: disk; upravo je primijenjen)
3. Krug - krug kao marker
4. Kvadrat - kvadrat kao marker
5. Decimala - arapski brojevi (list-style-type:decimal;)
6. niži alfa- pisma malim slovima
7. upper-alpha - latinična slova u velikim slovima
8. donji rimski - rimski brojevi malim slovima
9. gornji rimski - rimski brojevi u velikim slovima

Šta mislite, uz pomoć kojih elemenata Ul ili Ol je napravljena lista iznad? Tricky question. Ispostavilo se da to više nije važno, iako sam u ovom konkretnom slučaju koristio Ol, ali mijenjajući ga u Ul, izgled će ostati isti, jer se za svaki element postavlja za sebe CSS vrijednost lista pravila tipa stila.

U stvari, Ul i Ol se razlikuju samo po zadanom ponašanju (Ul oznake i Ol brojevi). Ali ako želite, možete jednostavno pretvoriti jednu vrstu liste u drugu pomoću tipa-stil liste. 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 listu, promijenit ćemo i boja markera:

1. Promijenjena boja teksta (list-style-type:lower-roman;color:red) i promijenjena boja markera

Idemo od sljedeći css vlasništvo - list-style-position. Pomoću njega možete postaviti poziciju (pozicioniranje) područja pomoću markera. Ima samo dvije moguće vrijednosti:

One. u stvari, u listi-stil-poziciji označavamo gde želimo da postavimo oblast sa markerima - izvan LI elementa (spolja) ili unutar njega (unutra). Podrazumevano, oblast sa markerom je van granica, tj. koristi se vrijednost izvana.

Pogledajmo ovo na primjeru. U prvom elementu liste ću posebno napisati list-style-position:inside i videćemo šta će od toga:

1. Ovdje je sve standardno.
2. Ovako će izgledati postavljanje područja markera sa unutrašnjošću. Imajte na umu da su drugi red u ovom elementu i marker na istom nivou.
3. Ovdje je sve standardno.

Slika u stilu liste i prefabricirano CSS pravilo

Sljedeća na redu je slika u stilu liste - omogućava vam da odredite sliku koja će se koristiti kao marker. Ovo pravilo je prema zadanim postavkama postavljeno na Ništa (tj. nijedna slika se ne koristi kao marker), ali možete napisati Url () funkcionalnost, navodeći putanju do slike u njoj, koja će naknadno djelovati kao marker na ovoj listi:

Moglo bi izgledati ovako:

List-style-image: url(https://site/images/list_star.png);

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

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

Evo slike i zauzima mjesto markera (slova ili brojevi). Istovremeno, visina linije sa elementom liste će se povećati ako umetnete veliku sliku kao marker (kao što se dogodilo u drugom elementu primera iznad).

U funkciji slike u stilu liste, možete odrediti obje slike. Ako slika nije učitana, tada će se koristiti podrazumevani marker ili numerisanje, ili bilo šta što je napisano u tipu stila liste za ovaj element liste.

Za pisanje sva tri gore opisana CSS pravila u jedno, biće moguće koristiti List-style, koji je prefabrikovan za stilizovanje lista. Redoslijed kojim su vrijednosti navedene nije bitan. Vrijednosti koje ne navedete u stilu liste bit će eksplicitno interpretirane od strane pretraživača sa zadanim vrijednostima.

Gdje mogu vidjeti zadane vrijednosti? Da, sve je na istom mjestu - u CSS specifikaciji W3C validatora u koloni "Inicijalna vrijednost" nasuprot svojstava koja vas zanimaju:

Vrijednosti za pojedinačna svojstva u prefab-u u stilu liste razdvojene su razmacima. Lokacije, kao što je već spomenuto, nisu važne:

U praksi bi to moglo izgledati ovako:

List-style:unutar gornjorimskog url-a (https://site/images/list_star.png);

Vrijednosti možete koristiti bilo kojim redoslijedom i bilo kojim brojem (počevši od jedan). Inače, meniji se na web stranicama najčešće formiraju pomoću lista, a na to je naviklo svojstvo List-style da uklonite markere sa lista menija, koji su tamo 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

Možda ste zainteresovani

Prikaz (blok, nijedan, inline) u CSS-u - postavite vrstu prikaza HTML elemenata na web stranici Kako promijeniti boju pozadine redova tabela, lista i drugih Html elemenata na web mjestu koristeći pseudo-klasu nth-child
Float i clear u CSS - alatima blok raspored
Čemu služi CSS, kako povezati kaskadne tablice stilova html dokument i osnovnu sintaksu ovog jezika
Pozicioniranje sa Z-indeksom i CSS-om Pravilo kursora da promenite kursor miša
Metode položaja (apsolutne, relativne i fiksne). Pozicioniranje Html elementi u CSS-u (lijeva, desna, gornja i donja pravila)
CSS svojstva text-decoration, vertical-align, text-align, text-indent za ukrašavanje teksta u Html-u

Vanjska lista stilova omogućava vam da koncentrišete informacije o formatiranju stranice u jednoj datoteci. Za upućivanje na vanjski list css stilovi potreba u telu nakon naslova napišite sljedeći red

Atribut href specificira putanju do vanjske datoteke sa stilskim listovima. zadata linija potrebno je propisati u tekstu svih web stranica gdje je potrebno koristiti eksterni stilski list.

Stoga se promjene napravljene u datoteci style.css odmah odražavaju na svim stranicama koje se povezuju na ovu datoteku.

Privatna definicija stilova

Ako trebate primijeniti bilo koji stil privatno, u odnosu na zasebnu instancu deskriptora, onda za to trebate koristiti atribut STYLE. Ova tehnika vam omogućava da iskoristite sve prednosti koje pružaju stilovi bez potrebe za kreiranjem stilskih listova. Privatna upotreba stilova se može koristiti čak i ako stranica već sadrži internu ili vezu na vanjski stilski list, jer privatni stil ima najveći prioritet.

primjer:

ID atribut

Ako želite primijeniti stil na pojedinačni element Web stranice, morate koristiti ID atribut.

Da biste to učinili, potrebno je dodijeliti identifikator željenoj oznaci elementa stranice. Nakon toga, možete definirati svojstva unutarnjeg ili vanjskog stilskog lista dati element. Navedeni atributi oblikovanja bit će postavljeni samo za element označen navedenim identifikatorom.