style - Kurs HTML i CSS
- Selektory pseudoklas CSS / Pierwsze dziecko :first-child
...zawiera się w znaczniku rodzica [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Pierwsze z poleceń pozwala nadać określone atrybuty formatowania dla elementów, będących pierwszym dzieckiem dowolnego innego elementu - o jeden rząd niżej w hierarchii drzewa dokumentu. Rodzaj znacznika rodzica nie ma w tym przypadku znaczenia. Natomiast drugie polecenie pozwala dodatkowo określić...
- Selektory pseudoklas CSS / Etykieta :target
...name="..." [zobacz: Odsyłacz do etykiety i Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Czasami podział serwisu na podstrony jest niewystarczający. Zdarza się, że jeden artykuł jest podzielony dodatkowo na niewielkie sekcje - zbyt małe, aby tworzyć z każdej z nich osobną podstronę. Chcielibyśmy jednak mieć możliwość odesłania czytelnika bezpośrednio do podanej sekcji, żeby nie musiał...
- Selektory pseudoklas CSS / Łączenie selektorów
...{ content: "Rollover"; position: absolute; color: #000; background-color: #eee; font-size: 10px; border-width: 1px 2px 2px 1px; border-style: solid; border-color: #888; padding: 1px 5px } Jeśli wskażesz ten odsyłacz myszką, powinien pojawić się zaraz za nim nowy element z napisem "Rollover". A oto bardziej zaawansowany przykład: div.przyklad_selektory5 > ul:first-child[dir="ltr"]:lang(pl) + p[title]:first-letter { color: red; font-weight: bold; font-size: larger } To jest...
- Selektory pseudoklas CSS / Blokada :disabled :enabled
...przypisać atrybut disabled="..." [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Pola formularza mogą znajdować się w wielu stanach - jednym z nich jest blokada kontrolki. Zablokowane pole w większości przeglądarek wyświetlane jest w formie wyszarzonej. Użytkownik nie może do niego wpisywać żadnego tekstu ani go włączyć (w przypadku kontrolek typu przełącznik). Blokadę ustala...
- Selektory pseudoklas CSS / Zaznaczenie :checked
...opcji oraz opcje listy rozwijalnej [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Niektóre z pól formularzy pełnią rolę przełączników - można je zaznaczać i odznaczać. W związku z tym może się okazać przydatne dodatkowe wizualne wyróżnienie tych kontrolek, które użytkownik zaznaczył. Zaznaczenie dla opcji listy rozwijalnej obsługuje tylko Firefox. Przykład :checked Po wpisaniu...
- Selektory pseudoklas CSS / Korzeń :root
...Internet Explorer 9, Firefox, Opera, Chrome) :root { cecha: wartość } Wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Każdy dokument HTML ma w drzewie dokumentu dokładnie jeden korzeń, tzn. element najbardziej nadrzędny, który nie ma żadnego rodzica, za to zawiera w sobie (bezpośrednio lub poprzez zagnieżdżenie) wszystkie inne elementy dokumentu. W języku HTML korzeniem jest zawsze element HTML, zatem selektor ten...
- Selektory pseudoklas CSS / Ostatnie dziecko :last-child
...zawiera się w znaczniku rodzica [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Pierwsze z poleceń pozwala nadać określone atrybuty formatowania dla elementów, będących ostatnim dzieckiem dowolnego innego elementu - o jeden rząd niżej w hierarchii drzewa dokumentu. Rodzaj znacznika rodzica nie ma w tym przypadku znaczenia. Natomiast drugie polecenie pozwala dodatkowo określić...
- Selektory pseudoklas CSS / Jedyne dziecko :only-child
...zawiera się w znaczniku rodzica [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Polecenie pozwala nadać określone atrybuty formatowania dla elementu, który jest dzieckiem innego elementu - o jeden rząd niżej w hierarchii drzewa dokumentu, ale tylko jeśli rodzic nie ma już innych dzieci. Przykład :only-child Po wpisaniu w arkuszu stylów: b:only-child { color: red } otrzymamy na...
- Selektory pseudoklas CSS / Pusty element :empty
...Selektorem może być dowolny znacznik [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Zdarza się, że w dokumencie HTML znajdują się elementy, które nie zawierają żadnej treści, ani dzieci. Możemy mieć z tym do czynienia w przypadku elementów, które z definicji nie posiadają znacznika zamykającego (BR, HR, IMG, INPUT), ale również gdy po prostu nie wstawimy do znacznika żadnej treści...
- Selektory pseudoklas CSS / Negacja :not
...albo dowolna pseuoklasa (z wyjątkiem samej pseudoklasy negacji). Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Wyobraźmy sobie sytuację, kiedy chcemy zmienić kolor całego tekstu na stronie z wyjątkiem np. tabelek. Moglibyśmy to zrobić, przypisując najpierw określony kolor całemu tekstowi, a następnie przywracając kolor domyślny wszystkim tabelom. Łatwiej będzie jednak takie działanie połączyć w pojedynczym...