HTML - Trang định kiểu

Cascading Style Sheets (CSS) mô tả cách tài liệu được trình bày trên màn hình, trong bản in hoặc có thể là cách chúng được phát âm. W3C đã tích cực thúc đẩy việc sử dụng các biểu định kiểu trên Web kể từ khi tập đoàn được thành lập vào năm 1994.

Cascading Style Sheets (CSS) cung cấp các lựa chọn thay thế dễ dàng và hiệu quả để chỉ định các thuộc tính khác nhau cho các thẻ HTML. Sử dụng CSS, bạn có thể chỉ định một số thuộc tính kiểu cho một phần tử HTML nhất định. Mỗi thuộc tính có tên và giá trị, được phân tách bằng dấu hai chấm (:). Mỗi khai báo thuộc tính được phân tách bằng dấu chấm phẩy (;).

Thí dụ

Trước tiên, hãy xem xét một ví dụ về tài liệu HTML sử dụng thẻ <font> và các thuộc tính liên quan để chỉ định màu văn bản và kích thước phông chữ -

Note- Thẻ phông chữ không được dùng nữa và nó sẽ bị xóa trong phiên bản HTML trong tương lai. Vì vậy, chúng không nên được sử dụng thay vào đó, bạn nên sử dụng các kiểu CSS để thao tác với phông chữ của bạn. Nhưng vẫn nhằm mục đích học tập, chương này sẽ làm việc với một ví dụ sử dụng thẻ phông chữ.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>
	
   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>

Chúng ta có thể viết lại ví dụ trên với sự trợ giúp của Style Sheet như sau:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>

Điều này sẽ tạo ra kết quả sau:

Bạn có thể sử dụng CSS theo ba cách trong tài liệu HTML của mình -

External Style Sheet - Xác định quy tắc biểu định kiểu trong một tệp .css riêng biệt và sau đó đưa tệp đó vào tài liệu HTML của bạn bằng cách sử dụng thẻ HTML <link>.
Internal Style Sheet - Xác định quy tắc biểu định kiểu trong phần tiêu đề của tài liệu HTML bằng thẻ <style>.
Inline Style Sheet - Xác định quy tắc biểu định kiểu trực tiếp cùng với các phần tử HTML bằng cách sử dụng style thuộc tính.

Chúng ta hãy xem tất cả ba trường hợp một với sự trợ giúp của các ví dụ phù hợp.

Trang định kiểu bên ngoài

Nếu bạn cần sử dụng biểu định kiểu của mình cho các trang khác nhau, thì bạn nên xác định biểu định kiểu chung trong một tệp riêng biệt. Tệp biểu định kiểu xếp tầng sẽ có phần mở rộng là.css và nó sẽ được đưa vào các tệp HTML bằng thẻ <link>.

Thí dụ

Hãy xem xét chúng tôi xác định một tệp định kiểu style.css có các quy tắc sau -

.red {
   color: red;
}
.thick {
   font-size:20px;
}
.green {
   color:green;
}

Ở đây chúng tôi đã xác định ba quy tắc CSS sẽ áp dụng cho ba lớp khác nhau được xác định cho các thẻ HTML. Tôi khuyên bạn không nên bận tâm về cách các quy tắc này được định nghĩa bởi vì bạn sẽ học chúng trong khi nghiên cứu CSS. Bây giờ hãy sử dụng tệp CSS bên ngoài ở trên trong tài liệu HTML sau của chúng tôi -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML External CSS</title>
      <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
   </head>

   <body>
      <p class = "red">This is red</p>
      <p class = "thick">This is thick</p>
      <p class = "green">This is green</p>
      <p class = "thick green">This is thick and green</p>
   </body>

</html>

Điều này sẽ tạo ra kết quả sau:

Bảng kiểu nội bộ

Nếu bạn chỉ muốn áp dụng các quy tắc của Trang định kiểu cho một tài liệu, thì bạn có thể đưa các quy tắc đó vào phần tiêu đề của tài liệu HTML bằng cách sử dụng thẻ <style>.

Các quy tắc được xác định trong biểu định kiểu nội bộ sẽ ghi đè các quy tắc được xác định trong tệp CSS bên ngoài.

Thí dụ

Hãy viết lại ví dụ trên một lần nữa, nhưng ở đây chúng ta sẽ viết các quy tắc của bảng định kiểu trong cùng một tài liệu HTML bằng cách sử dụng thẻ <style> -

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Internal CSS</title> 
      
      <style type = "text/css"> 
         .red { 
            color: red; 
         } 
         .thick{ 
            font-size:20px; 
         } 
         .green { 
            color:green; 
         } 
      </style> 
   </head>
	
   <body> 
      <p class = "red">This is red</p>  
      <p class = "thick">This is thick</p>  
      <p class = "green">This is green</p>  
      <p class = "thick green">This is thick and green</p> 
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau:

Trang kiểu nội tuyến

Bạn có thể áp dụng quy tắc biểu định kiểu trực tiếp cho bất kỳ phần tử HTML nào bằng cách sử dụng stylethuộc tính của thẻ có liên quan. Điều này chỉ nên được thực hiện khi bạn muốn thực hiện một thay đổi cụ thể chỉ trong bất kỳ phần tử HTML nào.

Các quy tắc được xác định nội dòng với phần tử sẽ ghi đè các quy tắc được xác định trong tệp CSS bên ngoài cũng như các quy tắc được xác định trong phần tử <style>.

Thí dụ

Chúng ta hãy viết lại ví dụ trên một lần nữa, nhưng ở đây chúng ta sẽ viết các quy tắc biểu định kiểu cùng với các phần tử HTML sử dụng style thuộc tính của các yếu tố đó.

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Inline CSS</title> 
   </head>
 
   <body> 
      <p style = "color:red;">This is red</p>  
      <p style = "font-size:20px;">This is thick</p>  
      <p style = "color:green;">This is green</p>  
      <p style = "color:green;font-size:20px;">This is thick and green</p> 
   </body>
 
</html>

Điều này sẽ tạo ra kết quả sau: