Chapter 2 introduction to css cont

Trang 2

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

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

Trang 3

Lập Trình Web

3

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.

Trang 4

n Cannot be scaled to client display

n Should only be used when exact measurements of

destination medium are known

Absolute units

Trang 5

5

The absolute

length units are

fixed and a length

Trang 6

6

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

Relative units

Trang 7

7

Relative Lengths

Relative length units specify a length relative to

another length property

Trang 8

Trang 9

Trang 10

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:

p {text-indent: 24pt;}

Trang 11

11

Trang 12

n Use the text-align property to set horizontal

alignment for the lines of text in an element

p {text-align: justify}

Trang 13

13

Trang 14

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;}

Trang 15

15

Trang 16

16

Trang 17

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

Trang 18

18

Trang 19

19

Trang 20

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;”>

Trang 21

21

Trang 22

n To adjust kerning, the printer’s term for

adjusting the white space between letters, use the letter spacing property

n The following rule sets the letter spacing to 4

points

h1 {letter-spacing: 4pt;}

Trang 23

23

Trang 24

n The word-spacing property lets you adjust the

white space between words in the text

n The following code sets the word spacing to 2

em

h1 {word-spacing: 2em;}

Trang 25

25

Trang 26

Trang 27

in a way that allows

the layout to adjust

Trang 28

28

What is RWD?

Trang 29

29

What is RWD?

Trang 30

30

What is RWD?

Trang 31

31

What is RWD?

If you have a laptop, and a smart phone

and a tablet you can see what I’m talking

about, by going here:

http://achv.in/rwdrob

http://mattkersley.com/responsive/?{website_url}

Trang 32

32

Simon Collison

Trang 33

33

Food Sense

Trang 34

Trang 35

35

FlexSlider

Trang 36

Trang 37

Trang 38

Trang 39

@media screen and (min-width: 480px) {

.content { float: left; }

.social_icons { display: none }

// and so on

}

Trang 40

40

Food Sense

Trang 41

41

CSS3 & Media Queries

By restricting CSS rules to a certain width

of the device displaying a web page, one

can tailor the page's representation to

devices with varying screen resolution

(view port).

Trang 42

42

• A <meta> viewport element gives the browser instructions

on how to control the page's dimensions and scaling.

• The width=device-width part sets the width of the page to

follow the screen-width of the device (which will vary

depending on the device).

• The initial-scale=1.0 part sets the initial zoom level when

the page is first loaded by the browser.

Meta viewport

Trang 43

43

Meta viewport

Trang 44

Trang 45

Trang 46

46

CSS frameworks

Trang 47

47

What is CSS frameworks

• A CSS framework is a library allowing for

easier, more standards-compliant web design

using the Cascading Style Sheets language

Most of these frameworks contain at least a grid.

• CSS frameworks are tools used by UI developers

to make their job easier.

Trang 48

Trang 49

49

Tài Liệu Tham Khảo

Andrew M Rudoff, Addison Wesley, 2003

Tiêu đề	Introduction to css
Tác giả	Nguyễn Hữu Hiếu
Trường học	Trường Đại Học Bách Khoa TP.HCM
Chuyên ngành	Lập Trình Web
Thể loại	Bài giảng
Năm xuất bản	2017
Thành phố	TP.HCM

Định dạng
Số trang	49
Dung lượng	8,78 MB