reguła - Kurs HTML i CSS
Selektory pseudoelementów CSS / Po... :after...MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance. Przykład :after Jeżeli w arkuszu stylów została umieszczona następująca reguła: p:after { content: " KONIEC"; color: red } to wszystkie akapity będą kończyły się wyrazem "KONIEC", mimo że nie wpiszemy tego wyrazu bezpośrednio w treści akapitu: To jest akapit, kończący się wyrazem "KONIEC", pomimo że nie został on umieszczony w treści akapitu. Jeśli używasz Internet Explorera 7.0 lub starszego, powyższy akapit będzie...
- Wykazy CSS / Atrybuty mieszane wykazu {list-style}
...aby podawać w tej deklaracji pełną listę cech składowych, jednak jeśli jakąś opuścimy, zostanie jej przypisana wartość domyślna. Dlatego poniższa reguła stylów nie ustawi wyróżnika wewnątrz wykazu (inside), ponieważ nie zostało to określone w deklaracji list-style, która tutaj unieważnia list-style-position: li { list-style-position: inside; list-style: disc } Zgodnie z zasadą kaskadowości, oczekiwany skutek (zawijanie tekstu wokół wyróżnika) odniesiemy, podając deklaracje w odwrotnej...
- Selektory pseudoklas CSS / Łączenie selektorów
...może się znajdować tylko za ostatnim selektorem prostym w regule stylu. Przykład a.przyklad_selektory:hover { font-weight: bold } Taka reguła kojarzy każdy element typu a (czyli odsyłacz), który będzie posiadał klasę class="przyklad_selektory", kiedy zostanie on wskazany myszką: Wskaż ten odsyłacz myszką: class="przyklad_selektory". A tutaj jest odsyłacz bez klasy. Taki sposób tworzenia selektora odsyłaczy jest szczególnie przydatny, ponieważ zwykle chcemy część odnośników na...
- Selektory atrybutów CSS / Selektor atrybutu o wartości rozpoczynającej się od...
...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 jest akapit z atrybutem title="to też...
- Czcionki CSS / Atrybuty mieszane czcionki {font}
...aby podawać w tej deklaracji pełną listę cech składowych, jednak jeśli jakąś opuścimy, zostanie jej przypisana wartość domyślna. Dlatego poniższa reguła stylów nie ustawi pogrubionej czcionki (bold), ponieważ nie zostało to określone w deklaracji font, która tutaj unieważnia font-weight: p { font-weight: bold; font: 12pt Arial; } Zgodnie z zasadą kaskadowości oczekiwany skutek (pogrubiony tekst) odniesiemy podając deklaracje w odwrotnej kolejności: p { font: 12pt Arial...
- Selektory atrybutów CSS / Selektor atrybutu o wartości kończącej się na...
...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 to jest akapit z atrybutem title="to...
- Tło CSS / Atrybuty mieszane tła {background}
...aby podawać w tej deklaracji pełną listę cech składowych, jednak jeśli jakąś opuścimy, zostanie jej przypisana wartość domyślna. Dlatego poniższa reguła stylów nie ustawi tła koloru czerwonego (red), ponieważ nie zostało to określone w deklaracji background, która tutaj unieważnia background-color: p { background-color: red; background: url(tlo.gif) } Zgodnie z zasadą kaskadowości, oczekiwany skutek (czerwone tło) odniesiemy, podając deklaracje w odwrotnej kolejności: p { background...
- Wykazy CSS / Odstęp wyróżnika wykazu {marker-offset}
...przeglądarkach, jednak tylko taki zestaw daje prawie pewność, że otrzymamy to, o co nam chodziło. Dlatego nie radzę niczego pomijać! Druga reguła formatuje elementy li zawierające się wewnątrz znacznika ul w taki sposób, aby wyglądały jak zwyczajny wykaz. Jednak dodatkowo dostajemy możliwość wpływu na pozycję markera. Sztuczka polega na zastąpienia tradycyjnego wyróżnika wykazu specjalnie przygotowanych obrazkiem, który wstawiamy w tle elementów li. CSS daje możliwość określenia tła...
- Selektory atrybutów CSS / Selektor atrybutu zawierającego określony tekst
...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 jest koloru czerwonego. A to jest...
- Selektory elementów CSS / Ogólny selektor braci
...elementy innego typu - zostaną pominięte. Nie obsługuje MSIE 6.0!. 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...