deklaracje stylów - Kurs HTML i CSS
Szablon strony na DIV-ach / Responsywny szablon...Trzeba było tylko wyzerować lewy margines dla bloku z treścią, ponieważ w przeciwnym razie przyjąłby on ustaloną wcześniej wartość 150px. Pozostałe deklaracje, zgodnie z zasadą kaskadowości, zostały przejęte z reguł stylów wpisanych wcześniej w arkuszu stylów. Oczywiście w miarę potrzeby na swojej stronie możesz zastosować więcej punktów przeskoku. Na przykład być może już przy poziomej rozdzielczości ekranu równej 1080px można by było poszerzyć kolumnę menu do 200px. Pamiętaj jedynie, aby...
- CSS dla zielonych / Kolor tła oraz tekstu CSS {background-color, color}
...w CSS? Aby zmienić domyślny kolor tła oraz tekstu na całej stronie, najlepiej w arkuszu stylów do selektora właściwego ciała dokumentu dodać deklaracje o odpowiednich wartościach. Na przykład: body { background-color: black; color: white; } ustawi czarny kolor tła i biały kolor tekstu. Jak ustawić kolor RGB w CSS? W języku CSS możemy stosować takie same kolory jak w HTML. Na przykład aby ustawić na całej stronie czarny kolor tła i biały kolor tekstu w notacji heksadecymalnej...
- Tło CSS / Usunięcie tła {background: none, background-color: transparent}
...Nie dołączać zewnętrznego arkusza do wybranej strony. Takie rozwiązanie nie jest jednak zbyt dobre, ponieważ musimy ręcznie wpisywać wszystkie inne deklaracje, które znajdują się w arkuszu (np. kolor tekstu na stronach), pomijając przy tym tą, która odpowiada za tło. Chociaż początkowo osiągniemy żądany efekt, jednak przy każdej modyfikacji szaty graficznej serwisu, będziemy zmuszeni modyfikować również taką stronę. Nie dość, że jest to uciążliwe (zwłaszcza gdy istnieje więcej takich stron)...
- Tło CSS / Atrybuty mieszane tła {background}
...p { background-color: red; background: url(tlo.gif) } Zgodnie z zasadą kaskadowości, oczekiwany skutek (czerwone tło) odniesiemy, podając deklaracje w odwrotnej kolejności: p { background: url(tlo.gif); background-color: red } albo przenosząc wartość background-color (red) do zbiorczej deklaracji background: p { background: red url(tlo.gif) } Przykład {background} Po wpisaniu: <p style="color: red; background: url(obrazek.jpg) no-repeat left"> To jest akapit z obrazkiem w tle...
- CSS dla zielonych / Klasy selektorów CSS <div class>
...całą zawartość tego menu dodatkowym znacznikiem z przypisanym atrybutem class: <div class="menu-nawigacyjne">...</div> Następnie w arkuszu stylów w miejsce selektora wstawiamy wartość atrybutu class - czyli nazwę klasy - poprzedzoną znakiem kropki: .menu-nawigacyjne { background-color: gray; color: silver; } Zwróć uwagę, że w kodzie HTML wartość atrybutu class nie zawiera znaku kropki - trzeba ją dodać tylko w arkuszu stylów. Należy jednak pamiętać, że pomiędzy znakiem kropki a...
Aktualizacja / System newsów...wewnatrz */ clear: both; } .news_author span { font-weight: bold; } Wszystkie ważniejsze linijki zostały opisane. Oczywiście powyższe deklaracje można dołączyć do istniejącego arkusza stylów strony. Dalej wykonujemy analogiczną czynność z kodem przedstawionym poniżej, jednak tym razem zapisujemy go w pliku z rozszerzeniem *.js - np. news.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this...
- Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego
...bieżący odsyłacz, zostanie przypisana klasa CSS pod nazwą active, dzięki której można dodatkowo wyróżnić aktualną pozycję menu, dodając odpowiednie deklaracje CSS w arkuszu stylów, np.: #menu0 dd.active { font-weight: bold; }
- 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...
- Selektory elementów CSS / Grupowanie selektorów
...różnym selektorom jednocześnie (bez względu na ich położenie w hierarchii drzewa dokumentu). Oznacza to, że zamiast wpisywać kilka razy te same deklaracje, wystarczy wymienić dowolną liczbę selektorów po przecinku i jednorazowo przypisać im wszystkim ten sam styl. Przykład Jeśli w arkuszu stylów strony została umieszczona następująca reguła: b, i { color: red } to po wpisaniu: <b>pogrubienie</b> <i>pochylenie</i> otrzymamy tekst, napisany w całości czcionką koloru czerwonego...
- Selektory pseudoklas CSS / Szczegółowość selektorów
...color: red } p { color: black } Gdy żaden z powyższych punktów nie pozwala określić, który selektor jest bardziej szczegółowy, ważniejsze będą te deklaracje, które zostaną umieszczone na końcu. Przykład Tekst, określonego poniżej akapitu, będzie czerwony (red): p { color: black } p { color: green; color: red } Przykład Tekst przedstawionego poniżej akapitu będzie czerwony (red): <div id="kontener"> <p class="klasa">...</p> </div> div#kontener p.klasa { color: lime } div#kontener...