Farba riadku tabuľky CSS. Poznámka: záporný offset

Príznaky tehotenstva po implantácii embrya

Pomocou atribútu BGCOLOR môžete zmeniť farbu obsahu bunky, riadka, skupiny stĺpcov, skupiny riadkov alebo celej tabuľky.

Farbu je možné určiť buď názvom farby, alebo hexadecimálnou hodnotou kódu farby so znakom #.

Príklad:

HTML kód:


Displej prehliadača:


1 2
3 4

Grafické pozadie tabuľky html stránky

Pomocou atribútu BACKGROUND môžete nastaviť grafické pozadie bunky alebo celej tabuľky. Ak je obrázok väčší ako bunka alebo tabuľka, pre ktorú je určený, prehliadač oreže obrázok tak, aby sa zmestil do príslušného objektu.

Príklad:

majú veľa atribútov, ktoré musia byť špecifikované, aby naša tabuľka mala rám, pozadie, rozmery atď.

Najprv sa pozrieme na atribúty, ktoré sú vlastné značkám

HTML kód:


11111 22222 33333 44444

Displej prehliadača:


11111 22222
33333 44444

Zarovnanie údajov v tabuľke stránok html

Atribúty ALIGN a VALIGN sa používajú na zarovnanie údajov v tabuľke.

Atribút ALIGN slúži na horizontálne zarovnanie. V predvolenom nastavení je obsah hlavičky vycentrovaný a obsah bunky je zarovnaný doľava.

Atribút VALIGN zarovnáva údaje vertikálne. V predvolenom nastavení sú informácie zarovnané na stred. Nástroje na zarovnanie možno použiť v jednej bunke, riadku, skupine stĺpcov alebo skupine riadkov. Atribút zarovnania v bunkách tabuľky má najvyššiu prioritu.

Ak obmedzíte vzdialenosť medzi obsahom bunky a jej okrajmi pomocou atribútu CELLPADDING, ovplyvní to výsledok zarovnania. Napríklad pri CELLPADDING=3 a ALIGN="top" budú údaje umiestnené tri pixely od horného okraja bunky.

Príklad:

ktorý je zodpovedný za vytváranie reťazcov a značky, zodpovedný za tvorbu buniek.

Aby sme videli, ako všetko funguje v praxi, vytvoríme tabuľku pozostávajúcu z dvoch riadkov a štyroch buniek. Kód pre našu tabuľku bude nasledujúci:

HTML kód:


1111
2222		 22222 Spodná bunka Spodná bunka

Displej prehliadača:


1111
2222 		22222
Spodná bunka Spodná bunka

Zmena veľkosti tabuľky stránok HTML

Šírka tabuľky je určená atribútom WIDTH. Hodnotu je možné zadať v absolútnych jednotkách (WIDTH=250) aj v relatívnych jednotkách (WIDTH="80%"). Napríklad nastavením šírky na 600 pixelov si môžete byť istí, že sa tabuľka zmestí do okna prehliadača pri akomkoľvek rozlíšení monitora.

To isté možno urobiť s výškou tabuľky pomocou atribútu HEIGHT.

Keď nastavíte šírku a výšku tabuľky na príliš malé hodnoty, prehliadač určí minimálne hodnoty, ktoré umožňujú normálne zobrazenie údajov.

Všetko vyššie uvedené platí pre bunky tabuľky. V tomto prípade nie je vôbec potrebné špecifikovať rozmery každej jednotlivej bunky. Keď zmeníte šírku bunky, všetky susediace bunky v stĺpci sa zobrazia na základe novej hodnoty. To isté platí pre výšku bunky.

Dobrý deň, milí čitatelia blogu. Rozhodol som sa napísať krátky príspevok na tému využitia CSS na zlepšenie zážitku návštevníkov stránky.

Z ničoho nič mi napadla myšlienka, že ak položky v pravom menu môjho blogu oživte to striedaním farieb pozadia(vyrobte rôzne farby pre párne a nepárne čiary), môže to zlepšiť použiteľnosť. Tu vkladám svoje nádeje do jednoduchosti vnímania veľkého množstva informácií, keď sú rozdelené do blokov (ako sa to stáva napríklad pri použití odsekov v texte).

Táto prax sa veľmi často využíva pri stylingu tabuliek, keď chcú zvýšiť viditeľnosť informácií v nich zobrazených. Pri hľadaní riešenia sa ukázalo, že tento problém sa dá celkom jednoducho vyriešiť pomocou samotného CSS.

Nie je potrebné označovať párne a nepárne prvky zoznamu triedami (pravé menu funguje na mojom základe). Stačí pridať pár riadkov kódu pomocou pseudotriedy n-tého potomka v súbore CSS, ktorý je zodpovedný za styling stránky. N-té dieťa má však množstvo iných využití, ktoré tiež v príspevku nespomeniem.

Možnosti pseudotriedy n-tého dieťaťa a jej využitie na stránke

Vlastne po ohlásení pseudotriedy n-tého dieťaťa by som mohol príspevok ukončiť, pretože si o ňom môžete vygoogliť veľa informácií. Ale toto nie je naša cesta, tak budeme pokračovať. Najprv teda opíšem svoje kroky, ako zmeniť správne menu na „pruhované“. Stačilo zistiť pomocou vývojárskych nástrojov zabudovaných v prehliadačoch (vyvolaných z kontextového menu požadovaného prvku na webovej stránke výberom položky ako „Zobraziť kód prvku“), kde sa v súbore štýlu zobrazuje vzhľad riadkov tohto zoznam je nastavený.

Princíp práce s vývojárskymi nástrojmi je podobný tomu, ktorý som opísal v článku o . Kliknite pravým tlačidlom myši na ľubovoľnú položku v ľavom menu môjho blogu a pozrite sa na výsledný prehľad na paneli, ktorý sa otvorí:

Vľavo uvidíte Html kód tohto prvku (nás zaujíma prvok s LI tagmi - riadok zoznamu) a v pravom stĺpci sú CSS pravidlá, ktoré prehliadač používa na jeho štylizáciu. Okamžite zistíte, kde sa súbor so štýlom nachádza, presunutím kurzora myši na jeho názov.

V mojom prípade to bude súbor, ktorý sa dá otvoriť pripojením na stránku cez FTP a následnou cestou (neodporúčal by som upravovať súbory šablón z oblasti správy WordPress, pretože neexistuje spôsob, ako urobiť krok späť, ako je to možné, napr.).

/wp-content/themes

V skutočnosti na paneli nástrojov pre vývojárov v oblasti štýlov CSS dokonca nájdete riadok, na ktorom je v súbore štýlu napísané požadované pravidlo. V mojom prípade je to 281 riadkov. Preto po otvorení style.css v programe Poznámkový blok (mám ho priradený ako predvolený editor pre všetky súbory, ktoré sa objavujú v engine stránky), som sa okamžite presunul na tento riadok.

A hneď pod ním som pridal niekoľko ďalších pravidiel s (toto pravidlo je zodpovedné za zmenu farby pozadia pravého panela ponuky, keď je kurzor myši priamo nad ním - vďaka tomu je ponuka „živšia“ alebo niečo také) a s n-tým -detská pseudotrieda uvedená vyššie. Ak sme už hovorili o hovver (pozri odkaz vyššie), potom teraz budeme hovoriť o n-tom dieťati. Ak ste si všimli, že parameter 2n je pre túto pseudotriedu napísaný v zátvorkách.

N-té dieťa (2n)

Všeobecne hodnotu tohto pseudotriedneho n-tého dieťaťa sa uvádza pomocou výrazu: an+b, kde a a b sú celé čísla a n je počítadlo, ktoré nadobúda celočíselné hodnoty od 0 a viac: 0,1,2,3... V našom prípade pri zmene počítadla n dostaneme čísla 0 , 2, 4, 6 atď. To znamená, že vlastnosť špecifikovaná pre túto pseudotriedu (v našom prípade je to pravidlo pre nastavenie pozadia riadku zoznamu pomocou ) je v zozname na #E4F2FA.

Táto šestnástková sústava je najbežnejšia. Na nájdenie vhodných farieb som použil program Contrast Analyzer 2.0 popísaný v uvedenom odkaze. Umožňuje vám zachytiť farbu z obrazovky a prispôsobiť jej svetlejšie tóny, čo je presne to, čo som urobil.

Pre pozadie panela s ponukami som si pri prejdení kurzorom myši (pseudotrieda) zvolil ešte svetlejší odtieň z rovnakého radu.

Ďalšie príklady použitia n-tého dieťaťa

Ak chcete zmeniť pozadie alebo inak ovplyvniť vzhľad (napríklad pridať výplň, zväčšiť písmo alebo urobiť niečo iné neslušnejšie), použite výraz. Môžete skontrolovať, že nahradením celých čísel začínajúcich od nuly za n dostanete vo výsledku iba nepárne čísla. Môžete použiť obe možnosti naraz (pre párne a nepárne riadky zoznamov, tabuliek alebo čohokoľvek iného).

Viac niekoľko príkladov použitia n-tého dieťaťa na zvýraznenie rôznych riadkov zoznamov, tabuliek a podobných prvkov:

  1. Na zosmiešňovanie nepárnych prvkov môžete použiť n-té dieťa (nepárne) namiesto výrazu uvedeného vyššie a n-té dieťa (párne) pre párne prvky.
  2. Čo ak chcete zmeniť iba štvrtý riadok? potom pridajte do pravidla CSS pseudotriedu n-tého potomka (4) oddelenú dvojbodkou.
  3. Chcete zmeniť vzhľad riadkov počnúc deviatou? Žiadny problém - n-té dieťa (n+9).
  4. Ak chcete, naopak, vybrať iba prvých deväť prvkov, potom použite konštrukciu n-tého potomka (-n+9).
  5. Ak chcete vybrať prvky od deviateho do osemnásteho, pridajte zloženú pseudotriedu:n-té dieťa (n+9):nté dieťa (-n+18). Čistá logika.
  6. Chcete urobiť to isté ako v predchádzajúcom odseku, ale zvýrazniť iba párne riadky v tomto rozsahu? Žiadny problém - :n-té dieťa (n+9):n-té dieťa (-n+18):n-té dieťa (párne).

No a tam to je. Tá vec sa môže ukázať ako celkom užitočná. V každom prípade to bolo pre mňa užitočné.

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

Mohlo by vás to zaujímať

Selektory pseudotried a pseudoprvkov v CSS (hover, first-child, first-line a iné), vzťahy medzi značkami HTML kódu
Display (block, none, inline) in CSS – nastavte typ zobrazenia Html prvkov na web stránke
Vlastnosti CSS text-decoration, vertical-align, text-align, text-indent pre zdobenie textu v Html
Štýl zoznamu (typ, obrázok, pozícia) – CSS pravidlá pre prispôsobenie vzhľadu zoznamov v Html kóde
Ako nájsť a odstrániť nepoužívané riadky štýlu (extra selektory) v súbore CSS vašej stránky
Pozícia (absolútna, relatívna a pevná) – spôsoby umiestnenia prvkov Html v CSS (pravidlá vľavo, vpravo, hore a dole) Rôzne štýly pre interné a externé odkazy cez CSS
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
Pravidlá pre písmo (hmotnosť, rodina, veľkosť, štýl) a výška riadku pre štylizáciu písma v CSS
Float and clear in CSS - block layout tools
Na čo slúži CSS, ako prepojiť kaskádové štýly s Html dokumentom a základná syntax tohto jazyka
Selektory značiek, tried, Id a univerzálne selektory, ako aj selektory atribútov v modernom CSS

- 4,7 z 5 na základe 6 hlasov

Pri tvorbe webových stránok je často potrebné znázorniť časť obsahu stránky vo forme tabuliek.

Niekedy sa na vytvorenie štruktúry stránky používajú tabuľky. Tento prístup nie je úplne správny, pretože tabuľky pôvodne neboli určené na umiestnenie prvkov stránky.

Na tento účel je najlepšie použiť nástroje CSS. V niektorých prípadoch sú však tabuľky nevyhnutné a vhodné na poskytovanie informácií.

Značka je zodpovedná za vytváranie tabuliek v HTML

a uzatváraciu značku
. Ale už asi viete, že tabuľky sa skladajú z riadkov a buniek. Preto, aby sme vytvorili tabuľku, potrebujeme ďalšie dve značky: toto je značka
1 - bunka 2 - bunka
3 - bunka 4 - bunka

Ak chcete zistiť, čo z toho vyplýva, vytvorte stránku HTML pomocou kódu nižšie. Ak neviete, ako vytvoriť stránku HTML, pozrite si lekciu.

Tabuľka

1 - bunka 2 - bunka
3 - bunka 4 - bunka

Mali by ste získať nasledovné:

Ako vidíte, náš stôl zatiaľ vôbec nevyzerá ako stôl. To všetko je spôsobené našimi značkami

A
. Ak chcete vidieť, ako sa naša tabuľka zmení, môžete tieto atribúty pridať do značiek
a po obnovení stránky uvidíte, ako bude tabuľka vyzerať v prehliadači. Pre pohodlie neposkytnem celý kód stránky, ale iba kód týkajúci sa značky t.j. čo zmeníme.

A tak taguj

má nasledujúce atribúty:

border - nastavuje šírku okraja tabuľky v pixeloch, zapisuje sa takto:

.

bordercolor – farba okraja tabuľky; tento atribút nie je podporovaný všetkými prehliadačmi, takže zadaná farba okraja sa vám nemusí zobraziť:

Šírku rámca nastavíme na 2 pixely, modrá, tabuľka bude vyzerať takto:

šírka – nastavuje šírku tabuľky v pixeloch alebo percentách:

výška – výška tabuľky v pixeloch alebo percentách:

Šírka tabuľky bude 250 pixelov a výška 150 pixelov, tabuľka bude vyzerať takto:

zarovnať – zarovnanie tabuľky;

align=left – tabuľka bude zarovnaná vľavo;

align=right – tabuľka bude zarovnaná doprava:

Náš stôl by mal byť zarovnaný správne.

bgcolor – farba pozadia tabuľky, bgcolor=#FFC000 – farba pozadia tabuľky bude žltá:

Tabuľka bude vyzerať takto:

pozadie – pomocou tohto atribútu môžete určiť obrázok, ktorý bude slúžiť ako pozadie tabuľky.

Ako príklad uložte malý obrázok, ktorý vidíte v zátvorkách () do priečinka, kde máte stránku s tabuľkou, a do značky

pridajte background="fon.gif" celý kód:

Tabuľka bude vyzerať takto:

cellpadding – atribút, ktorý určuje ľavú, pravú, hornú a spodnú výplň vnútri bunky. Napríklad, ak do nášho tagu

pridať cellpadding=10, potom bude text napísaný vo vnútri buniek odsadený.

cellspacing – nastavuje medzeru medzi bunkami tabuľky.

Ak sa bližšie pozriete na našu tabuľku, uvidíte, že medzi rámčekmi buniek je malý priestor; toto je odsadenie medzi bunkami, je to štandardne nastavené. Aby ste ho odstránili, stačí v štítku

nastaviť rozstup buniek=0. Celý kód:

V dôsledku toho boli naše bunky pritlačené k sebe a text vo vnútri buniek bol odsadený:

hspace - nastavuje medzeru od tabuľky doľava a doprava v pixeloch, zapísaná takto: hspace=20

nowrap – zakazuje zalamovanie slov v bunke, jednoducho napísané nowrap

Posledné dva atribúty sa používajú veľmi zriedka, preto s nimi neuvádzam príklad kódu.

Teraz sa pozrime na atribúty značiek

, niektoré z nich sú rovnaké ako atribúty značky

šírka – šírka bunky v pixeloch alebo percentách.

výška – výška bunky v pixeloch alebo percentách.

Nastavme napríklad šírku prvej bunky prvého riadku na 30 % - šírka=30 % a výšku prvej bunky druhého riadka na 100 pixelov. Kód bude takýto:

1 - bunka 2 - bunka
3 - bunka 4 - bunka

Všimnite si, že stačí nastaviť výšku alebo šírku jednej bunky a všetky bunky v tomto riadku alebo stĺpci budú mať rovnakú veľkosť. Ak teda potrebujete nastaviť napríklad určitú výšku buniek, stačí zadať tento parameter pre jednu bunku a všetky ostatné bunky v riadku budú rovnaké.

zarovnať – zarovná obsah buniek, má nasledujúce hodnoty:

align="lef" – obsah bunky bude zarovnaný doľava;

align="right" – obsah bude zarovnaný doprava;

align="center" – obsah bude zarovnaný na stred bunky.

Pridajme tieto atribúty a hodnoty do nášho kódu a zarovnajme obsah 1. bunky vľavo (obsah je štandardne zarovnaný vľavo, ale v niektorých prípadoch je tento atribút nevyhnutný), obsah 2. bunky je zarovnané vpravo a 4. v strede.

1 - bunka 2 - bunka
3 - bunka 4 - bunka

bgcolor – pomocou tohto atribútu môžete nastaviť farbu bunky.

pozadie – nastaví obrázok ako pozadie bunky.

S týmito atribútmi sme sa už stretli pri zvažovaní atribútov značiek

. Fungujú rovnako, len v tomto prípade nastavujú pozadie bunky. Napríklad nastavme farbu pozadia 2. bunky na žltú a nastavme nasledujúci obrázok () ako pozadie 4. bunky.

Aby sme to dosiahli, do nášho kódu pridáme potrebné atribúty, pre naše bunky bgcolor="#FFFF00" pre 2. bunku a background="fon.jpg" pre 4. bunku. V dôsledku toho bude naša tabuľka vyzerať takto:

Ako vidíte, napriek tomu, že nastavujeme pozadie samotnej tabuľky, ak nastavíme pozadie buniek tabuľky, tak sa zobrazí presne to pozadie, ktoré sme bunkám nastavili.

bordercolor – nastavuje farbu okraja bunky.

S týmto atribútom sme sa stretli aj pri zvažovaní atribútov značiek

. Upozorňujeme, že nefunguje vo všetkých prehliadačoch. Upozorňujeme, že značka . V praxi existujú prípady, keď je potrebné špeciálne formátovanie stĺpcov, čo je možné nasledujúcimi spôsobmi:

pomocou značky

Môžete nastaviť pozadie pre ľubovoľný počet stĺpcov;

pomocou selektorovej tabuľky td:first-child , table td:last-child môžete nastaviť štýly pre prvý alebo posledný stĺpec tabuľky (okrem prvej bunky hlavičky tabuľky);

Pomocou selektora tabuľky td:nth-child (pravidlo výberu stĺpcov) môžete nastaviť štýly pre ľubovoľné stĺpce tabuľky.

Môžete si prečítať viac o selektoroch CSS.

5. Ako pridať názov tabuľky

Do tabuľky môžete pridať názov pomocou značky

Neexistuje žiadny atribút ohraničenia označujúci hranicu bunky. Nastavme farbu orámovania 2. bunky na červenú; na to pridáme do druhej bunky atribút bordercolor="#FF0000"

Existuje ďalší atribút určený na zarovnanie obsahu buniek:

valign – zarovná obsah buniek vertikálne.

Má nasledujúce významy:

valign="top" – zarovnať obsah bunky k hornému okraju;

valign="bottom" – zarovná obsah bunky k spodnému okraju;

valign="middle" – zarovnanie na stred bunky;

valign="baseline" – zarovná obsah bunky pozdĺž základnej čiary.

Pridajme tieto atribúty do každej z našich 4 buniek.

1 - bunka 2 - bunka
3 - bunka 4 - bunka

Naša tabuľka bude vyzerať takto:

Posledná vec, ktorú musíme v tomto návode pokryť, je zlúčenie buniek tabuľky. Ak chcete zlúčiť niekoľko buniek za sebou, existuje atribút colspan="", kde je počet buniek, ktoré je potrebné zlúčiť, uvedený v úvodzovkách.

Od autora: CSS má selektory na nájdenie prvkov na základe ich pozície v strome dokumentu. Nazývajú sa indexové pseudotriedy, pretože sa pozerajú na pozíciu prvku a nie na jeho typ, atribúty alebo ID. Celkovo je ich päť.

:prvé dieťa a :posledné dieťa

Ako ste už z názvu mohli uhádnuť, pseudotriedy :first-child a :last-child vyberajú prvé a posledné dieťa v uzle (prvku). Rovnako ako u iných pseudotried, :prvé dieťa a :posledné dieťa majú pri použití jednoduchých selektorov minimálne vedľajšie účinky.

Zvážte HTML a CSS nižšie:

:prvo-dieťa a:posledné dieťa

Zoznam ovocia

  • Jablká
  • Banány
  • Čučoriedky
  • Pomaranče
  • Jahody

< ! DOCTYPE html >

< html lang = "en-US" >

< head >

< meta charset = "utf-8" >

< title >: prvé - dieťa a : posledné - dieťa< / title >

< / head >

< body >

< h2 >Zoznam ovocia< / h2 >

< ul >

< li >Jablká< / li >

< li >Banány< / li >

< li >Čučoriedky< / li >

< li >Pomaranče< / li >

< li >Jahody< / li >

< / ul >

< / body >

< / html >

Snímka obrazovky nižšie ukazuje výsledok.

Hlavička h2 a prvá li sú sfarbené do ružova, pretože:prvé dieťa nie je viazané na konkrétne prvky. Značka h2 je prvým potomkom značky body a li je prvým potomkom prvku ul. Prečo sú však zvyšné prvky li zelené? Pretože:last-child tiež nie je viazaný na konkrétny prvok a ul je posledným podriadeným prvkom v značke body. V skutočnosti sme v štýloch vyššie napísali *:prvé dieťa a *:posledné dieťa.

Pridaním jednoduchého selektora do :first-child a :last-child budú konkrétnejšie. Obmedzme náš výber len na položky zoznamu. :first-child nahraďte li:first-child a :last-child s li:last-child. Snímka obrazovky nižšie ukazuje výsledok.

:nth-child() a :nth-last-child()

Nie je zlý nápad mať možnosť vybrať prvý a posledný podradený prvok v dokumente. Čo ak potrebujete vybrať párne alebo nepárne prvky? Možno budeme musieť vybrať šiesty prvok v strome alebo použiť štýly na každý tretí podradený prvok. Tu nám pomôžu pseudotriedy:nth-child() a:nth-last-child().

Podobne ako :not, :nth-child() a :nth-last-child() sú tiež funkčné pseudotriedy. Berú jeden argument, ktorým musí byť:

kľúčové slovo nepárne;

kľúčové slovo párne;

celočíselná hodnota typu 2 alebo 8;

argument v tvare An+B, kde A je krok, B je posun a n je kladné celé číslo.

Posledný argument je trochu komplikovanejší ako ostatné. Pozrieme sa na to trochu neskôr.

Aký je rozdiel medzi :nth-child() a :nth-last-child()? Líšia sa začiatočným bodom: :nth-child() počíta dopredu a :nth-last-child() počíta dozadu. Indexy CSS používajú prirodzené čísla a začínajú od 1, nie od 0.

Pomocou pseudotried:nth-child() a:nth-last-child() je vhodné vytvárať striedajúce sa vzory. Pruhovaný stôl je perfektným prípadom použitia. CSS nižšie dáva párnym riadkom v tabuľke svetlo modrosivé pozadie, výsledok je možné vidieť na obrázku nižšie:

tr:nth-child(párne) ( pozadie: rgba(96, 125, 139, 0,1); )

tr : n-té dieťa (párne) (

pozadie: rgba(96, 125, 139, 0,1);

Ak prepnete z:nth-child na:nth-last-child, stĺpce sa obrátia, pretože počítanie začína zdola. Pozrite si snímku obrazovky nižšie.

Chcete niečo zložitejšie, so zložitejšími argumentmi? Vytvorme dokument s 20 prvkami, ako je uvedené nižšie.

Pomocou :nth-child() a :nth-last-child() môžete vybrať jeden konkrétny prvok. Môžete vybrať všetky podradené prvky po danej pozícii alebo môžete vybrať prvky s násobkom posunu. Zmeňme pozadie šiesteho prvku:

Položka:n-té dieťa(6) ( pozadie: #e91e63; )

Ešte raz, A je krok. Toto je faktor pre n začínajúci na 1. To znamená, že ak A = 3, potom 3n vyberie tretí, šiesty a deviaty prvok atď. To je presne to, čo je možné vidieť na snímke obrazovky nižšie.

Tu je všetko o niečo zaujímavejšie. Pomocou :nth-child() a :nth-last-child() môžete vybrať všetky prvky za daným bodom. Vyberme všetky prvky okrem prvých siedmich:

Položka:n-té dieťa(n+8) (pozadie: #e91e63; )

Položka: n-té dieťa (n + 8) (

pozadie : #e91e63;

Nie je tu špecifikovaný žiadny krok. Výsledkom je, že n+8 vyberie všetky prvky n, počnúc ôsmym. Pozrite si snímku obrazovky nižšie.

Poznámka: záporný offset

Platné sú aj záporné hodnoty a rozsahy. Záznam ako:nth-child(-n+8) obráti výber a vyberie prvých osem prvkov.

Pomocou posunu a kroku môžete vybrať každý tretí prvok, počnúc piatym:

Položka:n-té dieťa(3n+5) (pozadie: #e91e63; )

Položka : n-té dieťa (3n + 5) (

pozadie : #e91e63;

Výsledok.

len dieťa

Pseudotrieda jediného potomka vyberie prvok iba vtedy, ak je jediným podriadeným prvkom. Nižšie sú uvedené dva zoznamy s odrážkami. Prvý má jeden prvok, druhý má tri:

  • Apple
  • Oranžová
  • Banán
  • Malina

< ul >

< li >Apple< / li >

< / ul >

< ul >

< li >Oranžová< / li >

< li >Banán< / li >

< li >Malina< / li >

< / ul >

Vyberie sa selektor li:only-child(color: #9c27b0;).

  • Apple
    • , keďže ide o jediné dieťa z prvého zoznamu. Prvky druhého zoznamu nie sú zahrnuté do výberu, pretože existujú tri susediace prvky. Výsledok je uvedený nižšie.

    :prázdny

    Pseudotriedu :empty môžete použiť na výber prvkov, ktoré nemajú potomkov. Pseudotrieda:empty hovorí sama za seba (prázdne z anglického „empty“). Aby bol prvok zahrnutý do výberu:empty, musí byť úplne prázdny, ani medzery. To znamená, že sa dostane do vzorky, ale nie.

    Niekedy WYSIWYG editory vložia do vášho obsahu prázdne p tagy. Môžete použiť :empty a :not, aby ste zabránili aplikovaniu štýlov na tieto prvky. Napríklad p:not(:empty).

    Výber prvkov konkrétneho typu podľa ich indexu

    Pseudotriedy opísané v predchádzajúcej časti vyberajú prvky, ak zaberajú určitú pozíciu v strome dokumentu. Napríklad p:nth-last-child(2) vyberie všetky p tagy pred posledným v rodičovskom bloku.

    V tejto časti budeme hovoriť o typovaných indexových pseudotriedach. Tieto pseudotriedy tiež vyberajú prvky podľa hodnoty indexu, ale výber je obmedzený na konkrétny typ. Napríklad musíte vybrať piatu značku p alebo dokonca značky h2.

    Existuje päť takýchto pseudotried, ktorých mená sú presným opakom ich netypových náprotivkov:

    n-tý posledný typ()

    Medzi nimi a pseudotriedami detského indexu je tenká čiara. Záznam p:nth-child(5) nájde iba piaty tag p, zatiaľ čo záznam p:nth-of-type(5) nájde všetky tagy p a vyberie piaty.

    Vytvorme ďalší dokument. Má tiež 20 prvkov, len niektoré sú p tagy a iné sú divs. p tagy so zaoblenými rohmi, pozri snímku obrazovky nižšie.

    Špecifikácia CSS dáva neobmedzené možnosti pri navrhovaní tabuliek. V predvolenom nastavení nemajú bunky tabuľky a tabuľky žiadne viditeľné okraje ani pozadie a bunky v tabuľke nie sú vedľa seba.

    Šírka buniek tabuľky je určená šírkou ich obsahu, takže šírka stĺpcov tabuľky sa môže líšiť. Výška všetkých buniek v rade je rovnaká a je určená výškou najvyššej bunky.

    Formátovanie tabuliek

    1. Okraje tabuľky

    Štandardne sa tabuľka a bunky v nej zobrazujú v prehliadači bez viditeľných okrajov. Hranice stola sú špecifikované vlastnosťou border:

    Tabuľka ( border-collapse: zbaliť; /*odstrániť prázdne miesta medzi bunkami*/ orámovanie: 1px plná sivá; /*nastaviť vonkajší okraj tabuľky na sivú farbu s hrúbkou 1px*/ )

    Ohraničenie buniek hlavičky každý stĺpec je určený pre prvok:

    Th (ohraničenie: 1px plná sivá farba;)

    Hranice buniek telá tabuľky sú špecifikované pre prvok td:

    Td (ohraničenie: 1px plná sivá farba;)

    Hrúbka okrajov susedných buniek nie je zdvojnásobená, takže okraje pre celú tabuľku môžete nastaviť nasledujúcim spôsobom:

    Th, td (ohraničenie: 1px plná sivá farba;)

    Vonkajší okraj tabuľky môžete zvýrazniť tak, že mu dáte väčšiu šírku:

    Tabuľka (ohraničenie: 3px sivá farba;)

    Hranice sa dajú nastaviť čiastočne:

    /* nastavenie šedého vonkajšieho orámovania s hrúbkou 3px pre tabuľku */ tabuľka (border-top: 3px plná šedá; ) /* nastavenie šedého orámovania s hrúbkou 1px pre bunku tela tabuľky */ td (border-bottom: 1px solid šedá ;)

    Môžete si prečítať viac o hraničnom majetku.

    2. Ako nastaviť šírku a výšku stola

    Predvolené šírka a výška stola určený obsahom jeho buniek. Ak šírka nie je špecifikovaná, bude sa rovnať šírke najširšieho riadku (riadku).

    Šírka tabuľky a stĺpca sa nastavuje pomocou vlastnosti width. Ak je pre tabuľku zadaná tabuľka (šírka: 100%;), šírka tabuľky sa bude rovnať šírke kontajnerového bloku, v ktorom sa nachádza.

    Šírka tabuľky a stĺpcov sa zvyčajne uvádza v px alebo %, napríklad:

    Tabuľka (šírka: 600 pixelov;) th (šírka: 20 %;) td:prvé dieťa (šírka: 30 %;)

    Výška stola nešpecifikované. Výška riadku s tabuľkami je možné manipulovať pridaním vrchnej a spodnej výplne k prvkom

    		A . Fixácia výšky pomocou vlastnosti height sa neodporúča.

    Th, td (odsadenie: 10px 15px;)

    3. Ako nastaviť pozadie tabuľky

    Predvolené pozadie stola a bunky sú priehľadné. Ak má stránka alebo blok obsahujúci tabuľku pozadie, zobrazí sa cez tabuľku. Ak je pozadie určené pre tabuľku aj bunky, tak v miestach, kde sa pozadie tabuľky a buniek prekrýva, bude viditeľné iba pozadie buniek. Pozadie pre tabuľku ako celok a jej bunky môže byť:
    náplň,
    ,
    .

    4. Stĺpce tabuľky

    Model tabuľky CSS je zameraný hlavne na riadky (riadky) tvorené pomocou značky

    a pomocou vlastnosti caption-side ho možno umiestniť pred alebo pod tabuľku. Ak chcete vodorovne zarovnať text nadpisu, použite vlastnosť zarovnanie textu. Zdedené.

    ...
    Tabuľka č.1
    Spoločnosť Q1 Q2 Q3 Q4
    titulok (strana titulku: dole; zarovnanie textu: vpravo; odsadenie: 10px 0; veľkosť písma: 14px; ) Ryža. 2. Príklad zobrazenia hlavičky pod tabuľkou

    6. Ako odstrániť priestor medzi rámami buniek

    Rámce buniek tabuľky sú štandardne oddelené malou medzerou. Ak pre tabuľku nastavíte border-collapse: kolaps, medzera sa odstráni. Nehnuteľnosť sa dedí.

    Syntax

    Tabuľka (border-collapse: kolaps;)
    Ryža. 3. Príklad tabuliek so zlučovaním a oddelenými rámcami buniek

    7. Ako zväčšiť priestor medzi rámami buniek

    Pomocou vlastnosti border-spacing môžete zmeniť vzdialenosť medzi rámčekmi buniek. Táto vlastnosť sa vzťahuje na tabuľku ako celok. Zdedené.

    Syntax

    Tabuľka (border-collapse: samostatné; border-spacing: 10px 20px;) tabuľka (border-collapse: samostatné; border-spacing: 10px;) Ryža. 4. Príklad tabuliek so zväčšenými medzerami medzi rámcami buniek

    8. Ako skryť prázdne bunky tabuľky

    Vlastnosť empty-cells skryje alebo zobrazí prázdne bunky. Ovplyvňuje iba bunky, ktoré neobsahujú žiadny obsah. Ak je bunka nastavená na pozadie a tabuľka je nastavená na tabuľku (border-collapse: kolaps;) , bunka nebude skrytá. Zdedené.

    Spoločnosť Q1 Q2 Q3
    Microsoft 20.3 30.5
    Google 50.2 40.63 45.23
    tabuľka ( orámovanie: 1px plné #69c; border-collapse: oddelené; prázdne-bunky: skryť; ) th, td (ohraničenie: 2px plné #69c;) Ryža. 5. Príklad skrytia prázdnej bunky tabuľky

    9. Usporiadajte tabuľku pomocou vlastnosti table-layout

    Rozloženie tabuľky je určené jedným z dvoch prístupov: pevným rozložením alebo automatickým rozložením. V tomto prípade sa rozloženie týka toho, ako je šírka tabuľky rozdelená medzi šírky buniek. Nehnuteľnosť sa nededí.

    Syntax

    Tabuľka (rozloženie tabuľky: pevné;)

    10. Najlepšie rozloženie tabuľky

    1. Horizontálny minimalizmus

    Vodorovné tabuľky sú tabuľky, v ktorých sa text číta horizontálne. Každá entita je samostatný riadok. Takýmto tabuľkám môžete dodať minimalistický vzhľad umiestnením dvojpixelového orámovania pod hlavičku.

    zamestnanecPlatBonusDozorca
    Stephen C. Cox$300$50Bob
    Josephine Tan$150-Annie
    Joyce Ming$200$35Andy
    James A. Pentel$175$25Annie
    tabuľka ( font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; background: white; max-width: 70%; width: 70%; border-collapse: zbalenie; text -align: left; ) th ( font-weight: normal; color: #039; border-bottom: 2px solid #6678b1; padding: 10px 8px; ) td ( color: #669; padding: 9px 8px; transition: .3s lineárne; ) tr:hover td (farba: #6699ff;)

    Ak existuje veľký počet riadkov, tento dizajn tabuľky sťažuje ich čítanie. Na vyriešenie tohto problému môžete pridať okraj s jedným pixelom pod všetky prvky td.

    Td ( border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; transition: .3s linear; )/*zvyšok kódu je ako v príklade vyššie*/

    Pridaním efektu :hover k prvku tr budú tabuľky navrhnuté v minimalistickom štýle ľahšie čitateľné. Keď umiestnite kurzor myši na bunku, zostávajúce bunky v rovnakom riadku sa súčasne zvýraznia, čo uľahčuje sledovanie informácií, ak majú tabuľky viacero stĺpcov.

    Th ( font-weight: normal; color: #039; padding: 10px 15px; ) td ( color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; ) tr:hover td (background: #e8edff ;)

    2. Vertikálny minimalizmus

    Hoci sa takéto tabuľky používajú zriedkavo, vertikálne orientované tabuľky sú užitočné na kategorizáciu alebo porovnávanie popisov objektov reprezentovaných stĺpcom. Môžete ich navrhnúť v minimalistickom štýle pridaním priestoru na oddelenie stĺpcov.

    Th ( font-weight: normal; border-bottom: 2px solid #6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: #039; padding: 8px 2px; ) td ( border- vpravo: 30px plné #fff; border-left: 30px plné #fff; farba: #669; výplň: 12px 2px; )

    3. Krabicový štýl

    Najspoľahlivejším štýlom pri navrhovaní stolov všetkých typov je takzvaný „krabicový“ štýl. Stačí si vybrať dobrú farebnú schému a potom nastaviť farbu pozadia pre všetky bunky. Nezabudnite zdôrazniť rozdiel medzi čiarami nastavením okrajov ako oddeľovača.

    Th ( font-size: 13px; font-weight: normal; background: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; padding: 8px; ) td ( background : #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; padding: 8px; ) tr:hover td (background: #ccddff;)

    Najťažšie je nájsť farebnú schému, ktorá bude harmonicky ladiť s vašou webovou stránkou. Ak je stránka náročná na grafiku a dizajn, potom bude pre vás dosť ťažké použiť tento štýl.

    Tabuľka ( rodina písiem: "Lucida Sans Unicode", "Lucida Grande", bezpätkové; veľkosť písma: 14px; maximálna šírka: 70 %; šírka: 70 %; zarovnanie textu: na stred; zbalenie okraja: zbalenie ; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; ) th ( font-size: 13px; font-weight: normal; background: #e8edff; border-right: 1px solid #9baff1; border- left: 1px solid #9baff1; color: #039; padding: 8px; ) td ( background: #e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; color: #669; padding: 8px ;)

    4. Horizontálna zebra

    Stôl zebra vyzerá celkom atraktívne a pohodlne. Dodatočná farba pozadia môže slúžiť ako vizuálna pomôcka pre ľudí pri čítaní tabuľky.

    Th ( font-weight: normal; color: #039; padding: 10px 15px; ) td ( color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; ) tr:nth-child(2n) ( pozadie: #e8edff ;)

    5. Novinový štýl

    Ak chcete dosiahnuť takzvaný efekt novín, môžete použiť okraje na prvky tabuľky a hrať sa s bunkami vo vnútri. Ľahký minimalistický štýl novín môže vyzerať takto: pohrajte sa s farebnou schémou, pridajte okraje, vypchávky, rôzne pozadia a efekt vznášania sa pri umiestnení kurzora myši nad čiaru.

    Tabuľka (border: 1px solid #69c;) th ( font-weight: normal; color: #039; border-bottom: 1px dashed #69c; padding: 12px 17px; ) td ( color: #669; padding: 7px 17px; ) tr:hover td (pozadie: #ccddff;)

    Tabuľka (orámovanie: 1px plné #69c;) th ( font-weight: normal; color: #039; padding: 10px; ) td ( color: #669; border-top: 1px daffed #fff; padding: 10px; background: #ccddff; ) tr:hover td (pozadie: #99bcff;)

    Tabuľka (okraj: 1px plný #6cf;) th ( font-weight: normal; font-size: 13px; color: #039; text-transform: largecase; border-right: 1px solid #0865c2; border-top: 1px full #0865c2; ľavý okraj: 1 pixel plný #0865c2; okraj-dolný: 1 pixel plný #fff; výplň: 20px; ) td ( farba: #669; pravý okraj: 1 pixel prerušovaná #6cf; výplň: 10px 20px; )

    6. Pozadie tabuľky

    Ak hľadáte rýchly a jedinečný spôsob, ako navrhnúť stôl, vyberte si atraktívny obrázok alebo fotografiu, ktorá súvisí s témou stola a nastavte ho ako pozadie stola.

    Png") 98% 86% bez opakovania; ) th ( váha písma: normálna; veľkosť písma: 14px; farba: #339; výplň: 10px 12px; pozadie: biela; ) td ( farba: #669; okraj- horná časť: 1px plná biela; výplň: 10px 12px; pozadie: rgba(51, 51, 153, .2); prechod: .3s; ) tr:hover td ( pozadie: rgba(51, 51, 153, .1); )

    Publikácie na danú tému