CSS3 kolory jednostki miar selektory budowa responsywnej strony html5 CSS3
PROMOCJA WAKACJE 2024 – RABATY nawet do 66% …
Wydawnictwo Cyfrowe poswojsku.pl - cyberbezpieczeństwo, AI, RODO - ebooki:
Twoje bezpieczeństwo w świecie cyber i sztucznej inteligencji Część 1 Wprowadzenie
Twoje bezpieczeństwo w świecie cyber i sztucznej inteligencji Część 2 Cyberhigiena
Twoje bezpieczeństwo w świecie cyber i sztucznej inteligencji Część 3 Dziecko i Ty
AI w EDUKACJI Część I Praktyczny poradnik nie tylko dla nauczycieli
AI w EDUKACJI Część II Praktyczne pomysły na kreatywną naukę
NAJWAŻNIEJSZE ELEMENTY JĘZYKA CSS3 NIEZBĘDNE DO STWORZENIA NOWOCZESNEJ STRONY INTERNETOWEJ
CSS3 kolory jednostki miar selektory budowa responsywnej strony html5 CSS3
KOLORY CSS3 - najważniejsze systemy określania kolorów
NOTACJA SZESNASTKOWA CSS3
Webmasterzy najczęściej zapisują kolory w notacji szesnastkowej.
Zapis: #6600FF - w rzeczywistości składa się z trzech liczb szesnastkowych, tutaj 66, 00 i FF. Określają one ilość koloru odpowiednio: czerwonego, zielonego i niebieskiego. Podobnie działa system RGB - ostateczny kolor jest tym, co powstanie po zmieszaniu składowych opisanych za pomocą liczb.
SYSTEM RGB CSS3
Notacja RGB (od ang. red, green, blue) używana jest przede wszystkim w komputerowych programach graficznych oraz w niektórych drukarniach. Kolor składa się z trzech liczb reprezentujących procentowo (0 – 100 procent) lub liczbowo (0 – 255) udział każdej barwy (czerwonej, zielonej i niebieskiej). Np. - kolor tekstu - biały – zrobimy zapis:
color: rgb(100%,100%,100%); lub color: rgb(255,255,255);
rozszerzeniem RGB jest RGBA, gdzie dochodzi kolejna wartość: kanał alfa czyli poziom przezroczystości koloru. Wartość 0 oznacza całkowitą przezroczystość, a 1 brak przezroczystości (tzn. nic nie prześwituje).
color: rgba(255,255,255,.25);
Ale uwaga! Starsze przeglądarki nie obsługują RGBA.
JEDNOSTKI MIARY CSS3 – najważniejsze systemy określania wielkości
PIKSELE CSS3
Najstarszy i ciągle najpopularniejszy zapis wielkości. Niestety nie za bardzo nadaje się do stron responsywnych.
font-size: 12px;
JEDNOSTKA em CSS3
Jednostka em to odniesienie do podstawowego rozmiaru pisma. To znaczy, że wartość 1 em odpowiada wartości 100 procent (np. standardowa wielkość czcionki dla danego dokumentu).
font-size: 1em;
WARTOŚCI PROCENTOWE CSS3
Najlepszy sposób dla tworzenia dynamicznych siatek stron www (choć em też się do tego celu nadaje). Określa nam wielkość elementu zawartego w określonym bloku, czyli jest to procentowy udział elementu w danym bloku.
font-size: 100%;
margin: 5%;
itp.
PODSTAWOWE SELEKTORY CSS3
Wykaz selektorów można znaleźć m.in. na stronie: https://www.w3schools.com/ gdzie znajduje się wykaz pełnych referencji CSS.
CSS3: Czcionka
1. Wielkość - selektor { font-size: rozmiar }
2. Rodzaj - selektor { font-family: rodzaj, rodzaj1, rodzaj2,... }
3. Styl - selektor { font-style: styl }
CSS3: Tekst
1. Kolor: - selektor { color: kolor }
2. Dekoracja - selektor { text-decoration: dekoracja }
3. Wyrównanie - selektor { text-align: wyrównanie }
CSS3: Tło
1. Kolor - selektor { background-color: kolor }
2. Tło obrazkowe - selektor { background-image: url(ścieżka dostępu do obrazka) }
3. Powtarzanie - selektor { background-repeat: powtarzanie }
repeat - powtarzanie tła w obydwu kierunkach (domyślnie)
repeat-x - powtarzanie tła tylko w kierunku poziomym
repeat-y - powtarzanie tła tylko w kierunku pionowym
no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek)
CSS3: Marginesy
górny prawy dolny lewy { margin: rozmiar rozmiar rozmiar rozmiar }
Rozmiar trzeba podać konkretną wartość w jednostkach długości np. pixelach.
CSS3: Wewnętrzne dopełnienie
górny prawy dolny lewy { padding: rozmiar rozmiar rozmiar rozmiar }
Za rozmiar należy podać konkretną wartość w jednostkach długości np. pixelach.
CSS3: Obramowanie
1. Styl - selektor { border-style: styl }
Styl – najczęściej stosowane:
hidden - ukryte obramowanie
dashed - linia kreskowa
dotted - linia kropkowa
solid - linia ciągła
inset - "ramka"
outset - "przycisk
2. Grubość obramowania - selektor { border: rozmiar }
Za rozmiar należy podać konkretną wartość w jednostkach długości np. pixelach.
3. Szerokość obramowania - selektor { border-width: szerokość }
Szerokość - przykłady:
thin - cienkie obramowanie
medium - średnie obramowanie
thick - grube obramowanie
lub konkretną wartość w jednostkach długości
4. Kolor obramowania - selektor { border-color: kolor }
Za kolor podstawiamy kolor, np. w zapisie szesnastkowym lub po angielsku.