Szkolenia informatyczne: biuro, technologie internetowe, egzaminy technik

CENA - OFERTA: Jesteś zainteresowany/na kursem – zapraszam do kontaktu ze mną, szczegóły: www.poswojsku.pl .

kurs tworzenie witryn www
szkolenie technik informatyk programista inf.03 ee.09 inf.04 egzamin przygotowanie

 

CSS3 kolory jednostki miar selektory budowa responsywnej strony html5 CSS3

flag language

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.

 

Zobacz w menu podobne artykuły do: CSS3 kolory jednostki miar selektory budowa responsywnej strony html5 CSS3

Polski

Budowa responsywnych i mobilnych stron internetowych

bezpłatny kurs internetowy szkolenia, filmy: kliknij w temat, którego chcesz się nauczyć

szkolenia bezpłatne kolejne lekcje
kursy, porady, artykuły znajdziesz w Menu Tematycznym