Bài giảng Lập trình Web GV. Trần Công Án

Bài giảng Lập trình Web: Chương 4 do GV. Trần Công Án biên soạn cung cấp cho người đọc các kiến thức: Giới thiệu cascading style sheet, các cách sử dụng CSS trong HTML,...Mời các bạn cùng tham khảo Bài giảng Lập trình Web: Chương 4 do GV. Trần Công Án biên soạn cung cấp cho người đọc các kiến thức: Giới thiệu cascading style sheet, các cách sử dụng CSS trong HTML,...Mời các bạn cùng tham khảo

Trang 1

CT428 L™p Trình Web

Ch˜Ïng 4 - CSS và JavaScript

Gi£ng viên: Tr¶n Công Án (tcan@cit.ctu.edu.vn)

BÎ môn M§ng máy tính & Truy∑n thông

Khoa Công Nghª Thông Tin & Truy∑n Thông

§i hÂc C¶n ThÏ

2015

Trang 2

Cascading Style Sheet (CSS)

Trang 4

GiÓi thiªu Cascading Style Sheet (CSS)

Cascading Style Sheet (CSS) Là Gì?

I Là mÎt ngôn ng˙ dùng ∫ mô t£ hình th˘c , bË cˆc và cách trình

bày cıa thông tin trên trang web.

(vs HTML: dùng ∫ th∫ hiªn nÎi dung và cßu trúc trang web)

I Dùng ∫ mô t£ thông tin s≥ ˜Òc th∫ hiªn th∏ nào .

(vs HTML: dùng ∫ ‡nh nghæa thông tin gì s≥ ˜Òc th∫ hiªn)

I Cho phép tách rÌi ph¶n trình bày và ph¶n nÎi dung cıa mÎt trang

web, giúp viªc b£o trì, thay Íi hay c™p nh™t dπ dàng hÏn.

I CSS có th∫ ˜Òc nhúng bên trong trang web hay ‡nh nghæa trong

1 t™p tin riêng biªt (.css) ∫ s˚ dˆng chung cho nhi∑u trang web (HTML: Structure) + (CSS: Presentation) = Web page

Trang 5

I Cßu trúc cıa các trang web rõ ràng hÏn do tách rÌi gi˙a trình bày

và nÎi dung.

I Có th∫ th¯a k∏ style ã ‡nh nghæa cho nhi∑u trang web ho∞c

website ) ti∏t kiªm thÌi gian thi∏t k∏ website.

I Gi£m kích th˜Óc trang web ) t´ng tËc Î download trang web.

I B£o trì và thay Íi cßu trúc , bË cˆc và hình th˘c cıa trang web dπ dàng hÏn.

I Tuy nhiên, CSS có mÎt nh˜Òc i∫m là s¸ t˜Ïng thích cıa trình duyªt Ëi vÓi CSS: các trình duyªt có s¸ hÈ trÒ khác nhau Ëi vÓi CSS.

Trang 6

Cßu Trúc Cıa MÎt CSS

I MÎt CSS ch˘a mÎt t™p các lu™t CSS (CSS rules).

I MÎt lu™t CSS bao gÁm mÎt (ho∞c vài) bÎ chÂn (selector) và 1 t™p các khai báo v∑ các thuÎc tính (property) áp dˆng cho bÎ chÂn.

background-color: black;

}

Trang 7

Các cách s˚ dˆng CSS trong HTML

Nhúng CSS trong t™p tin HTML

Nhúng CSS Trong T™p Tin HTML (Internal)

I Cách thông dˆng nhßt là ∞t các CSS rules trong c∞p th¥ <style>

và ∞t trong ph¶n head cıa t™p tin HTML (internal style sheet).

Trang 8

Liên k∏t t™p tin CSS vào t™p tin HTML

Liên K∏t T™p Tin CSS vào T™p Tin HTML

I Các CSS rules ˜Òc ‡nh nghæa trong mÎt t™p tin vÓi ph¶n m rÎng css (external style sheet).

I Dùng th¥ <link> ∫ liên k∏t t™p tin CSS vào t™p tin HTML.

<li nk rel= "stylesheet" type= "text/css" href= "filename" /

I Th¥ <link> ˜Òc ∞t trong ph¶n head cıa t™p tin HTML.

Trang 9

Th˘ t¸ ˜u tiên cıa các cách s˚ dˆng CSS

Th˘ T¸ ◊u Tiên Trong Viªc Áp Dˆng CSS

I N∏u trong t™p tin HTML có s˚ dˆng CSS theo nhi∑u cách, trong ó

có s¸ ˆng Î v∑ ‡nh d§ng , thì Î ˜u tiên ˜Òc áp dˆng nh˜ sau:

Trang 10

Selector (BÎ chÂn)

Các Lo§i Selector Trong CSS

1 HTML-element selector (hay gÂi t≠t là element selector)

Trang 11

HTML-element selector

HTML-Element Selector

I ChÂn tßt c£ các ph¶n t˚ (th¥) HTML trong trang web ˜Òc chø ‡nh bi

<html>

<head>

p {color: red; background-color: yellow} /*rule for <p> */ h1 {color: blue} /*rule for <h1> */

Trang 12

Class selector

Class Selector

<html>

<head>

.wrn {color: red;} /*rule for class wrn*/

.hlight {background-color: yellow;} /*rule for class hlight*/

</style>

</head>

<body>

<h2 class= "wrn" > Heading 2 (warning) </h2>

<p class= "wrn hlight" >A paragraph </p>

<h2> Heading 2 (normal) </h2>

</body>

</html>

Trang 13

ID selector

ID Selector

I ChÂn 1 ph¶n t˚ duy nhßt trong trang web có id chø ‡nh bi selector.

<head>

#header {background-color:green; width:100%; height:40px; position:absolute; left:0;

<div id= "header" > <h2> Title of the Webpage </h2>

</div>

<div id= "menu" > <p>HTML<br> CSS <br> JavaScript </p> </div>

Trang 14

ID selector

ID Selector

Trang 15

I [attribute]: chÂn tßt c£ các ph¶n t˚ có thuÎc tính attribute.

I [attribute = "avalue" ]: chÂn tßt c£ các ph¶n t˚ có thuÎc tính

I [attribute ⇠ = "avalue" ]: chÂn tßt c£ các ph¶n t˚ có thuÎc tính

I [attribute * "avalue" ]: giá tr‡ thuÎc tính có ch˘a avalue

I Có th∫ k/hÒp HTML-element selector vÓi attr selector nh˜ sau:

I HTML-tag [attribute-selector ]: chÂn tßt c£ các ph¶n t˚ là

HTML-tag có thuÎc tính ˜Òc chø ‡nh bi attribute-selector.

Trang 16

[ href ]{color:blue; font-size:16px;}

[ href * "xxx" ]{color:red; font-size:12px;}

input[ type= "text" ]{background-color:green;}

</style>

</head>

<body>

</body>

</html>

Trang 17

Các lo§i selector ∞c biªt

Descendent Selector

I Cú pháp: dùng kho£ng tr≠ng ances-selector desc-selector { .}

I Ho§t Îng: chÂn tßt c£ các thành ph¶n desc-selector là “con cháu” (descendant) cıa ances-selector

</body>

</html> Chú ˛: dùng k˛ hiªu > ∫ chÂn con tr¸c ti∏p.

Trang 18

HTML-Element + Class Selector

I Cú pháp: HTML-tag className { .}

I Ho§t Îng: chÂn tßt c£ các thành ph¶n HTML-tag có thuÎc tính class có giá tr‡ là className

<head>

li.special {color: red;}

.special {font-style: italic;}

</style>

</head>

<body>

<ul>

<li class= "special" > Special Beer </li></ul>

<p class= "special" > Special but not special </p>

</body>

Trang 19

K∏t HÒp Nhi∑u Lo§i Selector

I Các lo§i selector trên có th∫ lÁng nhau nhi∑u cßp.

Trang 20

I Các pseudo-classes/elements b≠t ¶u b¨ng dßu :

I Cú pháp: selector :pseudo-class ho∞c selector :pseudo-element

Trang 21

<a href= "http://www.google.com" > Google </a><br>

<a href= "http://gmail.com" > Gmail </a>

</body>

</html>

Trang 22

Pseudo-Classes/Elements – Ví Dˆ 2

<body>

<ol><li> Three </li>

</body>

li:first-child {font-style: italic;}

</style>

:first-child {font-style: italic;}

</style>

Trang 23

Nhóm Các Selector (Grouping Selector)

I Các selector có chung rules có th∫

˜Òc nhóm l§i vÓi nhau b¨ng cách

Trang 24

I Thông th˜Ìng, selector càng dài thì càng ∞c tr˜ng.

I N∏u các các rules có cùng m˘c Î ∞c tr˜ng, nh˙ng rules khai báo

cuËi cùng s≥ ˜Òc áp dˆng.

Trang 25

Gán Giá Tr‡ Cho ThuÎc Tính

I MÈi thuÎc tính có th∫ ˜Òc gán mÎt ho∞c nhi∑u giá tr‡ ˜Òc ng´n cách nhau b¨ng dßu ph©y.

I Ví dˆ:

color: blue;

background-color: red;

font: italic 12px sans-serif;

font-family: Arial, sans-serif;

I MÎt sË giá tr‡ ˜Òc /nghæa sÆn ( ˜Òc /nghæa nh˜ mÎt keyword):

Trang 26

Color

I ThuÎc tính color dùng ∫ chø ‡nh màu s≠c cıa text

I Giá tr‡ cho thuÎc tính color ( color value ) có th∫ ˜Òc chø ‡nh b¨ng:

I ThuÎc tính này có tính th¯a k∏ nh˜ng có th∫ b‡ phı chÁng

(overwridden) bi các rules ∞c tr˜ng hÏn (more specific).

Trang 27

Background

Background (N∑n)

I Các thuÎc tính th˜Ìng s˚ dˆng ∫ chø ‡nh hiªu ˘ng cho n∑n

(background effect) cıa mÎt thành ph¶n.

I background-color: <color value> : chø ‡nh màu n∑n.

I background-image:url(<image url>) : chø ‡nh hình n∑n.

I background-repeat: repeat | repeat-x | repeat-y | no-repeat |

inherit : thi∏t ∞t s¸ l∞p l§i cıa hình n∑n.

I background-attachment: scroll | fixed : thi∏t ∞t hành vi cıa hình n∑n khi cuÎn trang.

I background-position: <position value> | <%-x>% <%-y>% |

<xpos ypos> : qui ‡nh v‡ trí ∞t hình n∑n.

I Shorthand: background: blue url(’img.png’) no-repeat right top;

Trang 28

Text

Các thuÎc tính cho phép ‡nh d§ng mÎt o§n v´n b£n:

I color:<color value> : chø ‡nh màu ch˙.

I text-align: center | right | justify : canh l∑ ch˙.

I text-decoration: none | overline | line-through | underline : chø

Trang 29

I word-spacing: normal | <length> : kho£ng cách gi˙a 2 t¯.

I line-height: normal | <number> | <length> | <percentage>% : kho£ng cách gi˙a 2 dòng trong o§n v´n b£n.

Trang 30

Font

I font-family: <list-of-font> : chø ‡nh ki∫u ch˙.

New” | “Lucida Console” |

I font-style: normal | italic : ‡nh d§ng nghiêng/bình th˜Ìng.

I font-size: <length> | <percent-parent> | smaller | larger |

I font-weight: normal | bold | bolder | lighter : Î ™m cıa ch˙.

I font-variant: normal | small-caps : hi∫n th‡ b/th˜Ìng hay

Small-Caps.

Trang 31

I list-style-position: outside | inside : chø ‡nh marker ˜Òc xem nh˜ n¨m ngoài nÎi dung cıa list hay là 1 ph¶n cıa nÎi dung.

Trang 32

Table

I border-spacing: <length> : kho£ng cách gi˙a các ô.

I border-collapse: collapse | separate : chia s¥ border hay riêng.

I caption-side: top | bottom : v‡ trí tiêu ∑.

I empty-cell: show | hide : hi∫n th‡ hay dßu border, n∑n cıa ô trËng.

I table-layout: auto | fixed : cách trình bày mÎt table.

I Các ‡nh d§ng nh˜ color, background-color, font, cÙng

có th∫ ˜Òc s˚ dˆng.

I Ngoài ra, các ‡nh d§ng khác nh˜ border, padding,, s≥ ˜Òc giÓi thiªu sau trong ph¶n trình bày bË cˆc.

Trang 33

BË cˆc (Layout)

BË Cˆc Và Trình Bày Trang Web (Layout)

1 Block element (ph¶n t˚ khËi) và inline element (ph¶n t˚ trong

Trang 34

) Các ph¶n t˚ khËi không ˜Òc lÁng vào nhau.

Trang 35

<p> Text and image <img src= "figures/birds.jpg" width= "100" /

and a button <input type= "button" value= "Click me!" >

and a link to <a href= "list.html" >

an example </a>

and a <h3> heading </h3>

and another text

and another <p> paragraph </p>

and text after paragraph.

<p>

</body>

</html>

Trang 36

BË cˆc (Layout)

Nhóm các ph¶n t˚ (Grouping elements)

Nhóm Các Ph¶n T˚ (Grouping Elements)

I Nhóm các ph¶n t˚ cho phép ‡nh d§ng nhi∑u ph¶n t˚ cùng lúc .

I Ph¶n t˚ thùng ch˘a (container element) dùng ∫ nhóm các ph¶n t˚:

I th¥ <span> : t§o mÎt ph¶n t˚ thùng ch˘a inline

I th¥ <div> : t§o mÎt ph¶n t˚ thùng ch˘a block

I Cách hi∫n th‡ các ph¶n t˚ có th∫ thay Íi b¨ng CSS.

<span> The first span </span>

<span> The second span </span>

<hr>

<div> The first div </div>

<div> The second div </div>

Trang 38

<div style= "height:10px; overflow:hidden;

background-color:yellow;" > Hello </div><br>

<div style= "width:40px; height:40px;

background-color: yellow; overflow:auto;" >

Hello World </div><br>

<div style= "width:35px;

Trang 39

BË cˆc (Layout)

Display (Ch∏ Î hi∫n th‡/trình bày)

I ThuÎc tính display dùng ∫ chø ‡nh mÎt ph¶n t˚ s≥ ˜Òc hi∫n th‡ nh˜ th∏ nào (block hay inline)

I Cú pháp: display: inline | block | list-item | none |

<span id= "s1" > Element 1 </span>

Element'2'

#s1, #s2, #s3 {display: inline;}

Element'1' Element'2' Element'3'

#s1, #s2, #s3 {display: block;}

Element'1' Element'3'

#s1, #s3 {display: block;}

#s2 {display: none;}

Trang 40

BË cˆc (Layout)

Visibility ( Î nhìn thßy)

Visibility (S¸ Nhìn Thßy)

I MÎt sË thuÎc tính dùng ∫ thi∏t ∞t Î nhìn thßy cıa mÎt ph¶n t˚:

I visibility: visible | hidden : s¸ nhìn thßy.

I opacity: <value [0.0, 1.0]> : Î nhìn thßy

(0.0: trong suËt, 1.0: bình th˜Ìng).

#s1 {opacity: 1;}

#s1 {opacity: 0.5;}

#s1 {opacity: 0.25;}

Trang 41

BË cˆc (Layout)

Float (S¸ nÍi lên))

Float (S¸ NÍi Lên)

I Float trong CSS cho phép mÎt ph¶n t˚ nÍi lên và trôi (di chuy∫n)

v∑ bên trái ho∞c ph£i cıa ph¶n t˚ ch˘a nó (containing element).

I Các ph¶n t˚ bên d˜Ói ph¶n t˚ nÍi lên (floating element) s≥ di

chuy∫n lên và bao bÂc xung quanh (wrap) ph¶n t˚ nÍi lên.

I MÎt sË thuÎc tính dùng ∫ thi∏t ∞t s¸ nÍi lên cıa các ph¶n t˚:

I float: none | left | right : chø ‡nh s¸ nÍi lên cıa mÎt ph¶n t˚.

I clear: none | left | right | both : chø ‡nh s¸ di chuy∫n cıa các ph¶n t˚ phía d˜Ói ph¶n t˚ floating.

Trang 42

BË cˆc (Layout)

Float (S¸ nÍi lên))

Floating – Ví Dˆ

float: right; float: left;

clear: right;

clear: left;

Trang 43

I ThuÎc tính position dùng ∫ chø ‡nh sÏ Á ‡nh v‡ (positioning schema) cho mÎt ph¶n t˚:

I posotion: static | relative | absolute | fixed

I ThuÎc tính z-order ˜Òc dùng ∫ chø ‡nh th˘ t¸ x∏p chÁng

(stack order) các ph¶n t˚ khi chúng chÁng lên nhau (overlapping) Ph¶n t˚ có giá tr‡ z-order cao hÏn s≥ ˜Òc x∏p trên

Trang 44

right, bottom, left

I relative :

làm Î dÌi (offset) cho v‡ trí cıa ph¶n t˚ so vÓi v‡ trí m∞c nhiên

Trang 45

BË cˆc (Layout)

Position (V‡ trí)

I absolute :

static

ph¶n t˚ <html>

I fixed :

) ph¶n t˚ s≥ cË ‡nh t§i mÎt v‡ trí trên màn hình (không thay Íi k∫ c£ khi nÎi dung trang web b‡ cuÎn lên/xuËng).

Trang 46

[CT428] Ch˜Ïng 4 CSS và JavaScript

Box model

Box Model (Mô Hình Khung)

I MÈi ph¶n t˚ HTML có th∫ ˜Òc coi là mÎt khung

I Trong CSS, mô hình khung là mÎt khái niªm c´n b£n trong viªc thi∏t

k∏ và bË trí giao diªn.

I Trong mô hình khung CSS,

mÎt khung bao bÂc các ph¶n

Trang 47

I margin: <top [<right> [<bottom> [<left>]]]>

I margin-top/right/bottom/left: <value> | auto

I N∏u giá tr‡ margin là auto và khung có kích th˜Óc cË ‡nh, margin s≥ ˜Òc ∞t lÓn nhßt có th∫.

Trang 48

Box model

Border ( ˜Ìng Vi∑n)

I N¨m gi˙a padding và nÎi dung; có th∫ có màu, ki∫u và Î dày.

I Th¯a k∏ màu thi∏t ∞t bi thuÎc tính color cıa khung ch˘a.

I Thi∏t ∞t: border: <thickness> <style> <color>

ridge.

I Có th∫ ‡nh d§ng cho t¯ng t/tính ho∞c t¯ng c§nh riêng biªt:

I border-width: <width> | <top> <right> <bottom> <left>

I border-style: <style-value>

I border-color: <color> | <top> <right> <bottom> <left>

Trang 50

Box model

Padding (Vùng ªm)

I Là vùng gi˙a nÎi dung và border cıa khung.

I B‡ £nh h˜ng bi màu n∑n cıa khung.

I Thi∏t ∞t:

I padding: <size> | <top> <right> <bottom> <left>

I padding-top/right/bottom/left: <size>

Trang 51

Box model

Padding (Vùng ªm)

Bài T™p - Box Model

Thi∏t k∏ trang web có bË cˆc và

nÎi dung t˜Ïng t¸ nh˜ hình bên:

Trang 52

I important : thuÎc tính này dùng ∫ xác ‡nh mÎt CSS rule là quan trÂng và s≥ ˜Òc ˜u tiên s˚ dˆng khi có nhi∑u rule c§nh tranh

nhau M˘c Î ˜u tiên cıa thuÎc tính này chø thßp hÏn inline CSS

Định dạng
Số trang	55
Dung lượng	1,98 MB