Phong cách CSS có thể được sử dụng để thiết kế trang web của bạn. Bạn có thể áp dụng các quy tắc CSS vào trang web của bạn các tệp HTML bằng cách sử dụng biểu định kiểu nội tuyến, biểu định kiểu bên trong hoặc biểu định kiểu bên ngoài. Mỗi phương pháp này có những ưu điểm phù hợp với việc sử dụng cụ thể.inline style, internal stylesheet, or external stylesheet. Each of these methods has advantages that suit particular uses.
Hãy cùng xem sự khác biệt giữa CSS nội tuyến, nội bộ và bên ngoài, và sau đó chúng tôi sẽ tìm hiểu cách sử dụng từng loại.
Các kiểu nội tuyến liên quan đến một thẻ HTML cụ thể, sử dụng thuộc tính kiểu có quy tắc CSS để tạo kiểu cho một phần tử trang cụ thể. Chúng rất hữu ích cho những thay đổi nhanh chóng và vĩnh viễn nhưng kém linh hoạt hơn các kiểu dáng bên ngoài và bên trong, vì mỗi kiểu nội tuyến bạn tạo phải được chỉnh sửa riêng nếu bạn thực hiện thay đổi thiết kế. relate to a specific HTML tag, using a style attribute with a CSS rule to style a particular page element. They’re useful for quick and permanent changes but are less flexible than external and internal stylesheets, as each inline style you create must be edited separately if you’re making a design change.
Một biểu định kiểu nội bộ chứa các quy tắc CSS cho trang trong phần đầu của tệp HTML. Các quy tắc chỉ áp dụng cho trang đó, nhưng bạn có thể định cấu hình các lớp CSS và ID để tạo kiểu cho nhiều yếu tố trong mã trang. Một lần nữa, một thay đổi duy nhất cho quy tắc CSS sẽ áp dụng cho tất cả các yếu tố trang được gắn thẻ.internal stylesheet holds CSS rules for the page in the head section of the HTML file. The rules only apply to that page, but you can configure CSS classes and IDs to style multiple elements in the page code. Again, a single change to the CSS rule will apply to all tagged page elements.
Một bảng kiểu bên ngoài là tệp .CSS độc lập được liên kết từ một trang web. Sử dụng các bảng kiểu bên ngoài, bạn có thể áp dụng các quy tắc cho nhiều trang web. Nếu bạn cần thực hiện các thay đổi rộng rãi đối với thiết kế trang web của mình, một thay đổi duy nhất trong bảng kiểu có thể được áp dụng cho tất cả các trang được liên kết, tiết kiệm nhiều thời gian và công sức. external stylesheet is a standalone .css file linked from a web page. Using external stylesheets, you can apply rules to multiple web pages. If you ever need to make widespread changes to your website design, a single change in the stylesheet can be applied to all linked pages, saving lots of time and effort.
Sử dụng kiểu nội tuyến
Các kiểu nội tuyến được áp dụng trực tiếp cho một phần tử trong mã HTML của bạn. Họ sử dụng thuộc tính phong cách, tiếp theo là các thuộc tính CSS thông thường.style attribute, followed by regular CSS properties.
Ví dụ:
Today’s Update
Sử dụng các kiểu dáng CSS nội bộ
Thay vì liên kết một tệp .CSS bên ngoài, các tệp HTML với bảng kiểu bên trong bao gồm một tập hợp các quy tắc trong phần đầu của chúng. Các quy tắc CSS được bọc trong các thẻ, như thế này:css file, HTML files with an internal stylesheet include a set of rules in their head section. CSS rules are wrapped in tags, like this:
h2 {
color:#fff
margin-left: 20px;
}
p {
font-family: Arial, Helvetica, Sans Serif;
}
Sử dụng các kiểu dáng CSS bên ngoài
Một trang HTML được tạo kiểu theo kiểu CSS bên ngoài phải tham chiếu tệp .css trong đầu tài liệu. Khi bạn tạo tệp CSS, nó phải được tải lên máy chủ của bạn và được liên kết trong tệp HTML với mã, ví dụ:css file in the document head. Once you create the CSS file, it must be uploaded to your server and linked in the HTML file with code, for example:
Ví dụ:
Sử dụng các kiểu dáng CSS nội bộcss file extension.
Thay vì liên kết một tệp .CSS bên ngoài, các tệp HTML với bảng kiểu bên trong bao gồm một tập hợp các quy tắc trong phần đầu của chúng. Các quy tắc CSS được bọc trong các thẻ, như thế này:open a support ticket from your dashboard.
TL; DR - Có ba tùy chọn cho các yếu tố HTML kiểu dáng. Bạn có thể tạo kiểu cho các phần tử HTML bằng cách sử dụng CSS nội tuyến. CSS nội bộ là dành cho tạo kiểu toàn bộ trang. Biểu đồ bên ngoài có thể đặt các quy tắc cho toàn bộ trang web khi bạn biết cách liên kết HTML với CSS.
Tùy chọn cho các phần tử HTML kiểu dáng
CSS nội tuyến cho phép bạn thêm các kiểu vào các phần tử HTML cụ thể. Biểu đồ CSS nội bộ cho phép bạn đưa mã CSS vào phần của một tài liệu đánh dấu.External Style Sheet hoạt động bằng cách liên kết tệp .css, chứa tất cả các quy tắc CSS, với tài liệu HTML. allows you to add styles to specific HTML elements.
The internal CSS stylesheet allows you to include CSS code in
section of a markup document.
External stylesheet works by linking a .css file, containing all the CSS rules, to an HTML document.
CSS nội tuyến
Bạn có thể sử dụng CSS kiểu nội tuyến để sửa đổi các phần tử HTML. Nó sử dụng thuộc tính style.
CẢNH BÁO: Kiểu dáng CSS nội tuyến không phải là một thực hành tốt. Rất khó để quản lý và cập nhật. Ngoài ra, việc kết hợp HTML với CSS dẫn đến mã lộn xộn và khó đọc. inline CSS styling is not a good practice. It is difficult to manage and update. Additionally, combining HTML with CSS leads to messy and difficult-to-read code.
Thí dụ
This is a paragraph.
Lưu ý: Sử dụng CSS nội tuyến để thực hiện các sửa đổi nhỏ cho các yếu tố của bạn. Tuy nhiên, hãy xem xét các thực tiễn khác là phương pháp tạo kiểu chính. use inline CSS to make minor modifications to your elements. However, consider other practices as the main styling method.
CSS nội bộ
Một cách khác để bao gồm CSS trong HTML là sử dụng bảng kiểu nội bộ. Nó chứa các quy tắc CSS cho toàn bộ trang. Phần tử chứa một khối quy tắc kiểu dáng và được đặt trong phần tử của các tệp HTML.entire page. The element contains a block of styling rules and is placed in the
element of HTML files.
Thí dụ
h2 {
color: red;
margin-left: 20px;
}
p {
color: blue;
}
Lưu ý: Sử dụng CSS nội tuyến để thực hiện các sửa đổi nhỏ cho các yếu tố của bạn. Tuy nhiên, hãy xem xét các thực tiễn khác là phương pháp tạo kiểu chính. this stylesheet is applied to style HTML documents, meaning that it changes individual pages. Pages styled with internal CSS load slower than with other options.
CSS nội bộ
- Một cách khác để bao gồm CSS trong HTML là sử dụng bảng kiểu nội bộ. Nó chứa các quy tắc CSS cho toàn bộ trang. Phần tử
chứa một khối quy tắc kiểu dáng và được đặt trong phần tửcủa các tệp HTML. - LƯU Ý: Hiển thị kiểu này được áp dụng cho các tài liệu HTML kiểu, có nghĩa là nó thay đổi các trang riêng lẻ. Các trang được tạo kiểu với tải CSS bên trong chậm hơn so với các tùy chọn khác.
- Ưu điểm
Thiết kế đơn giản [không có thông tin không cần thiết]
- Các khóa học chất lượng cao [ngay cả những khóa học miễn phí]
- Nhiều tính năng
- Những đặc điểm chính
CSS nội bộ
- Một cách khác để bao gồm CSS trong HTML là sử dụng bảng kiểu nội bộ. Nó chứa các quy tắc CSS cho toàn bộ trang. Phần tử
chứa một khối quy tắc kiểu dáng và được đặt trong phần tửcủa các tệp HTML. - LƯU Ý: Hiển thị kiểu này được áp dụng cho các tài liệu HTML kiểu, có nghĩa là nó thay đổi các trang riêng lẻ. Các trang được tạo kiểu với tải CSS bên trong chậm hơn so với các tùy chọn khác.
- Ưu điểm
Thiết kế đơn giản [không có thông tin không cần thiết]
- Các khóa học chất lượng cao [ngay cả những khóa học miễn phí]
- Nhiều tính năng
- Những đặc điểm chính
CSS nội bộ
- Một cách khác để bao gồm CSS trong HTML là sử dụng bảng kiểu nội bộ. Nó chứa các quy tắc CSS cho toàn bộ trang. Phần tử
chứa một khối quy tắc kiểu dáng và được đặt trong phần tửcủa các tệp HTML. - LƯU Ý: Hiển thị kiểu này được áp dụng cho các tài liệu HTML kiểu, có nghĩa là nó thay đổi các trang riêng lẻ. Các trang được tạo kiểu với tải CSS bên trong chậm hơn so với các tùy chọn khác.
- Ưu điểm
Thiết kế đơn giản [không có thông tin không cần thiết]
- Những đặc điểm chính
- Các chương trình nanodegree
- Thích hợp cho các doanh nghiệp
Giấy chứng nhận hoàn thành được trả lương
Dễ điều hướng.css extension. You need to link it to an HTML document.
Thí dụ
h2 {
color: red;
margin-left: 20px;
}
p {
color: blue;
}
Lưu ý: Sử dụng CSS nội tuyến để thực hiện các sửa đổi nhỏ cho các yếu tố của bạn. Tuy nhiên, hãy xem xét các thực tiễn khác là phương pháp tạo kiểu chính.link HTML to CSS after you created the external stylesheet?
CSS nội bộ
Một cách khác để bao gồm CSS trong HTML là sử dụng bảng kiểu nội bộ. Nó chứa các quy tắc CSS cho toàn bộ trang. Phần tử
chứa một khối quy tắc kiểu dáng và được đặt trong phần tửcủa các tệp HTML. the .css file cannot have any HTML tags. Also, there is no set number for external CSS stylesheets that can be linked to HTML documents.
LƯU Ý: Hiển thị kiểu này được áp dụng cho các tài liệu HTML kiểu, có nghĩa là nó thay đổi các trang riêng lẻ. Các trang được tạo kiểu với tải CSS bên trong chậm hơn so với các tùy chọn khác.
Ưu điểmcascading rule. Number one has the highest priority:
- Thiết kế đơn giản [không có thông tin không cần thiết]
- Các khóa học chất lượng cao [ngay cả những khóa học miễn phí]
- Nhiều tính năng
Những đặc điểm chínhoverrides the style declared on the internal or external stylesheet for that element.
Các chương trình nanodegree the cascading rule can be useful whenever you're using an external .css file on a few pages and need to tweak one or two elements.
Thích hợp cho các doanh nghiệp
- Giấy chứng nhận hoàn thành được trả lươngbest practice for styling HTML documents is the external stylesheet. It lets you set CSS rules for several files and is very easy to update.
- Bạn có thể sử dụng bất kỳ trình soạn thảo văn bản nào để tạo bảng kiểu bên ngoài. Quá trình này tương tự như tạo một tệp HTML.text editor to create an external stylesheet. This process is similar to creating an HTML file.