Sử Dụng CSS Trong HTML | Lê Vũ Nguyên Dạy Học Lập Trình

Trang chủ » Dùng Css » Sử Dụng CSS Trong HTML | Lê Vũ Nguyên Dạy Học Lập Trình

Có thể bạn quan tâm

Nội dung bài viết
  • Giới thiệu nội dung bài viết
  • 1. Nhúng CSS vào HTML thông qua thẻ style
  • 2. Nhúng CSS vào HTML trong một hàng
  • 3. Nhúng CSS vào HTML qua file
  • 4. Comment chú thích trong CSS
  • 5. Demo Video
  • 6. Thực hành online và source code

Giới thiệu nội dung bài viết

Như những bài chia sẻ của anh về kiến thức lập trình web HTML ở phần trước, ngôn ngữ HTML được sử dụng để tạo nên các định dạng, các kiểu phần tử, nội dung trong trang web. Về các quy định cho cách hiển thị các phần tử này trong trang web thì lúc này đòi hỏi cần sử dụng đến ngôn ngữ CSS. Như vậy có thể nói rằng hai ngôn ngữ lập trình web CSS và ngôn ngữ lập trình web HTML luôn đi cùng nhau trong quá trình chúng ta làm trang web. Để tác động vào cách hiển thị của các phần tử HTML trong trang, chúng ta cần phải nhúng CSS vào HTML. Vậy có những cách nhúng nào? Bài viết hôm nay anh sẽ giới thiệu cho các bạn 3 cách để nhúng CSS vào HTML bao gồm sử dụng thẻ style, thông qua file riêng biệt, và cách nhúng CSS vào HTML trong một hàng. Bên cạnh đó anh sẽ chia sẻ thêm cách làm để các bạn có thể thêm comment chú thích trong lập trình web CSS. Hi vọng với những chia sẻ kèm theo các ví dụ minh hoạ cụ thể cho mỗi phần dưới đây, các bạn có thể hiểu rõ và thực hiện được thao tác nhúng CSS vào HTML trong lập trình web.

1. Nhúng CSS vào HTML thông qua thẻ style

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html> <html> <head> <style type = "text/css" media = "all"> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>

css1

2. Nhúng CSS vào HTML trong một hàng

1 2 3 4 5 6 7 8 9 10 11 <!DOCTYPE html> <html> <head> </head> <body> <h1 style = "color:#36C;"> This is inline CSS </h1> </body> </html>

css2

3. Nhúng CSS vào HTML qua file

Giả sử chúng ta có một file css tên my.css như sau

1 2 3 4 5 6 7 h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; }

Ta sẽ nhúng file my.css này vào trang HTML thông qua thẻ link như sau

1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html> <html> <head> <link type = "text/css" href = "my.css" media = " all" /> </head> <body> <h1 style = "color:#36C;"> This is inline CSS </h1> </body> </html>
  • Ngoài cách dùng thẻ link chúng ta có thể sử dụng annotation @import như sau
1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html> <html> <head> @import "my.css"; </head> <body> <h1 style = "color:#36C;"> This is inline CSS </h1> </body> </html>

4. Comment chú thích trong CSS

Chúng ta dùng /* để ghi chú thích các dòng code CSS như sau.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html> <html> <head> <style> p { color: red; /* This is a single-line comment */ text-align: center; } /* This is a multi-line comment */ </style> </head> <body> <p>Hello World!</p> </body> </html>

5. Demo Video

Play

6. Thực hành online và source code

Sourcecode

Sourcecode

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Từ khóa » Dùng Css