Trong khi phát triển một trang web, chúng tôi có thể thêm các kiểu theo nhiều cách khác nhau. Chúng ta có thể viết các kiểu css trong tệp css và nhập nó vào tệp html, viết trong thẻ của hoặc viết kiểu nội tuyến trong mỗi phần tử của . Tôi muốn chia sẻ một số vấn đề với kiểu dáng nội tuyến
Thiếu khả năng tái sử dụng
Sử dụng cùng một lớp css nhiều lần phải là một trong những mục tiêu chính trong việc thêm phong cách cho trang web. Khi dự án của chúng tôi trở nên lớn hơn nếu chúng tôi không sử dụng cùng một lớp cho cùng một loại kiểu, thì có khả năng viết các kiểu dư thừa làm cho dự án lớn hơn một cách không cần thiết. Nếu chúng ta viết kiểu nội tuyến, chúng ta không bao giờ có thể sử dụng nó nhiều lần, điều này sẽ phá vỡ nguyên tắc DRY
Không thể sử dụng bộ chọn css
Chúng tôi không thể sử dụng bộ chọn css trong khi viết kiểu nội tuyến. Các bộ chọn như before, after, hover, focus, v.v. rất hữu ích cho việc tạo kiểu mà chúng ta không thể sử dụng trong kiểu nội tuyến
Khó khăn trong khả năng đọc mã
Trong một tệp html lớn sẽ có rất nhiều phần tử. Ngoài ra, nếu có các kiểu nội tuyến thì sẽ rất khó để ai đó đọc và hiểu mã html đó. Kiểu nội tuyến cản trở khả năng đọc mã rất nhiều
Thiếu văn bản truy vấn phương tiện truyền thông
Các nhà phát triển web ngày nay phải làm cho trang web phản hồi nhanh. Để làm cho trang web phản hồi nhanh, viết media queries là điều bắt buộc khi các quy tắc css khác nhau được áp dụng dựa trên chiều rộng màn hình. Kiểu nội tuyến không bao giờ cho phép chúng tôi làm điều đó
Vấn đề bảo trì
Giả sử bạn đang xử lý một tệp html chứa các kiểu css nội tuyến. Trong trường hợp đó, bạn phải đối mặt với những khó khăn trong việc gỡ lỗi và thêm mã mới có thể được phục hồi bằng cách đi tới lớp phần tử trong biểu định kiểu css rất dễ dàng
Không có phạm vi lưu trữ
Trình duyệt lưu các biểu định kiểu bên ngoài vào bộ đệm để các biểu định kiểu bên ngoài có thể được tải dễ dàng để hiển thị thêm nhưng các kiểu nội tuyến không thể được lưu vào bộ nhớ cache vì các kiểu này nằm trong đoạn mã html. Vì vậy, mỗi khi bạn truy cập một trang web, các kiểu nội tuyến cần được tải bằng html
Tất cả những vấn đề này được nhìn thấy khi sử dụng kiểu nội tuyến. Nếu dự án lớn hơn, sử dụng kiểu nội tuyến không phải là một ý tưởng hay. Kiểu nội tuyến có thể tải css nhanh hơn, điều này không đáng kể. Tuy nhiên, chúng ta có thể sử dụng các kiểu nội tuyến trong các dự án nhỏ hơn
Bạn có thể áp dụng các nguyên tắc về kiểu dáng cho các thành phần HTML cụ thể bằng cách sử dụng CSS nội tuyến. Thay vì sử dụng CSS bên ngoài, CSS nội tuyến liên quan đến việc bao gồm CSS trong tệp HTML. Mặc dù việc sử dụng nó bị hạn chế, nhưng CSS nội tuyến rất hữu ích để xác định các đặc điểm duy nhất vì nó cho phép triển khai một kiểu cụ thể cho một phần tử HTML
Khi CSS được sử dụng, một đoạn mã được đưa thẳng vào nơi nó sẽ được sử dụng. Điều này tăng tốc độ mã hóa, khiến việc tải trang diễn ra nhanh chóng.
CSS nội tuyến là gì?
Cascading Style Sheets xác định giao diện của các trang web chứa các phần tử HTML [CSS]. Nó thay đổi bảng màu, kích thước phông chữ và các yếu tố khác của trang web
Sau đây là ba loại CSS
- CSS nội tuyến
- CSS nội bộ hoặc nhúng
- CSS bên ngoài
CSS nội tuyến
CSS nội tuyến là một biểu định kiểu bao gồm thuộc tính CSS trong nội dung của một phần tử. Thuộc tính kiểu của thẻ HTML được sử dụng để chỉ định loại kiểu này
CSS nội bộ hoặc nhúng
Điều này có thể được sử dụng khi chỉ một phần tử HTML yêu cầu được tạo kiểu khác. Vì quy tắc CSS tương ứng trong phần đầu của tệp HTML nên nó được chèn vào đó
CSS bên ngoài
CSS bên ngoài chứa tệp CSS thứ hai chỉ chứa thuộc tính kiểu khi thuộc tính thẻ được sử dụng. Các thuộc tính CSS được liên kết với tệp HTML bằng thẻ liên kết và được lưu trữ trong một hệ thống tệp riêng biệt với. hậu tố css. Điều này có nghĩa là chỉ có thể chọn một kiểu cho mỗi phần tử và kiểu đó sẽ được áp dụng trên tất cả các trang web
Vì phải tải xuống ít tệp hơn để trình duyệt hiển thị trang web, CSS nội tuyến được coi là thuận lợi. Trình duyệt tải tệp HTML trước khi sử dụng CSS bên ngoài và sau đó tải xuống tệp CSS. Quy trình được tăng tốc bằng cách sử dụng CSS nội tuyến, chỉ yêu cầu tải xuống một tệp HTML thay vì hai tệp
Sự khác biệt giữa CSS nội tuyến và nội bộ là gì?
Kiểu nội tuyến áp dụng thuộc tính kiểu cùng với quy tắc CSS cho thẻ HTML cụ thể để tạo kiểu cho một thành phần trang cụ thể. Vì mọi kiểu nội tuyến bạn tạo phải được sửa đổi độc lập nếu bạn muốn thực hiện thay đổi thiết kế, chúng kém linh hoạt hơn biểu định kiểu nội bộ nhưng tuyệt vời để sửa đổi nhanh và lâu dài
Phần tiêu đề của tài liệu HTML có biểu định kiểu bên trong chứa các quy tắc CSS của trang. Các quy tắc chỉ áp dụng cho trang đó, mặc dù có khả năng thiết lập kiểu CSS và ID trong mã trang để tạo kiểu cho các thành phần khác nhau. Một lần nữa, một thay đổi duy nhất đối với quy tắc CSS sẽ ảnh hưởng đến mọi thành phần quan trọng của trang
“Biểu định kiểu được nhúng”, còn được gọi là CSS nội tuyến, sẽ được ưu tiên hơn bất kỳ CSS nào khác nhắm mục tiêu cùng thành phần. Các trình duyệt xác định rằng các khai báo CSS nội tuyến phù hợp nhất và nên được sử dụng vì chúng giống với HTML nhất. Do đó, nó có lợi khi nhắm mục tiêu một thành phần duy nhất với các đặc điểm kiểu cụ thể, nhưng nên bỏ qua nó khi có thể sử dụng CSS bên trong hoặc bên ngoài để thay thế
Inline CSS appears one way, and internal CSS looks another. A CSS property and value are still set, but now they are enclosed in brackets and specified by a CSS selector rather than being contained within a style attribute. This rule set is then contained within the tags and is located in the HTML file’s head section.
Khi nào nên sử dụng CSS nội tuyến?
Kiểu nội tuyến có thể được sử dụng cho các kiểu tạm thời không nhằm mục đích chia sẻ với các phần tử khác hoặc cho các mô hình hoặc nguyên mẫu HTML / CSS ngắn. Chúng cũng có thể hữu ích khi bạn cần một bản sửa lỗi ngắn trong khi bạn giải quyết các sự cố cục bộ;
Một trong nhiều lợi ích của CSS nội tuyến là nó ngăn trình duyệt web của bạn phải tải xuống một tệp bên ngoài bổ sung bằng cách đặt CSS trong phần đầu của HTML. Nó tránh quay đi quay lại trình duyệt
Để làm cho trang đích hoặc trang chủ tải nhanh hơn và được xem thành công, bạn nên nội tuyến CSS.
kết thúc
Màu sắc, phông chữ, kích thước, khoảng cách giữa các thành phần, vị trí của các thành phần, hình nền, màu nền, các cách hiển thị khác nhau cho các màn hình và thiết bị khác nhau, v.v. đều có thể được kiểm soát bằng CSS
Để áp dụng một kiểu cụ thể cho một phần tử HTML, hãy sử dụng CSS nội tuyến. Nó sử dụng thuộc tính style của phần tử HTML. Quá trình hiển thị của trang web trong trình duyệt bị chậm khi các biểu định kiểu bên ngoài được tải xuống. Vì trình duyệt không bắt buộc phải dừng để tải xuống biểu định kiểu bên ngoài trước khi bắt đầu hiển thị trang, CSS nội tuyến sẽ tăng tốc quá trình này
Tôi có thể học CSS ở đâu?
Có rất nhiều tài nguyên có thể dạy bạn CSS. Code Institute dạy nó như một phần của chương trình Phát triển Full-Stack của chúng tôi. Nếu bạn muốn tìm hiểu miễn phí một số kiến thức cơ bản, hãy thử Thử thách lập trình 5 ngày miễn phí của chúng tôi. Chỉ sau một giờ mỗi ngày trong năm ngày, bạn sẽ tạo được trang web đầu tiên của mình. Đăng ký ngay hôm nay thông qua biểu mẫu bên dưới và thực hiện những bước đầu tiên của bạn để trở thành một lập trình viên.