1
Web Design
Web Design
HTML & CSS :
design and build websites
h t t p : / / w w w. h t m l a n d c s s b o o k . c o m
S
2
S
Web Design
COLOR
3
Foreground Color
color
The color property allows you to specify
the color of text inside an element. You can
specify any color in CSS in one of three
Web Design
ways:
RGB VALUES
HEX CODES
COLOR NAMES
S
4
Foreground Color
color
RGB VALUES
These express colors in terms of how much
red, green and blue are used to make it up.
Web Design
For example: rgb(100,100,90)
HEX CODES
These are six-digit codes that represent the
amount of red, green and blue in a color,
preceded by a pound or hash # sign. For
example: #ee3e80
S
5
Foreground Color
color
COLOR NAMES
There are 147 predefined color names that
are recognized by browsers. For example:
Web Design
DarkCyan
http://www.147colors.com
http://www.colorname.org
S
6
Background Color
background-color
CSS treats each HTML element as if it appears
in a box, and the background-color property
sets the color of the background for that box.
Web Design
You can specify your choice of background
color in the same three ways you can specify
foreground colors.
If you don’t specify a background color, then
the background is transparent.
S
7
CSS3: Opacity
opa c i t y, rg ba
CSS3 introduces the opacity property which
allows you to specify the opacity of an
element and any of its child elements. The
Web Design
value is a number between 0.0 and 1.0 (so a
value of 0.5 is 50% opacity and 0.15 is 15%
opacity).
S
8
CSS3: Opacity
opa c i t y, rg ba
The CSS3 rgba property allows you to specify
a color, just like you would with an RGB value,
but adds a fourth value to indicate opacity.
Web Design
This value is known as an alpha value and is a
number between 0.0 and 1.0(so a value of 0.5
is 50% opacity and 0.15 is 15% opacity). The
rgba value will only affect the element on
which it is applied( not child elements).
S
9
CSS3: HSL & HSLA
hsl, hsla
The hsl color property has been introduced in
CSS3 as an alternative way to specify colors.
The value of the property starts with the
Web Design
letters hsl, followed by individual values inside
parentheses for:
HUE
SATURATION
LIGHTNESS
ALPHA
S
10
CSS3: HSL & HSLA
hsl, hsla
Hue
This is often represented as a color circle
where the angle represents the color
Web Design
( between 0 and 360 degrees).
S
11
CSS3: HSL & HSLA
hsl, hsla
Saturation
This is the amount of gray in a color. It is
represented as a percentage. 100% is full
Web Design
saturation and 0% is a shade of gray.
S
12
CSS3: HSL & HSLA
hsl, hsla
Lightness
This is the amount of white(lightness) or
black(darkness) in a color. Lightness is
Web Design
represented as a percentage. 0% lightness
is black, 100% lightness is white, and 50%
lightness is normal.
S
13
CSS3: HSL & HSLA
hsl, hsla
Alpha
This is expressed as a number between 0
and 1.0. For example, 0.5 represents 50%
Web Design
transparency, and 0.75 represents 75%
transparency.
S
14
Example
This example shows a pH scale to
demonstrate the different ways that colors
can be specified using CSS (using color
Web Design
names, hex codes, RGB, and HSL).
S
15
Example
This example shows a pH scale to
demonstrate the different ways that colors
can be specified using CSS(using color
Web Design
names, hex codes, RGB, and HSL).
S
16
TASK
Please use table and css to design a palette
web page shown on the right, you can set
colors with RGB, HEX, Color Names or HSL.
Web Design
S
S
17
Web Design
18
Web Design
Thank You！
谢谢！
