Bài 8: Styles trong HTML – Định dạng văn bản nâng cao trong HTML

Bài 8: Styles trong HTML

Trong bài số 7 chúng ta đã tìm hiểu về các kiểu hiển thị định dạng văn bản trong HTML. Bài viết này sẽ tiếp tục hướng dẫn bạn cách làm chủ các kiểu định dạng khác. Cụ thể hơn, chúng ta sẽ sử dụng Styles trong HTML để thực hiện.

Bài 8: Styles trong HTML - Định dạng văn bản nâng cao trong HTML
Bài 8: Styles trong HTML – Định dạng văn bản nâng cao trong HTML

HTML khá hạn chế khi nói đến việc trình bày một trang web. Ban đầu nó được thiết kế như một cách đơn giản để trình bày thông tin. CSS (Cascading Style Sheets) được giới thiệu vào tháng 12 năm 1996 bởi World Wide Web Consortium (W3C) để cung cấp một cách tốt hơn để tạo thêm các phong cách hiển thị (Style) cho các phần tử HTML.

Với CSS, rất dễ dàng để chỉ định những thứ như kích thước và kiểu chữ cho phông chữ, màu sắc cho văn bản và nền. Chúng ta cũng có thể căn chỉnh của văn bản và hình ảnh, khoảng cách giữa các phần tử, đường viền và đường viền cho các phần tử và rất nhiều thuộc tính tạo kiểu khác. Trong phần học về CSS, các bạn sẽ được Học Làm Web giới thiệu chi tiết.

Thêm Styles vào phần tử HTML

Thông tin Styles có thể được đính kèm dưới dạng tài liệu riêng biệt hoặc được nhúng vào chính tài liệu HTML. Đây là ba phương pháp triển khai thông tin kiểu cho tài liệu HTML.

  • Kiểu nội tuyến (Inline styles) – Sử dụng stylethuộc tính trong thẻ bắt đầu HTML.
  • Kiểu nhúng (Embedded style) – Sử dụng <style>phần tử trong phần đầu của tài liệu.
  • Biểu định kiểu bên ngoài (External style sheet) – Sử dụng <link>phần tử, trỏ đến tệp CSS bên ngoài.

Trong hướng dẫn này, Học Làm Web sẽ trình bày từng loại style sheet khác nhau.

Lưu ý: Các kiểu nội tuyến có mức ưu tiên cao nhất và các kiểu bên ngoài có mức thấp nhất. Điều đó có nghĩa là nếu bạn chỉ định kiểu cho các đoạn văn của mình trong cả biểu định kiểu được nhúng và bên ngoài , các quy tắc kiểu xung đột trong biểu định kiểu được nhúng sẽ ghi đè trang định kiểu bên ngoài.

1. Kiểu nội tuyến (Inline styles)

Kiểu nội tuyến được sử dụng để áp dụng các quy tắc duy nhất cho một phần tử, bằng cách đặt các quy tắc CSS trực tiếp vào thẻ bắt đầu. Nó có thể được gắn vào một phần tử bằng cách sử dụng stylethuộc tính.

Thuộc tính style bao gồm một loạt các cặp giá trị và thuộc tính CSS. Mỗi property: value được phân tách bằng dấu chấm phẩy (;), giống như cách bạn viết vào biểu định được nhúng hoặc bên ngoài. Nhưng nó cần phải là tất cả trong một dòng, tức là không có ngắt dòng sau dấu chấm phẩy.

Ví dụ sau minh họa cách đặt colorfont-size của văn bản:

Sử dụng các kiểu nội tuyến (Inline styles) thường được coi là một cách thực hành không tốt. Bởi vì các quy tắc kiểu được nhúng trực tiếp vào bên trong thẻ html, nó làm cho bản trình bày bị trộn lẫn với nội dung của tài liệu. Điều này làm cho việc cập nhật hoặc duy trì một trang web rất khó khăn.

Để tìm hiểu chi tiết về các thuộc tính CSS khác nhau, vui lòng xem phần hướng dẫn CSS.

2. Kiểu nhúng (Embedded style)

Các biểu định kiểu nội bộ hoặc được nhúng chỉ ảnh hưởng đến tài liệu mà chúng được nhúng vào.

Các biểu định kiểu nhúng được xác định trong phần thẻ <head> của tài liệu HTML bằng cách sử dụng <style>. Bạn có thể xác định bất kỳ số <style>phần tử nào bên trong <head> này.

Ví dụ sau minh họa cách các quy tắc kiểu được nhúng bên trong (Embedded style) một trang web.

3. Biểu định kiểu bên ngoài (External style sheet)

Một bảng định kiểu bên ngoài là lý tưởng khi được áp dụng cho một trang web.

Biểu định kiểu bên ngoài giữ tất cả các quy tắc kiểu trong một tài liệu riêng biệt mà bạn có thể liên kết từ bất kỳ tài liệu HTML nào trên trang web của mình. Bảng định kiểu bên ngoài là linh hoạt nhất vì với bảng định kiểu bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang web chỉ bằng cách cập nhật một tệp.

Bạn có thể đính kèm các biểu định kiểu bên ngoài theo hai cách – liên kết và nhập :

Liên kết trang tính kiểu bên ngoài

Một biểu định kiểu bên ngoài có thể được liên kết với tài liệu HTML bằng thẻ <link>. Các thẻ <link> đi bên trong phần <head>, như ví dụ bên dưới:

Nhập trang tính kiểu bên ngoài

Các quy tắc @import là một cách khác để tải một style sheet bên ngoài. Câu lệnh @import hướng dẫn trình duyệt tải một biểu định kiểu bên ngoài và sử dụng biểu định kiểu của nó.

Bạn có thể sử dụng nó theo hai cách. Cách đơn giản nhất là sử dụng nó trong phần tử <style> trong phần <head> của bạn. Lưu ý rằng, các quy tắc CSS khác vẫn có thể được bao gồm trong phần tử <style>.

Tương tự, bạn có thể sử dụng quy tắc @import để nhập một biểu định kiểu trong một biểu định kiểu khác.

Lưu ý: Tất cả các quy tắc @import phải xuất hiện ở đầu biểu định kiểu. Bất kỳ quy tắc kiểu nào được xác định trong biểu định kiểu chính nó sẽ ghi đè quy tắc xung đột trong các biểu định kiểu đã nhập. Các quy tắc @import có thể gây ra vấn đề hiệu suất, bạn thường nên tránh nhập khẩu style sheets.

Kết Thúc

Bài viết này chúng ta đã tìm hiểu về Styles trong HTML – Định dạng văn bản nâng cao trong HTML. Chúng tôi hy vọng bạn sẽ dễ dàng làm quen và tiến sâu hơn với các thẻ trong HTML. Bạn hãy luyệt tập thật nhiều để không bao giờ quên các thẻ này.

Có thể bạn chưa xem
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments