color strony - Kurs HTML i CSS
Selektory elementów CSS / Selektor typu...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ą czcionką (red). Pytania i odpowiedzi Co to jest selektor CSS? Selektor CSS to wzorzec lub nazwa, która określa zbiór elementów HTML, do których ma być zastosowana dana...
- Selektory elementów CSS / Selektor dziecka
...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 wewnątrz znacznika pochylenia. Natomiast to jest pogrubienie...
- Selektory elementów CSS / Selektor braci
...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óć uwagę, że pomiędzy znacznikami jest zwykły tekst...
- Selektory elementów CSS / Ogólny selektor braci
...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 pogrubienie (powinno być czerwone)... następne pogrubienie...
- Selektory atrybutów CSS / Selektor atrybutu zawierającego łączniki
...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"] { 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 dlatego jest koloru czerwonego. A to jest akapit z atrybutem...
- Selektory atrybutów CSS / Selektor atrybutu o wartości rozpoczynającej się od...
...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 jest akapit z atrybutem title="to też jest akapit" i też powinien...
- Selektory atrybutów CSS / Selektor atrybutu o wartości kończącej się na...
...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 to jest akapit z atrybutem title="to też jest akapit" i też powinien...
- Selektory atrybutów CSS / Selektor atrybutu zawierającego określony tekst
...(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 jest koloru czerwonego. A to jest akapit z atrybutem TITLE o wartości...
- Selektory pseudoklas CSS / Ostatnie dziecko :last-child
...Natomiast drugie polecenie pozwala 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...
- Selektory pseudoklas CSS / Pusty element :empty
...sensu semantycznego, ponieważ ich przeznaczeniem jest oznaczanie treści. Przykład :empty Po wpisaniu w arkuszu stylów: p:empty { background-color: red; width: 100%; height: 1em } a w dowolnym miejscu strony: <p></p> <p> </p> <p><b></b></p> <p>To jest akapit</p> otrzymamy cztery akapity, z których tylko pierwszy element (pusty) powinien mieć ustawione tło koloru czerwonego: To jest akapit Zwróć uwagę, że drugi akapit (zawierający tylko spację) ani trzeci akapit (zawierający tylko...