selektor typu - Kurs HTML i CSS
Podcast HTML / #8 Formularze HTML...do odczytu (readonly) lub zablokowane (disabled). Selektor plików Umożliwia użytkownikowi wybranie pliku ze swojego dysku lokalnego. Wprowadza selektor składający się z pola tekstowego na ścieżkę dostępu i przycisku do przeszukania dysku. Wprowadzenie selektora: <form action="..." enctype="multipart/form-data"><input type="file" name="nazwa"></form>. Atrybut enctype="multipart/form-data" jest konieczny do wysyłania plików w załączniku, np. w skryptach PHP. Filtr typu plików: za pomocą...
Selektory elementów CSS / Ogólny selektor braci(CSS 3 - interpretuje Internet Explorer 7.0, Firefox, Opera, Chrome) brat1 ~ brat2 { cecha: wartość } gdzie wyrazy "brat1" oraz "brat2" są selektorami typu, przy czym leżą one w tym samym rzędzie hierarchii drzewa dokumentu [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu i zostaną opisane w dalszych rozdziałach. Selektor ten umożliwia nadanie określonych atrybutów wszystkim braciom - tym, których typ w deklaracji został podany jako drugi...
- 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 elementów CSS / Selektor dziecka
rodzic > dziecko { cecha: wartość } gdzie wyrazy "rodzic" oraz "dziecko" są selektorami typu, przy czym rodzic leży o jeden rząd wyżej w hierarchii drzewa dokumentu [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu i zostaną opisane w dalszych rozdziałach. Selektor tego typu pozwala nadać atrybuty elementom, które leżą o jeden rząd niżej w hierarchii drzewa dokumentu (zawierają się w innym zewnętrznym znaczniku). W odróżnieniu do poprzedniego...
- Kursory CSS / Kształt kursora {cursor}
...zmiany rozmiaru i przewijania Kursory powiększania Kształt kursora {cursor} (interpretuje Internet Explorer 4, Firefox, Opera 7, Chrome) selektor { cursor: rodzaj } Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów]. Natomiast "rodzaj" odpowiada za kształt, jaki przybierze wskaźnik myszki, po naprowadzeniu go na dany element. Kursory ogólnego przeznaczenia auto - automatyczny wybór kształtu kursora (zależy od typu elementu, na który wskazujemy - tryb...
- Selektory pseudoklas CSS / Blokada :disabled :enabled
(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome) Pole zablokowane: selektor:disabled { cecha: wartość } Pole odblokowane: selektor:enabled { cecha: wartość } Selektorem mogą być pola formularza, którym można przypisać atrybut disabled="..." [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Pola formularza mogą znajdować się w wielu stanach - jednym z nich jest...
- Tło CSS / Tło obrazkowe {background-image}
...{background-image} Wielokrotne tło obrazkowe Tło obrazkowe {background-image} (interpretuje Internet Explorer 6, Firefox, Opera, Chrome) selektor { background-image: url(ścieżka dostępu do obrazka) } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "ścieżka dostępu do obrazka" należy podać miejsce, gdzie znajduje się obrazek, który chcemy wstawić jako tło. Wpisanie "none" usunie...
- Dziedziczenie stylów CSS / Wymuszenie dziedziczenia {...: inherit}
selektor { cecha: inherit } Selektor oznacza wybrany element, któremu chcemy zmienić sposób formatowania określony za pomocą cechy - zostaną opisane w kolejnych rozdziałach. Dziedziczenie stylów jest domyślnym zachowaniem w języku CSS. To znaczy nie trzeba nic robić, żeby z niego skorzystać - zostanie ono zastosowane automatycznie. Dopiero kiedy wybranemu elementowi przypiszemy jakiś styl, nie odziedziczy on go po swoich przodkach (czyli znacznikach, wewnątrz których się znajduje). A co...
- Dziedziczenie stylów CSS / Odwołanie wartości {...: unset}
(CSS 3 - interpretuje Firefox 27, Opera 28, Chrome 41) selektor { cecha: unset } Selektor oznacza wybrany element, któremu chcemy zmienić sposób formatowania określony za pomocą cechy - zostaną opisane w kolejnych rozdziałach. Nie wszystkie cechy CSS podlegają dziedziczeniu. Wydaje się logiczne, że jeśli ustawimy określony kolor tekstu, to chcemy, aby również każdy z elementów podrzędnych miał właśnie taki kolor. Ale gdybyśmy w ten sposób postąpili np. z obramowaniem, efekt byłby dziwaczny...
- Dziedziczenie stylów CSS / Przywrócenie wartości pierwotnej {...: revert}
(CSS 3 - interpretuje Firefox 67, Opera 73, Chrome 84) selektor { cecha: revert } Selektor oznacza wybrany element, któremu chcemy zmienić sposób formatowania określony za pomocą cechy - zostaną opisane w kolejnych rozdziałach. Każda przeglądarka ma wbudowany domyślny arkusz stylów. Dzięki niemu nawet jeśli nie dołączymy żadnych własnych stylów do dokumentu, to np. tekst zawarty w znaczniku B i tak będzie pogrubiony. To bardzo przydatna funkcja, bo przeglądarka w ten sposób załatwia za nas...