deklaracje - Kurs HTML i CSS
CSS dla zielonych / Arkusz stylów CSS...chcemy zmienić wygląd Deklaracji ujętej w nawiasy klamrowe, w której określa się, w jaki sposób chcemy zmienić wygląd selektor1 { Tu wpisuje się deklaracje stylów } selektor2 { Tu wpisuje się deklaracje stylów } selektor3 { Tu wpisuje się deklaracje stylów } Oczywiście możliwe jest wstawienie więcej niż trzech reguł stylów w jednym arkuszu - każda odpowiada za zmianę wyglądu elementu na stronie opisanego selektorem. O tym jak tworzyć selektory i co można wpisać w deklaracji stylów...
- Wstawianie stylów CSS / Zewnętrzny arkusz stylów <link "stylesheet"> @charset
...dołączyć dowolną liczbę zewnętrznych arkuszy stylów - każdy jako osobny element <link rel="stylesheet">. W przypadku konfliktów, ważniejsze będą deklaracje z arkusza dołączonego później. Zwykle tworzy się pojedynczy zewnętrzny arkusz i załącza go w całym serwisie, czyli na wszystkich podstronach. Czasami jednak dodatkowo poza nim projektuje się osobne arkusze, ustalające wygląd np. odrębnych kategorii tematycznych serwisu. Mamy wtedy sytuację, gdy na stronie głównej jest dołączony tylko...
- Dobre praktyki / CSS Zorientowane Obiektowo
...jeśli recenzja - szczególny przypadek ogólnego artykułu - ma wyglądać jednak nieznacznie inaczej od swojego pierwowzoru (klasy bazowej)? Wybrane deklaracje z klasy bazowej można przesłonić (ang. override), przypisując im zmienione wartości w klasie pochodnej. Na przykład: .Article { color: black; background-color: white; /* ... */ } .Review { color: green; font-size: 12px; /* ... */ } Pamiętaj jednak, że kolejność wymieniania nazw klas w atrybucie class="..." z punktu...
Menu rozwijane, otwierane, wysuwane / Pozycja absolutna...są przesuwane w dół. Można temu zapobiec określając odpowiednią pozycję absolutną bloku. Oczywiście można to zrobić bezpośrednio dodając odpowiednie deklaracje CSS. Jednak trzeba przewidzieć, co się stanie, jeśli przeglądarka użytkownika nie będzie obsługiwać JavaScript. Samo menu nadal będzie funkcjonalne pod względem nawigacji, tzn. jego elementy (odsyłacze) będą dostępne, ale oczywiście funkcja rozwijania nie będzie działać. Jest to jednak sytuacja dopuszczalna. Natomiast niedopuszczalne...
- Wykazy CSS / Niestandardowy typ stylu wykazu @counter-style
...dowolny wbudowany typ stylu wykazu, a nawet nazwę zdefiniowanego przez nas innego niestandardowego typu. W przypadku systemu rozszerzonego dodatkowe deklaracje (cecha) nie mogą zawierać deskryptorów: symbols ani additive-symbols. Definiowanie niestandardowego typu stylu wykazu od zupełnych podstaw może być dość żmudne. Można sobie ten proces jednak znacznie ułatwić. Wystarczy skorzystać z wcześniej zdefiniowanego lub wbudowanego typu i pozmieniać w nim tylko te deklaracje, które nam nie...
- Dobre praktyki / Przykazania webmastera
...darmowego narzędzia dostarczonego przez organizację W3C: Markup Validation Service. Dobre praktyki CSS Nie używaj atrybutu style="..." Te same deklaracje porozrzucane w wielu miejscach różnych dokumentów HTML znacznie utrudnią późniejsze wprowadzanie zmian, a także wydłużają czas ładowania strony. Poza tym utrudniają stosowanie standardowych zasad kaskadowości stylów oraz szczegółowości selektorów. Unikaj stosowania deklaracji !important Zaburzasz w ten sposób zasady kaskadowości...
- Selektory elementów CSS / Reguły stylów
...W MSIE 8.0 i starszych jeden plik arkusza CSS może zawierać tylko 4095 selektorów, przy czym w listach każdy selektor liczy się osobno - następne deklaracje zostaną pominięte! W przypadku przekroczenia tej granicy, jedynym rozwiązaniem jest podział arkusza CSS na kilka osobnych plików, ale nie więcej niż 31. Przykład /* Pierwsza reguła: */ p { color: red } /* Druga reguła: */ p b { color: red; background-color: yellow } Powyżej mamy przykład dwóch reguł stylów: W pierwszej...
- Drukowanie CSS / Wydruk @media print
...odmiennych cech: Wydzielenie dla wydruku części istniejącego arkusza: /* Domyślny arkusz dla wszystkich mediów */ /* (tu znajdują się ogólne deklaracje) */ /* (...) */ @media print { /* Arkusz dla wydruku */ } Dołączenie specjalnie dla wydruku zewnętrznego arkusza: <head> <link rel="stylesheet" href="domyslny.css"> <link rel="stylesheet" href="wydruk.css" media="print"> </head> Dołączenie specjalnie dla wydruku wewnętrznego arkusza: <head> <style media="print"> /* Arkusz dla...
- CSS dla zielonych / Ramki z tekstem CSS {background-color, padding, padding-top, padding-bottom, padding-left, padding-right, border-width, border-style, border-color, border-radius}
...być np. ramki wizualnie wyróżniające tekst, który się w nich znajduje. Wystarczy, że raz zdefiniujemy ich wygląd w arkuszu stylów: .nazwa-klasy { deklaracje stylów } by następnie w miarę potrzeb móc ich wielokrotnie używać w dowolnym dokumencie HTML na naszej stronie: <div class="nazwa-klasy">dowolny tekst...</div> Przypominam, że w arkuszu stylów (pierwsze polecenie powyżej) nazwa-klasy musi być poprzedzona znakiem kropki (w tym miejscu po kropce nie można postawić spacji!), podczas gdy...
- Szablon strony na DIV-ach / Stały szablon
...marginesu jest konieczne, aby uzyskać maksymalną dostępną przestrzeń w poziomie - dla rozdzielczości 800x600 będzie to 780px. Te oraz poprzednie deklaracje są przypisane jednocześnie elementom html oraz body, z uwagi na różnice interpretacji elementu podstawowego (korzeń - ang. root) drzewa dokumentu w niektórych przeglądarkach (element podstawowy posiada określone domyślne marginesy strony, które chcemy usunąć). Ustalamy odpowiednią szerokość szablonu, tzn. taką, aby zmieściła się w...