Tích hợp mã CSS vào trang web

0
42

Giới thiệu

Xin chào các bạn, trong video này, chúng ta sẽ tìm hiểu về cú pháp và các phương pháp để tích hợp (còn gọi là nhúng) mã CSS vào tài liệu HTML.

Tuy nhiên, trước tiên chúng ta cần hiểu về “selector” là gì nhé?

Selector là gì?

Như đã đề cập ở mục “Specificity” trong bài học trước, sẽ có nhiều phần tử trang trong một trang web (HTML’s element) muốn áp dụng những “phong cách” (style) lên những phần tử đó, chúng ta sẽ tìm kiếm và quy định chúng thông qua các định danh gọi là “selector”.

Nói cách khác, selector đại diện cho các phần tử trang web mà chúng ta muốn áp dụng style vào.

Cú pháp CSS

Gồm 2 thành phần: Selector và Declaration (phần khai báo):

selector {property: value;}
  • selector: Phần tử trang HTML mà bạn muốn định dạng style.
  • property: Những thuộc tính (ví dụ: màu chữ, font chữ, chiều rộng, chiều cao…).
  • value: Giá trị của thuộc tính.

Các bạn có thể tra cứu các thuộc tính trên W3C hoặc bất kỳ nguồn nào về CSS.

Lưu ý: Mỗi thuộc tính sẽ có nhiều giá trị khác nhau (ví dụ như thuộc tính font-size sẽ có nhiều giá trị về kích thước của chữ).
Tương tự, chúng ta cũng có thể cùng khai báo nhiều thuộc tính cho mỗi selector (và mỗi selector có thể có một hoặc nhiều thuộc tính).

Ví dụ:

p{
 font-weight: bold;
 color: blue; 
}

Ở ví dụ trên, thẻ p sẽ có 2 thuộc tính là font-weight và color.

Các phương pháp tích hợp CSS

Inline Style Sheets

Với cách này, chúng ta sẽ sử dụng thuộc tính style ngay tại thẻ HTML mà chúng ta muốn áp dụng.

Ví dụ:

<h1 style=”color:red”>Welcome to FUJINET </h1>

Tuy nhiên, cách thức này không thể hiện được những ưu điểm của CSS.

Nó làm cho mã HTML thêm phức tạp (vì được chèn trực tiếp vào các thẻ trong tài liệu HTML), chỉ có tác dụng trong thẻ HTML nào được khai báo và không thể tái sử dụng cho các trang khác có cấu trúc tương tự.

Vì thế, chúng ta nên hạn chế sử dụng cách thức này.

Internal Style Sheets (Inner Style Sheets)

Cách này sẽ được khai báo bên trong thẻ <style> trong tài liệu HTML (thường được khai báo ở thẻ <head>).

Ví Dụ:

<head>
  <style>
   h2{color: blue;}
   p{color: red;}
  </style>
</head>

Cách thức này nhìn chung có hiệu quả hơn so với inline style sheets. Nhưng hạn chế của nó, là nó chỉ có tác dụng duy nhất cho trang web hiện tại, mà một website có thể sẽ có nhiều trang web cùng sử dụng chung một style sheet nên cách này cũng không giúp chúng ta thực hiện được công việc tái sử dụng cho nhiều trang khác nhau.

External Style Sheets

Cách thức này, cho phép chúng ta viết mã nguồn CSS tại một file riêng biệt (có phần mở rộng .css) bên ngoài và liên kết nó vào trong trang web của mình, thông qua thuộc tính href.

Thuộc tính href: đường dẫn đến file CSS ta muốn liên kết (tốt nhất nên sử dụng đường dẫn tương đối).

Ví Dụ:

<head>
  <link rel=”stylesheet” type=”text/css” href”style.css”>
</head>

Cách khai báo này được sử dụng thường xuyên nhất. Nó mang lại nhiều ưu điểm vì tận dụng được nhiều thế mạnh mà CSS mang lại.

Tách biệt mã nguồn CSS và HTML – làm cho mã nguồn HTML đơn giản hơn, có thể sử dụng cho nhiều trang khác nhau (người thiết kế chỉ cần chỉnh sửa nội dung trong file .css này và các trang đang sử dụng nó sẽ được “đồng bộ” style mà không cần phải vất vả chỉnh sửa cho từng trang một).

Vậy nếu ta định nghĩa cả 3 kiểu cùng nhau thì điều gì xảy ra? hãy xem tiếp nhé.

Thứ tự ưu tiên

Giả sử trường hợp cả 2 cách thức cùng được sử dụng để áp dụng lên một phần tử trang bất kỳ.
Inline style thì viết:

<h1 style=”color:red”>Welcome to Ba con sói</h1>

Trong khi internal style thì viết:

<head>
  <style>
    h1{
      color:blue;
    }
  </style>
</head>
<body>
  <h1> Welcome to BCS </h1>
</body>

Vấn đề đặt ra là trình duyệt sẽ hiển thị màu đỏ hay màu xanh?

Khi có sự trùng hợp này xảy ra, chúng ta phải xét đến thứ tự ưu tiên.
Thứ tự ưu tiên giảm dần được sắp xếp như sau: Inline style –> Internal style –> External style.

Kết luận

Vẫn còn 1 cách để chèn CSS vào tài liệu HTML nhưng chúng ta hãy tìm hiểu nó trong bài học tiếp theo.

Các bạn cần nhớ rõ cú pháp CSS, đặc điểm của từng style cũng như thứ tự ưu tiên của chúng.

Xin cảm ơn các bạn đã theo dõi bài học và hẹn gặp lại trong bài học tiếp theo.

Tài liệu tham khảo

http://www.w3.org/wiki/Inheritance_and_cascade

http://www.w3schools.com/css/css_howto.asp

0

BÌNH LUẬN

Nhập bình luận của bạn
Vui lòng nhập tên