Popis
Nastaví adresu obrázka, ktorý slúži ako značka zoznamu. Táto vlastnosť je dedená, takže pre jednotlivé položky zoznamu sa na obnovenie značky použije hodnota none.
Syntax
list-style-image: none | url("cesta k súboru") | dediť
hodnoty
none Zakáže obrázok ako značku pre nadradený prvok. url Relatívna alebo absolútna cesta k grafický súbor. Hodnota môže byť zadaná v jednoduchých, dvojitých alebo bez úvodzoviek. zdediť Zdedí hodnotu rodiča.HTML5 CSS2.1 IE Cr Op Sa Fx
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elita
- Sed diem nonummy nibh euismod
- Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Výsledok tohto príkladu je znázornený na obr. 1.
Ryža. 1. Použitie vlastnosti list-style-image
Objektový model
document.getElementById("elementID ").style.listStyleImage
Prehliadače
IN rôzne prehliadače Vzdialenosť medzi obrázkom a textom sa môže líšiť.
IN internet Explorer do verzie 7.0 vrátane sa značky nezobrazujú, ak bol zoznam pridaný float majetok. Tento prehliadač tiež nepodporuje zdediť hodnotu.
Dobrý deň, milí čitatelia blogu. Dnes bude ďalší článok o vlastnostiach kaskádových štýlov. Zameria sa na dizajn pomocou pravidiel CSS.
Vo všeobecnosti sú zoznamy oddelené medzi prvkami bloku. Je to spôsobené tým, že obsahujú odrážky a číslovanie, ktoré umiestňuje samotný prehliadač.
Vlastnosť štýlu zoznamu - návrh zoznamu na html stránke
V jazyku CSS existujú tri vlastnosti začínajúce štýlom zoznamu, ktoré sú zodpovedné za návrh zoznamov s odrážkami a číslovaných zoznamov. Navyše je tu tiež prefabrikované pravidlo v štýle zoznamu, ktoré vám umožňuje znížiť množstvo kódu.
Všetky tieto vlastnosti je možné použiť pre oboje html prvky li, a pre prvky ul a ol. Jediný rozdiel je v tom, že ak sú pravidlá napísané pre konkrétnu hodnotu zoznamu li, potom sa to použije iba na ňu. A ak sú rovnaké pravidlá css napísané pre kontajnery ul alebo ul, potom sa použijú na všetky prvky li obsiahnuté v týchto kontajneroch.
Začnime s atribútom list-style-type, ktorý nastavuje typ markerov alebo číslovanie pre položky zoznamu:
typ-štýlu zoznamu: disk|kruh|štvorec|desatinné|desatinné-počiatočné-nula|dolná-rímčina|horná-rímčina|dolná-gréčtina|dolná-alfa|dolná-latinská|horná-alfa|horná-latinská|arménčina| gruzínsky|žiadny|nededí
Ako vidíte, vlastnosť list-style-type má veľa dostupných hodnôt, ktoré môžu špecifikovať typ značky aj rôzne typy číslovania.
- disk - značka vo forme čierneho kruhu (predvolená hodnota pre zoznamy s odrážkami).
- kruh - značka vo forme nevyplneného kruhu.
- štvorec - značka vo forme štvorca. V závislosti od prehliadača môže byť svetlá alebo tmavá.
- desiatková - číslovanie arabskými číslicami (predvolená hodnota pre číslované zoznamy).
- desatinná-vodiaca-nula - číslovanie arabskými číslicami od 01 do 99 s úvodnou nulou.
- nižšia rímska - číslovanie malými rímskymi číslicami.
- horná rímska - číslovanie veľkými rímskymi číslicami.
- nižšia gréčtina - číslovanie malými gréckymi písmenami.
- nižšia alfa a nižšia latinka - číslovanie malými latinskými písmenami.
- horná alfa a horná latinka - číslovanie veľkými latinskými písmenami.
- arménčina - číslovanie pomocou tradičných arménskych číslic.
- gruzínske - číslovanie pomocou tradičných gruzínskych číslic.
- žiadne - označovanie a číslovanie sa vôbec nevykoná.
Takto budú vyzerať položky zoznamu v prehliadači s rôznymi hodnotami typu zoznamu:
o pomocou CSSštýlov, nezáleží na tom, ktorý prvok (OL alebo UL) sa použije na vytvorenie zoznamu. OL a UL sa líšia iba predvoleným správaním a pomocou vlastnosti typu list-style-type môžete jednoducho zmeniť jeden druh zoznamu na iný.
Atribút štýlu list-style-image umožňuje nastaviť ako marker zoznam položiek grafický obrázok . Pri použití atribútu list-style-image sa hodnota atribútu list-style-type ignoruje:
list-style-image: none|<интернет-адрес файла изображения>|dediť
Význam žiadny odstráni značku obrázka a nastaví ju na normálnu, nie grafickú. Toto je predvolené správanie.
Keď zadáte adresu súboru obrázka, obrázok sa vloží na miesto značky. Rovnako ako pri použití môžete ako adresu obrázka použiť absolútne aj relatívne adresy. Ak prehliadač nedokáže načítať obrázok, použije sa predvolená značka alebo číslovanie alebo to, čo je špecifikované vo vlastnosti v list-style-type.
Príklad zoznamu s obrázkom ako značkou:
- prvá položka zoznamu;
- druhá položka zoznamu;
- tretia položka na zozname.
A takto to vyzerá:
- prvá položka zoznamu;
- druhá položka zoznamu;
- tretia položka na zozname.
Je jasné, že pri výbere obrázka ako značky je lepšie vybrať malý obrázok.
A posledná vlastnosť CSS zo série v štýle zoznamu je list-style-positiončo umožňuje určiť umiestnenie odrážky alebo číslovanie v položke zoznamu. Pre hodnotu môžu byť dve možnosti:
list-style-position: inside|outside
V prípade hodnoty vnútri značka alebo číslovanie sa umiestni akoby do zoznamu a v prípade vonku mimo li prvkov. Predvolená hodnota je vonku a značka sa presunie von.
Príklad zoznamu s rôznymi hodnotami zoznamu-style-position:
- v prvom odseku je všetko štandardne;
- v druhom odseku je pozícia štýlu zoznamu nastavená na inside. V tomto prípade si všimnite, že druhý riadok je umiestnený v jednej rovine so značkou;
- v tomto bode sa pozícia štýlu zoznamu rovná vonkajšiemu.
Prefabrikované pravidlo v štýle zoznamu CSS
Nasledujúca vlastnosť v štýle zoznamu CSS je prefabrikátom na úpravu zoznamov. Umožňuje vám zapísať všetky tri pravidlá CSS uvedené vyššie do jedného. Poradie zadávania hodnôt v ňom môže byť ľubovoľné a parametre, ktoré nešpecifikujete v štýle zoznamu, predvolene prevezme prehliadač.
Hodnoty v pravidle kompilácie v štýle zoznamu by mali byť oddelené medzerami:
list-style: list-style-type list-style-image list-style-position;
Skutočné pravidlo CSS pre zoznamy štýlov môže vyzerať asi takto:
list-style: circle url (//site/images/marker.png) mimo;
Vlastnosť v štýle zoznamu teda umožňuje výrazne znížiť množstvo kódu, pretože namiesto troch pravidiel stačí nastaviť len jedno.
Ako je uvedené vyššie, hodnoty môžu byť špecifikované v akomkoľvek poradí a v akomkoľvek množstve. Tak napríklad aby odstrániť značky zo zoznamu ponuky stačí napísať:
štýl zoznamu: žiadny;
To isté možno urobiť pomocou vlastnosti list-style-type:
list-style-type: none;
Tu dokončím príbeh o navrhovaní html zoznamov pomocou kaskádových štýlov. Dozvedieť sa o ostatných CSS vlastnosti môžete si prečítať články zo sekcie „“ a nezabudnite sa prihlásiť na odber aktualizácií blogu. Uvídime sa znovu!
| Prehliadač | internet Explorer | Netscape | Opera | Safari | Mozilla | Firefox | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Verzia | 5.5 | 6.0 | 7.0 | 6.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 1.0 | 1.7 | 1.0 | 2.0 |
| Podporované | Áno | Áno | Áno | Áno | Áno | Áno | Áno | Áno | Áno | Áno | Áno | Áno | Áno |
stručná informácia
Popis
Atribút, ktorý umožňuje súčasne určiť štýl značky, jej polohu a obrázok, ktorý sa použije ako značka. Ďalšie podrobnosti o argumentoch nájdete vo vlastnostiach list-style-type , list-style-position a list-style-image každého parametra samostatne.
Syntax
list-style: list-style-type || list-style-position || list-style-image
Argumenty
Akákoľvek kombinácia troch hodnôt, ktoré definujú štýl značky, v akomkoľvek poradí. Hodnoty sú oddelené medzerou. Nevyžaduje sa ani jeden argument, takže nepoužívané hodnoty možno vynechať.
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elita
- Sed diem nonummy nibh euismod
- Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Výsledok tohto príkladu je znázornený na obr. 1.
Ryža. 1. Pomocou parametra štýlu zoznamu
medzera medzi písmenami výška riadka okraja v štýle zoznamu maximálna výška maximálna šírka minimálna výška minimálna šírka obrys pretečeniu polstrovanie vpravo zarovnanie textu dekorácia textu odsadenie textu transformácia hore vertikálne zarovnanie bieleho miesta šírka medzier medzi slovom z-indexVlastnosť LIST-STYLE
| Nehnuteľnosť | hodnoty | Atď* | Hc* |
|---|---|---|---|
| v štýle zoznamu | [list-style-image; list-style-position; list-style-type ], zdediť | * | + |
| list-style-type | disk , kruh, štvorec, desatinné miesto, desatinná nula, dolná rímska, horná rímska, dolná latinka, horná latinka, arménsky, gruzínsky, žiadny, dediť | * | + |
| list-style-position | vnútri, vonku, dediť | * | + |
| list-style-image | URL, žiadne , zdediť | * | + |
Nehnuteľnosť Štýl zoznamu— skrátená forma vlastností písania, ktoré definujú všetky štýly značiek pre prvky zoznamu. Tieto vlastnosti platia pre číslované aj odrážkové zoznamy – je potrebné ich posudzovať samostatne. Krátka forma zápisu nesmie obsahovať žiadnu individuálnu vlastnosť, ale je potrebné dodržať poradie, v ktorom sú napísané: typ značky - jej poloha - cesta k obrázku.
Oblasť použitia*: zoznam prvkov a všetkých ostatných, pre ktoré je hodnota vlastnosti Displej je položka zoznamu.
Typ štýlu zoznamu
Súbory vlastností typ značky pre každý prvok zoznamu. Typy odrážok sa líšia pre zoznamy s odrážkami a číslované zoznamy.
Hodnoty:
disk- bodová značka.
kruh- kruhová značka.
námestie— štvorcová značka.
desiatkový— Arabské čísla: 1, 2, 3….
desatinná-počiatočná-nula- Arabské čísla začínajúce od nuly: 01, 02, 03 ... 09.
lowel-romance- Rímske číslovanie malými písmenami.
horný román- Rímske číslovanie veľkými písmenami.
lowel-latinka— malé latinské písmená: a, b, c….
horný-lat— veľké latinské písmená: A, B, C….
arménsky- Arménske číslovanie.
gruzínsky- gruzínske číslovanie.
žiadny- zrušenie.
dediť
Príklad používa dve rôzne hodnoty vlastností Typ štýlu zoznamu:
List-style-position
Vlastnosť určuje umiestnenie značky prvku. Značka je buď vo vnútri prvku alebo mimo neho.
Hodnoty:
vnútri— značka sa nachádza vo vnútri prvku zoznamu.
vonku— značka sa presunie mimo textový blok.
dediť— dedenie od nadradeného prvku.
Príklad jasne ukazuje rozdiel medzi hodnotami vnútri A vonku vlastnosti List-style-position:
Obrázok v štýle zoznamu
Vlastnosť určuje cestu k obrázku, ktorá bude slúžiť ako značka pre prvok v číslovanom zozname alebo zozname s odrážkami. Umiestnenie obrázku značky je možné ovládať pomocou vlastnosti List-style-position.
Hodnoty:
URL— cesta ku grafickému súboru.
žiadny— zruší obrázok značky, napríklad pre nadradený prvok.
dediť— dedenie od nadradeného prvku.
Ul (list-style-image: url(papka/find.png); list-style-position:inside;)
V príklade sme použili malý obrázok ako značku, ktorá jasne demonštruje možnosti nehnuteľnosti Obrázok v štýle zoznamu:
Univerzálna vlastnosť, ktorá umožňuje súčasne nastaviť štýl značky, jej polohu a obrázok, ktorý sa použije ako značka zoznamu.
stručná informácia
Označenia
| Popis | Príklad | |
|---|---|---|
| <тип> | Označuje typ hodnoty. | <размер> |
| A && B | Hodnoty musia byť na výstupe v zadanom poradí. | <размер> && <цвет> |
| A | B | Označuje, že z navrhovaných hodnôt musíte vybrať iba jednu hodnotu (A alebo B). | normálne | malé čiapky |
| A || B | Každá hodnota môže byť použitá samostatne alebo spolu s inými v ľubovoľnom poradí. | šírka || počítať |
| Hodnoty skupín. | [ plodina || kríž ] | |
| * | Opakujte nula alebo viackrát. | [,<время>]* |
| + | Opakujte jeden alebo viackrát. | <число>+ |
| ? | Zadaný typ, slovo alebo skupina je voliteľná. | vložka? |
| (A, B) | Opakujte aspoň A, ale nie viac ako B-krát. | <радиус>{1,4} |
| # | Opakujte jeden alebo viackrát oddelené čiarkami. | <время># |
hodnoty
Akákoľvek kombinácia troch hodnôt, ktoré určujú štýl značiek, sú oddelené medzerou. Kombinácie hodnôt musia nasledovať v danom poradí: najprv príde typ značky, potom poloha a obrázok. Žiadna z hodnôt sa nevyžaduje, takže nepoužité hodnoty možno vynechať.
Príklad
- Mnohorozmerný polynóm
- Normálny absolútne konvergentný rad
- Integrál funkcie
- Kolineárny extrém funkcie
Výsledok tohto príkladu je znázornený na obr. 1.
Ryža. 1. Použitie vlastnosti v štýle zoznamu
Objektový model
Objekt.style.listStyle
Špecifikácia
Každá špecifikácia prechádza niekoľkými fázami schvaľovania.
- Odporúčanie – špecifikácia bola schválená W3C a odporúča sa ako štandard.
- Odporúčanie kandidáta ( Možné odporúčanie) - skupina zodpovedná za štandard je spokojná, že spĺňa svoje ciele, ale vyžaduje pomoc od vývojárskej komunity pri implementácii štandardu.
- Navrhované odporúčanie Navrhované odporúčanie) - v tejto fáze je dokument predložený poradnej rade W3C na konečné schválenie.
- Pracovný návrh – Vyspelejšia verzia návrhu, ktorá bola prediskutovaná a upravená na posúdenie komunitou.
- Návrh editora ( Redakčný návrh) - návrh verzie normy po vykonaní zmien zo strany redaktorov projektu.
- Návrh ( Návrh špecifikácie) - prvý návrh verzie normy.
Prehliadače
Prehliadače
V tabuľke prehliadača sa používajú nasledujúce zápisy.