CSS pravidlá na prispôsobenie vzhľadu zoznamu na html stránke. Vlastnosť štýlu zoznamu (typ, obrázok, poloha). Vlastné pravidlo štýlu zoznamu CSS

Dobrý deň, milí čitatelia blogu. Dnes bude ďalší článok v prasiatku. Zameria sa na dizajn pomocou pravidiel kaskádových štýlov. Všetko je tu veľmi jednoduché, ale napriek tomu som sa rozhodol venovať tejto téme samostatný príspevok.

O niečo skôr sme sa už stihli naučiť, ako, ako a ako s tým môžete pracovať. O niečo skôr sme podrobne preskúmali všetky možné a ich rôzne kombinácie, aby sme presne špecifikovali prvok Html kódu, pre ktorý bude potrebné použiť určité vlastnosti štýlu.

Štýl zoznamu - návrh zoznamu v Html kóde

Takže v jazyku značkovania štýlu existujú tri samostatné pravidlá začínajúce štýlom zoznamu, ktoré slúžia na prispôsobenie vzhľad zoznamy (číslované alebo s odrážkami) v kóde webových dokumentov. Okrem toho existuje prefabrikované pravidlo v štýle zoznamu Css, ktoré vám umožňuje trochu znížiť množstvo kódu. Ale prvé veci.

To, čo teraz s vami zvážime, môžete použiť ako na Html prvky LI a pre prvky Ul a Ol (zoznamy s odrážkami a číslované zoznamy). Aký by bol rozdiel v použití štýlu zoznamu na tieto značky?

V skutočnosti môžete zistiť, či je vlastnosť zdedená alebo nie, na webovej stránke validátora (prečítajte si o tom na uvedenom odkaze) v časti o špecifikácii kaskádových štýlov. V stĺpci „Zdedené“ oproti zdedeným pravidlám bude „Áno“:

Začnime s list-style-type, ktorá umožňuje nastaviť typ označenia pre jednotlivé prvky html zoznam. Pre toto pravidlo sú povolené nasledujúce hodnoty:

1. Žiadne – nebude žiadne označenie (typ štýlu zoznamu: žiadne; použije sa na túto položku, a preto nemá značku)
2. Disk – vyplnený kruh (typ štýlu zoznamu: disk bol práve aplikovaný na tento riadok;)
3. Kruh - kruh ako značka
4. Štvorec – štvorec ako značka
5. Desatinné – arabské číslice (typ v štýle zoznamu: desiatkové;)
6. malé alfa - malé písmeno
7. veľké alfa - latinské písmená veľké
8. malá rímska - rímske číslice s malými písmenami
9. horná rímska - rímske číslice písané veľkými písmenami

Čo myslíte, pomocou akých prvkov Ul alebo Ol vznikol zoznam práve vyššie? Záludná otázka. Ukazuje sa, že to už nie je dôležité, aj keď v tomto konkrétnom prípade som použil Ol, ale keď ho zmením na Ul, vzhľad zostane rovnaký, pretože je nastavený pre každý prvok sám Hodnota CSS pravidlá typu štýlu zoznamu.

V skutočnosti sa Ul a Ol líšia iba predvoleným správaním (značky Ul a čísla Ol). Ale ak chcete, môžete jednoducho zmeniť jeden druh zoznamu na iný pomocou typu list-style-type. Písmo používané na označovanie čísel alebo písmen je presne rovnaké ako to, ktoré ste definovali pre obsah značiek LI. Napríklad zmenou farby písma pre zoznam zmeníme a farba fixky:

1. Zmenená farba textu (typ-štýlu-zoznamu:nižšia-rímska;farba:červená) a zmenená farba značky

Prejdime k nasledujúcej vlastnosti CSS − list-style-position. Pomocou neho môžete nastaviť polohu (umiestnenie) oblasti s fixom. Má iba dve možné hodnoty:

Tie. v skutočnosti v list-style-position označujeme, kam chceme oblasť umiestniť značkami - mimo prvku LI (vonku) alebo vnútri (vnútri). V predvolenom nastavení je oblasť so značkou vyňatá z ohraničenia, t.j. používa sa hodnota vonku.

Pozrime sa na to na príklade. V prvom prvku zoznamu konkrétne napíšem list-style-position:inside a uvidíme, čo z toho vznikne:

1. Všetko je tu predvolené.
2. Takto bude vyzerať umiestnenie oblasti značky s vnútrom. Všimnite si, že druhý riadok v tomto prvku a značka sú na rovnakej úrovni.
3. Všetko je tu predvolené.

Pravidlo pre obrázok v štýle zoznamu a prefabrikované CSS

Ďalší v poradí je List-style-image – umožňuje určiť obrázok, ktorý sa použije ako značka. Toto pravidlo je predvolene nastavené na Žiadne (t. j. ako značka sa nepoužije žiadny obrázok), ale môžete napísať funkciu Url () s uvedením cesty k obrázku, ktorý bude neskôr fungovať ako značka v tomto zozname:

Môže to vyzerať takto:

Obrázok v štýle zoznamu: url(https://website/images/list_star.png);

1. Všetko je tu predvolené.
2. Takto môže vyzerať použitie obrázka ako značky. Je jasné, že na tento účel si môžete vybrať vhodnejší obrázok.
3. Napríklad ako tu.

Ako si pamätáte, v článku o som povedal, že obrázky odkazujú na vložené prvky (v skutočnosti je to pre prehliadač rovnaké písmeno, ale niekedy veľmi veľké).

Tu je obrázok a nahradí značku (písmená alebo čísla). Zároveň sa výška riadku s prvkom zoznamu zvýši, ak ako značku vložíte veľký obrázok (ako sa stalo v druhom prvku vyššie uvedeného príkladu).

Vo funkcii obrázkov štýlu zoznamu môžete určiť oba obrázky. Ak sa obrázok nenačíta, použije sa predvolená značka alebo číslovanie, alebo čokoľvek, čo je pre tento prvok zoznamu napísané v type list-style.

Na zapísanie všetkých troch vyššie popísaných pravidiel CSS do jedného jediného bude možné použiť štýl zoznamu, ktorý je predpripravený na úpravu zoznamov. Na poradí, v akom sú hodnoty špecifikované, nezáleží. Hodnoty, ktoré nešpecifikujete v štýle zoznamu, budú prehliadačom explicitne interpretované s predvolenými hodnotami.

Kde môžem vidieť predvolené hodnoty? Áno, všetko je na rovnakom mieste – v špecifikácii CSS validátora W3C v stĺpci „Počiatočná hodnota“ oproti vlastnostiam, ktoré vás zaujímajú:

Hodnoty pre jednotlivé vlastnosti v prefabrikáte v štýle zoznamu sú oddelené medzerami. Ako už bolo spomenuté, miesta nie sú dôležité:

V praxi to môže vyzerať takto:

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

Hodnoty môžete použiť v ľubovoľnom poradí a ľubovoľnom čísle (od jednej). Mimochodom, pomocou zoznamov sa na weboch najčastejšie tvoria menu a vlastnosť List-style slúži na na odstránenie značiek zo zoznamov ponúk, ktoré sú tam úplne zbytočné:

list-style-type:none;

List-style:none;

Veľa šťastia! Uvidíme sa čoskoro na stránkach blogu

Možno vás bude zaujímať

Display (block, none, inline) in CSS – nastavenie typu zobrazenia Html prvkov na webovej stránke Ako zmeniť farbu pozadia riadkov tabuliek, zoznamov a iných prvkov Html na webe pomocou pseudotriedy n-tého potomka
Float and clear in CSS - block layout tools
Umiestňovanie pomocou Z-indexu a pravidla kurzora CSS na zmenu kurzora myši
Pozícia (absolútna, relatívna a pevná) – spôsoby umiestnenia prvkov Html v CSS (pravidlá vľavo, vpravo, hore a dole)
Na čo slúži CSS, ako k nemu pripojiť kaskádové štýly html dokument a základná syntax tohto jazyka
CSS vlastnosti dekorácia textu, zvislé zarovnanie, zarovnanie textu, odsadenie textu pre dekoráciu textu Html
Pravidlá pre písmo (hmotnosť, rodina, veľkosť, štýl) a výška riadku pre štylizáciu písma v CSS
Pozadie v CSS (farba, pozícia, obrázok, opakovanie, príloha) - všetko pre nastavenie farby pozadia alebo obrázka pozadia prvkov Html
CSS - čo to je, ako sú kaskádové štýly spojené html kód so štýlom a odkazom
Priority v Css a ich zvýšenie z dôvodu Dôležité, kombinácie a zoskupenia selektorov, používateľských a autorských štýlov

Nastaví adresu obrázka, ktorý slúži ako značka zoznamu. Táto vlastnosť sa zdedí, takže hodnota none sa používa pre jednotlivé položky zoznamu na obnovenie tokenu.

krátke informácie

Syntax

list-style-image: none | url(<адрес>)

V tejto kapitole budeme študovať atribúty štýlu, ktoré definujú možnosti odseku. Odseky v najširšom zmysle slova – ktoré zahŕňajú aj nadpisy a zoznamy a štítky s adresami a skvelé citácie. Vo všeobecnosti prvky na úrovni bloku, diskutované v kapitole 2 a určené na štruktúrovanie textu.

Nakoniec sa pozrieme na dva veľmi špecifické atribúty štýlu, ktoré nám umožňujú nastaviť zobrazenie prvku webovej stránky (tj blokový alebo vložený) a urobiť prvok neviditeľným. Tieto atribúty štýlu sa používajú zriedkavo a iba v spojení s určitým správaním (pozri časť III).

Možnosti výstupu textu

Začneme atribútmi štýlu, ktoré ovládajú textový výstup v blokových prvkoch štruktúrujúcich text. Je ich veľmi málo. A všetky sú použiteľné iba pre blokové prvky.

Atribút štýlu zarovnania textu určuje vodorovné zarovnanie textu:

zarovnanie textu: vľavo|vpravo|na stred|zarovnať|zdiť

Hodnoty, ktoré sú tu k dispozícii, sú vľavo (zarovnané doľava; normálne správanie webového prehliadača), vpravo (zarovnané vpravo), na stred (na stred) a zarovnané (úplne zarovnané).

Príklady:

P (zarovnanie textu: zarovnanie)
H1 ( zarovnanie textu: na stred )

Atribút štýlu odsadenia textu nastavuje odsadenie pre „červenú čiaru“:

zarážka textu:<отступ "красной строки">

Tu sú povolené absolútne a relatívne (vzhľadom na šírku odseku) hodnoty odsadenia. Štandardne je odsadenie „červenej čiary“ nulové. Všimnite si, že atribút štýlu zarážky textu nepodporuje zdedenú hodnotu.

Príklad:

P (odsadenie textu: 5 mm)

Teraz budú mať odseky „červenú čiaru“.

zoznamy vyniknúť medzi blokovými prvkami. V podstate preto, že po prvé obsahujú ďalšie blokové prvky (samostatné odseky) a po druhé obsahujú značky a číslovanie, ktoré umiestňuje samotný webový prehliadač. Tu budeme hovoriť o značkách a číslovaní, alebo skôr o atribútoch štýlu určených na nastavenie ich parametrov.

Atribút štýlu list-style-type určuje typ odrážok alebo číslovanie položiek zoznamu:

typ-štýlu zoznamu: disk|kruh|štvorec|desatinné|začiatočné-desiatkové-nula|

dolná-rímska|horná-rímska|dolná-gréčtina|nižšia-alfa|dolná-latinčina|

horná-alfa|horná-latinská|arménčina|gruzínska|žiadna|nedediť

Ako vidíte, tento atribút štýlu má veľa dostupných hodnôt. Označujú rôzne typy značiek a rôzne spôsoby číslovania.

Označenie disku vo forme čierneho kruhu (zvyčajné správanie pre zoznamy s odrážkami).

Kruh - značka vo forme svetelného kruhu.

Štvorec - značka vo forme štvorca. V závislosti od webového prehliadača môže byť svetlá alebo tmavá.

Desatinné - číslovanie arabskými číslicami (bežné správanie pri číslovaných zoznamoch).

Desatinná nula - arabské číslice od 01 do 99 s nulou na začiatku.

Nižšia rímska - číslovanie malými rímskymi číslicami.

Horná rímska - číslovanie veľkými rímskymi číslicami.

Dolná gréčtina - číslovanie nižšími gréckymi písmenami.

Nižšie-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 tradičnými arménskymi číslicami.

Gruzínčina - číslovanie tradičnými gruzínskymi číslicami.

Žiadne – Bez značky alebo číslovania (zvyčajné správanie pre iné ako zoznamy).

NA POZNÁMKU

Pozreli sme sa len na hodnoty atribútov typu zoznamu, ktoré poskytuje CSS 3. CSS 2 však poskytuje niekoľko ďalších hodnôt, ktoré webové prehliadače stále podporujú. Nájdete ich na https://developer.mozilla.org/en/CSS/list-style-type.

Atribút štýlu typu list-style môže byť nastavený na oba zoznamy a pre jednotlivé položky zoznamu. V druhom prípade sa vytvorí zoznam, v ktorom majú položky rôzne odrážky alebo číslovanie. Niekedy sa to môže hodiť.

Tu je definícia zoznamu s odrážkami so značkou políčka:

UL (typ štýlu zoznamu: štvorec)

A vo výpise 9.1 nastavíme rovnakú značku pre jednu z položiek v zozname s odrážkami.

Atribút list-style-image style umožňuje nastaviť ľubovoľný grafický obrázok ako značku položky zoznamu (vytvoriť grafickú značku). V tomto prípade sa hodnota atribútu štýlu typu list-style, ak existuje, ignoruje:

list-style-image: none|<интернет-адрес файла изображения>|dediť

Internetová adresa súboru grafickej značky je špecifikovaná v rovnakom formáte ako internetová adresa súboru obrázka na pozadí (pozri kapitolu 8):

UL (list-style-image: url(/markers/dot.gif) )

Hodnota none odstráni grafickú značku a vráti jednoduchú, negrafickú značku. Toto je normálne správanie.

Atribút štýlu zoznamu-štýlu-obrázka je možné nastaviť aj pre samotné zoznamy, ako aj pre jednotlivé položky zoznamu.

Atribút štýlu list-style-position style vám umožňuje určiť umiestnenie odrážky alebo čísla v položke zoznamu:

list-style-position: inside|outside|dedit

K dispozícii sú dve hodnoty:

Vnútri - značka alebo číslovanie je akoby vo vnútri položky zoznamu, sú jej súčasťou;

Vonku - značka alebo číslovanie je mimo bodu zoznam(toto je normálne správanie).

Nie je jasné, prečo je tento atribút štýlu potrebný, pretože zoznamy, v ktorých je značka alebo číslovanie vyňaté z odsekov, sú lepšie čitateľné. No kedze je to v CSS standarde, tak nech...

Príklad:

OL ( list-style-position: inside )

Univerzálna vlastnosť, ktorá umožňuje súčasne nastaviť štýl značky, jej polohu, ako aj obrázok, ktorý sa použije ako značka zoznamu.

krátke informácie

S vlastnosťou LIST-STYLE

Nehnuteľnosť Štýl zoznamu je skrátená forma vlastností písania, ktorá nastavuje všetky štýly značiek pre položky zoznamu. Tieto vlastnosti platia pre číslované aj odrážkové zoznamy – je potrebné ich posudzovať samostatne. Skrátená forma zápisu nesmie obsahovať žiadnu individuálnu vlastnosť, treba však dodržať poradie ich zápisu: typ značky - jej poloha - cesta k obrázku.

Oblasť použitia*: prvky zoznamov a všetky ostatné, pre ktoré má vlastnosť hodnotu 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-rímsky- Rímske číslice s malými písmenami.
horná rímska- Rímske číslice 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 dva rôzne významy vlastnosti 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 očíslované resp odrážkový zoznam. Umiestnenie obrázku značky je možné ovládať pomocou vlastnosti list-style-position.

Hodnoty:

URL- cesta k grafický súbor.
ž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: