Kolor tekstu

Karta pracy 2018/2019

Adres:
http://plotkarka.eu/KP/css3-color.html
Autor:
Radosław Kowaluk

Kolor tekstu, wartość color, modele barw

Czynności wstępne

Utwórz plik css3-color.html z podstawową strukturą strony WWW w standardzie HTML5.

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <meta charset="utf-8"/>
 </head>
 <body>

 </body>
</html>

Styl CSS strony1

W elemencie head dodaj kod:

  <title>Kolor tekstu, wartość color</title>
  <meta charset="utf-8"/>
  <style>

  </style>
 </head>

Selektor elementu2

W elemencie style dodaj kod:

  <style>
body {

}
  </style>

Nazwy kolorów - podstawowe4

Kolor tekstu3 (deklaracja CSS)3.1

W elemencie style dodaj kod.

body {
color: olive;
}

W elemencie body dodaj kod.

<body>
Domyślny kolor tekstu strony.
</body>

Zapisz zmiany i odśwież podgląd.

Model RGB i RGBA5

Wartość koloru w postaci: #rrggbb6

W elemencie style dodaj kod.

h1 {
color: #ff0000;
}

W elemencie body dodaj kod.

<h1>Kolor rgb w #rrggbb</h1>

Zapisz zmiany i odśwież podgląd.

Wartość koloru w postaci rgb(R,G,B)7

W elemencie style dodaj kod.

h2 {
color: rgb(0,255,0);
}

W elemencie body dodaj kod.

<h2>Kolor rgb w rgb(r,g,b)</h2>

Zapisz zmiany i odśwież podgląd.

Wartość koloru w postaci rgb(R,G,B,A)8

W elemencie style dodaj kod.

h3 {
color: rgb(0,255,0,0.5);
}

W elemencie body dodaj kod.

<h3>Kolor rgb w postaci rgba(r,g,b,a)</h3>

Zapisz zmiany i odśwież podgląd.

Sprawdzanie poprawność reguł CSS

W przeglądarce internetowej wpisz adres jigsaw.w3.org/css-validator

Wybierz zakładkę poprzez załadowanie pliku

Za pomocą przycisku Przeglądaj... otwórz plik css3-color.htm

Naciśnij przycisk Sprawdź

  1. Element style - definiuje styl CSS strony. Atrybut type o wartości "text/css" można w HTML5 pominąć
  2. Selektor typu - nazwa elementu.
  3. Reguła {color:} - definiuje kolor tekstu. Wartością jest nazwa lub kod koloru. Definicja stylu w standardzie CSS3 {color:}
  4. Nazwy podstawowe kolorów: aqua (cyjan), black (czarny), blue (niebieski), fuchsia (fuksja), green (zielony), grey (szary), lime (limonka), maroon (wiśniowy), navy (granatowy), olive (oliwkowy), purple (fioletowy), red (czerwony), silver (srebrny), teal (morski), white (biały), yellow (żółty).
  5. Model RGB i RGBA - jedne z modeli przestrzeni barw. Ich nazwa powstała ze złożenia pierwszych liter angielskich nazw barw: R – red (czerwonej), G – green (zielonej), B – blue (niebieskiej) i A - alfa (kanał przezroczystości).
  6. Zapis szesnastkowy #rrggbb - jeden ze sposobów zapisu koloru w modelu RGB. Liczby szesnastkowe rr, gg, bb odpowiadają za składowe barw modelu RGB.
  7. Funkcja rgb(r,g,b) - jeden ze sposobów zapisu koloru w modelu RGB. Liczby r, g, b odpowiadają za składowe barw modelu RGB.
  8. Funkcja rgba(r,g,b,a) - jeden ze sposobów zapisu koloru w modelu RGBA. Liczby r, g, b, a odpowiadają za składowe barw modelu RGBA.

Model HSL i HSLA1

Wartość koloru w postaci hsl(H,S,L)

W elemencie style dodaj kod.

h4 {
color: hsl(60,60%,60%);
}

W elemencie body dodaj kod.

<h4>Kolor hsl w postaci hsl(H,S,L)</h4>

Zapisz zmiany i odśwież podgląd.

Wartość koloru w postaci hsla(H,S,L,A)

W elemencie style dodaj kod.

h5 {
color: hsla(60,60%,60%,0.5);
}

W elemencie body dodaj kod.

<h5>Kolor hsl w postaci hsla(H,S,L,A)</h5>

Zapisz zmiany i odśwież podgląd.

Nazwy kolorów - rozszerzone

Wartość koloru w postaci nazwy

W elemencie style dodaj kod.

h6 {
color: coral;
}

W elemencie body dodaj kod.

<h6>Kolor w postaci nazwy</h6>

Zapisz zmiany i odśwież podgląd.

Przezroczystość elementu

przezroczystość elementu2

W elemencie style dodaj kod.

button {
opacity: 0.5;
}

W elemencie body dodaj dodaj kod.

<button>TEST</button>

Zapisz zmiany i odśwież podgląd.

Sprawdzenie poprawności

Sprawdź poprawność reguł CSS i kodu HTML za pomocą odpowiednich walidatorów.

Wgrywanie plików na serwer (opcjonalnie)

Umieść plik css3-color.html na serwerze.

Zadanie

Zastosuj poznane wiadomości w swoim projekcie.

  1. Model HSL i HSLA - jedne z modeli przestrzeni barw. Ich nazwa powstała ze złożenia pierwszych liter angielskich nazw: H – hue (odcień, barwa), S – saturation (nasycenie), L – lightness (jaskrawość) i A - alfa (kanał przezroczystości).
  2. Funkcja hsl(h,s,l) - jeden ze sposobów zapisu koloru w modelu HSL. Liczby h, s, l odpowiadają za składowe barw modelu HSL.
  3. Funkcja hsla(h,s,l,a) - jeden ze sposobów zapisu koloru w modelu HSLA. Liczby h, s, l, a odpowiadają za składowe barw modelu HSLA.
  4. Nazwy kolorów (rozszerzone) - 256 nazw kolorów
  5. Reguła {opacity:} - definiuje przezroczystość elementu. Definicja stylu w standardzie CSS3 {opacity:}. Wartością jest liczba od 0 do 1. Styl nie jest w standardzie CSS 2.1.