Khi trình duyệt đọc một biểu định kiểu, nó sẽ định dạng tài liệu HTML theo thông tin trong biểu định kiểu

---

Ba cách để chèn CSS

Có ba cách để chèn một biểu định kiểu

• CSS bên ngoài
• CSS nội bộ
• CSS nội tuyến

---

CSS bên ngoài

Với biểu định kiểu bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách thay đổi chỉ một tệp

Mỗi trang HTML phải bao gồm một tham chiếu đến tệp biểu định kiểu bên ngoài bên trong phần tử, bên trong phần đầu

Ví dụ

Các kiểu bên ngoài được xác định trong phần tử, bên trong phần của trang HTML

Đây là một tiêu đề

Đây là một đoạn

Tự mình thử »

Một biểu định kiểu bên ngoài có thể được viết trong bất kỳ trình soạn thảo văn bản nào và phải được lưu bằng một. phần mở rộng css

Ngoại thương. tệp css không được chứa bất kỳ thẻ HTML nào

Đây là cách "mystyle. tệp css" trông

"phong cách của tôi. css"

body {
  màu nền. xanh nhạt;
}

h1 {
  màu. hải quân;
  lề-trái. 20px;
}

Ghi chú. Không thêm khoảng trắng giữa giá trị thuộc tính và đơn vị.
Sai (dấu cách). margin-left: 20 px;
Đúng (nospace). margin-left: 20px;

---

---

CSS nội bộ

Một biểu định kiểu nội bộ có thể được sử dụng nếu một trang HTML có một kiểu duy nhất

Kiểu bên trong được xác định bên trong

Đây là một tiêu đề

Đây là một đoạn

Tự mình thử »

---

CSS nội tuyến

Một kiểu nội tuyến có thể được sử dụng để áp dụng một kiểu duy nhất cho một phần tử

Để sử dụng kiểu nội tuyến, hãy thêm thuộc tính kiểu vào phần tử có liên quan. Thuộc tính style có thể chứa bất kỳ thuộc tính CSS nào

Ví dụ

Kiểu nội tuyến được xác định trong thuộc tính "kiểu" của phần tử có liên quan

Đây là một tiêu đề

Đây là một đoạn

Tự mình thử »

Mẹo. Kiểu nội tuyến làm mất đi nhiều ưu điểm của biểu định kiểu (bằng cách trộn nội dung với bản trình bày). Sử dụng phương pháp này một cách tiết kiệm

---

Nhiều Style Sheets

Nếu một số thuộc tính đã được xác định cho cùng một bộ chọn (phần tử) trong các biểu định kiểu khác nhau, thì giá trị từ biểu định kiểu được đọc cuối cùng sẽ được sử dụng.  

Giả sử rằng một biểu định kiểu bên ngoài có kiểu sau cho

thành phần

Sau đó, giả sử rằng một biểu định kiểu bên trong cũng có kiểu sau cho

thành phần

Ví dụ

Nếu kiểu nội bộ được xác định sau liên kết đến biểu định kiểu bên ngoài,

các phần tử sẽ là "màu cam"

Tự mình thử »

Ví dụ

Tuy nhiên, nếu kiểu nội bộ được xác định trước liên kết đến biểu định kiểu bên ngoài,

các yếu tố sẽ là "hải quân".  

Tự mình thử »

---

thứ tự xếp tầng

Kiểu nào sẽ được sử dụng khi có nhiều hơn một kiểu được chỉ định cho một phần tử HTML?

Tất cả các kiểu trong một trang sẽ "xếp tầng" thành một biểu định kiểu "ảo" mới theo các quy tắc sau, trong đó số một có mức độ ưu tiên cao nhất

1. Kiểu nội tuyến (bên trong phần tử HTML)
2. Biểu định kiểu bên ngoài và bên trong (trong phần đầu)
3. trình duyệt mặc định

Vì vậy, một kiểu nội tuyến có mức độ ưu tiên cao nhất và sẽ ghi đè các kiểu bên ngoài và bên trong cũng như mặc định của trình duyệt

Tự mình thử »

Bạn đã bao giờ nghe nói về Không gian W3Schools chưa?

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ẻ

Hello World

0 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

Hello World

1, 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

2 và kiểu dáng bên trong được đặt thành

Hello World

0

  
      
      
  
 
  
     
Paragraph one is red.
     
Paragraph two is also red.
  

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

Hello World

2

Ư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

CSS nội bộ có được ưu tiên hơn CSS nội tuyến không?

CSS nội tuyến có ghi đè CSS bên ngoài không?

Làm cách nào để ghi đè CSS nội bộ?

Cái nào có CSS ​​nội tuyến hoặc nội bộ ưu tiên hơn?