znacznik - Kurs HTML i CSS
Dziedziczenie stylów CSS / Hierarchia elementów...(przejmują) atrybuty formatowania, które zostały nadane ich przodkom. Dzięki temu można nadawać ogólne reguły stylów wyższym elementom (np. znacznik body), co pozwala uniknąć powielania tych samych deklaracji dla każdego elementu z osobna. Dziedziczenie zwiększa przejrzystość kodu CSS, ułatwia jego modyfikację oraz zapewnia spójność wizualną całej strony. Przykład To jest akapit koloru zielonego, wewnątrz którego znajduje się: pochylenie oraz podkreślenie, którym nie zostały nadane...
- Selektory elementów CSS / Reguły stylów
Atrybuty formatowania w języku CSS definiuje się za pomocą tzw. reguł stylów. Każda reguła odnosi się do konkretnego elementu (znacznika) i składa się z dwóch części: selektora i deklaracji. Selektor określa do jakich elementów ma zostać przypisane formatowanie, a deklaracja podaje to formatowanie i jest umieszczona w nawiasie klamrowym {...}. Każda deklaracja składa się przynajmniej z jednego zespołu cecha lub inaczej własność albo właściwość (ang. property) - wartość (ang. value), przy czym...
- Selektory elementów CSS / Selektor potomka
...Selektor tego typu pozwala nadać atrybuty elementom, które leżą niżej w hierarchii drzewa dokumentu (zawierają się w innych zewnętrznych znacznikach). Dzięki temu możemy zmienić typ formatowania tylko dla określonych elementów, które są podrzędne w stosunku do innych (przodków). Potomek nie musi leżeć bezpośrednio wewnątrz znacznika przodka. Może być zawarty jeszcze w innych znacznikach, które z kolei zawierają się w rodzicu. Nie jest wtedy konieczne podawanie w deklaracji...
- Selektory atrybutów CSS / Selektor atrybutu zawierającego określony wyraz
selektor[atrybut~="wyraz"] { cecha: wartość } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu HTML (np. atrybut title="..."), którego wartość składa się z wyrazów rozdzielonych spacjami. "Wyraz" to określone słowo, zawierające się w wartości atrybutu, które nie może zawierać spacji. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu...
- Selektory atrybutów CSS / Selektor atrybutu zawierającego łączniki
selektor[atrybut|="początek"] { cecha: wartość } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu HTML (np. atrybut lang="..."), którego wartość składa się z wyrazów rozdzielonych łącznikami (myślnikami). "Początek" to określony wyraz, od którego rozpoczyna się wartość atrybutu. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane...
- Selektory specjalne CSS / Selektor identyfikatora <... id>
selektor#identyfikator { cecha: wartość } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne) [zobacz: Wstawianie stylów]. Identyfikator to wartość atrybutu id="..." nadanego selektorowi z poziomu języka HTML. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Jako identyfikator należy podać dowolny pojedynczy wyraz, który nie może zawierać znaków: spacji, kropki...
- Selektory specjalne CSS / Klasy selektorów <... class>
...selektorów <... class> Lista klas Podzbiory klas Klasy selektorów <... class> selektor.klasa { cecha: wartość } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne) [zobacz: Wstawianie stylów]. Klasa to wartość atrybutu class="..." nadanego selektorowi z poziomu języka HTML. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Jako klasa należy podać dowolny...
- Selektory pseudoelementów CSS / Pierwsza linia :first-line
selektor:first-line { cecha: wartość } Selektorem może być znacznik wyświetlany w bloku. CSS 2.1 dozwala zastosowanie dodatkowo do elementów inline-block, tytułów (podpisów) tabeli (<caption>...</caption>) oraz komórek tabeli (<td>...</td>). [Zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Polecenie raz zdefiniowane w arkuszu stylów, pozwala na nadanie określonych cech wszystkim...
- Selektory pseudoelementów CSS / Pierwsza litera :first-letter
selektor:first-letter { cecha: wartość } Selektorem może być dowolny znacznik wyświetlany w bloku [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Aby selektor zadziałał, blok musi się rozpoczynać tekstem, a nie np. obrazkiem ani tabelką. Polecenie pozwala na nadanie określonych cech pierwszej literze treści, znajdującej się wewnątrz znacznika, na który wskazuje selektor. Przykład...
- Selektory pseudoelementów CSS / Przed... :before
...url} Wartość atrybutu przed... :before {content: attr} Przed... :before selektor:before { content: "treść" } Selektorem może być dowolny 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...