strony - Kurs HTML i CSS
Selektory elementów CSS / Selektor typu...oraz wartości - opisane w następnych rozdziałach). Można powiedzieć, że selektor ten to inaczej element (znacznik), występujący w kodzie źródłowym strony. UWAGA! W języku XHTML wszystkie selektory muszą być pisane małymi literami. Przykład Załóżmy że w arkuszu stylów została umieszczona następująca reguła: h6 { color: red } Jak widać jest to selektor typu (podstawowy). Dzięki niemu wystarczyłoby teraz napisać: <h6>To jest tytuł rzędu szóstego</h6> aby otrzymać tytuł, napisany czerwoną...
- Selektory elementów CSS / Selektor dziecka
...przypadku, tutaj znacznik będący dzieckiem, musi znajdować się bezpośrednio wewnątrz znacznika rodzica. Przykład Załóżmy, że w arkuszu stylów strony została umieszczona następująca reguła: p > b { color: red } Dzięki temu, jeśli bezpośrednio wewnątrz znacznika p (akapit) znajdzie się znacznik b (czyli pogrubienie tekstu), to zostanie on automatycznie napisany czcionką koloru czerwonego: To jest akapit, a to jest pogrubienie (nie powinno być czerwone) umieszczone wewnątrz p, ale i...
- Selektory elementów CSS / Selektor potomka
...jeśli nie określimy dla nich tzw. pseudoklas odsyłaczowych, nie odziedziczą one formatowania po przodkach. Przykład Załóżmy, że w arkuszu stylów strony została umieszczona następująca reguła: p b { color: red } Dzięki temu, jeśli wewnątrz znacznika p (akapit) znajdzie się znacznik b (czyli pogrubienie tekstu), to zostanie on automatycznie napisany czcionką koloru czerwonego: To jest akapit, a to jest pogrubienie (czerwone), umieszczone wewnątrz tego akapitu oraz wewnątrz znacznika tekstu...
- Selektory elementów CSS / Selektor braci
...Zwykły tekst znajdujący się pomiędzy braćmi nie ma wpływu na działanie selektora, tzn. jest ignorowany. 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. Przykład /* Pierwsza reguła: */ p { color: red } /* Druga reguła: */ p b { color: red; background-color: yellow } Powyżej mamy przykład dwóch reguł stylów: W pierwszej selektorem jest znacznik p, a...
- Selektory elementów CSS / Ogólny selektor braci
...w tym przypadku pomiędzy braćmi mogą się znajdować również elementy innego typu - zostaną pominięte. 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ę znaczniki i oraz b, to te drugie uzyskają określone atrybuty: To jest akapit, wewnątrz którego znajduje się: pochylenie (nie powinno być czerwone), klawiatura (nie powinien być czerwony) oraz...
- 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
...nazwy atrybutów w selektorach muszą być pisane małymi literami. Ograniczenia tego nie posiada język HTML. 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
...nazwy atrybutów w selektorach muszą być pisane małymi literami. Ograniczenia tego nie posiada język HTML. 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...