CSS3 kolory jednostki miar selektory budowa responsywnej strony html5 CSS3

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

Responsywne mobilne strony internetowe kurs bezpłatny

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

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: http://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

Budowa responsywnych i mobilnych stron internetowych

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