Nhiều trình phân tích trang web và hầu hết các nhà thiết kế trang web sẽ tích cực ngăn bạn sử dụng CSS nội tuyến [biểu định kiểu xếp tầng] trong các trang web của bạn. Thường có những lý do rất chính đáng cho điều đó, và hãy xem tại sao nó thường bị phản đối

Một câu hỏi mà tôi thường được hỏi là. Tôi chỉ muốn sử dụng nó ở một nơi này. Có tệ đến thế không?

Vì vậy, nó thực sự xấu và tại sao?

Đúng. Đó là loại xấu và đây là lý do tại sao

1. Khả năng bảo trì của nguồn. Nó làm cho mã thực sự khó bảo trì, đặc biệt là theo thời gian. Tin tôi đi, sẽ không ai nhớ vị trí và tại sao CSS cụ thể đó được đưa vào trong khoảng 6 tháng, ngay cả khi đó là nhóm phát triển một người
2. Thiết kế mô-đun. Bạn hẳn đã nghe nói rằng nên tách phần đánh dấu và phần trình bày của bạn. Điều này làm cho hầu hết các thiết kế dễ bảo trì hơn theo thời gian. Điều này cũng cho phép nhiều nhà phát triển và nhà thiết kế làm việc trên cùng một thiết kế mà không bị chồng chéo nhiều
3. Mã/Quy tắc có thể chia sẻ. Việc chia sẻ quy tắc giữa các trang hoặc thậm chí các trang web sẽ dễ dàng hơn. Bạn có thể nghĩ rằng nó sẽ chỉ được sử dụng một lần, nhưng sẽ khó theo dõi hơn nhiều khi nó cần được sử dụng ở một địa điểm khác sau đó. Tệ hơn nữa, bạn thậm chí có thể không nhớ rằng nó được sử dụng ở nơi khác
4. Dễ hiểu. Điều này đặc biệt đúng đối với người khác chứ không phải người viết mã ban đầu. Một nhà phát triển hoặc nhà thiết kế mới sẽ thấy logic và quy tắc dễ hiểu hơn nhiều nếu nó không được nội tuyến ở mọi nơi. Trên thực tế, việc sử dụng thẻ kiểu trong các trang web khác nhau còn tệ hơn css nội tuyến
5. Các vấn đề về phạm vi. Nếu bạn có các quy tắc được áp dụng từ mọi nơi, việc theo dõi các vấn đề về phạm vi sẽ trở nên khó khăn hơn nhiều. Bạn sẽ phải kiểm tra phần tử, thẻ kiểu và css bên ngoài, tất cả để xem tại sao các thay đổi của bạn không được chọn. Điều này có thể khó hơn nhiều nếu đó là trang web động hoặc trang web được tạo
6. Bộ nhớ đệm trình duyệt. Bạn không tận dụng bộ nhớ đệm của trình duyệt. Cùng một mã sẽ cần được tải xuống mỗi khi trang được tải vì nó là một phần của nội dung trang. Điều này làm cho kích thước trang tăng lên [nếu là một số byte]

Vì vậy, nó không bao giờ là tốt?

Hừm…. Có thể có một tập hợp các điều kiện rất cụ thể có thể là duy nhất đối với một trang web mà việc thực hiện điều đó có thể hợp lý. Theo ý kiến ​​​​khiêm tốn của tôi, vẫn không tốt khi viết mã dưới dạng css nội tuyến. Hoàn toàn không sử dụng các thuộc tính kiểu cấp độ thẻ. CSS cấp độ thẻ khá khó theo dõi, đặc biệt nếu nó nằm sâu trong mã. Tôi đang nói nhiều hơn về việc thêm quy tắc bằng cách sử dụng thẻ kiểu trong mỗi trang…. cũng được coi là css nội tuyến

Bạn nên sử dụng một số loại tập lệnh hoặc mẫu tạo trang web để chèn các quy tắc từ tệp bên ngoài dưới dạng CSS nội tuyến

1. Mã bỏ đi / Phát triển nhanh. Nếu bạn đang tạo mã bị bỏ đi như khi phát triển bằng chứng về khái niệm hoặc phiên bản alpha. Đôi khi bạn có thể thấy mã nội tuyến dễ dàng hơn và nhanh hơn nếu bạn vừa là nhà thiết kế, nhà phát triển và người thử nghiệm
2. CSS nội tuyến nhỏ hoặc ít quy tắc CSS. Bạn có rất ít quy tắc. Theo nguyên tắc thông thường, nếu tệp CSS bên ngoài nhỏ hơn 3 hoặc 4 Kb, bạn có thể nhập dòng mã. Tôi khuyên bạn nên thực hiện theo chương trình nhưng vẫn duy trì tệp bên ngoài để phát triển. Tôi tin rằng một số công cụ khai thác và plugin CMS cung cấp tính năng này để giảm độ trễ của yêu cầu máy chủ bổ sung
3. Không có hoặc ít khách truy cập lặp lại. Bạn không có lượt xem trang lặp lại hoặc khách truy cập lặp lại, do đó không có lợi ích gì từ bộ nhớ đệm của trình duyệt hoặc kích thước trang nhỏ hơn
4. Trang web một trang. Trang web của bạn chỉ có một trang, có nghĩa là nó có thể không có nhiều CSS và ít khách truy cập lặp lại

Một ví dụ về một trang web mà CSS nội tuyến có thể hợp lý là một công cụ tìm kiếm [ví dụ:. Google. com] trang chủ/trang tìm kiếm. Trang được tải hàng tỷ lần mỗi ngày, vì vậy mọi yêu cầu đều có giá trị và bạn muốn tiết kiệm những yêu cầu đó. Về mặt kỹ thuật, đây là một trang web một trang với một mục đích và là một trang rất đơn giản, yêu cầu ít hoặc không cần CSS

CSS nội tuyến cũng không tốt cho SEO?

Không. Ít nhất tôi không thể nghĩ tại sao nó có thể xấu hoặc có bất kỳ ảnh hưởng nào đến SEO

Lý do gián tiếp duy nhất tôi có thể nghĩ đến là css nội tuyến làm cho kích thước trang lớn hơn. Điều này có thể khiến trang tải chậm hơn, do đó ảnh hưởng đến thứ hạng tìm kiếm. Nhưng hãy nghĩ về điều đó, việc tăng kích thước trang sẽ rất nhỏ trong hầu hết các trường hợp, trừ khi bạn đang nội tuyến rất nhiều tệp CSS và quy tắc…hơn 10kb hoặc hơn

Sự khác biệt chính giữa CSS nội tuyến và CSS bên ngoài là CSS nội tuyến được xử lý nhanh hơn vì nó chỉ yêu cầu trình duyệt tải xuống 1 tệp trong khi sử dụng CSS bên ngoài sẽ yêu cầu tải xuống các tệp HTML và CSS riêng biệt

Trong hướng dẫn này, chúng ta sẽ đi sâu so sánh ba loại kiểu CSS. nội tuyến, bên ngoài và nội bộ. Chúng tôi cũng sẽ khám phá những ưu điểm và nhược điểm của việc sử dụng từng phương pháp

CSS chính xác là gì?

Cascading Style Sheets [CSS] là ngôn ngữ đánh dấu chịu trách nhiệm về giao diện trang web của bạn. Nó kiểm soát 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

Ngôn ngữ biểu định kiểu này cũng cho phép bạn thêm hiệu ứng hoặc hoạt ảnh vào trang web của mình. Bạn có thể sử dụng nó để hiển thị một số hoạt ảnh CSS như hiệu ứng nút bấm, trình quay hoặc trình tải và hình nền động

Nếu không có CSS, trang web của bạn sẽ xuất hiện dưới dạng trang HTML đơn giản. Đây là cách Twitter sẽ trông như thế nào nếu chúng ta tắt CSS của nó

Sự khác biệt giữa các kiểu CSS nội tuyến, bên ngoài và bên trong

Có ba cách bạn có thể sử dụng để triển khai CSS vào HTML của mình. phong cách bên trong, bên ngoài và nội tuyến. Hãy phá vỡ chúng

CSS nội bộ

Internal or embedded CSS requires you to add tag in the section of your HTML document.

Kiểu CSS này là một phương pháp hiệu quả để tạo kiểu cho một trang. Tuy nhiên, sử dụng kiểu này cho nhiều trang sẽ tốn thời gian vì bạn cần đặt các quy tắc CSS trên mọi trang trên trang web của mình

Đây là cách bạn có thể sử dụng CSS nội bộ

1. Open your HTML page and locate opening tag.
2. Put the following code right after the tag

1. Thêm quy tắc CSS trên một dòng mới. Đây là một ví dụ

body {
    background-color: blue;
}
h1 {
    color: red;
    padding: 60px;
}

1. Nhập thẻ đóng

Tệp HTML của bạn sẽ trông như thế này

body {
    background-color: blue;
}
h1 {
    color: red;
    padding: 60px;
} 




Hostinger Tutorials
This is our paragraph.

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

• Bạn có thể sử dụng bộ chọn lớp và ID trong biểu định kiểu này. Đây là một ví dụ

.class {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}

#id {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}

• Vì bạn sẽ chỉ thêm mã trong cùng một tệp HTML nên bạn không cần tải nhiều tệp lên

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

• Việc thêm mã vào tài liệu HTML có thể tăng kích thước và thời gian tải của trang

CSS bên ngoài

Với CSS bên ngoài, bạn sẽ liên kết các trang web của mình với một bên ngoài. css, tệp này có thể được tạo bởi bất kỳ trình soạn thảo văn bản nào trong thiết bị của bạn [e. g. , Sổ tay ++]

Loại CSS này là một phương pháp hiệu quả hơn, đặc biệt là để tạo kiểu cho một trang web lớn. Bằng cách chỉnh sửa một. css, bạn có thể thay đổi toàn bộ trang web của mình cùng một lúc

Làm theo các bước sau để sử dụng CSS bên ngoài

1. Tạo một cái mới. css bằng trình soạn thảo văn bản và thêm quy tắc kiểu. Ví dụ

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}

1. In the section of your HTML sheet, add a reference to your external .css file right after tag:

Đừng quên thay đổi phong cách. css với tên của bạn. tệp css

Ưu điểm của CSS bên ngoài

• Vì mã CSS nằm trong một tài liệu riêng nên tệp HTML của bạn sẽ có cấu trúc rõ ràng hơn và kích thước nhỏ hơn
• Bạn có thể sử dụng cùng một. tệp css cho nhiều trang

Nhược điểm của CSS bên ngoài

• Các trang của bạn có thể không được hiển thị chính xác cho đến khi CSS bên ngoài được tải
• Tải lên hoặc liên kết đến nhiều tệp CSS có thể làm tăng thời gian tải xuống trang web của bạn

CSS nội tuyến

CSS nội tuyến được sử dụng để tạo kiểu cho một phần tử HTML cụ thể. Đối với kiểu CSS này, bạn chỉ cần thêm thuộc tính kiểu vào từng thẻ HTML mà không cần sử dụng bộ chọn

Loại CSS này không thực sự được khuyến nghị vì mỗi thẻ HTML cần được tạo kiểu riêng. Việc quản lý trang web của bạn có thể trở nên quá khó khăn nếu bạn chỉ sử dụng CSS nội tuyến

Tuy nhiên, CSS nội tuyến trong HTML có thể hữu ích trong một số trường hợp. Ví dụ: trong trường hợp bạn không có quyền truy cập vào tệp CSS hoặc chỉ cần áp dụng kiểu cho một phần tử

Let’s take a look at an example. Here, we add an inline CSS to the

and

tag:

Hostinger Tutorials
Something usefull here.

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

• Bạn có thể dễ dàng và nhanh chóng chèn các quy tắc CSS vào trang HTML. Đó là lý do tại sao phương pháp này 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 cho trang web của bạn
• Bạn không cần phải tạo và tải lên một tài liệu riêng như ở kiểu bên ngoài

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

• Việc thêm các quy tắc CSS vào mọi phần tử HTML rất tốn thời gian và làm cho cấu trúc HTML của bạn trở nên lộn xộn
• Việc tạo kiểu cho nhiều thành phần có thể ảnh hưởng đến kích thước trang và thời gian tải xuống của bạn

Phần kết luận

Trong hướng dẫn này, bạn đã học được sự khác biệt giữa ba loại CSS. nội bộ, bên ngoài và nội tuyến. Đây là bản tóm tắt

• Internal or embedded ⁠— add tag in the section of HTML document
• Bên ngoài ⁠— liên kết trang tính HTML với một trang tính riêng biệt. tập tin css
• Nội tuyến ⁠— áp dụng các quy tắc CSS cho các phần tử cụ thể

Vì vậy, bạn sẽ sử dụng kiểu CSS nào?

Đảm bảo trang web của bạn có thể xử lý mọi thứ – từ lưu lượng truy cập cao đến thời gian tải nhanh, v.v. Mua dịch vụ lưu trữ web

Tác giả

Domantas G

Domantas dẫn dắt các nhóm nội dung và SEO về phía trước với những ý tưởng mới và phương pháp tiếp cận vượt trội. Được trang bị kiến ​​thức sâu rộng về SEO và tiếp thị, anh đặt mục tiêu quảng bá Hostinger đến mọi nơi trên thế giới. Trong thời gian rảnh rỗi, Domantas thích trau dồi kỹ năng phát triển web của mình và đi du lịch đến những nơi xa lạ

Tại sao bạn không nên sử dụng CSS nội tuyến?

Tại sao các kiểu CSS nội tuyến không được khuyến khích?

CSS nội tuyến có ảnh hưởng xấu đến hiệu suất không?

Bạn có nên sử dụng CSS nội tuyến không?