FANDOM


Na tej stronie znajdziesz różne przydatne klasy CSS, które mogą znaleźć zastosowanie w różnych sytuacjach. Znajdują się tutaj zarówno klasy dostępne domyślnie jak i te dodane przez administratorów w MediaWiki:Common.css, MediaWiki:Wikia.css i MediaWiki:Monobook.css. Jeśli uważasz, że warto dodać tutaj jakąś użyteczną klasę CSS, nie krępuj się i ją dodaj.

Jak używać klas CSS?

Aby dodać klasę do elementu trzeba ją podać wewnątrz atrybutu class="", kilka klas należy rozdzielić spacjami

Kolorystyka motywu

Domyślnie jest dostępnych kilka klas, które dodają kolor tła dostosowujący się do kolorystyki motywu.

class="color1"
class="accent"
class="color2"

Kolorowanie linków

Aby zmienić kolor odnośników bez potrzeby uciekania się do arkusza styli wystarczy użyć klasy color-links. Wszystkie odnośniki wewnątrz elementu z tą klasą przybiorą kolor tekstu.

<span class="color-links">Przykładowy tekst z [[Strona główna|odnośnikiem]] w roli głównej.</span>

Efekt: Przykładowy tekst z odnośnikiem w roli głównej.

Można również nadać inny kolor odnośnikowi poprzez zawarcie samego odnośnika w elemencie zmieniającym kolor. Element zmieniający kolor sam nie musi posiadać tej klasy, musi tylko być wewnątrz elementu, który ją posiada.

<span class="color-links">Przykładowy tekst z <span style="color:green">[[Strona główna|odnośnikiem]]</span> w roli głównej.</span>

Efekt: Przykładowy tekst z zielonym odnośnikiem w roli głównej.

Usunięcie strzałki w linkach zewnętrznych

Aby usunąć obrazek symbolizujący odnośnik zewnętrzny wystarczy, żeby znalazł się on w elemencie z klasą plainlinks

http://google.com/ – <span class="plainlinks">http://google.com/</span>

Efekt: http://google.com/http://google.com/

Tabele

Istnieją dwie domyślne klasy, które pozwalają nadać czytelny wygląd tabelom. Są to article-table oraz wikitable

{| class="article-table"
...
Nagłówek A Nagłówek B Nagłówek C
Komórka A Połączona komórka
Komórka B Komórka C Komórka D
Połączony nagłówek Nagłówek D
{| class="wikitable"
...
Nagłówek A Nagłówek B Nagłówek C
Komórka A Połączona komórka
Komórka B Komórka C Komórka D
Połączony nagłówek Nagłówek D

Dla tabel są również dostępne klasy centered i fit, które kolejno służą do wyśrodkowania tabeli na stronie oraz do rozciągnięcia jej na całą szerokość strony.

Poziome listy

Klasa hlist pozwala na wygodne tworzenie list poziomych za pomocą wikiskładni. Wszystkie listy znajdujące się wewnątrz elementu z tą klasą zostaną przerobione na poziome. Zależnie od rodzaju listy, efekt końcowy będzie inny.

Listy nieuporządkowane zostaną połączone w jeden ciąg, a poszczególne elementy rozdzielone kropką: ·

<div class="hlist">
* Lorem
* Ipsum
* Dolor
* Sit
* Amet
</div>
  • Lorem
  • Ipsum
  • Dolor
  • Sit
  • Amet

Listy uporządkowane zostaną połączone podobnie do nieuporządkowanych z tą różnicą, że elementy zostaną poprzedzone kolejnymi numerami

<div class="hlist">
# Lorem
# Ipsum
# Dolor
# Sit
# Amet
</div>
  1. Lorem
  2. Ipsum
  3. Dolor
  4. Sit
  5. Amet

Listy definicji również działają podobnie, przy czym etykiety zostaną pogrubione oraz będą oddzielone dwukropkiem od kolejnych elementów

<div class="hlist">
; Lorem
: Ipsum
: Dolor
; Sit
: Amet
</div>
Lorem
Ipsum
Dolor
Sit
Amet

Wszystkie rodzaje list mogą być wielopoziomowe oraz mieszane. Listy zagnieżdżone zostaną zawarte w nawiasach

<div class="hlist">
; Lorem
: Ipsum
:# Dolor
:# Sit
:* Amet
</div>
Lorem
Ipsum
  1. Dolor
  2. Sit
  • Amet

Domyślnie wszystkie listy w danym elemencie pozostaną same w sobie elementami blokowymi. Aby temu zapobiec wystarczy wraz z klasą hlist podać klasę inline.

Zwijane elementy

Klasa mw-collapsible pozwala na włączenie możliwości zwijania elementów. Więcej informacji znajdziesz na stronie Pomoc:Zwijanie.

Zobacz również

Treści społeczności są dostępne na podstawie licencji CC-BY-SA , o ile nie zaznaczono inaczej.