tìm hiểu về css căn bản

Không giôếng các đôếi tọ ượng Global khác, Math không là m t constructor.

Ch ươ ng I Tìm hi u vềề HTML căn b n ể ả 1

1) Gi i thi u vềề HTMLớ ệ 1

2) HTML là gì? 1

3) Các phầền t trong HTMLử 3

4) Các thu c tnh trong HTMLộ 4

5) Đ nh d ng HTMLị ạ 4

Ch ươ ng II Tìm hi u vềề CSS căn b n ể ả 6

1) Gi i thi u CSSớ ệ 6

2) CSS là gì? 6

3) Cú pháp CSS 6

a) Multiple Style Rule trong CSS 7

4) Include CSS vào HTML 7

Ch ươ ng III Tìm hi u vềề JavaScript căn b n ể ả 9

1) JavaScript gi i thi uớ ệ 9

2) JavaScript là gì ? 9

3) JavaScript cú pháp 9

4) JavaScript – v trí trong fle HTMLị 9

5) JavaScript – Math 10

6) JavaScript -HTML DOM 11

7) Jquery c b n trong JavaScriptơ ả 11

Ch ươ ng I Tìm hi u vềề HTML căn b n ể ả

1) Gi i thi u vềề HTML ớ ệ

HTML là viềết tăết c aủ yper ext arkup anguage, là ngôn ng đH T M L ữ ược s d ng r ng rãi nhầếtử ụ ộ trền thềế gi i đ phát tri n các trang Web.ớ ể ể

HTML bầy gi không còn xa l v i bầết kỳ sinh viền ngành công ngh thông ờ ạ ớ ệ tin V i HTML,ớ

b n có th t o các trang Web t đ n gi n t i ph c t p, t các trang hi n th thông tin sinhạ ể ạ ừ ơ ả ớ ứ ạ ừ ể ị viền đ n gi n cho đềến các trang bao gôềm nhiềều nghi p v ph c t p Đôếi v i sinh viền, dùơ ả ệ ụ ứ ạ ớ cho sau này đ nh hị ướng là Back-End hay Front-End thì HTML là ngôn ng web b n băết bu cữ ạ ộ

ph i h c.ả ọ

2) HTML là gì?

HTML là ch viềết tăết c aữ ủ Hypertext arkup anguage, là ngôn ng đM L ữ ược s d ng r ng rãiử ụ ộ nhầết đ viềết các trang Web.ể

 Hypertext là cách mà các trang Web (các tài li u HTML) đệ ược kềết nôếi v i nhau Vàớ

nh thềế, đư ường link có trền trang Web được g i là Hypertext.ọ

 Nh tền g i đã g i ý,ư ọ ợ HTML là ngôn ng đánh dầếu băềng th (ữ ẻ Markup Language),

nghĩa là b n s d ng HTML đ đánh dầếu m t tài li u text băềng cácạ ử ụ ể ộ ệ th (tag) ẻ đ nói cho trìnhể duy t Web cách đ cầếu trúc nó đ hi n th ra màn hình.ệ ể ể ể ị

a) Các th HTML thẻ ường dùng c b nơ ả

Bầết kỳ tài li u nào cũng đềều băết đầều v i m t đầều đềề B n có th s d ng các kích c ệ ớ ộ ạ ể ử ụ ỡ khác nhau cho đầều đềề c a b n HTML cũng có 6 c khác nhau cho đầều đềề, s d ng ủ ạ ỡ ử ụ các th c b n làẻ ơ ả <h1>, <h2>, <h3>, <h4>, <h5>, và <h6> Trong khi hi n th bầết c ể ị ứ

m t đầều đềề nào, các trình duy t seẽ thềm (đ cách) m t dòng trộ ệ ể ộ ước và m t dòng sau ộ đầều đềề đó

Th <div> đẻ ược s d ng đ đ nh nghĩa m t b ph n hay m t vùng trong văn b n HTML.ử ụ ể ị ộ ộ ậ ộ ả

Th <div> nhóm các thành phầền n i dung thành m t khôếi đ đ nh d ng băềng CSS ho c đ ẻ ộ ộ ể ị ạ ặ ể

th c hi n m t sôế tác v nhầết đ nh v i JavaScript.ự ệ ộ ụ ị ớ

Thẻ <a> dùng đ t o m t liền kềết đềến m t tài li u nào đó.ể ạ ộ ộ ệ

Ví d : ụ

- Đo n mã bền dạ ưới có hai liền kềết:

o M t liền kềết đềến trang ộ google

o M t liền kềết đềến trang ộ youtube

M t th <img> seẽ tộ ẻ ương đương v i m t tầếm hình.ớ ộ

- Th <img> không có th đóng.ẻ ẻ

- Đ s d ng th <img>, ta dùng cú pháp nh sau:ể ử ụ ẻ ư

Ta đượ ảc nh nh hình dư ưới

3) Các phầền t trong HTML ử

M t yềếu tôế HTML độ ược xác đ nh băềng m tị ộ th m ẻ ở Nềếu phầền t này bao hàm n i dungử ộ khác, nó kềết thúc v i m tớ ộ th đóng ẻ

Ví d , th <p> là th m c a đo n văn và th </p> là th đóng c a đo n văn đó,ụ ẻ ẻ ở ủ ạ ẻ ẻ ủ ạ

ư <p>Đây là m t đo n văn</p> ộ ạ ộ ử ạ

4) Các thu c tnh trong HTML ộ

M t thu c tnh độ ộ ược s d ng đ xác đ nh đ c tr ng c a m t phầền t HTML và đử ụ ể ị ặ ư ủ ộ ử ược đ tặ trong m t th m c a phầền t đó Tầết c các thu c tnh độ ẻ ở ủ ử ả ộ ược chia thành 2 phầền: Tên và

m tộ Giá trị

 Tên là tền c a thu c tnh Ví d , phầền t đo n văn <p> trong ví d dủ ộ ụ ử ạ ụ ưới mang m tộ thu c tnh tền có tền làộ align, và b n có th s d ng thu c tnh này đ căn ch nh c a đo nạ ể ử ụ ộ ể ỉ ủ ạ văn trong m t trang.ộ

 Giá trị là nh ng gì mà b n muôến gán thu c tnh và đữ ạ ộ ược đ t trong các trích dầẽn Víặ

d dụ ưới ch 3 giá tr có th c a thu c tnhỉ ị ể ủ ộ align lef center, và : , right

Các thu c tnh côết lõi trong HTMLộ

Có 4 thu c tnh côết lõi có th độ ể ược s d ng trong phầền l n các phầền t HTML (m c dùử ụ ớ ử ặ không ph i toàn b ) là:ả ộ

 Thu c tnh id ộ

 Thu c tnh ttle ộ

 Thu c tnh class ộ

 Thu c tnh style ộ

5) Đ nh d ng HTML ị ạ

Bầết c n i dung gì mà xuầết hi n trong phầền tứ ộ ệ ử <b> </b> đềều được in đ mậ

Bầết c n i dung gì xuầết hi n trong phầền t c in nghiềng:

Sau đây là 1 sốố hình nh vềề code và web đã làm trong th c tềố t Web Tyche- ả ự ừ Demo:

Code:

Demo trền Web:

Ch ươ ng II Tìm hi u vềề CSS căn b n ể ả

1) Gi i thi u CSS ớ ệ

Khi b n truy c p vào m t trang web nào đó, b n đã t ng suy nghĩ răềng t i sao d li u cóạ ậ ộ ạ ừ ạ ữ ệ

th hi n th trền trang web đó, cách trình bày và hi n th chúng theo t ng khu v c khácể ể ị ể ị ừ ự nhau H c CSS seẽ giúp b n gi i thích điềều đó.ọ ạ ả

CSS được s d ng đ điềều khi n Style c a m t tài li u web Hay nói cách khác, CSS là m tử ụ ể ể ủ ộ ệ ộ ngôn ng StyleSheet đ miều t s th hi n c a m t tài li u HTML ho c XML CSS miều tữ ể ả ự ể ệ ủ ộ ệ ặ ả cách các phầền t ph i đử ả ược trình bày trền màn hình (screen), trền giầếy (khi chúng ta in)

ho c trền các thiềết b khácặ ị

2) CSS là gì?

CSS là viềết tăết c a Cascading Style Sheet, là m t Design Language đ n gi n đủ ộ ơ ả ược s d ngử ụ

đ làm đ n gi n hóa tiềến trình trình bày các trang web.ể ơ ả

Có th hi u đ n gi n là, CSS x lý phầền Look và Feel c a m t trang web S d ng CSS, b nể ể ơ ả ử ủ ộ ử ụ ạ

có th điềều khi n màu văn b n (text color), font style, kho ng cách gi a các đo n văn, kíchể ể ả ả ữ ạ

c các c t, hình nềền ho c màu nềền, ….ỡ ộ ặ

3) Cú pháp CSS

CSS đượ ạc t o thành t các Style Rule Các rule này đừ ược thông d ch b i trình duy t và sauị ở ệ

đó đ ược áp d ng t i các phầền t tụ ớ ử ương ng trong tài li u c a b n Style Rule bao gôềm baứ ệ ủ ạ phầền:

 Selector: (hi u là b ch n phâần t ) ể ộ ọ ử M t selector là m t th HTML mà t i đó m t b nộ ộ ẻ ạ ộ ạ

áp d ng m t style cho nó Đó có th là bầết kỳ m t th HTML nào, nh th div, th span, thụ ộ ể ộ ẻ ư ẻ ẻ ẻ

p, …

 Property: (thu c tnh) ộ Là property c a m t ki u thu c tnh c a th HTML Nói m tủ ộ ể ộ ủ ẻ ộ cách đ n gi n thì tầết c các thu c tnh trong HTML đơ ả ả ộ ược chuy n đ i thành các CSS property.ể ổ

Đó có th làể color border ,

 Value: Là các giá tr đị ược gán cho các property Ví d ,ụ color có th có các giá trể ị

là white #FFFFF

Đ ch n các phầền t v i m t class c th , b n viềết m t dầếu chầếm (.) trể ọ ử ớ ộ ụ ể ạ ộ ở ước tền class c aủ ử

Ví d dụ ưới đầy seẽ đ nh nghĩa Style Rule cho tầết c phầền t HTML v i class= "center":ị ả ử ớ

ID Selector s d ng thu c tnh id c a m t phầền t HTML đ ch n m t phầền t c th Trong m t ử ụ ộ ủ ộ ử ể ọ ộ ử ụ ể ộ webpage, môẽi phầền t nền có m t id duy nhầết, vì thềế ID Selector đử ộ ược s d ng đ l a ch n m t ử ụ ể ự ọ ộ phầền t duy nhầết.ử

a) Multiple Style Rule trong CSS

B n có th đ nh nghĩa nhiềều style rule cho cùng m t phầền t Tuy nhiền, thay vì viềết nhiềềuạ ể ị ộ ử Style Rule riềng bi t đ áp d ng cho ch m t phầền t , thì b n có th viềết g p nh sau:ệ ể ụ ỉ ộ ử ạ ể ộ ư

4) Include CSS vào HTML

Cách ph biềến nhầết đ include CSS vào HTML đó là nhúng fle CSS vào th link:ổ ể ẻ

Ngoài ra còn 1 sôế cách nh :

Inline CSS – S d ng thu c tnh styleử ụ ộ

trền, b n đã nhúng CSS vào trong HTML b i s d ng th style, và s d ng cách này thì

style rule seẽ là có săẽn (có săẽn t c là b n có th áp d ng cho phầền t nào cũng đứ ạ ể ụ ử ược) cho tầết

c các phầền t trong trang đó Tiềếp theo, mình trình bày cách nhúng CSS trong HTML b i sả ử ở ử

d ng thu c tnh style c a các th HTML Làm theo cách này thì style rule seẽ ch đụ ộ ủ ẻ ỉ ược áp

d ng cho phầền t đó Cú pháp chung nh sau:ụ ử ư

Sau đầy là 1 sôế hình nh vềề code và web đã làm trong th c tềế t Web Tyche-Demo:ả ự ừ

Ch ươ ng III Tìm hi u vềề JavaScript căn b n ể ả

1) JavaScript gi i thi u ớ ệ

JavaScript là m t ngôn ng chộ ữ ương trình thông d ch, nh Nó đị ẹ ược thiềết kềế đ t o các ng d ng ể ạ ứ ụ

m ng trung tầm Nó là ngôn ng tch h p v i Java, đạ ữ ợ ớ ược lầếy tền là JavaScript vì th i đó Java là m t ờ ộ

hi n tệ ượng, nh ng trền th c tềế JavaScript không đư ự ược phát tri n d a trền Java JavaScript rầết dềẽ ể ự dàng đ th c hi n b i vì nó để ự ệ ở ược tch h p v i HTML Đầy là ngôn ng chợ ớ ữ ương trình m và đa nềền ở tàng

Hãy nh nhé! JavaScript không hêầ liên quan gì t i Java ớ ớ

2) JavaScript là gì ?

JavaScript là m t ngôn ng l p trình c a HTML và WEB Nó là nh và độ ữ ậ ủ ẹ ược s d ng ph biềến nhầết ử ụ ổ

nh là m t phầền c a các trang web, mà s thi hành c a chúng cho phép Client-Side script tư ộ ủ ự ủ ương tác

v i ngớ ườ ử ụi s d ng và t o các trang web đ ng Nó là m t ngôn ng chạ ộ ộ ữ ương trình thông d ch v i các ị ớ

kh năng hả ướng đôếi tượng

3) JavaScript cú pháp

JavaScript có th để ược th c hi n b i s d ng các l nh JavaScript mà đự ệ ở ử ụ ệ ược đ t trong th ặ ẻ

HTML <script> </script> trong m t trang web.ộ

Th <script> báo cho chẻ ương trình trình duy t băết đầều phiền d ch tầết c văn b n gi a các th này ệ ị ả ả ở ữ ẻ

nh là m t script M t cú pháp đ n gi n c a JavaScript seẽ xuầết hi n nh sau:ư ộ ộ ơ ả ủ ệ ư

JavaScript script “Hello World “ đầều tiền c a ủ tôi :

4) JavaScript – v trí trong fle HTML ị

Có m t s linh đ ng trong vi c cung cầếp JavaScript code bầết c đầu trong m t tài li uộ ự ộ ệ ứ ộ ệ HTML Tuy nhiền, các cách đượ ưc u tiền nhầết đ bao gôềm JavaScript trong m t HTML fle là:ể ộ

 Script trong khu v c <head> </head>ự

 Script trong khu v c <body> </body>ự

 Script trong khu v c <body> </body> và <head> </head>.ự

 Script trong fle ngo i vi và sau đó bao gôềm trong khu v c <head> </head>ạ ự

5) JavaScript – Math

Đôếi tượ Math cung cầếp cho ta các thu c tnh và phng ộ ương th c cho các hăềng sôế và hàmứ toán h c Không giôếng các đôếi tọ ượng Global khác, Math không là m t constructor Tầết cộ ả thu c tnh và phộ ương th c c a Math là tnh (Static) và có th đứ ủ ể ược g i b i sọ ở ử

d ngụ Math nh là m t đôếi tư ộ ượng mà không ph i t o nó.ả ạ

Vì thềế,ta tham chiềếu hăềng sôế nh làpi ư Math.PI và ta g i hàmọ sin nh làư Math.sin(x), v i x làớ tham sôế c a phủ ương th c.ứ

Các thu c tnh c a Math ộ ủ

B ng dả ướ ệi li t kề các thu c tnh c a Math và miều t nó.ộ ủ ả

Thu c tnh ộ Miêu tả

E

LN2 Logarit t nhiền c a 2 , xầếp x 0,693.ự ủ ỉ

LN10 Logarit t nhiền c a 10 , xầếp x 2,302ự ủ ỉ

LOG2E Logarit c sôế 2 c a E , xầếp x 1,442ơ ủ ỉ

LOG10E Logarit c sôế 10 c a E , xầếp x 0,434ơ ủ ỉ

PI H sôế PI , xầếp x 3,1459ệ ỉ

SQRT2 Căn b c 2 c a 2, xầếp x 1,414ậ ủ ỉ

6) JavaScript -HTML DOM

Cách n i dung tài li u đ c truy c p và ch nh s a đ c g i là Document Object Model, ho c

Các Object đượ ổc t ch c theo cầếu trúc th b c Cầếu trúc th b c này áp d ng t i s t ch c c a các ứ ứ ậ ứ ậ ụ ớ ự ổ ứ ủ đôếi tượng trong m t trang Web.ộ

 Đôối t ượ ng Window − Cầếp đ cao nhầết trong cầếu trúc Nó là phầền t xa nhầết trongộ ử

th b c đôếi tứ ậ ượng

 Đôối t ượ ng Document − Môẽi tài li u HTML t i vào trong m t c a s tr thành m t đôếiệ ả ộ ử ổ ở ộ

tượng Document Đôếi tượng này ch a n i dung c a trang.ứ ộ ủ

 Đôối t ượ ng Form − M i th trong th <form> </form> thiềết l p đôếi tọ ứ ẻ ậ ượng Form

 Đôối t ượ ng Form control − Đôếi t ượng Form ch a tầết c phầền t đứ ả ử ược đ nh nghĩa choị đôếi tượng đó nh các trư ường văn b n, các nút, và các h p văn b n.ả ộ ả

Hình nh vềề ví d c b n c a DOMả ụ ơ ả ủ

7) Jquery c b n trong JavaScript ơ ả

jQuery là gì?

jQuery là m t th vi n độ ư ệ ược xầy d ng t Javascript nhăềm giúp l p trình viền xầy ự ừ ậ

d ng nh ng ch c năng có s d ng Javascript tr nền dềẽ dàng h n jQuery đự ữ ứ ử ụ ở ơ ược tch

h p nhiềều module khác nhau t moduleợ ừ hi u ng cho đềến module truy vầến selector.ệ ứ Các module chính c a jQuery bao gôềm:ủ

 Ajax - x lý Ajaxử

 Atributes - X lý các thu c tnh c a đôếi tử ộ ủ ượ HTMLng

 Effect - x lý hi u ngử ệ ứ

 Event - x lý s ki nử ự ệ

 Form - x lý s ki n liền quan t i formử ự ệ ớ

 DOM - x lý Data Object Modelử

 Selector - x lý luôềng lách gi a các đôếi tử ữ ượng HTML