Cascading Style Sheets (CSS) là ngôn ngữ đánh dấu xác định cách các trang web của bạn sẽ xuất hiện. Nó quản lý màu sắc, phông chữ và bố cục của các thành phần trang web của bạn, cũng như cho phép bạn thêm hiệu ứng hoặc hoạt ảnh vào các trang của mình

Chúng ta có thể tạo kiểu cho tệp/trang HTML theo ba cách. kiểu dáng bên ngoài, kiểu dáng bên trong và kiểu dáng nội tuyến. Trong bài viết này, chúng ta sẽ tập trung vào kiểu nội tuyến

Cách sử dụng Kiểu nội tuyến trong HTML

Sử dụng thuộc tính style, chúng ta có thể áp dụng kiểu dáng cho HTML của mình bên trong các thẻ HTML riêng lẻ với kiểu dáng nội tuyến

...

Thuộc tính kiểu hoạt động giống như bất kỳ thuộc tính HTML nào khác. Chúng tôi sử dụng style, theo sau là dấu đẳng thức (=) và sau đó là một trích dẫn trong đó tất cả các giá trị kiểu sẽ được lưu trữ bằng cách sử dụng các cặp giá trị-thuộc tính CSS tiêu chuẩn - "property: value;"

Ghi chú. Chúng ta có thể có bao nhiêu cặp thuộc tính-giá trị tùy thích miễn là chúng ta phân tách chúng bằng dấu chấm phẩy (;)

Cần lưu ý rằng thuộc tính style thường được sử dụng trong thẻ HTML mở đầu vì đó là một phần của phần tử HTML có thể chứa văn bản, dữ liệu, hình ảnh hoặc không chứa gì cả. Một ví dụ về kiểu nội tuyến như sau

Hello World

Điều này tương tự như thế này

h1 {
  color: red;
  font-size: 40px;
}

Sự khác biệt duy nhất là kiểu nội tuyến chỉ áp dụng cho thẻ mà nó được áp dụng, trong khi ví dụ mã thứ hai này ảnh hưởng đến tất cả các thẻ p trên trang html của bạn

Khi nào nên sử dụng kiểu nội tuyến

Tuy nhiên, việc sử dụng các kiểu nội tuyến không được coi là phương pháp hay nhất vì nó dẫn đến nhiều sự lặp lại – vì các kiểu không thể được sử dụng lại ở nơi khác

Nhưng có những lúc các kiểu nội tuyến là tùy chọn tốt nhất (hoặc duy nhất), chẳng hạn như khi tạo kiểu cho e-mail HTML, nội dung CMS như WordPress, Drupal, v.v. Bạn cũng có thể sử dụng chúng khi tạo kiểu cho nội dung động, được tạo hoặc thay đổi bằng HTML bởi JavaScript

Ngoại trừ khai báo !important, các kiểu nội tuyến có độ đặc hiệu cao/mức độ ưu tiên cao nhất, có nghĩa là chúng sẽ ghi đè hầu hết các quy tắc khác trong biểu định kiểu bên trong và bên ngoài

Giả sử chúng ta có hai đoạn văn bản với kiểu dáng nội tuyến được đặt thành

Hello World

Hello World

  
      
      
  
 
  
     
Paragraph one is red.
     
Paragraph two is also red.
  

CSS từ kiểu nội tuyến của chúng tôi sẽ ghi đè lên CSS từ kiểu nội bộ, vì vậy cả hai đoạn văn sẽ là

Hello World

Ưu điểm và nhược điểm của kiểu nội tuyến

Cho đến giờ, chúng ta đã biết phong cách nội tuyến là gì và cách sử dụng nó trong các thẻ HTML. Bây giờ, hãy xem xét những ưu điểm và nhược điểm để xem khi nào chúng ta nên sử dụng kiểu nội tuyến và khi nào chúng ta không nên sử dụng.

Ưu điểm của CSS nội tuyến

• Nội tuyến được ưu tiên hơn tất cả các kiểu khác. Bất kỳ kiểu nào được xác định trong biểu định kiểu bên trong và bên ngoài đều bị ghi đè bởi kiểu nội tuyến
• Bạn có thể nhanh chóng và dễ dàng chèn các quy tắc CSS vào trang HTML, điều này rất hữu ích để thử nghiệm hoặc xem trước các thay đổi và thực hiện các bản sửa lỗi nhanh trên trang web của bạn
• Không cần phải tạo một tập tin bổ sung
• Để áp dụng kiểu dáng trong JavaScript, hãy sử dụng thuộc tính style

Nhược điểm của CSS nội tuyến

• Việc thêm các quy tắc CSS vào từng thành phần HTML sẽ mất thời gian và khiến cấu trúc HTML của bạn trở nên thiếu tổ chức. Rất khó để theo kịp, tái sử dụng và mở rộng quy mô
• Kích thước và thời gian tải trang của bạn có thể bị ảnh hưởng bởi việc tạo kiểu cho nhiều thành phần
• Kiểu nội tuyến không thể được sử dụng để tạo kiểu cho các phần tử giả và lớp giả. Ví dụ: bạn có thể tạo kiểu cho màu đã truy cập, di chuột, hoạt động và liên kết của thẻ neo bằng biểu định kiểu bên ngoài và bên trong

Phần kết luận

Trong bài viết này, chúng ta đã học cách sử dụng kiểu nội tuyến trong HTML, khi nào nên sử dụng nó và một số lợi ích cũng như hạn chế của việc làm như vậy

Vì kiểu nội tuyến được ưu tiên hơn tất cả các kiểu khác nên một trong những thời điểm tốt nhất để sử dụng kiểu này là khi thử nghiệm hoặc xem trước các thay đổi và thực hiện các bản sửa lỗi nhanh trên trang web của bạn

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Joel Olawanle

Nhà phát triển Frontend & Người viết kỹ thuật

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có việc làm với tư cách là nhà phát triển. Bắt đầu

Biểu định kiểu nào có mức độ ưu tiên cao nhất?

Biểu định kiểu nào sau đây có mức độ ưu tiên cao nhất nếu bạn sử dụng cả ba loại biểu định kiểu?

3 style sheet là gì?

Biểu định kiểu nào là mạnh nhất?