reguła - Kurs HTML i CSS
Selektory specjalne CSS / Selektor identyfikatora <... id>...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 selektora uniwersalnego pozwala przypisać styl...
- Selektory pseudoelementów CSS / Pierwsza linia :first-line
...znajdującym się wewnątrz znacznika, na który wskazuje selektor. Przykład :first-line Jeżeli w arkuszu stylów została umieszczona następująca reguła: p:first-line { color: red } to wszystkie pierwsze linijki wchodzące w skład akapitów, będą miały czerwony kolor: To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest...
- Selektory pseudoelementów CSS / Pierwsza litera :first-letter
...znajdującej się wewnątrz znacznika, na który wskazuje selektor. Przykład :first-letter Jeżeli w arkuszu stylów została umieszczona następująca reguła: p:first-letter { color: red } to pierwsza litera każdego akapitu będzie mieć czerwony kolor: To jest akapit. Inny ciekawy przykład: p:first-letter { color: red; font-family: 'Times New Roman', serif; font-size: 300%; float: left } W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często...
- Selektory pseudoelementów CSS / Przed... :before
...podaną treść przed określonymi elementami, na które wskazuje selektor. Przykład :before Jeżeli w arkuszu stylów została umieszczona następująca reguła: p:before { content: "POCZĄTEK "; color: red } to wszystkie akapity będą rozpoczynały się od wyrazu "POCZĄTEK", mimo że nie wpiszemy tego wyrazu bezpośrednio w treści akapitu: To akapit, rozpoczynający się wyrazem "POCZĄTEK", pomimo że nie został on umieszczony w treści akapitu. Obrazek przed... :before {content: url} Zamiast tekstu...
- Selektory pseudoelementów CSS / Po... :after
...podaną treść po określonych elementach, na które wskazuje selektor. 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. Obrazek po... :after {content: url} Zamiast tekstu generowanego po...
- 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...
- CSS dla zielonych / Arkusz stylów CSS
...edytora CSS. W pliku tym wpisuje się listę tzw. reguł stylów, za pomocą których możliwe jest określanie wyglądu elementów na stronie. Każda reguła stylów składa się zawsze z dwóch następujących bezpośrednio po sobie części: Selektora - czyli elementu (znacznika) na stronie, któremu chcemy zmienić wygląd Deklaracji ujętej w nawiasy klamrowe, w której określa się, w jaki sposób chcemy zmienić wygląd selektor1 { Tu wpisuje się deklaracje stylów } selektor2 { Tu wpisuje się...
- 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...
- Reguły specjalne CSS
...możesz przeczytać klikając odnośnik w kolumnie "Opis". Natomiast kolumna "CSS" zawiera poziom specyfikacji języka, w którym po raz pierwszy wybrana reguła została wprowadzona. Wzór Znaczenie Opis CSS @charset "wart"; strona kodowa Zewnętrzny arkusz stylów 2 @import "adr"; @import url(adr); import stylów z innego arkusza Import arkusza stylów 1 @font-face opis czcionki Czcionki osadzone 2 @counter-style wart niestandardowy styl licznika Niestandardowy typ stylu...