selektor - Kurs HTML i CSS
Selektory elementów CSS / Reguły stylów...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 można podać...
- 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. UWAGA...
- Selektory pseudoklas CSS / Szczegółowość selektorów
...określenie ważności reguł stylów, znajdujących się w tym samym arkuszu CSS. Panuje tutaj dość intuicyjna zasada mówiąca, że bardziej szczegółowe selektory są ważniejsze. Selektory identyfikatora mają pierwszeństwo przed innymi, nawet jeśli znajdują się na początku arkusza CSS. Im więcej identyfikatorów zawiera selektor, tym jest bardziej szczegółowy, a więc ważniejszy. Przykład Tekst przedstawionego poniżej akapitu będzie czerwony (red): <div id="kontener"> <p...
- Selektory pseudoklas CSS / Pseudoklasy typu :first-of-type :last-of-type :only-of-type
(CSS 3 - interpretuje Internet Explorer 9, Firefox 3, Opera, Chrome) Pierwszy element wybranego typu: selektor:first-of-type { cecha: wartość } rodzic > dziecko:first-of-type { cecha: wartość } Ostatni element wybranego typu: selektor:last-of-type { cecha: wartość } rodzic > dziecko:last-of-type { cecha: wartość } Jedyny element wybranego typu: selektor:only-of-type { cecha: wartość } rodzic > dziecko:only-of-type { cecha: wartość } Selektorem, rodzicem oraz dzieckiem może być...
- Drukowanie CSS / Przełamanie strony {page-break-before, page-break-after}
(interpretuje: Internet Explorer, Firefox, Opera, Chrome) Przed elementem: selektor { page-break-before: wartość } Po elemencie: selektor { page-break-after: wartość } Selektorem może być znacznik wyświetlany w bloku [zobacz: Wstawianie stylów]. Natomiast jako "wartość" należy podać: always - przełamanie zawsze auto - brak ograniczeń left - następna strona formatowana jako lewa right - następna strona formatowana jako prawa avoid - unikanie przełamania Polecenie to wymusza na...
- Układ elastyczny CSS / Przepływ elastyczny {flex-direction, flex-wrap, flex-flow}
...{flex-direction} Zawijanie elastyczne {flex-wrap} Atrybuty mieszane przepływu elastycznego {flex-flow} Kierunek elastyczny {flex-direction} selektor { flex-direction: kierunek } Selektorem musi być kontener elastyczny. Kierunek określa sposób układania kolejnych elementów wewnątrz układu elastycznego: row - elementy będą układane w wierszach, analogicznie jak wyrazy tekstu w akapitach (domyślnie) row-reverse - ułożenie w wierszach w przeciwnym kierunku (w języku polskim będzie to...
- CSS dla zielonych / Klasy selektorów CSS <div class>
...pewne powtarzające się elementy. Może to być np. menu nawigacyjne, nagłówek czy stopka serwisu. W jaki sposób ustalać im wygląd? Do tej pory jako selektorów używaliśmy nazw znaczników. Jednak w języku HTML istnieje ściśle określona lista znaczników i nie możemy definiować sobie nowego za każdym razem, kiedy potrzebujemy wstawić na stronie kolejny powtarzający się element. Robi się to w inny sposób - korzystając z tzw. klas selektorów. Załóżmy, że mamy na stronie menu nawigacyjne, któremu...
- Wykazy CSS / Niestandardowy typ stylu wykazu @counter-style
...Punkt trzeci Punkt czwarty Punkt piąty Punkt szósty Anonimowy typ stylu wykazu {list-style-type: symbols} (CSS 3 - interpretuje Firefox 35) selektor { list-style-type: symbols(symbole) } lub selektor { list-style-type: symbols(algorytm symbole) } Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu [zobacz: Wstawianie stylów]. W przypadku definiowania anonimowego typu stylu wykazu każdy element listy symbolów...
- Dobre praktyki / Przykazania webmastera
...znaczniki semantyczne, które już znajdują się w kodzie źródłowym - wstaw jeden element div, będący pojemnikiem całego obiektu, a potem korzystaj z selektora potomka w celu wystylizowania elementów, które zawiera obiekt. Wstawianie zbędnych znaczników nie tylko zaciemnia kod, ale również wydłuża czas ładowania strony. Formatuj kod źródłowy Kod zawierający znaczniki z dodanymi wcięciami - zgodnie z poziomem ich zagnieżdżenia w drzewie dokumentu - jest czytelniejszy, a dzięki temu mniej...
- 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...