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

<
  • DANE ADRESOWE

     

    w czym mogę pomóc?

    biuro(at)gddm.com.pl

    Zd Wola Paprocka 86

    znajdź mnie na Youtube

  • PROGRAMOWANIE

     

    JavaScript HTML CSS

    jQuery jQuery Mobile

    node.js React Angular

    ES6 babel rollup karma

  • GRAFIKA ANIMACJA

     

    grafika na strony www

    grafika reklamowa

    animacja 2D i 3D

    grafika 2D i 3 D

  • DORADZTWO

     

    doradztwo IT

    doradztwo biznesowe

    usługi IT

    analizy biznesowe i IT

  • SZKOLENIA

     

    technologie IT

    marketing

    zarządzanie

    projekty metodologia

>