tekst - Kurs HTML i CSS
Selektory elementów CSS / Ogólny selektor braci...ten umożliwia nadanie określonych atrybutów wszystkim braciom - tym, których typ w deklaracji został podany jako drugi (czyli brat2). Zwykły tekst znajdujący się pomiędzy braćmi nie ma wpływu na działanie selektora, tzn. jest ignorowany. W odróżnieniu jednak od podstawowego selektora 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...
- Selektory atrybutów CSS / Selektor atrybutu o wartości kończącej się na...
...[zobacz: Wstawianie stylów]. Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu HTML (np. atrybut title="..."). "Koniec" to określony tekst, którym kończy się wartość atrybutu. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty 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...
- Selektory pseudoelementów CSS / Co to są pseudoelementy CSS?
...generować pewną zawartość w określonych miejscach dokumentu, która normalnie nie znajduje się w kodzie źródłowym. Chodzi tutaj o specjalny tekst poprzedzający lub następujący np. po akapicie.
- Selektory pseudoelementów CSS / Przed... :before
...znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Natomiast jako wyraz "treść" można wpisać dowolny tekst. Polecenie pozwala automatycznie dopisywać 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...
- Selektory specjalne CSS / Klasy selektorów <... class>
...p.przyklad_klasa { color: red } to jeśli teraz w dowolnym miejscu wpiszemy: <p class="przyklad_klasa">To jest akapit.</p> na ekranie zobaczymy tekst napisany czcionką koloru czerwonego: To jest akapit. Dla porównania, to też jest akapit, ale bez podania klasy i dlatego nie jest czerwony. W przypadku stosowanie klas, często podczas ich definiowania, nie wiemy jeszcze, w stosunku do jakich znaczników będziemy chcieli je później użyć. Wtedy przydatny okazuje się selektor uniwersalny...
- Selektory pseudoelementów CSS / Po... :after
...znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Natomiast jako wyraz "treść" można wpisać dowolny tekst. Polecenie pozwala automatycznie dopisywać 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...
- Selektory pseudoklas CSS / Zogniskowanie :focus
...white; background-color: black } Kliknij tutaj lub przenieś kursor za pomocą klawisza tabulatora, a tło w tym polu stanie się czarne natomiast tekst biały.
- Selektory pseudoklas CSS / Korzeń :root
...Przykład :root Po wpisaniu w arkuszu stylów: :root p { color: red } a w dowolnym miejscu strony: <p>To jest akapit</p> powinniśmy otrzymać tekst koloru czerwonego: To jest akapit Pytania i odpowiedzi :root Co to jest "root" w CSS? W CSS termin root odnosi się do głównego elementu struktury dokumentu, czyli do korzenia drzewa dokumentu. Jest to punkt wyjścia dla stylów CSS, które mogą być zastosowane do całej strony. Jaki znacznik jest elementem głównym "root" strony HTML...
- Selektory pseudoklas CSS / Ostatnie dziecko :last-child
...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 pogrubienie (nie powinno być czerwone) oraz drugie pogrubienie (powinno być czerwone).
- Selektory pseudoklas CSS / Pseudoklasy typu :first-of-type :last-of-type :only-of-type
...2</dd> <dt>Termin 3</dt><dd>Definicja 3</dd> </dl> <dl> <dt>Termin 1</dt><dd>Definicja 1</dd> </dl> na stronie powinniśmy otrzymać wykaz, w którym tekst pierwszego punktu będzie pogrubiony, a ostatniego - pochylony: Termin 1 Definicja 1 Termin 2 Definicja 2 Termin 3 Definicja 3 Termin 1 Definicja 1 Zwróć uwagę, że tylko termin drugiej z list jest podkreślony, ponieważ pierwsza lista posiada więcej niż jeden element <dt>...</dt>. Jednocześnie, ponieważ jedyny termin drugiej listy jest...