deklaracje - 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...
- 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...
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; }
- Czcionki CSS / Atrybuty mieszane czcionki {font}
...font-weight: p { font-weight: bold; font: 12pt Arial; } Zgodnie z zasadą kaskadowości oczekiwany skutek (pogrubiony tekst) odniesiemy podając deklaracje w odwrotnej kolejności: p { font: 12pt Arial; font-weight: bold; } albo przenosząc wartość font-weight (bold) do zbiorczej deklaracji font: p { font: bold 12pt Arial; } Przykład {font} Po wpisaniu: <p style="font: italic small-caps bold 12pt /1cm 'Times New Roman',Verdana,'MS Sans Serif'"> To jest paragraf napisany pismem...
- 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...
- Wykazy CSS / Atrybuty mieszane wykazu {list-style}
...inside; list-style: disc } Zgodnie z zasadą kaskadowości, oczekiwany skutek (zawijanie tekstu wokół wyróżnika) odniesiemy, podając deklaracje w odwrotnej kolejności: li { list-style: disc; list-style-position: inside } albo przenosząc wartość list-style-position (inside) do zbiorczej deklaracji list-style: li { list-style: disc inside } Przykład {list-style} list-style: disc inside url(minus.gif) Punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt...
- Reguły warunkowe CSS / Zapytania właściwości @supports
...na taką ewentualność zostały stworzone warunkowe reguły stylów (zapytania właściwości - ang. feature queries). Pozwalają one dodać do arkusza deklaracje, które zostaną użyte przez przeglądarkę tylko jeżeli potrafi ona obsłużyć (albo nie potrafi obsłużyć) wskazaną deklarację CSS. Na przykład, aby zastosować zespół reguł CSS tylko dla przeglądarek, które obsługują układ elastyczny, wystarczy otoczyć je specjalnym blokiem reguł warunkowych: @supports (display: flex) { body...