Kolor tekstu

Karta pracy 2016/2017

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

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 RGBA

Wartość koloru w postaci: #rrggbb

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)

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)

W elemencie style dodaj kod.

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

W elemencie body dodaj kod.

<h3>Kolor rgb w postaci rgb(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:}

Model HSL

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 hsl(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ść elementu1

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.

Wgrywanie plików na serwer

Umieść plik css3-color.html na serwerze po sprawdzeniu poprawności.

Sprawdzenie poprawności

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

Zadanie

Zastosuj poznane wiadomości w pliku index.html .


  1. Model HSL
  2. Nazwy kolorów
  3. 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.