Własne klasy CSS

Poniżej znajdują się poszczególne klasy CSS, które zostały udostępnione użytkownikowi do wykorzystania na MDC. Jeśli kiedykolwiek będziesz potrzebował zdefiniować własną klasę CSS dla tego wiki, skontaktuj się z Dria.

Zdefiniowane klasy CSS

Klasa Rezultat
div.tip Wyświetla tekst porady wewnątrz ciała (body) strony.
div.bug Wyświetla tekst błędu wewnątrz ciała (body) strony.
.float-left Tworzy element (zazwyczaj obrazek) po lewej stronie.
.float-right Tworzy element (zazwyczaj obrazek) po prawej stronie.
.figure Klasa zdefiniowana do użycia w przyszłości, obecnie nie posiada żadnych informacji o stylu.
.standard-table Podstawowa stylizacja zwykłej tabeli.
.standard-table td.header Stylizacja nagłówka w tabeli z klasą .standard-table.
.fullwidth-table Tabela z szerokością ustawioną na 100% (ta tabela jest przykładem użycia tej klasy).
.fullwidth-table td.header Stylizacja nagłówka w tabeli z klasą .fullwidth-table.
div.breadcrumbs Nadanie stylu dla rozszerzenia breadcrumbs.
div.breadcrumbs a.breadcrumbs Nadanie stylu odnośnikom w łańcuchu znaków breadcrumbs.
div.breadcrumbs span.breadcrumbs Nadanie stylu dla tytułu strony lokalnej w łańcuchu znaków breadcrumbs.
div.side-note-left div.side-note-right Klasa używana do stworzenia panelu bocznego wewnątrz artykułu. Utworzony panel będzie miał szerokość 50% szerokości bloku nadrzędnego (zazwyczaj samej strony artykułu). Zaleca się używać te klasy, aby zawartość panelu bocznego zmieniała się pomiędzy lewą a prawą stroną artykułu dla lepszej czytelności.
div.highlight Podświetla sekcję na stronie poprzez umieszczenie z lewej strony niebieskiej linii o szerokości 3px.
.highlightred Zmienia kolor tekstu na czerwony.
.highlightblue Zmienia kolor tekstu na niebieski.
.highlightgreen Zmienia kolor tekstu na zielony.

Przykłady

Podświetlanie części kodu

Często będziemy chcieli przyciągnąć uwagę do określonych części kodu. Jest to możliwe poprzez użycie znaczników span, jak również poprzez użycie formatowania kodu typu "wcięcie-na-co-najmniej-jedną-spację" - funkcjonalności wbudowanej w MediaWiki. Zauważ, że używanie znaczników span wewnątrz bloków <pre> jest bezużyteczne, ponieważ parser MediaWiki ignoruje je i po prostu wyświetla jako część kodu.

<span class="highlightred">to wcale nie działa</span>

Zamiast tego użyj wcięcia na fragmencie kodu, który chcesz wyróżnić i użyj w środku znaczników span. Zauważ, że musisz również użyć wcięć na pustych liniach wewnątrz bloku kodu. Jeśli nie ma spacji na początku pustej linii, parser zamknie blok kodu, a następnie ponownie otworzy w kolejnej linii kodu, na którym zostało użyte wcięcie.

tutaj jest przykład podświetlenia
   bloku kodu z pustą linią 
   to nie jest wcięte.

Oczywiście powyższy przykład jest nieprawidłowy. Oto jak to zrobić:

to jest przykład
   bloku kodu z pustą linią

   a to jest wcięte.

 

table.standard-table

<tr> <td>Jest to przykład:</td> <td>table.standard-table</td> </tr> </table>

table.fullwidth-table

nagłówek tabeli 1</td>

<th>nagłówek tabeli 2</td>

<tr> <td>Jest to przykład:</td> <td>table.fullwidth-table</td> </tr> </table>

Znaczniki div

Porady

Zastosuj div class="tip", aby wyświetlić poradę:

To jest porada.
Błędy

Zastosuj div class="bug", aby odwołać się do znanych błędów, z odnośnikami do odpowiedniego wpisu na Bugzilli:

Ostrzeżenia

Zastosuj div class="warning" dla podświetlenia ostrzeżeń wewnątrz dokumentacji. Być może w przyszłości dodamy tutaj jakieś ikony albo coś ładnego.

To jest ostrzeżenie.
Uwagi

Zastosuj div class="note" dla podświetlenia uwag wewnątrz dokumentacji. It's only interesting because it claims it isn't.

Uwaga. Jest to mało interesująca notatka.
Podświetlanie sekcji

Przykład div class="highlight":

Jest to przykład podświetlenia fragmentu strony przy pomocy CSS. Zastosuj tę klasę we własnym kodzie, aby zwrócić uwagę na istotne jego fragmenty. Początkowo zostało to dodane dla kursu XUL.

przykład
   użycia znacznika pre
   wewnątrz podświetlanego
    znacznika div
nagłówek tabeli 1</td>

<th>nagłówek tabeli 2</td>

Autorzy i etykiety dokumentu

Autorzy tej strony: Ptak82, Diablownik, Dria, fscholz
Ostatnia aktualizacja: fscholz,