CSS, hoặc Cascading Style Sheets, là những gì được sử dụng trong thiết kế trang web hiện đại để áp dụng giao diện trực quan cho một trang. Trong khi HTML tạo cấu trúc của trang và Javascript có thể xử lý các hành vi, giao diện của trang web là miền CSS. Khi nói đến các kiểu này, chúng thường được áp dụng bằng các mẫu kiểu ngoài, nhưng bạn cũng có thể áp dụng kiểu CSS cho một phần tử cụ thể, đơn lẻ bằng cách sử dụng cái được gọi là "kiểu nội tuyến".
Kiểu nội tuyến là các kiểu CSS được áp dụng trực tiếp trong HTML của trang. Có cả những ưu điểm và nhược điểm của phương pháp này. Đầu tiên, hãy xem chính xác cách các kiểu này được viết.
Làm thế nào để viết một phong cách nội tuyến
Để tạo một kiểu CSS nội tuyến, bạn bắt đầu bằng cách viết thuộc tính kiểu dáng của bạn tương tự như cách bạn làm trong một biểu định kiểu, nhưng nó cần phải là tất cả một dòng. Tách nhiều thuộc tính bằng dấu chấm phẩy giống như bạn làm trong một biểu định kiểu.
nền: #ccc; màu: #fff; border: solid black 1px;
Đặt dòng kiểu đó bên trong thuộc tính style của phần tử bạn muốn tạo kiểu. Ví dụ: nếu bạn muốn áp dụng kiểu này cho một đoạn trong HTML của bạn, phần tử đó sẽ trông giống như sau:
Trong ví dụ này, đoạn cụ thể này sẽ xuất hiện với nền xám nhạt (đó là những gì #ccc sẽ hiển thị), văn bản màu đen (từ màu # 000) và với đường viền màu đen 1 pixel bao quanh tất cả bốn mặt của đoạn .
Ưu điểm của phong cách nội tuyến
Nhờ sự xếp tầng của phong cách nội tuyến của Cascading Style Sheet có ưu tiên cao nhất hoặc độ đặc hiệu cao nhất trong tài liệu. Điều này có nghĩa là chúng sẽ được áp dụng bất kể điều gì khác được quy định trong biểu định kiểu bên ngoài của bạn (với một ngoại lệ là bất kỳ kiểu nào được đưa ra! Tờ khai quan trọng đó, nhưng đây không phải là điều cần thực hiện trong các trang web sản xuất nếu nó có thể tránh được).
Các kiểu duy nhất có ưu tiên cao hơn kiểu nội tuyến là kiểu người dùng do chính người đọc áp dụng. Nếu bạn gặp sự cố khi áp dụng các thay đổi để áp dụng, bạn có thể thử đặt kiểu nội tuyến trên phần tử. Nếu bạn vẫn không hiển thị kiểu bằng cách sử dụng kiểu nội tuyến, bạn biết có điều gì khác đang diễn ra.
Các kiểu nội tuyến dễ dàng và nhanh chóng để thêm vào và bạn không cần phải lo lắng về việc viết bộ chọn CSS thích hợp vì bạn đang thêm kiểu trực tiếp vào phần tử bạn muốn thay đổi (phần tử đó về cơ bản sẽ thay thế bộ chọn bạn sẽ viết trong một bảng kiểu ngoài ). Bạn không cần phải tạo một tài liệu hoàn toàn mới (như với các tờ kiểu dáng bên ngoài) hoặc chỉnh sửa một phần tử mới trong phần đầu của tài liệu của bạn (như với các bảng định kiểu nội bộ). Bạn chỉ cần thêm thuộc tính style hợp lệ trên gần như mọi phần tử HTML. Đây là tất cả các lý do tại sao bạn có thể bị cám dỗ để sử dụng kiểu nội tuyến, nhưng bạn cũng phải nhận thức được một số nhược điểm rất quan trọng đối với phương pháp này.
Nhược điểm của Inline Styles
Bởi vì kiểu nội tuyến chúng là đặc trưng nhất trong dòng thác, chúng có thể vượt quá những thứ bạn không có ý định. Họ cũng phủ nhận một trong những khía cạnh mạnh mẽ nhất của CSS - khả năng tạo kiểu rất nhiều và nhiều trang web từ một tệp CSS trung tâm để làm cho các cập nhật và thay đổi kiểu trong tương lai dễ quản lý hơn nhiều.
Nếu bạn chỉ phải sử dụng kiểu nội tuyến, tài liệu của bạn sẽ nhanh chóng trở nên cồng kềnh và rất khó duy trì. Điều này là do các kiểu nội tuyến phải được áp dụng cho mọi phần tử bạn muốn chúng. Vì vậy, nếu bạn muốn tất cả các đoạn của bạn có họ phông chữ "Arial", bạn phải thêm một kiểu nội tuyến cho mỗi thẻ
trong tài liệu của bạn. Điều này cho biết thêm cả công việc bảo trì cho nhà thiết kế và thời gian tải xuống cho người đọc vì bạn sẽ cần thay đổi điều này trên mọi trang trong trang web của mình để thay đổi họ phông chữ đó. Ngoài ra, nếu bạn sử dụng biểu định kiểu riêng, bạn có thể thay đổi nó ở một vị trí và mỗi trang nhận được bản cập nhật đó.
Thành thật mà nói, đây là một bước lùi trong thiết kế web - trở lại ngày của thẻ !
Một hạn chế khác đối với các kiểu nội tuyến là không thể tạo kiểu cho các phần tử giả và các lớp với chúng. Ví dụ: với các biểu định kiểu bên ngoài , bạn có thể tạo kiểu cho màu được truy cập, di chuột, hoạt động và liên kết của thẻ neo, nhưng với kiểu nội tuyến, tất cả những gì bạn có thể tạo kiểu là chính liên kết, vì đó là thuộc tính kiểu được gắn với .
Cuối cùng, chúng tôi khuyên bạn không nên sử dụng kiểu nội tuyến cho các trang web của bạn vì chúng gây ra vấn đề và làm cho các trang có nhiều công việc hơn để duy trì. Thời gian duy nhất chúng tôi sử dụng chúng là khi chúng tôi muốn kiểm tra một phong cách một cách nhanh chóng trong quá trình phát triển. Một khi chúng tôi đã có nó tìm kiếm quyền cho rằng một trong những yếu tố, chúng tôi di chuyển nó vào phong cách bên ngoài của chúng tôi tờ.
Bài viết ban đầu của Jennifer Krynin. Biên tập bởi Jeremy Girard.