CSS na vytváranie zoznamov lovu očí

• Smieť 4, 2024

Zoznamy sú skvelým prvkom webdizajnu, pretože umožňujú ľahké čítanie koncovým používateľom. Väčšina používateľov chce odpovede rýchlo a iba spočiatku prehľadá web, aby zistila, či odpovie na ich otázku. Platí to najmä v prípade, že na váš web vstúpia prostredníctvom vyhľadávacieho nástroja.

Používanie značiek a zoznamov nadpisov je skvelý spôsob, ako ľuďom umožniť ľahký prístup k primárnemu obsahu vašej webovej stránky. Ak sa domnievajú, že zoznamy a podnadpisy sú zaujímavé, existuje väčšia šanca, že na vašich stránkach zostanú. To samozrejme vedie k zníženiu miery okamžitých odchodov a pomáha zlepšiť dôveryhodnosť a hodnotenie vašich webových stránok v motoroch. Čokoľvek, čo zlepšuje čitateľnosť a uľahčuje očiam kĺzanie, vždy prospeje webovej stránke. Skvelý dizajn vždy pamätá na čitateľnosť.

CSS je jednoduchý a veľmi efektívny spôsob, ako vytvárať štýlové zoznamy s vlastnými guľkami (značkami). Do loga, farieb alebo motívu vášho webu môžete zahrnúť rôzne tvary alebo jednoduchú vlastnú grafiku. Napríklad na webových stránkach duchovných zájazdov som vytvoril malú ikonu duchov, ktorá sa použila v bočnom navigačnom paneli a na neusporiadaných položkách zoznamu na hlavnej stránke. Bolo to jednoduché, ale veľmi roztomilé a zviazané s témou weby, vďaka čomu tieto prvky stránky vynikajú.

Inokedy môžu odrážky odvrátiť pozornosť od dôležitého obsahu v zozname. V takom prípade sa na odstránenie automaticky generovaných značiek môže použiť vlastnosť štýlu zoznamu „žiadna“.

Vlastnosti štýlu zoznamu

Použite vlastnosť typu štýlu zoznamu a vyberte typ značky, ktorá sa zobrazí pri každej položke zoznamu. Dostupné hodnoty sú disk, kružnica, štvorec, desatinné miesto, dolný rímsky, horný rímsky, dolný grécky, dolný latin, horný latin, dolný alfa, horný alfa a žiadny.

Ak chcete určiť svoj vlastný obrázok ako značku, použite vlastnosť list-style-image takto:

ul {list-style-image: url (imagename.jpg);
zoznam štýlov: vonku;
}

Adresa URL je relatívna k šablóne so štýlmi a mala by ukazovať na priečinok, v ktorom sa nachádza váš obrázok. V takom prípade by bol obraz v rovnakom priečinku ako súbor css a html. Ak svoje obrázky umiestnite do samostatného priečinka, mali by ste zahrnúť aj tieto položky: url (images / imagename.jpg)

Pozície značiek

Môžete tiež prispôsobiť polohu značiek. Vo vyššie uvedenom príklade vonkajšia vlastnosť spôsobí, že sa guľka objaví mimo oblasti obsahu.
list-style-position: inside umožňuje odrážku vo vnútri oblasti obsahu, takže sa dostane do obsahu zoznamu.

Skrátená technika

Ďalším rýchlym spôsobom formátovania zoznamu pomocou CSS je skrátená technika. Pri tejto metóde sú všetky vlastnosti zoznamu zadané v jednej samostatnej vlastnosti:

ul
{
list-style: circle url ("image.gif");
}

v skrátenej metóde sa musia všetky hodnoty zobraziť v určenom poradí takto:

list-style-type
pozícia v štýle zoznamu (vnútri, zvonka)
list-style-image

Nezáleží na tom, či preskočíte nejakú hodnotu, pokiaľ ostatní zostanú v správnom poradí.

Vlastné zoznamy sú veľmi užitočné a vďaka CSS sa dajú ľahko dosiahnuť. Jednoduché detaily transformujú priemerné webové stránky na webové stránky s najlepším výkonom.

Video Návody: American Gospel: Christ Alone (1 Hour Version) (Smieť 2024).