Powtórzenie materiału: CSS3 Spis treści

Transkrypt

1 Powtórzenie materiału: CSS3 Spis treści Kolory...2 Jednostki...3 Czcionka...3 Elementy blokowe...3 Cienie...5 Gradient...5 Zgodność z przeglądarkami...6

2 Kolory Wartości kolorów w CSS podawać można na 4 różne sposoby (de facto możliwości jest więcej, ale pozostałe nie są powszechnie stosowane): 1. Nazwa mnemoniczna koloru w języku angielskim: red, blue, yellow, green Wartość szesnastkowa poprzedzona znakiem #. W zapisie tym pierwsze dwie cyfry reprezentują nasycenie koloru czerwonego, kolejne dwie zielonego i ostatnie niebieskiego. Same zera to kolor czarny, natomiast same F biały. Dodatkowo zapis składający się z par o takich samych cyfrach można skrócić do zapisu 3 znakowego: - #ff0000 lub #f00 czerwony - #00ff00 lub #0f0 zielony - #0000ff lub #00f niebieski - #ffffff lub #fff biały - # lub #000 czarny - #cccccc lub #ccc jasnoszary - #fc2154 jakiś kolor z przewagą czerwonego :) 3. Korzystając z rgb( #, #, #), gdzie pod # podstawiamy wartość dziesiętną z przedziału 0 255, kolejne wartości reprezentują czerwony, zielony i niebieski. Również tutaj same 0 to czerń a same 255 biel: - rgb(0,0,0) czarny - rgb(255,255,255) biały - rgb(255,0,0) czerwony - rgb(11,230,123) jakiś kolor z przewagą zielonego :) 4. Korzystając z rgba(#,#,#,#), gdzie trzy pierwsze wartości to kolory składowe dokładnie jak w rgb(#,#,#,#) natomiast czwarty element decyduje o przezroczystości (kanał alfa). Wartość kanału alfa to liczba rzeczywista z przedziału <0,1> gdzie zero oznacza pełną przezroczystość a jeden brak przezroczystości: - rgba(255,0,0,0) kolor będzie całkowicie przezroczysty - rgba(255,0,0,0.5) kolor będzie widoczny, przezroczystość połowiczna - rgba(255,0,0,1) brak przezroczystości Uwaga! Separatorem części ułamkowej jest kropka a nie przecinek. Wszystkie metody ustawiania kolorów są wspierane przez współczesne przeglądarki, a ich wybór w dużej mierze zależy od tego, czy chcemy zachować zgodność z starszymi przeglądarkami (por Zgodność z przeglądarkami ).

3 Jednostki Czcionka Rozmiar czcionki dla elementu html zmieniamy w CSS korzystając z atrybutu font-size który jako wartość przyjmuje liczbę wraz z typem jednostki. Jednostki których używamy do określenia rozmiaru czcionki to px, pt lub em (inne jednostki choć występują nie są powszechnie stosowane do określania rozmiaru czcionki). Ciekawostka: Możemy też używać nazw rozmiarów od (xx-small do xx-large) Ustawienie rozmiaru czcionki w px wydaje się najbardziej intuicyjne. Wysokość największego znaku w tablicy nie będzie większa od zadeklarowanej, co ułatwia pracę projektantowi chcącemu dopasować tekst do tworzonego szablonu. Wadą tego rozwiązania jest natomiast konieczność deklarowania wysokości dla każdego elementu z osobna i w razie zmiany koncepcji poprawa wszystkich wartości ręcznie: h1 {font-size: 24px; } h2 { font-size: 18px;} p { font-size: 12px; } Rozmiar czcionki w pt odpowiada tak zwanej wysokości punktu drukarskiego 1pt to 1/72 cala. Również tutaj musimy ustawiać wysokość dla każdego elementu z osobna. Ostatnia z jednostek, em, jest jednostką względną. Oznacza to, że rozmiar podany w em będzie odnosił się do wysokości pierwszego napotkanego elementu rodzica z wartością bezwzględną. Przykładowo jeśli dla elementu body ustawimy rozmiar czcionki 12px a dla elementu h1 rozmiar 2em to wysokość elementu h1 wynosić będzie 24px. Dzięki wykorzystaniu jednostek względnych możemy szybko zmienić rozmiar elementów zależnych zmieniając wartość elementu rodzica: body { font-size: 12px; } h1 {font-size: 2em } /* 24px / h2 {font-size: 1.5em } /* 18px / p { font-size: 1em } /* 12px */ Elementy blokowe Rozmiar elementów blokowych (div, h1, header, section, article etc.) oraz ich marginesów wewnętrznych i zewnętrznych ustawiamy w px, %, vw, vh. Występują też inne, rzadziej stosowane jednostki (np. cm, mm). Rozmiar w px jest stosowany dla elementów o stałej szerokości i wysokości, jego wadą jest brak responsywności (element o rozmiarach podanych w px będzie miał taki sam rozmiar bez względu na rozdzielczość urządzenia na którym przeglądamy stronę). Powszechnie stosuje się go natomiast

4 w odniesieniu do marginesów zewnętrznych (margin) i wewnętrznych (padding): div { width: 200px; height: 120px; margin: 20px; padding: 25px; } Rozmiar w % rozwiązuje problem braku responsywności (na małym ekranie pole o szerokości 50% zajmuje połowę przestrzeni, tak samo jak na dużym ekranie). Wadą jest natomiast brak kontroli nad rozmiarem elementu na b. dużych rozdzielczościach, dlatego elementy o rozmiarach podanych w % umieszcza się często w elementach o rozmiarze max-width podanym w px (rozmiar w % jest obliczany od rozmiaru rodzica): div { max-width: 900px; } div p { width: 50%; /* 450px na dużym ekranie */ } Jednostki vw i vh to jednostki względne odnoszące się do szerokości i wysokości obszaru okna przeglądarki. Obecnie stosowane są coraz powszechniej dlatego warto zdawać sobie sprawę z ich istnienia.

5 Cienie Jednym z ciekawszych elementów które dodaje CSS3 jest możliwość ustawiania cienia dla tekstu (text-shadow) i dla elementu blokowego (box-shadow) Atrybut text-shadow ma 4 parametry: pozycja cienia w poziomie, pozycja cienia w pionie, rozmycie(opcjonalne) oraz kolor. Pozycja w pionie i w poziomie przyjmują wartości w px przy czym wartość dodatnia przesuwa cień odpowiednio w dół i prawo, natomiast ujemna w górę i w lewo. Rozmycie również przyjmuje wartość w px i zmiękcza cień (np aby uzyskać efekt neonu). Kolor najczęściej podajemy jako wartość szesnastkową, choć możemy użyć też pozostałych wartości omówionych wcześniej: p {text-shadow: 2px 2px 5px red } p.neon { text-shadow: px #c0c0ff; } Atrybut box-shadow stosuje się do elementów blokowych i można dla niego ustawić 6 parametrów: pozycja w poziomie, pozycja w pionie, rozmycie cienia(opcjonalnie), propagacje cienia(opcjonalnie), kolor i parametr inset. Propagacja cienia przyjmuje wartości w px i określa rozmiar cienia. Parametr inset zmienia cień zewnętrzny w wewnętrzny: p { box-shadow: 10px 10px 20px red; } p.inset { box-shadow: 15px 15px 2px 5px #cf2154 inset; } Gradient Gradient to alternatywna opcja koloru tła, pozwala tworzyć atrakcyjne tła bez konieczności załączania zewnętrznych plików graficznych. Tworzyć możemy gradienty liniowe lub promieniste. Liniowy gradient to płynne przejście pomiędzy dwoma lub więcej kolorami w pionie, poziomie lub po skosie. Ustalić możemy kolory, oraz kierunek gradientu wg wzoru linear-gradient([kierunek], kolor1, kolor2... ): background: linear-gradient(white, red); /* od góry do dołu */ background: linear-gradient(to top, green, blue, silver); /* od dołu do góry / background: linear-gradient(-90deg, gold, silver); /* pod kątem -90 stopni */ Gradient promienisty rozchodzi się od środka ustawić możemy kształt środka, kolory i ich udział procentowy radial-gradient([kształt], kolor1 [udział procentowy], kolor2 [udział procentowy]...): background: radial-gradient(circle, red, blue) /* okrągły środek / background: radial-gradient(red 40%, green 60%) /* elipsa z ustalonym udziałem procentowym kolorów */ Więcej na temat gradientów:

6 Zgodność z przeglądarkami Kolory: rgba obsługuje IE9+, Firefox 3+, Chrome, Safari, Opera 10+. Tabele browser support na stronach: jednostki: cienie dla tekstu: cienie dla elementów blokowych: gradienty: