Các cách nhúng CSS vào HTML
Sẽ có ba cách để đưa CSS vào HTML, mình sẽ giải quyết cái vấn đề này không quá 300 từ. Nhanh và gọn là nhẫn đạo của mình và mình là anonymous-4 :D.
NỘI DUNG BÀI VIẾT
Cách đưa CSS vào HTML
Tại sao phải đưa css vào HTML ?
Đưa vào thì mới dùng được thế thôi :v
1.Viết trực tiếp
Trước tiên thì chúng ta sẽ học vài thuộc tính CSS trước đã nhé.
color: Xác định màu sắc của văn bản
border: Đường viền của phần tử
margin: Căn lề cho phần tử
padding: Khoảng cách giữa nội dung và đường viền
Cú pháp: style = " thuộc-tính-1: giá trị;thuộc-tính-2:giá trị; thuộc-tính-n:giá trị;"
Thêm thuộc tính style vào các thẻ HTML như ở ví dụ dưới.
Ví dụ:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Đưa CSS vào HTML</title> </head> <body> <h1 style="color:green; border:2px solid red; padding:10px"> Hôm nay trời đẹp vãi</h1> <h2 style="color:blue;border:2px solid red; margin:10px">Ngày mai trời cũng đẹp</h2> </body> </html> |
Vậy là chúng đã đưa được CSS vào HTML bằng cách viết trực tiếp , các bạn làm thử ví dụ của mình thêm bớt các thuộc tính đã học để thấy sự khác biệt. Test thử luôn, tự mình mò ra sẽ nhớ rất lâu.
2.Viết trong thẻ style
Đặt trong thẻ style
Cái này các bạn xem ví dụ cho dễ hình dung
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Đưa CSS vào HTML</title> <style> h1{ color:red; padding:5px; border: 2px solid black; } /*Đặt CSS cho thẻ h1*/ h2{ border: 2px solid orange; margin:10px; } /*Đặt CSS cho thẻ h2*/ </style> </head> <body> <h1> Hôm nay trời đẹp vãi</h1> <h2> Ngày mai trời cũng đẹp</h2> </body> </html> |
3.Viết trong file riêng
Viết thêm một file mới lưu tên file có đuôi .css
Trong file .css các bạn viết tương tự cách 2 nhưng bỏ đi thẻ style
Ví dụ mình lưu file là style.css, chúng ta sẽ cần một thẻ <link rel="stylesheet" href="style.css"> để kết nối file .html với .css, khi kết nối được thì các thuộc tính css mới được áp dụng lên các thẻ html
file html:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Đưa CSS vào HTML</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1> Hôm nay trời đẹp vãi</h1> <h2> Ngày mai trời cũng đẹp</h2> </body> </html> |
file style.css
|
1 2 3 4 5 6 7 8 9 10 11 |
h1{ color:red; padding:5px; border: 2px solid black; } /*Đặt CSS cho thẻ h1*/ h2{ border: 2px solid orange; margin:10px; } /*Đặt CSS cho thẻ h2*/ |
Ok xong :D, quá nhanh và gọn hoàn thành xong 3 cách đưa CSS vào HTML. Mình khuyên là nên sử dụng cách 3 lí do là vì các pro thường làm vậy :D, các bạn nên thực hành nhiều cho quen tay. Thực sự nó quá dễ hehe, cần gì dùng não nhiều đâu chỉ cần dùng tay là được rồi. Mình xin được kết thúc bài viết tại đây.
Xem bài viết tiếp theo tại đây.
