strony - Kurs HTML i CSS
Selektory pseudoklas CSS / Szczegółowość selektorówSposób formatowania każdego elementu strony może być określony w kilku miejscach. O tym, jak ostatecznie będzie wyglądał wybrany element, decydują zasady kaskadowości stylów. Pozostaje jeszcze określenie ważności reguł stylów, znajdujących się w tym samym arkuszu CSS. Panuje tutaj dość intuicyjna zasada mówiąca, że bardziej szczegółowe selektory są ważniejsze. Selektory identyfikatora mają pierwszeństwo przed innymi, nawet jeśli znajdują się na początku arkusza CSS. Im więcej identyfikatorów...
- Menu w CSS / Rozdzielenia struktury i prezentacji dokumentu
...przenośnych, gdzie menu nawigacyjne powinno wyglądać zupełnie inaczej. Znacznie łatwiej jest przygotować nowy arkusz CSS, niż przerabiać wszystkie strony serwisu i potem jeszcze pamiętać, aby przy każdej aktualizacji witryny nanieść poprawki we wszystkich powstałych wersjach dokumentów. Zacznijmy więc od przygotowania kodu HTML z odnośnikami, który będzie zupełnie pozbawiony formatowania: <ul> <li><a href="czcionki.html">Czcionki</a></li> <li><a href="tekst.html">Tekst</a></li> <li><a...
Komendy HTML 4.01 / Deklaracja typu dokumentu...W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Aby wstawić deklarację typu dokumentu, należy na samym początku strony wpisać jedną z powyższych deklaracji, jako pierwszą linijkę w dokumencie - jeszcze przed znacznikiem otwierającym HTML [zobacz: Ramy dokumentu]. Podanie adresu wersji DTD (drugi przypadek w każdym z punktów), pozwala przeglądarce pobrać wersję DTD oraz wszystkie potrzebne zestawy znaków. O tym jak ważne jest wstawienie odpowiedniej...
- Selektory atrybutów CSS / Selektor atrybutu o wartości rozpoczynającej się od...
...z atrybutem o wartości, która ma na początku wymagany tekst, ale po niej nie musi być już żadnego łącznika. Przykład Jeżeli w arkuszu stylów strony została umieszczona następująca reguła: p[title^="to"] { color: red } to każdy akapit, któremu został nadany atrybut TITLE z wartością, która rozpoczyna się od "to", powinien mieć kolor czerwony: To jest akapit, któremu został nadany atrybut title="to jest akapit" (aby to sprawdzić, wskaż go myszką) i dlatego jest koloru czerwonego. A to...
- Selektory atrybutów CSS / Selektor atrybutu o wartości kończącej się na...
...cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Przykład Jeżeli w arkuszu stylów strony została umieszczona następująca reguła: p[title$="akapit"] { color: red } to każdy akapit, któremu został nadany atrybut TITLE z wartością, która kończy się na "akapit", powinien mieć kolor czerwony: To jest akapit, któremu został nadany atrybut title="to jest akapit" (aby to sprawdzić, wskaż go myszką) i dlatego jest koloru czerwonego. A...
- Selektory atrybutów CSS / Selektor atrybutu zawierającego określony tekst
...jednak pozwala dopasować nie tylko pełne wyrazy, ale dowolną ich część (np. kilka sylab) czy nawet kilka wyrazów. Przykład Jeżeli w arkuszu stylów strony została umieszczona następująca reguła: p[title*="jest aka"] { color: red } to każdy akapit, któremu został nadany atrybut title="..." o wartości, w której występuje tekst "jest aka", powinien mieć kolor czerwony: To jest akapit, któremu został nadany atrybut TITLE o wartości "To jest akapit" (aby to sprawdzić, wskaż go myszką) i dlatego...
- Selektory pseudoklas CSS / Etykieta :target
...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ł jej szukać "ręcznie". W takiej sytuacji stosuje się etykiety (np.: <h2...
- Selektory pseudoklas CSS / Blokada :disabled :enabled
...enabled Po wpisaniu w arkuszu stylów: input:disabled { border: 1px solid blue } input:enabled { border: 1px solid red } a w dowolnym miejscu strony: <form action="?"> <input type="text" value="Zablokowane" disabled> <input type="text" value="Odblokowane"> </form> otrzymamy dwie tekstowe kontrolki formularza - pierwsza z niebieskim obramowaniem (zablokowana), a druga z czerwonym (odblokowana):
- Selektory pseudoklas CSS / Ostatnie dziecko :last-child
...dodatkowo określić nazwę znacznika rodzica. Przykład :last-child Po wpisaniu w arkuszu stylów: b:last-child { color: red } a w dowolnym miejscu strony: <p>To jest akapit, wewnątrz którego znajduje się <b>pierwsze pogrubienie (nie powinno być czerwone)</b> oraz <b>drugie pogrubienie (powinno być czerwone)</b>.</p> na ekranie powinniśmy otrzymać tekst, w którym zawiera się pogrubienie koloru czerwonego: To jest akapit, wewnątrz którego znajduje się pierwsze pogrubienie (nie powinno być...
- Selektory pseudoklas CSS / Pseudoklasy typu :first-of-type :last-of-type :only-of-type
...> dt:last-of-type { font-style: italic } /* kursywa */ dl > dt:only-of-type { text-decoration: underline } /* podkreślenie */ a w dowolnym miejscu strony: <dl> <dt>Termin 1</dt><dd>Definicja 1</dd> <dt>Termin 2</dt><dd>Definicja 2</dd> <dt>Termin 3</dt><dd>Definicja 3</dd> </dl> <dl> <dt>Termin 1</dt><dd>Definicja 1</dd> </dl> na stronie powinniśmy otrzymać wykaz, w którym tekst pierwszego punktu będzie pogrubiony, a ostatniego - pochylony: Termin 1 Definicja 1 Termin 2 Definicja 2 Termin...