Chapter 2 introduction to css cont

Chapter 2 (cont)
Introduction to CSS

Lectured by:

Nguyễn Hữu Hiếu


CSS Units

/>Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

Lập Trình Web
2


CSS Units
• CSS has several different units for expressing a length.
• Many CSS properties take "length" values, such
as width, margin, padding, font-size, etc.
• Length is a number followed by a length unit, such as
10px, 2em, etc.
• A whitespace cannot appear between the number and
the unit. However, if the value is 0, the unit can be
omitted.
• For some CSS properties, negative lengths are allowed.
• There are two types of length units: absolute and
relative.

Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

Lập Trình Web
3


Absolute units
n

Specify a fixed value
P {margin: 1.25in;}

n
n

Cannot be scaled to client display
Should only be used when exact measurements of
destination medium are known

Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

4

Lập Trình Web
4

Absolute units
The absolute
length units are
fixed and a length
expressed in any of
these will appear
as exactly that
size.

Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

Lập Trình Web
5


Relative units
n

n
n

n

Enables scalable Web pages that adapt to
different display types and sizes
Recommended method for Web page design
Relative measurement values such as em and px

are designed to let you build scalable Web pages
that adapt to different display types and sizes
The W3C recommends that you always use
relative values

Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

6

Lập Trình Web
6


Relative Lengths
Relative length units specify a length relative to
another length property

Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

Lập Trình Web
7


Using the CSS Text Spacing
Properties

Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

Lập Trình Web
8


CSS Text Spacing Properties
n
n
n
n
n
n

text-indent
text-align
line-height
vertical-align
letter-spacing
word-spacing

Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

9

Lập Trình Web

9


Specifying Text Indents
p {text-indent: 24pt;}
n

n

Use the text indent property to set the
amount of indentation for the first line of text
in an element, such as a paragraph
The following rule sets an indent of 24 points:

Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

10

Lập Trình Web
10


Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

11

Lập Trình Web
11


Specifying Text Alignment
p {text-align: justify}

n

Use the text-align property to set horizontal
alignment for the lines of text in an element

Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

12

Lập Trình Web
12


Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

13

Lập Trình Web
13

Specifying Line Height
n

n

CSS allows you to specify either a percentage
or absolute value for the line height, which is
more commonly called leading
The following rule sets the line height to 2
em:
p {line-height: 2 em;}

Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

14

Lập Trình Web
14


Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

15

Lập Trình Web
15


Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

16

Lập Trình Web
16


Specifying Vertical Alignment
The vertical-align property lets you adjust the
vertical alignment of text within the line box
n Vertical-align works on inline elements only
n

Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

17

Lập Trình Web
17

Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

18

Lập Trình Web
18


Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

19

Lập Trình Web
19


Specifying Vertical Alignment (continued)
n

n

You can also use vertical alignment to align
text with graphics
The following rule, added to the <img>
element with the style attribute, sets the
vertical alignment to top:

style=”vertical-align: text-top;”>

Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

20

Lập Trình Web
20


Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

21

Lập Trình Web
21


Specifying Letter Spacing
n

n

To adjust kerning, the printer’s term for

adjusting the white space between letters,
use the letter spacing property
The following rule sets the letter spacing to 4
points
h1 {letter-spacing: 4pt;}

Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

22

Lập Trình Web
22


Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

23

Lập Trình Web
23


Specifying Word Spacing
h1 {word-spacing: 2em;}

n

n

The word-spacing property lets you adjust the
white space between words in the text
The following code sets the word spacing to 2
em

Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

24

Lập Trình Web
24


Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2017

25

Lập Trình Web
25