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 and 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 CSSMy 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
Now add the following internal CSS code after the opening tag:
body { background-color: gray; } h1 { color: green; margin-left: 40px; }
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
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
Phần tử sẽ phản ánh kiểu này khi bạn lưu và làm mới
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
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
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
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