Bài giảng Lập trình Web - Chapter 2: Introduction to CSS (Cont)

Chapter 2 (cont)

Introduction to CSS

Lectured by:

Nguyễn Hữu Hiếu

CSS Units

https://www.w3schools.com/cssref/css_units.asp

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

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

Lập Trình Web

3

Absolute units

n Specify a fixed value

P {margin: 1.25in;}

n Cannot be scaled to client display

n 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

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

Lập Trình Web

5

Relative units

n Enables scalable Web pages that adapt to

different display types and sizes

n Recommended method for Web page design

n 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

n 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

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

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

Lập Trình Web

8

CSS Text Spacing Properties

n text-indent

n text-align

n line-height

n vertical-align

n letter-spacing

n word-spacing

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

9

Specifying Text Indents

p {text-indent: 24pt;}

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

n 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

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

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

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

Lập Trình Web

13

Specifying Line Height

n CSS allows you to specify either a percentage

or absolute value for the line height, which is

more commonly called leading

n 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

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

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

Lập Trình Web

16

Specifying Vertical Alignment

n The vertical-align property lets you adjust the

vertical alignment of text within the line box

n Vertical-align works on inline elements only

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

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

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

Lập Trình Web

19

Specifying Vertical Alignment (continued)

n You can also use vertical alignment to align

text with graphics

n The following rule, added to the <img>

element with the style attribute, sets the

vertical alignment to top:

<img src=”image.gif”

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

Lập Trình Web

20

Bài giảng Lập trình Web - Chapter 2: Introduction to CSS (Cont) - Nguyễn Hữu Hiếu