internet - Kurs HTML i CSS
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...
- Pozycjonowanie CSS / Przezroczystość {opacity}
(CSS 3 - interpretuje Internet Explorer 9, Firefox 2, Opera, Chrome) selektor { opacity: nieprzezroczystość } Selektorem może być dowolny znacznik [zobacz: Wstawianie stylów]. Natomiast jako "nieprzezroczystość" należy podać liczbę rzeczywistą z przedziału od 0 (całkowita przezroczystość) do 1 (brak przezroczystości - domyślnie). Sterując poziomem przezroczystości można wprowadzić na ekran efektowne warstwy imitujące zabarwione szyby. Trzeba jednak pamiętać, że ustalony poziom...
- Marginesy CSS / Wymiarowanie pudełka {box-sizing}
(CSS 3 - interpretuje Internet Explorer 8, Firefox 29, Opera, Chrome) selektor { box-sizing: rodzaj } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "rodzaj" należy podać: content-box Wymiarowanie zgodne z modelem pudełkowym border-box Wymiarowanie zgodne z trybem Quirks Bardzo stare przeglądarki (w zamierzchłych czasach MSIE 5) nie potrafiły wymiarować bloków zgodnie ze specyfikacją CSS. Sytuacja ta już dawno...
- 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 / Zaokrąglenie obramowania {border-...-radius}
(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome) Zaokrąglenie górnego-lewego narożnika: selektor { border-top-left-radius: zaokrąglenie } Zaokrąglenie górnego-prawego narożnika: selektor { border-top-right-radius: zaokrąglenie } Zaokrąglenie dolnego-prawego narożnika: selektor { border-bottom-right-radius: zaokrąglenie } Zaokrąglenie dolnego-lewego narożnika: selektor { border-bottom-left-radius: zaokrąglenie } We wszystkich przypadkach selektorem może być dowolny...
- Obramowanie CSS / Atrybuty mieszane zaokrąglenia obramowania {border-radius}
(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome) selektor { border-radius: wartości atrybutów } Selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "wartości atrybutów" należy wpisać kolejne wartości zaokrąglenia rozdzielone spacjami (w kolejności: górne-lewe, górne-prawe, dolne-prawe, dolne-lewe). Polecenie pozwala ustalić kilka wartości promieni zaokrąglenia jednocześnie. Możliwe jest przy tym podanie...
- 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...
- Układ wielokolumnowy CSS / Szerokość kolumny {column-width}
(CSS 3 - interpretuje Internet Explorer 10, Firefox 52, Opera 11-12 i 37, Chrome 50) selektor { column-width: szerokość } Selektorem może być dowolny element blokowy z wyjątkiem tabel [zobacz: Wstawianie stylów]. Szerokość jest wyrażona w jednostkach długości i musi być większa od zera. Aby usunąć kolumny lub pozwolić przeglądarce wyznaczyć ich szerokość w inny sposób, należy podać wartość auto. Ustalając szerokość kolumn pozwalamy przeglądarce automatycznie wyświetlić tyle kolumn, ile...