Antraštė - CSS-gudrybės

Turinys

caption-sideCSS nuosavybė leidžia jums nustatyti, kur dėti HTML'o

elementas, naudojamas HTML lentelėse. Ši savybė taip pat gali būti taikoma bet kuriam elementui, kurio displaynuosavybė nustatyta caption-side.

table ( caption-side: top; )

Vertybės

  • top: numatytasis. Antraštę padėkite lentelės viršuje.
  • bottom: užrašo antraštę lentelės apačioje.
  • inherit: rodo, kad vertė paveldima iš caption-sidejos pirminės vertės

caption-sideTurtas gali būti taikomi arba į


element or the

display table-caption text-align

Atminkite, kad pirmiau nurodytos reikšmės caption-sideyra susijusios su lentelės rašymo režimu. Pvz., Jei lentelė nustatyta vertikalaus rašymo režimu, tada reikšmės topir bottomreikšmės bus susijusios su lentelės kryptimi.

Žemiau esančioje demonstracinėje versijoje yra mygtukas „perjungti“, kuris perjungia lentelės caption-sideypatybę tarp topir bottom, todėl galite pamatyti skirtumą naudodami lentelę su daugybe duomenų eilučių:

Peržiūrėkite
CSS-Tricks (@ css-tricks) subtitrų nuosavybės „ Pen“ demonstracinę versiją
„CodePen“.

Kitoje demonstracinėje writing-modelentelės lentelė yra nustatyta vertical-rl. Kaip rodo perjungimas naudojant mygtuką, topir bottomreikšmės yra susijusios su lentelės rašymo režimu:

Peržiūrėkite
„CSS-Tricks“ („@ css-tricks“)
antraštės pusės ypatybės „Rašyklės demonstravimas“ su skirtingu rašymo režimu .

Nestandartinės tik „Firefox“ vertės

„Firefox“ jau seniai palaiko ir vis dar palaiko keturias nestandartines reikšmes caption-side:

  • left: užrašo antraštę lentelės kairėje.
  • right: užrašo antraštę lentelės dešinėje.
  • top-outside: užrašą užrašo lentelės viršuje, jo matmenys nepriklauso nuo lentelės
  • bottom-outside: užrašą užrašo lentelės apačioje, jos matmenys nepriklauso nuo lentelės

Žemiau pateiktas demonstracinis variantas veikia tik „Firefox“ ir leidžia naudoti keturis mygtukus, kad nustatytumėte skirtingas nestandartines vertes:

Peržiūrėkite
„CSS-Tricks“ („@ css-tricks“) „ Pen Firefox“ skirtą tik subtitrų nuosavybės demonstracinę versiją
„CodePen“.

Naujos standartinės vertybės

Per paskutinius projektus CSS specifikacija, caption-sideturtas yra dalis CSS Loginiai Properties Level 1 ir apima vertybes block-start, block-end, inline-start, ir inline-end. Pastarieji du atitinka nestandartinius parametrus leftir rightreikšmes, todėl juos palaiko tik vartotojų agentai, palaikantys tas nestandartines reikšmes.

Daugiau informacijos

  • antraštės pusės ypatybė CSS2.1 specifikacijoje
  • antraštės pusės ypatybė CSS2.2 specifikacijoje
  • CSS loginių ypatybių 1 antraštė

Naršyklės palaikymas

elementas, turintis tą patį efektą. Nors ši ypatybė paveiks viso antraštės laukelio padėtį (skaičiuojama antraštės vertė), ji neturės įtakos teksto lygiavimui laukelio viduje. Tekstas laukelyje gali būti sulygiuotas naudojant ypatybę.
„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
1+ 1+ 1+ 9,2+ 8+ 2.1+ 3.2+

Palaikymas aukščiau pateiktoje lentelėje nurodo pagrindinį standarto topir bottomverčių palaikymą. "Firefox" taip pat papildomai palaiko nestandartinius left, right, top-outsideir bottom-outsidevertybes. Nėra naršyklė parama naujų block-start, block-end, inline-start, ir inline-endvertybes.

Įdomios straipsniai...