CSS za stvaranje popisa za prijavu očiju
Popisi su izvrstan element web dizajna jer omogućuju lako čitanje krajnjem korisniku. Većina korisnika želi odgovore brzo, a samo će u početku preskočiti web mjesto da bi vidjeli hoće li odgovoriti na njihovo pitanje. To je posebno istinito ako oni uđu na vašu web stranicu putem tražilice.

Upotreba oznaka i popisa naslova sjajan je način na koji ljudima možete lako vidjeti primarni sadržaj vaše web stranice. Ako smatraju da su popisi i podnaslovi zanimljivi, veća je vjerojatnost da će ostati na vašoj web lokaciji. To, naravno, dovodi do smanjene stope „odbijanja“ i pomaže u poboljšanju vjerodostojnosti i rangiranja vaše web stranice na motorima. Sve što poboljšava čitljivost, olakšava očima klizanje, uvijek će imati koristi od web stranice. Izvrstan dizajn uvijek ima na umu čitljivost.

CSS je jednostavan i vrlo učinkovit način stvaranja stilskih popisa s prilagođenim metcima (markerima). Možete uključiti različite oblike ili jednostavne prilagođene grafike koje se vežu za logotip, boje ili temu vašeg web mjesta. Na primjer, na web stranici o duhovima obilaska stvorio sam malu ikonu duhova koja se koristila na bočnoj navigacijskoj traci i na neuređenim stavkama popisa na glavnoj stranici. Bio je jednostavan, ali vrlo sladak i vezan za temu web stranica, zbog čega se ti elementi stranice ističu.

Drugi put meci mogu odvratiti pozornost od važnog sadržaja na popisu. U tom se slučaju svojstvo stila popisa "none" može upotrijebiti za uklanjanje automatski generiranih markera.

Popis Svojstva stila



Upotrijebite svojstvo tipa liste da biste odabrali vrstu markera koji se pojavljuje sa svakom stavkom popisa. Dostupne vrijednosti su disk, krug, kvadrat, decimalna, niže-romska, gornja-rimska, donja-grčka, donja-latinica, gornja latinica, niža-alfa, gornja-alfa i nijedna.

Da biste odredili svoju sliku kao marker, koristite svojstvo slike-style liste na sljedeći način:

ul {list-style-image: url (imagename.jpg);
popis-stil-položaj: vani;
}

URL je u odnosu na tablicu stilova i trebao bi ukazivati ​​na mapu u kojoj se nalazi vaša slika. U ovom slučaju, slika bi bila u istoj mapi kao i css i html datoteka. Ako svoje slike postavite u zasebnu mapu, uključili biste i to: url (images / imagename.jpg)

Pozicije markera



Možete i prilagoditi položaj markera. U gornjem primjeru, vanjsko svojstvo čini da se metak pojavljuje izvan područja sadržaja.
list-style-position: unutra dopušta metak unutar područja sadržaja tako da upada u sadržaj popisa.

Tehnika kratkih ruka



Još jedan brzi način formatiranja popisa pomoću CSS-a je tehnika skraćenja. Ovom metodom sva su svojstva popisa navedena u jednom jedinstvenom entitetu:

ul
{
list-style: kružni URL ("image.gif");
}

u metodi skraćenja sve se vrijednosti moraju pojaviti u navedenom redoslijedu kako slijedi:

popis-style-type
Popis-pozicija popisa (iznutra, izvana)
popis-style-slike

Nije važno da li preskočite neku vrijednost, sve dok ostali ostanu u ispravnom redoslijedu.

Prilagođeni popisi vrlo su korisni i CSS ih čini lako postići. Jednostavni detalji pretvaraju prosječne web stranice u web stranice s najboljom izvedbom.


Upute Video: Ruby on Rails by Leila Hofer (Ožujak 2024).