MDC:Własne klasy CSS
z Mozilla Developer Center, polskiego centrum programistów Mozilli.
- Jak pomóc: Treść
- Poradnik
- Na początek
- Przewodnik dla edytorów
- Poradnik nazywania stron
- Strony ujednoznaczniające
- Prawa autorskie i licencje
- Dokumentacja
- Opis składni Wiki
- Własne klasy CSS
- Własne szablony
- Rozszerzenia MediaWiki
- Zewnętrzne przekierowania
- Dodatkowa pomoc
- Edycja/przegląd listy
- Słownik
- FAQ
- Społeczność MDC
- Lista kontaktów
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.
Spis treści |
[edytuj] 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. |
[edytuj] Przykłady
[edytuj] 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.
[edytuj] Breadcrumbs
- Zobacz także Przewodnik po języku JavaScript 1.5:O, aby zobaczyć przykład strony z
breadcrumbs.
[edytuj] table.standard-table
| nagłówek tabeli 1</td>
<th>nagłówek tabeli 2</td> |
|---|
| nagłówek tabeli 1</td>
<th>nagłówek tabeli 2</td> |
|---|