CSS nội tuyến

Quy tắc kiểu có thể được áp dụng cho các phần tử HTML riêng lẻ bằng cách sử dụng CSS nội tuyến. Nội tuyến CSS là quá trình nhúng CSS vào tệp HTML thay vì sử dụng tệp CSS bên ngoài. Vì CSS nội tuyến chỉ cho phép chúng tôi áp dụng một kiểu duy nhất cho một phần tử HTML, nên nó chỉ hữu ích để thiết lập các thuộc tính duy nhất. CSS nội tuyến có lợi vì nó làm giảm số lượng tệp mà trình duyệt phải tải xuống trước khi trang web có thể được hiển thị. Trình duyệt tải tệp HTML trước, sau đó tải xuống tệp CSS khi sử dụng CSS bên ngoài. Chúng tôi chỉ cần tải xuống một tệp HTML thay vì hai tệp bằng cách sử dụng CSS nội tuyến, giúp tăng tốc quá trình

Các kiểu nội tuyến sẽ chỉ ảnh hưởng đến phần tử HTML mà thuộc tính kiểu với các giá trị thuộc tính CSS được áp dụng. Đoạn đầu tiên trong ví dụ bên dưới sẽ được tạo kiểu màu đỏ với cỡ chữ 20px. Các thuộc tính chỉ áp dụng cho dòng đầu tiên của mã, không phải mã đầy đủ

ví dụ 1

Đây là mã HTML đầu tiên của chúng tôi.

Đây là mã HTML thứ hai của chúng ta

ví dụ 2

Đây là mã HTML

Đây là mã HTML với CSS nội tuyến.

Tuy nhiên, sử dụng kiểu nội tuyến thường được cho là một ý tưởng tồi. Vì các quy tắc kiểu dáng được chèn trực tiếp vào thẻ HTML, nên phần trình bày của tài liệu trở nên xen lẫn với nội dung của tài liệu, khiến cho mã khó bảo trì và đánh bại mục đích của CSS

Khóa học mới. Phát triển Full Stack cho người mới bắt đầu

CSS nội bộ

Internal CSS is one of the most popular CSS forms for updating, customizing, and modifying a single web page's unique styles. You can use the internal CSS by integrating the   

CSS nội bộ được áp dụng cho tiêu đề này, vì vậy nó sẽ hiển thị một số hình thức độc đáo.

Đoạn này sẽ không bị ảnh hưởng vì CSS nội bộ không được áp dụng cho đoạn này.

ví dụ 2

<. LOẠI TÀI LIỆU html>

<đầu>

P {

màu. bột màu xanh;

}

Bản trình diễn CSS nội bộ

Màu văn bản mặc định cho trang là màu đen. Tuy nhiên, chúng ta có thể thay đổi màu sắc của mọi thành phần đoạn văn trên trang bằng cách sử dụng CSS bên trong.

Sử dụng CSS nội bộ, chúng ta chỉ cần viết một bộ quy tắc để thay đổi màu sắc của mỗi đoạn elemnet.

Với CSS nội tuyến, chúng tôi phải thêm thuộc tính kiểu vào từng đoạn trong HTML của mình.

Khóa học Full Stack Web Developer

CSS bên ngoài

External CSS is one of the most often used CSS forms for updating, styling, and adjusting the different styles in a large number of HTML web pages at the same time. There are two ways to include an external style sheet in an HTML document. One method is to use the tag in the HTML document head. Another option is to use a combination of external CSS functions and integrated CSS. 

Một trong những đặc điểm nổi bật của CSS bên ngoài là nó có thể được viết trong bất kỳ trình soạn thảo văn bản nào, nhưng nó phải luôn được lưu với. css và không được chứa bất kỳ phần tử HTML nào

Chúng tôi sử dụng biểu định kiểu bên ngoài khi chúng tôi cần thay đổi nhiều trang. Nó lý tưởng cho trường hợp này vì nó cho phép chúng tôi thay đổi giao diện của toàn bộ trang web chỉ bằng một lần thay đổi tệp. Nó rất hữu ích khi làm việc trên các dự án lớn hoặc một số trang web HTML

We must define the filename of the CSS sheet with the "mystyle.css" extension within the element within the section of the HTML page to use external CSS:

<. LOẠI TÀI LIỆU html>

<đầu>

Đây là tiêu đề

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

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

Trong tệp này, chúng tôi có thể viết mã CSS hoàn chỉnh của mình để tạo kiểu cho trang web HTML

ví dụ 1

thân thể {

màu nền. bột màu xanh;

}

chủ yếu {

căn chỉnh văn bản. trung tâm;

}

Bên lề {

màu. #009900;

cỡ chữ. 40px;

trọng lượng phông chữ. in đậm;

}

#thay1 {

kiểu chữ. in đậm;

cỡ chữ. 25px;

}

ví dụ 2

thân thể {

màu nền. xanh nhạt;

}

h1 {

màu. Hải quân;

lề trái. 20px;

}

khóa học miễn phí. Nguyên tắc cơ bản về lập trình

Sử dụng các loại CSS khác nhau

CSS nội tuyến có lợi vì nó làm giảm số lượng tệp mà trình duyệt phải tải xuống trước khi trang web có thể được hiển thị. Trình duyệt tải tệp HTML trước, sau đó tải xuống tệp CSS khi sử dụng CSS bên ngoài. Chúng tôi chỉ cần tải xuống một tệp HTML thay vì hai tệp bằng cách sử dụng CSS nội tuyến, giúp tăng tốc quá trình.  

Dưới đây là một vài ưu điểm khác của việc sử dụng CSS nội tuyến

• Hạ thấp yêu cầu HTTP. Ưu điểm chính của việc sử dụng CSS nội tuyến là nó yêu cầu ít yêu cầu HTTP hơn, nghĩa là trang tải nhanh hơn so với khi sử dụng CSS bên ngoài
• cho mục đích thử nghiệm. Khi làm việc với các dự án mới, nhiều nhà thiết kế web chọn sử dụng Inline CSS vì nó dễ cuộn lên trong nguồn hơn là thay đổi tệp nguồn. Một số người sử dụng nó để gỡ lỗi trang web của họ nếu họ gặp sự cố không thể khắc phục dễ dàng. Điều này có thể được sử dụng cùng với quy tắc quan trọng của CSS

Vì CSS nội bộ có mức độ ưu tiên cao hơn CSS nội tuyến về mặt sử dụng. Có một số lợi ích, một số trong đó được liệt kê dưới đây

• Sự cố bộ đệm. Trừ khi chúng bị hack để ẩn khỏi một số trình duyệt nhất định, tất cả các kiểu nội bộ sẽ được đọc bởi tất cả chúng. Điều này vô hiệu hóa việc sử dụng media=all hoặc @import để ẩn kiểu trong các trình duyệt cũ kỹ, vụng về như IE4 và NN4
• Yếu tố giả. Không thể sử dụng kiểu nội tuyến để tạo kiểu cho các phần tử hoặc lớp giả. Biểu định kiểu nội bộ cho phép chúng tôi tùy chỉnh màu của trạng thái đã truy cập, di chuột, hoạt động và liên kết của thẻ neo
• Không tải xuống bổ sung. Chúng tôi không cần bất kỳ lượt tải xuống bổ sung nào để nhận thông tin về kiểu và chúng tôi có ít yêu cầu HTTP hơn

When a style is applied to a large number of pages, an external style sheet is perfect. We can modify the look of an entire website by changing one file with an external style sheet. The tag must be used on each page to link to the style sheet. Here are some of its advantages:

• Toàn quyền kiểm soát cấu trúc trang. CSS cho phép chúng tôi hiển thị trang web của mình theo các tiêu chuẩn HTML của W3C mà không ảnh hưởng đến giao diện của trang. Google là công cụ tìm kiếm phổ biến nhất và là nguồn lưu lượng truy cập chính. Vì Google đánh giá thấp các trang web được tổ chức tốt nên nhiều nhà thiết kế đã bỏ qua chúng. Tuy nhiên, đặt giá trị thấp cho bất kỳ thứ gì có thể dẫn đến nhiều lưu lượng truy cập vào trang web
• Giảm kích thước tệp. Chúng tôi có thể giảm đáng kể kích thước tệp của các trang của mình bằng cách thêm kiểu văn bản vào một tệp riêng. Hơn nữa, so với các trang HTML đơn giản, tỷ lệ nội dung trên mã cao hơn nhiều, làm cho cấu trúc trang dễ đọc hơn đối với cả lập trình viên và trình thu thập dữ liệu. Thay vì sử dụng hình ảnh, chúng ta có thể sử dụng CSS để xác định tác động trực quan mà chúng ta muốn áp dụng cho chúng. Không gian chúng tôi lưu theo cách này có thể được sử dụng cho văn bản thân thiện với nhện (tôi. e. , từ khóa) và chúng tôi cũng sẽ giảm kích thước tải xuống của trang

Thuộc tính của CSS

Phần về xếp tầng là rất quan trọng. Xếp tầng có nghĩa là các kiểu có thể kế thừa và ghi đè các kiểu đã được chỉ định trước đó

CSS Nội bộ/Được nhúng có tầm quan trọng cao nhất, tiếp theo là CSS Bên ngoài, có mức độ ưu tiên thấp nhất. Trên một trang, chúng ta có thể khai báo nhiều style sheet. Nếu nhiều biểu định kiểu mô tả các kiểu cho thẻ HTML, thì thứ tự được liệt kê bên dưới sẽ được sử dụng

• 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 vì Nội tuyến có mức độ ưu tiên cao nhất
• CSS nội bộ là tùy chọn quan trọng thứ hai và nó được ưu tiên hơn các kiểu trong biểu định kiểu bên ngoài
• Các biểu định kiểu bên ngoài được coi là ít quan trọng nhất. Nếu không có kiểu nào được xác định trong biểu định kiểu bên trong hoặc bên trong, các thẻ HTML sẽ được tạo kiểu bằng cách sử dụng các quy tắc biểu định kiểu bên ngoài

Tùy chỉnh trang web của chúng tôi bằng CSS

Cascading Style Sheets (CSS) là một cách để đưa ra các hướng dẫn thẩm mỹ cho mã back-end của trang web của chúng tôi. Nó làm cho nó đơn giản để thay đổi sự xuất hiện của trang web của chúng tôi. Chúng tôi có thể nhanh chóng và dễ dàng áp dụng CSS cho trang web của mình bằng cách sử dụng bất kỳ cách nào ở trên để phù hợp với giao diện. Mã trang web là ngôn ngữ thông báo cho trình duyệt của chúng tôi chính xác cách trang web sẽ xuất hiện và hoạt động. HTML (ngôn ngữ đánh dấu siêu văn bản) là ngôn ngữ mã hóa được sử dụng rộng rãi nhất. Nó là một loại mã cho biết những yếu tố nào có sẵn trên một trang web. Theo HTML, CSS là một phần mở rộng HTML chỉ định các hướng dẫn tạo kiểu cụ thể. CSS được sử dụng để chỉ định màu của tiêu đề hoặc phông chữ mà văn bản của chúng ta sẽ được viết. CSS cho phép chúng tôi cá nhân hóa giao diện trang web của mình và đưa ra các đánh giá về phong cách trên toàn diện. Nó đảm bảo rằng sự xuất hiện của trang web của chúng tôi là nhất quán

Nâng cao sự nghiệp của bạn với tư cách là nhà phát triển MEAN stack với Nhà phát triển Web Full Stack - Chương trình Thạc sĩ MEAN Stack. đăng ký ngay bây giờ

Phần kết luận

CSS chỉ định cách một trang sẽ xuất hiện với trình duyệt, sau đó trình duyệt sẽ hiển thị trang đó theo cách đó. Nó được sử dụng để thay đổi màu của văn bản và nền trên một trang, xóa phần gạch dưới khỏi các liên kết và tạo hiệu ứng động cho hình ảnh, văn bản và các thành phần HTML khác, trong số những thứ khác và chúng tôi có thể triển khai tất cả các tính năng này trên bất kỳ trang web nào bằng các loại khác nhau . Trong bài viết trên, chúng ta đã thảo luận mọi thứ về tất cả các loại CSS (nội tuyến, nội bộ, bên ngoài CSS) và cách sử dụng nó với HTML để tùy chỉnh bất kỳ trang web nào. Chúng tôi hy vọng rằng bài viết này có thể cung cấp cho bạn kiến ​​thức toàn diện về CSS và cách sử dụng nó cũng như cách chúng ta có thể sử dụng nó để phát triển cấu trúc của bất kỳ trang web nào và tạo kiểu cho nó

Nếu bạn muốn tìm hiểu thêm về React JS và các khái niệm liên quan khác, bạn có thể đăng ký Khóa học Chứng chỉ Phát triển Web Full Stack độc quyền của Simplilearn và đẩy nhanh sự nghiệp của bạn với tư cách là nhà phát triển phần mềm. Chương trình bao gồm nhiều khóa học phát triển phần mềm khác nhau, từ các nguyên tắc cơ bản đến các chủ đề nâng cao.  

Simplilearn cũng cung cấp các khóa học nâng cao kỹ năng trực tuyến miễn phí trong một số lĩnh vực, từ khoa học dữ liệu và phân tích kinh doanh đến phát triển phần mềm, trí tuệ nhân tạo và máy học. Bạn có thể tham gia bất kỳ khóa học nào trong số này để nâng cao kỹ năng và thăng tiến trong sự nghiệp của mình