Pomocník: Kaskádové štýly

Kaskádové štýly umožňujú flexibilné formátovanie stránky. Vždy, keď je to možné, by sa mali používať namiesto tabuliek pre netabuľkový obsah, pretože s nimi môže manipulovať čitateľ alebo ich môže prepísať autor, ak je váš CSS vložený do inej stránky prostredníctvom šablóny .

Úrovne nastavení CSS

Štýl môže byť vybraný špeciálne pre časť obsahu, pozri napr . rozsah parametrov

Alternatívne je štýl špecifikovaný pre selektory CSS, vyjadrený ako prvky, triedy a ID. Toto sa vykonáva na rôznych úrovniach:

Autorské štýly v tomto poradí:

Poznámka: Pozrite si WP:CLASS pre zoznam všetkých načítaných štýlov.

Základné štýly MediaWiki

Podľa vzhľadu: Manuál MediaWiki:Galéria používateľských štýlov atď. Typicky načítané predlohy štýlov:

  • common/shared.css
  • common/commonPrint.css
Hlavný súbor špecifický pre pokožku

napr. monobook/main.css (normálny vzhľad pre PC), chick/main.css (normálny vzhľad pre vreckové počítače)

Opravy špecifické pre prehliadač (aj pre vzhľad)

Príklady pre Monobook:

  • Pre Firefox: monobook/FF2Fixes.css
  • Pre Internet Explorer: monobook/IE60Fixes.css monobook/IE70Fixes.css
  • Pre Operu: monobook/Opera6Fixes.css monobook/Opera7Fixes.css monobook/Opera9Fixes.css

Štýly pre celú lokalitu

Poznámka: Stránky MediaWiki iné ako anglická Wikipedia môžu používať MediaWiki:Gadget-site.cssnamiesto MediaWiki:Common.css.

Štýly pre jednotlivé stránky

Šablóny so štýlmi pre jednotlivé stránky možno zaviesť prostredníctvom TemplateStyles . Stránky, najmä šablóny, môžu mať vložený CSS.

Niektoré stránky majú svoj vlastný CSS, napr. MediaWiki:FileUploadWizard.css

Štýly špecifické pre používateľa

  • Globálne užívateľsky špecifické pre všetky vzhľady: meta:Special:MyPage/global.css
  • Užívateľsky špecifické pre všetky vzhľady: Special:MyPage/common.css
  • Špecifické pre používateľa podľa vzhľadu: napr. Špeciálne:MojaStrana/vektor.css alebo Špeciálne:MojaStrana/skin.css pre váš aktuálny vzhľad
  • CSS špecifické pre používateľa načítané cez JavaScript, napr. načítané na Special:MyPage/common.js
  • Nastavenia prehliadača špecifické pre používateľa: lokálny súbor uvedený v nastaveniach prehliadača alebo priamo nastavený v prehliadači

Všimnite si, že v terminológii CSS, šablóny štýlov špecifické pre používateľa nie sú šablóny štýlov používateľa .

Použitie

Element HTML môže byť len prevzatý z wikitextu (pozri HTML vo wikitexte ), napr. span, alebo výsledkom prekladu wikitextu, napr. '''...'''kód sa zmení na <b>...</b>, alebo časť kódu pre vzhľad.

Softvér môže vytvoriť triedu, napr. číslo ns-namespace pre HTML-element "body" a extiw pre interwiki odkaz v tele stránky, alebo prevzaté z wikitextu.

Podobne môže byť ID vytvorené softvérom, napr. bodyContent, alebo prevzaté z wikitextu.

V prípade konfliktných nastavení štýlu pre časť obsahu závisí výsledné nastavenie predovšetkým od označenia „!dôležité“. Sekundárne, ak sú obe dôležité, vyhráva používateľ, ak nie je ani jeden, vyhráva autor. Terciárne to závisí od špecifickosti. Nakoniec to závisí od poradia medzi a v rámci štýlov: posledný vyhráva. Používateľ: používateľské meno /monobook.css teda nevyhrá z MediaWiki:Monobook.css (obaja autor, nie používateľ), ak je špecifickosť toho druhého väčšia. Pozri tiež kaskáda.

Podporované prvky

MediaWiki podporuje väčšinu CSS, s takými výnimkami, ako je atribút url(). V starších verziách sa vyskytli nejaké chyby v podpore CSS.

CSS vo wikitexte

V prvkoch HTML vo svojom kóde môžete použiť štýl CSS ( zoznam prvkov podporovaných MediaWiki nájdete v Pomocníkovi: HTML vo wikitexte ) ako v bežnom značke HTML.

Vytvorí sa napríklad <div>...</div>prvok so zeleným okrajom a jeho obsah plávajúci doprava

< div  style = "float:right; border:thin solid green;" > 
Tu je krátky odsek, ktorý je < br  /> 
obsiahnutý v prvku "div", ktorý je < br  />
plávala doprava.
</ div >

Tu je krátky odsek, ktorý je
obsiahnutý v prvku „div“, ktorý sa
pohybuje vpravo.

čo by vytvorilo krabicu napravo. Niektoré prvky wikitextu umožňujú vložiť štýl CSS priamo do nich. Príkladom je syntax tabuľky:

{| štýl = "tu tvoj štýl" |- | veci na váš stôl
 |} 


Existujúce štýly MediaWiki

Možno budete chcieť použiť typ štýlu, ktorý je už preddefinovaný v MediaWiki alebo na stránke, ktorú navštevujete. Môžete tiež vytvoriť štýl, ktorý je jedinečný pre vašu stránku.

Vector je predvolený štýl, môžete si ho pozrieť na: MediaWiki:Vector.css

Dáte svojej značke CSS existujúcu „triedu“

Sem vložte zoznam existujúcich tried.

Tipy a triky

Bez displeja

Na vloženej stránke je možné skryť komentáre v jednej verzii a zobraziť ich v inom zobrazení. Jedným extrémnym "štýlom" pre text je jeho nezobrazovanie, s

. '' classname '' { display : none } # '' id '' { display : none }  
  

atď.

Nezobrazené odkazy nefungujú (na rozdiel od odkazov s veľmi malým písmom).

Nemožno ho použiť na odstránenie textu vo výrazoch pre názvy šablón, názvy parametrov, hodnoty parametrov, názvy stránok v odkazoch atď.

Ak chcete zobraziť skrytý text, stiahnite si panel s nástrojmi pre vývojárov webu pre Firefox tu a potom vyberte položku Rôzne. → zobraziť skryté prvky v tomto paneli nástrojov. Zobrazí sa všetky skryté prvky.

Netlač

Obsah je možné vylúčiť z tlače (ak prehliadač podporuje CSS) deklarovaním obsahu, ktorý patrí do triedy „noprint“:

< div  class = "someclass noprint" > Toto sa nezobrazí vo verzii pre tlač. </ div >

Hlavné štýlové bloky

Komentovaná snímka obrazovky vzorového článku z pracovnej plochy zobrazujúca bloky štýlov
  • column-content – ​​celkový priestor, v rámci ktorého sa nachádza obsah.
  • firstHeading – trieda značky nadpisu v hornej časti každej stránky
  • contentSub – názov wiki hneď pod hlavným nadpisom, ale nad hlavným textom
  • obsah – biele pozadie, tenký orámovaný rámček, ktorý obsahuje obsah hlavnej stránky.
  • bodyContent – ​​obsah hlavnej stránky v poli obsahu

Trieda portletu je štýl, ktorý používajú všetky bloky div okolo hlavného obsahu. Identifikované bloky pomocou tejto triedy:

  • p-cactions – id pre zoznam kariet súvisiacich so stránkou nad hlavným obsahom (stránka, rozhovor, úprava atď.), hore.
  • p-personal – id pre zoznam používateľských odkazov nad hlavným obsahom (používateľské meno, rozhovor atď.), hore.
  • p-logo – id bloku, ktorý obsahuje logo, vľavo hore.
  • p-navigácia – id pre blok, ktorý obsahuje navigačné odkazy na ľavej strane stránky
  • p-search – blok, ktorý obsahuje tlačidlá vyhľadávania
  • p-tb – blok, ktorý obsahuje odkazy na panel nástrojov
  • p-lang – blok, ktorý obsahuje medzijazykové odkazy

Päta v spodnej časti stránky obsahuje bloky s nasledujúcimi identifikátormi

  • päta – celkový kontajnerový blok päty
  • f-poweredbyico – obrázok založený na MediaWiki, ktorý sa bežne nachádza na pravej strane stránky
  • f-list – id zoznamu, ktorý obsahuje všetky časti textu v spodnej časti stránky

Štýl v závislosti od parametra alebo premennej

Premenná trieda alebo id

Trieda alebo id môže závisieť od výsledku vytvoreného šablónou alebo od parametra šablóny, napr . Pre jeden alebo viacero možných názvov tried je možné definovať štýl tejto triedy. Ak trieda nie je definovaná, je ignorovaná, takže sa použije štandardný štýl. class="abc{{{1|def}}}"

V najjednoduchšom prípade máme napr. a definovať triedu abcdef. Ak je hodnota parametra "def", platí. class="abc{{{1}}}"

Ak má stránka na všeobecné použitie zmysel len vtedy, keď sú štýly definované pre určité triedy, potom ich treba špecifikovať na stránke MediaWiki:Common.css , ktorá platí pre všetkých používateľov a všetky vzhľady, pokiaľ nie sú prepísané.

Hodnota parametra variabilného štýlu

Wikitext, ktorý číta

< span  style = "zobraziť:{{{3|none}}}" > Stred </ span >

zobrazí "Str", ak je parameter 3 definovaný, ale jeho hodnota nie je "none", a nezobrazí nič, ak parameter 3 nie je definovaný alebo "none". Ak je hodnota parametra 3 iný štýl zobrazenia ako "žiadny", použije sa tento štýl.

Wiki nadpisy

Nadpisy Wiki používajú nasledujúce predvolené CSS:

Wikiznačka HTML Štýl
= Heading = <h1>
farba : # 000000 ; pozadie : žiadne ; prepad : skrytý ; page-break-after : vyhnúť sa ; veľkosť písma : 1 . 8em ; font-family : 'Linux Libertine' , Georgia , Times , serif ; margin-top : 1m ; okraj-dole : 0 . 25 em ; výška riadku : 1 . 3 ; výplň : 0 ; border-bottom : 1px solid # AAAAAA ;                       
== Heading == <h2>
farba : # 000000 ; pozadie : žiadne ; prepad : skrytý ; page-break-after : vyhnúť sa ; veľkosť písma : 1 . 5 em ; font-family : 'Linux Libertine' , Georgia , Times , serif ; margin-top : 1m ; okraj-dole : 0 . 25 em ; výška riadku : 1 . 3 ; výplň : 0 ; border-bottom : 1px solid # AAAAAA ;                       
=== Heading === <h3>
farba : # 000000 ; pozadie : žiadne ; prepad : skrytý ; page-break-after : vyhnúť sa ; veľkosť písma : 1 . 2em ; font-weight : bold ; okraj-vrchol : 0 . 3em ; okraj-dole : 0 ; výška riadku : 1 . 6 ; vrchná výplň : 0 . 5 em ; polstrovanie-dolné : 0 ;                     
==== Heading ==== <h4>
farba : # 000000 ; pozadie : žiadne ; prepad : skrytý ; page-break-after : vyhnúť sa ; veľkosť písma : 100 %; font-weight : bold ; okraj-vrchol : 0 . 3em ; okraj-dole : 0 ; výška riadku : 1 . 6 ; vrchná výplň : 0 . 5 em ; polstrovanie-dolné : 0 ;                     
===== Heading ===== <h5>
farba : # 000000 ; pozadie : žiadne ; prepad : skrytý ; page-break-after : vyhnúť sa ; veľkosť písma : 100 %; font-weight : bold ; okraj-vrchol : 0 . 3em ; okraj-dole : 0 ; výška riadku : 1 . 6 ; vrchná výplň : 0 . 5 em ; polstrovanie-dolné : 0 ;                     
====== Heading ====== <h6>
farba : # 000000 ; pozadie : žiadne ; prepad : skrytý ; page-break-after : vyhnúť sa ; veľkosť písma : 100 %; font-weight : bold ; okraj-vrchol : 0 . 3em ; okraj-dole : 0 ; výška riadku : 1 . 6 ; vrchná výplň : 0 . 5 em ; polstrovanie-dolné : 0 ;                     

Pozri tiež

Prevzaté z "https://en.wikipedia.org/w/index.php?title=Help:Cascading_Style_Sheets&oldid=1184739323"