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ẻ Show
Thiếu khả năng tái sử dụngSử 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 Không thể sử dụng bộ chọn cssChú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ư 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ôngCá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 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ếnCSS 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àiCSS 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úcMà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. Tôi có nên tránh CSS nội tuyến không?Một trong những lý do chính khiến kiểu dáng nội tuyến không phải là lựa chọn tốt cho ứng dụng của bạn là vì kiểu dáng nội tuyến không hỗ trợ (hoặc hỗ trợ thực sự kém) cho các tính năng CSS. Every application nowadays might have to end up using some selectors such as :hover , :active , :focused , etc.
Tại sao việc thêm CSS nội tuyến không được khuyến khích?Lý do kỹ thuật chính là do nếu bạn sử dụng cùng một kiểu dáng ở hai vị trí trở lên trên các trang của mình, thì mã CSS nội tuyến giống nhau sẽ cần tồn tại trong nhiều bản sao. This in turn would make maintenance, especially changes to styling, essentially more difficult.
Có gì sai với CSS nội tuyến?Tại sao bạn không nên tạo kiểu nội tuyến . Nội dung được trộn lẫn với thiết kế. Kiểu nội tuyến xuất hiện trực quan tương tự như nội dung trang web, khiến chúng rất khó xác định. . Bảo trì phức tạp hơn. . Kiểu nội tuyến giới hạn khả năng truy cập. . Kiểu nội tuyến có thể làm cho trang của bạn chậm hơn. . CSS nội tuyến không thể được sử dụng lại. . CSS nội tuyến khó đọc CSS nội tuyến hay nội bộ tốt hơn?Sử dụng CSS nội bộ được coi là một phương pháp tốt hơn so với sử dụng CSS nội tuyến . CSS nội bộ cho phép bạn tạo kiểu cho các nhóm phần tử cùng một lúc — thay vì phải thêm đi thêm lại các thuộc tính kiểu giống nhau cho các phần tử. |