Học CSS cơ bản – Cách nhúng css vào tài liệu website

Bài này thuộc phần 3 nằm trong tổng 7 phần của serie Học CSS cơ bản

Việc viết và khai báo css cho tài liệu website là cực kỳ quan trọng, bạn không thể nào mà tạo một webiste chuyên nghiệp nếu không có sự giúp đỡ của css được. Nhưng cách nhúng css như thế nào và cách nào vừa chuyên nghiệp tối ưu thì lại là một vấn đề. Giải quyết chuyện này tôi sẽ hướng dẫn cho bạn các cách nhúng css vào 1 tài liệu web.

Nhúng trực tiếp vào thẻ tag.

Cú pháp: <p sytle="color:red; font-size:20px">ví dụ</p>

Bạn có thể thay thế thẻ <p> bằng thẻ tag cần dùng khác, các thuộc tính css được viết và khai báo trong style=" thuộc tính" , và mỗi thuộc tính khai báo cách nhau dấu ;

Lưu ý: Thi thoảng mình vẫn hay sử dụng cách này cho nó nhanh, nhưng đây chỉ là cách mình hay làm với một số hướng dẫn cho các bạn hiểu chứ thực ra cách này không được khuyến khích để thực hiện. Bởi nhiều mặt hạn chế, khi bạn khai báo cho từng thẻ tag thì chỉ duy nhất thẻ tag đó nhận được giá trị style. Trong trường hợp bạn khai báo vài trăm thẻ lặp lại thế này thì là cả 1 vấn đề.

Đặt CSS vào trong cặp thẻ <head></head>

Cú pháp: <style>thuộc tính</style>

<head>
   <style>
      h1{
         color:#4753;
         margin-left: 40px;
}
      p{
         color:#222;
         font-size:16px;
         font-family:Arial;
}

   </style>
</head>

Cách nhúng css kiểu này tuy là có ưu việt hơn cách thứ nhất ở chỗ bạn khai báo thuộc tính cho 1 thẻ tag chỉ định, lập tức những thẻ tag này có trong tài liệu web sẽ nhận được giá trị, nhưng phương pháp như vậy vẫn chưa tối ưu và chưa chuyên nghiệp do bạn khai báo trong thẻ head vì vậy về lâu dài nó sẽ làm dung lương file này tăng lên. Đồng thời việc quản lý nâng cấp gặp rất khó khăn.

Khai báo bằng file bên ngoài

Cú pháp<link type = "text/css" href = "ten-style.css" />

<head>
       <title>Hello đây là rang web đầu tiên của tôi</title>
       <meta charset="utf-8" />
       <meta discription="Chào mừng bạn đến với trang web đầu tiên của tôi, tôi đang bắt đâu học html cơ bản" />
       <link type="text/css" href="style.css" />
</head>

Ở phương pháp này chúng ta sẽ tạo 1 file css bên ngoài, sau đó gọi file css này vào trong cặp thẻ <head> . Đây được coi là phương pháp tối ưu nhất hiện này bởi độ cơ động khá lớn, đối với những dự án lớn chúng ta có thể quản lý các tập tin css rất dễ dàng. Trong trường hợp 1 website có sử dụng nhiều tập tin css mà không may có 1 tập tin bị xóa thì công tác bảo trì sửa chữa cũng đơn giản và nhanh chóng.

Import css

Cú pháp: @import “URL”;

<head>
   @import "style.css";
</head>

Cách này cũng tương tự như cách thứ 3, nhìn chung phương pháp nhập css này hay sử dụng trong 1 tập tin css hơn là khai báo trong cặp thẻ <head>.

Lời kết

Trên đây mình đã giới thiệu cho các bạn tất cả là 4 phương pháp để nhúng css vào tài liệu web, qua những phân tích sơ bộ trên hi vọng bạn sẽ chọn cho mình cách viết css như thế nào cho tối ưu và hiệu quả, hẹn gặp lại các bạn ở bài sau.

Bài viết khác cùng serie

Bảo Nguyễn

Đam mê dòng nhạc Bolero, thích con gái phong cách công sở và thích bàn luận quân sự. Đã từng học tại HaUI khóa K16.

Leave a Reply

avatar
  Subscribe  
Notify of

Create Account



Log In Your Account