selektor - Kurs HTML i CSS
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...
- Selektory pseudoklas CSS / Domyślne :default
(CSS 3 - interpretuje Firefox 3, Opera 12- i 38, Chrome 51) selektor:default { cecha: wartość } Selektorem mogą być pola formularza: wyboru, opcji oraz opcje listy rozwijalnej, a także przyciski [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Niektóre elementy formularza mogą oznaczać domyślną akcję. Na przykład przycisk wysłania formularza powinien być domyślnym. Mimo iż w...
- Selektory pseudoklas CSS / Tylko do odczytu :read-only :read-write
(CSS 3 - interpretuje Firefox 78, Opera 23, Chrome 36) Pole tylko do odczytu: selektor:read-only { cecha: wartość } Pole do odczytu i do zapisu: selektor:read-write { cecha: wartość } Selektorem powinny być pola formularza, którym można przypisać atrybut readonly="..." [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Niektóre pola formularza (pole tekstowe, hasło...
- Tło CSS / Przycinanie tła {background-clip}
(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome) selektor { background-clip: przycinanie } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "przycinanie" należy wpisać: border-box - tło wyświetli się pod obramowaniem, marginesem wewnętrznym i właściwą zawartością elementu (domyślnie) [Zobacz: Model pudełkowy] padding-box - tło wyświetli się pod marginesem wewnętrznych i...
- Tło CSS / Pozycja początkowa tła obrazkowego {background-origin}
(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome) selektor { background-origin: początek } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "początek" należy wpisać: border-box - pozycja tła będzie liczona względem krawędzi obramowania [Zobacz: Model pudełkowy] padding-box - pozycja tła będzie liczona względem krawędzi marginesu wewnętrznego (domyślnie) content-box - pozycja...
- Tło CSS / Rozmiary tła obrazkowego {background-size}
(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome) selektor { background-size: rozmiary } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "rozmiary" należy wpisać: contain - skaluje obrazek, zachowując proporcje, tak aby w całości zmieścił się w tle cover - skaluje obrazek, zachowując proporcje, tak aby pokrył cały obszar tła (część grafiki może być niewidoczna) auto...
- Obramowanie CSS / Cień {box-shadow}
(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome) Cień na zewnątrz elementu: selektor { box-shadow: poziom pion rozmycie rozprzestrzenienie kolor,... } Cień wewnątrz elementu: selektor { box-shadow: inset poziom pion rozmycie rozprzestrzenienie kolor,... } Wartości "poziom pion rozmycie rozprzestrzenienie kolor" określają własności cienia (wartości "rozmycie", "rozprzestrzenienie" oraz "kolor" nie są wymagane): poziom - przesunięcie cienia w prawo (ujemne wartości...
- Tło CSS / Gradient liniowy {background: linear-gradient repeating-linear-gradient}
...repeating-linear-gradient} Gradient liniowy {background: linear-gradient} (CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera, Chrome) selektor { background: linear-gradient(kierunek, kolor1 odległość1, kolor2 odległość2...) } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Kierunek określa sposób rozłożenia barw. Można go podać na dwa sposoby: słowa kluczowe to top - przejście kolorów nastąpi...
- Tło CSS / Gradient promienisty {background: radial-gradient repeating-radial-gradient}
...Gradient promienisty {background: radial-gradient} (CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera, Chrome) selektor { background: radial-gradient(kształt rozmiar at pozycja, kolor1 odległość1, kolor2 odległość2...) } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Jako kształ należy wpisać: circle - okrąg (domyślnie gdy jako rozmiar podano pojedynczy promień, określony...
- Układ elastyczny CSS / Kontener elastyczny {display: flex inline-flex}
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) Układ elastyczny w bloku: selektor { display: flex } Układ elastyczny w linii: selektor { display: inline-flex } Wstawienie jednej z powyższej deklaracji sprawia, że dzieci elementu (znaczniki które bezpośrednio się w nim zawierają), wyznaczonego podanym selektorem [zobacz: Wstawianie stylów], będą układane w nim w sposób elastyczny. Tak tworzy się tzw. kontener elastyczny (ang. flex container), w którym dzieci...