Bạn có thể có nhiều kiểu CSS không?

Trong hướng dẫn CSS trước đây của chúng tôi, chúng tôi đã giới thiệu khái niệm Cascading Style Sheets và cách chúng có thể được sử dụng để thay đổi và nâng cao giao diện của các trang web HTML. Hướng dẫn này sẽ đề cập đến sự khác biệt chính giữa biểu định kiểu bên trong, bên ngoài và nhiều biểu định kiểu, cũng như cách tạo chúng

 

biểu định kiểu nội bộ

Một biểu định kiểu nội bộ được bao gồm trực tiếp trong tài liệu HTML. Bạn sẽ sử dụng biểu định kiểu nội bộ trong trường hợp bạn muốn chỉ định kiểu chỉ áp dụng cho một trang web; .

Internal CSS code must be placed in the section of the page you want to style. It must be enclosed between tags.

Để xem ví dụ, hãy tạo một thư mục mới có tên là css-test và thiết lập trang chỉ mục HTML mới với mã sau

 





Learning How To Use CSS



My CSS test

Text goes here

Text goes here

 

Khi được xem trong trình duyệt, trang web của bạn sẽ xuất hiện mà không có kiểu dáng, như sau

Bạn có thể có nhiều kiểu CSS không?
Bạn có thể có nhiều kiểu CSS không?

Now add the following internal CSS code after the opening tag:

 

 

Bạn có thể có nhiều kiểu CSS không?
Bạn có thể có nhiều kiểu CSS không?

Lưu tài liệu và làm mới trang của bạn và bạn sẽ thấy kiểu đã được áp dụng

Bạn có thể có nhiều kiểu CSS không?
Bạn có thể có nhiều kiểu CSS không?

Ghi chú. Khi sử dụng biểu định kiểu nội bộ cho một trang cụ thể, bạn sẽ không thể tham chiếu biểu định kiểu đó từ bất kỳ trang nào khác.

Một kiểu nội tuyến là một đoạn mã nội bộ mà bạn có thể sử dụng để thu hẹp hơn nữa và áp dụng một kiểu duy nhất cho một .

Để sử dụng các kiểu nội tuyến, bạn sẽ thêm thuộc tính kiểu chứa thuộc tính CSS vào phần tử có liên quan

For example, to make visual changes to the

element you would add the below code inside the

opening tag.

 

My CSS Test

 

Bạn có thể có nhiều kiểu CSS không?
Bạn có thể có nhiều kiểu CSS không?

Phần tử sẽ phản ánh kiểu này khi bạn lưu và làm mới

Bạn có thể có nhiều kiểu CSS không?
Bạn có thể có nhiều kiểu CSS không?

biểu định kiểu bên ngoài

Một biểu định kiểu bên ngoài là biểu định kiểu được tạo bên ngoài tài liệu HTML và được “đính kèm” vào tài liệu bằng mã. Điều này được sử dụng khi bạn muốn cho phép một biểu định kiểu kiểm soát sự xuất hiện của nhiều tài liệu.

Bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách chỉnh sửa chỉ một tệp. Điều này giúp tiết kiệm thời gian phát triển, thời gian tải xuống và không gian máy chủ

Tệp biểu định kiểu bên ngoài chỉ chứa cú pháp CSS, không có nội dung hoặc thành phần tài liệu. Bạn sẽ sử dụng các bộ chọn, đã được trình bày trong hướng dẫn CSS trước đó, để chỉ định kiểu nào gắn với phần nào của tài liệu.

Every HTML page must include a reference to the external style sheet file, which must be placed inside the element, within the section.

Ví dụ: xóa tất cả mã CSS nội bộ khỏi trang chỉ mục của bạn. Kiểu dáng của trang sẽ bị xóa

Sau đó, tạo và lưu một kiểu. css trong thư mục của bạn như bạn đã làm trong hướng dẫn CSS 1

Bạn có thể có nhiều kiểu CSS không?
Bạn có thể có nhiều kiểu CSS không?

 

Thêm mã này vào tệp CSS

 

body {
 background-color: gray;
}

h1 {
 color: green;
 margin-left: 40px;
}

 

Sau đó, áp dụng mã này vào tệp HTML của bạn để liên kết nó với tệp CSS

 

 

Bạn có thể có nhiều kiểu CSS không?
Bạn có thể có nhiều kiểu CSS không?

 

Khi lưu và làm mới, bạn sẽ thấy kiểu đó một lần nữa được phản ánh trên trang, lần này sử dụng thiết lập biểu định kiểu bên ngoài thay vì thiết lập bên trong

Bạn có thể có nhiều kiểu CSS không?
Bạn có thể có nhiều kiểu CSS không?

Nhiều biểu định kiểu

Điều gì xảy ra trong trường hợp một trang web có nhiều biểu định kiểu ? .

Vì vậy, giả sử rằng biểu định kiểu bên ngoài cho biết kiểu cho phần tử color. màu lam , trong khi biểu định kiểu nội bộ cho biết kiểu cho phần tử màu. xanh .

Nếu kiểu nội bộ được xác định trước liên kết đến biểu định kiểu bên ngoài, phần tử sau liên kết đến biểu định kiểu bên ngoài, phần tử

Sử dụng nhiều tệp CSS thay vì một tệp lớn có thể giúp bạn sắp xếp mọi thứ ngăn nắp khi làm việc trên một trang web lớn với nhiều yêu cầu về kiểu dáng. Ví dụ: bạn có thể muốn tạo kiểu cho một trang web cho nhiều thiết bị bao gồm cả thiết bị di động và việc áp dụng các kiểu khác nhau cho các tệp CSS riêng biệt có thể giúp mọi thứ gọn gàng hơn

Là nhà phát triển sử dụng nhiều biểu định kiểu, cách tốt nhất là sử dụng các lớp hoặc tên id khác nhau trong các tệp CSS khác nhau, nếu không, nó sẽ mặc định là bất kỳ tệp nào được khai báo mới nhất

Bạn có thể có hai biểu định kiểu trong HTML không?

Có, bạn có thể áp dụng nhiều biểu định kiểu cho tệp HTML . Đối với mỗi biểu định kiểu mà bạn liên kết đến một trang, bạn chỉ cần thêm một phần tử

Bạn có thể sử dụng bao nhiêu phương thức CSS?

3 phương pháp riêng biệt để tạo kiểu trong CSS, Kiểu cục bộ, Kiểu cấp độ trang và Kiểu bên ngoài. Mỗi cấp độ kiểu dáng được ưu tiên theo thứ bậc khác nhau (khi áp dụng) và được sử dụng vì những lý do khác nhau. 3 phương pháp được nhóm lại thành hai loại.