mozilla
Wyniki wyszukiwania

    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

    Contributors to this page: Ptak82, Diablownik, Dria, fscholz
    Ostatnia aktualizacja: fscholz,