Szkolenia informatyczne: biuro, technologie internetowe, egzaminy technik
CENA - OFERTA: Jesteś zainteresowany/na kursem – zapraszam do kontaktu ze mną, szczegóły: www.poswojsku.pl .
CSS3 kolory jednostki miar selektory budowa responsywnej strony html5 CSS3
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.