selektor - Kurs HTML i CSS
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...
- 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...
- 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...
- Pozycjonowanie CSS / Ustawienie {float, vertical-align}
Spis treści {float, vertical-align} Ustawienie w poziomie {float} Ustawienie w pionie {vertical-align} Ustawienie w poziomie {float} selektor { float: sposób } Polecenia nie można zastosować do elementów pozycjonowanych absolutnie. Selektorem może być praktycznie dowolny znacznik, który nie został wypozycjonowany absolutnie [zobacz: Wstawianie stylów]. Natomiast jako "sposób" należy podać: left - element ustawiony po lewej stronie, względem elementów sąsiadujących right - element...
- Kursory CSS / Kursor obrazkowy {cursor: url}
(interpretuje MSIE 6; Firefox, Opera 15 i Chrome tylko pliki *.cur - również w systemie Linux) Domyślny gorący punkt: selektor { cursor: url(ścieżka dostępu), rodzaj } Ustalony gorący punkt (CSS 3 - Firefox, Chrome): selektor { cursor: url(ścieżka dostępu) x y, rodzaj } Ścieżkę dostępu należy konstruować względem lokalizacji arkusza CSS, a nie względem adresu dokumentu HTML! Zwracam również uwagę, że podanie na końcu deklaracji ogólnego rodzaju kursora jest konieczne - inaczej nie...
- Drukowanie CSS / Linijki na stronie {widows, orphans}
(interpretuje: Internet Explorer 8.0, Opera, Chrome) Na górze strony: selektor { widows: liczba } Na dole strony: selektor { orphans: liczba } Selektorem może być znacznik wyświetlany w bloku [zobacz: Wstawianie stylów]. Natomiast jako "liczba" należy podać minimalną ilość linijek akapitu, które muszą znaleźć się odpowiednio: na górze lub na dole strony. Powyższe polecenia nie blokują przełamania strony ani go nie wywołują. Mogą być jednak przydatne ze względów estetycznych. Na przykład...
- 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...