strony - Kurs HTML i CSS
Selektory elementów CSS / Selektor braci...UWAGA! Polecenie nie jest interpretowane przez MSIE 6 (od wersji 7 wszystko jest już w porządku). Przykład Załóżmy, że w arkuszu stylów strony została umieszczona następująca reguła: i + b { color: red } Dzięki temu, jeśli wewnątrz tego samego znacznika (rodzica), będą znajdowały się po sobie znaczniki i oraz b, to ten drugi uzyska określone atrybuty: To jest akapit, wewnątrz którego znajduje się: pochylenie (nie powinno być czerwone) oraz pogrubienie (powinno być czerwone) (zwróć...
- Selektory elementów CSS / Grupowanie selektorów
...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: pogrubienie pochylenie Przykład ten działa tak samo jak: b { color: red } i { color: red } jednak jak widać, dzięki użyciu znaku przecinka, oszczędzamy sobie...
- Selektory elementów CSS / Reguły stylów
...może być przypisana tylko i wyłącznie do elementów blokowych, ponieważ podanie jej dla elementów wyświetlanych w linii nie miałoby sensu. Z drugiej strony cecha ta może przyjmować tylko wartości takie jak: left, right, center, justify. Przypisanie do niej np. wartości koloru nie miałoby sensu. 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...
- Selektory atrybutów CSS / Prosty selektor atrybutu
...jest już w porządku) . W języku XHTML wszystkie nazwy atrybutów w selektorach muszą być pisane małymi literami. Przykład Jeśli w arkuszu stylów strony została umieszczona następująca reguła: p[title] { color: red } to każdy akapit, któremu został nadany atrybut title="...", powinien mieć kolor czerwony: To jest akapit, któremu został nadany atrybut TITLE (aby to sprawdzić, wskaż go myszką) i dlatego powinien być koloru czerwonego. Dla porównania, to jest inny akapit bez atrybutu TITLE...
- Selektory atrybutów CSS / Selektor atrybutu o określonej wartości
...jest już w porządku). W języku XHTML wszystkie nazwy atrybutów w selektorach muszą być pisane małymi literami. Przykład Jeżeli w arkuszu stylów strony została umieszczona następująca reguła: p[title="To jest akapit"] { color: red } to każdy akapit, któremu został nadany atrybut title="..." o wartości "To jest akapit", 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 jest koloru...
- Selektory atrybutów CSS / Selektor atrybutu zawierającego określony wyraz
...jest już w porządku). W języku XHTML wszystkie nazwy atrybutów w selektorach muszą być pisane małymi literami. Przykład Jeżeli w arkuszu stylów strony została umieszczona następująca reguła: p[title~="jest"] { color: red } to każdy akapit, któremu został nadany atrybut title="..." o wartości, w której występuje wyraz "jest", 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 jest...
- Selektory atrybutów CSS / Selektor atrybutu zawierającego łączniki
...jest już w porządku). W języku XHTML wszystkie nazwy atrybutów w selektorach muszą być pisane małymi literami. 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" (i może składać się z łączników), powinien mieć kolor czerwony: To jest akapit, któremu został nadany atrybut title="to-jest-akapit" (aby to sprawdzić, wskaż go myszką) i...
- Selektory specjalne CSS / Selektor identyfikatora <... id>
...jednoznaczny identyfikator (ID), czyli występuje tylko raz w drzewie dokumentu (w odróżnieniu od klasy). Przykład <... id> Jeżeli w arkuszu stylów strony została umieszczona następująca reguła: p#przyklad_identyfikator { color: red } to akapit o podanym identyfikatorze ID: <p id="przyklad_identyfikator">To jest akapit.</p> zostanie wyświetlony w kolorze czerwonym: To jest akapit. Dla porównania, to też jest akapit, ale bez podania identyfikatora i dlatego nie jest czerwony. Użycie...
- Selektory pseudoklas CSS / Atrybut języka :lang
...pozwala na bardziej inteligentny wybór - uwzględniając dziedziczenie języka określonego przez inne źródła, tj. nagłówek HTTP Content-Language, język strony, propagację atrybutu lang="..." przypisanego dla elementu nadrzędnego: <body lang="pl"> <p>Ten akapit jest napisany w języku polskim.<p> </body> /* Ta reguła zostanie zastosowana: */ p:lang(pl) { color: red } /* Ta reguła nie zostanie zastosowana: */ p[lang|="pl"] { color: blue } Przykład :lang Po wpisaniu w arkuszu stylów: p:lang(en)...
- Selektory pseudoklas CSS / Pierwsze dziecko :first-child
...dodatkowo określić nazwę znacznika rodzica. Przykład :first-child Po wpisaniu w arkuszu stylów: b:first-child { color: red } a w dowolnym miejscu strony: <p>To jest akapit, wewnątrz którego znajduje się <b>pierwsze pogrubienie (powinno być czerwone)</b> oraz <b>drugie pogrubienie (nie 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 (powinno być...