Trong bài viết này, chúng ta sẽ tìm hiểu về cách tách nội dung khỏi thiết kế bằng CSS, cùng với việc tìm hiểu các cách khác nhau để triển khai nó thông qua các ví dụ
Các trang web hấp dẫn có thể chứa một số nội dung văn bản, hình ảnh, video, âm thanh, slide, v.v., trong một cấu trúc với thiết kế được tổ chức hợp lý, có thể giúp nâng cao tính tương tác tổng thể của trang. Đối với điều này, chúng ta có thể sử dụng các thuộc tính kiểu dáng khác nhau để tạo các trang web tương tác. Các thuộc tính tạo kiểu này có thể được triển khai theo 3 cách khác nhau mà tôi. e.
- Bằng cách chỉ định các thuộc tính trong phần tử
- By adding the properties to the tag using the tag.
- Bằng cách xác định các thuộc tính trong một tệp riêng biệt.
Việc xác định riêng các thuộc tính CSS (bộ chọn hoặc lớp) trong các trang tính khác nhau có thể giúp giảm độ dài của mã bằng cách nhóm các thuộc tính CSS tương tự khác nhau và do đó loại bỏ mã lặp lại. Đối với điều này, việc quản lý các tệp CSS giúp dễ dàng, cùng với việc nâng cao khả năng đọc mã tổng thể. Đổi lại, điều này giúp sửa các lỗi một cách hiệu quả, trong mã. Sử dụng trang tính bên ngoài có thể cung cấp khả năng sử dụng lại cho mã CSS, cùng với việc nhập nó vào bất kỳ tệp HTML nào khác
Approach: We can separate the content & the design by using external CSS having the file extension as .css. For this, simply specify the required file path of the external file in the tag inside the tag in the main HTML file. This will redirect to the sheet whenever styling properties need to implement. In External CSS, we define all the required CSS properties to make our content attractive.
cú pháp
<head> <link rel="stylesheet" href="CSS File link"> </head>It can also be done by using an import statement within the tag.
<style type="text/css"> @import url(CSS File link); </style>Example 1: In this example, we will use the tag to utilize the CSS properties from the external style sheet.
HTML
<html>
<head>
<<style type="text/css"> @import url(CSS File link); </style>1<style type="text/css"> @import url(CSS File link); </style>2<style type="text/css"> @import url(CSS File link); </style>1>
<<style type="text/css"> @import url(CSS File link); </style>7 <style type="text/css"> @import url(CSS File link); </style>8_______1_______9<0 <1<style type="text/css"> @import url(CSS File link); </style>9<3 <4
<5head>
<html0_______56_______
<html4>
html6_______54_______html8html9html8>
html6_______54_______>4>
>6_______56_______7
html6_______54_______5>4>
html6_______54_______ 4 5<style type="text/css"> @import url(CSS File link); </style>9 7>
>6_______54_______0
>6_______54_______2
>6_______54_______4
>6_______54_______6
html6_______54_______5 4>
<5_______55_______4>
<5html0>
<5_______55_______>
Phong cách. css. Trong tệp này, chúng tôi đã triển khai các thuộc tính CSS khác nhau cho các phần tử khác nhau
Phong cách. css
>1
>2____56_______3>4
>5
>6_______56_______7 >8
>2 0 1 2 3
>5
>6_______61_______6 >8
>2 0<style type="text/css"> @import url(CSS File link); </style>00
>5
>6_______56_______7<style type="text/css"> @import url(CSS File link); </style>04
>6_______61_______6>8
>2<style type="text/css"> @import url(CSS File link); </style>09 1<style type="text/css"> @import url(CSS File link); </style>11 3
>2<style type="text/css"> @import url(CSS File link); </style>14 1<style type="text/css"> @import url(CSS File link); </style>16 3
>5
<style type="text/css"> @import url(CSS File link); </style>19
>2<style type="text/css"> @import url(CSS File link); </style>09 1<style type="text/css"> @import url(CSS File link); </style>23 3
>2<style type="text/css"> @import url(CSS File link); </style>14 1<style type="text/css"> @import url(CSS File link); </style>16 3
>2<style type="text/css"> @import url(CSS File link); </style>31 1<style type="text/css"> @import url(CSS File link); </style>33 3
>2<style type="text/css"> @import url(CSS File link); </style>36 1<style type="text/css"> @import url(CSS File link); </style>33 3
>2 0<style type="text/css"> @import url(CSS File link); </style>42
>5
Explanation: In the index.html file, we have simply added the headings & the paragraph. The
tag has a class .content that implements some CSS properties. This stylesheet is a CSS file, which has separate content and is saved with the extension “.css”.
đầu ra
Sử dụng báo cáo nhập khẩu
ví dụ 2. Trong ví dụ dưới đây, các số chẵn & lẻ được hiển thị. CSS được cung cấp cho họ trong một tệp riêng. Các số chẵn được hiển thị bằng một màu khác và số lẻ không quan tâm
HTML
<html>
<head>
<<style type="text/css"> @import url(CSS File link); </style>53 <style type="text/css"> @import url(CSS File link); </style>54<style type="text/css"> @import url(CSS File link); </style>9_______1_______56>
html6_______1_______59
<5_______1_______53>
<5head>
<html0_______56_______
<html8<style type="text/css"> @import url(CSS File link); </style>74html8>
<html4 5<style type="text/css"> @import url(CSS File link); </style>9_______1_______82>
html6_______54_______ 4<style type="text/css"> @import url(CSS File link); </style>87_______57_______4>
<5_______55_______4>
<html4 5<style type="text/css"> @import url(CSS File link); </style>9_______1_______99>
html6_______54_______ 4_______54_______04_______57_______4>
<5_______55_______4>
<html4 5<style type="text/css"> @import url(CSS File link); </style>9_______1_______82>
html6_______54_______ 4_______54_______21_______57_______4>
<5_______55_______4>
<html4 5<style type="text/css"> @import url(CSS File link); </style>9_______1_______99>
html6_______54_______ 4_______54_______38 4>
<5_______55_______4>
<html4 5<style type="text/css"> @import url(CSS File link); </style>9_______1_______82>
html6_______54_______ 4_______54_______55 4>
<5_______55_______4>
<<64>
<<64>
<html4 5<style type="text/css"> @import url(CSS File link); </style>9_______1_______99>
html6_______54__________ 4_______54_______80 4>
<5_______55_______4>
<html4 5<style type="text/css"> @import url(CSS File link); </style>9_______1_______82>
html6_______54_______ 4_______54_______97 4>
<5_______55_______4>
<html4 5<style type="text/css"> @import url(CSS File link); </style>9_______1_______99>
html6_______54_______ 4_______55_______14 4>
<5_______55_______4>
<html4 5<style type="text/css"> @import url(CSS File link); </style>9_______1_______82>
html6_______54_______ 4_______55_______31 4>
<5_______55_______4>
<html4 5<style type="text/css"> @import url(CSS File link); </style>9_______1_______99>
html6_______54_______ 4_______55_______48 4>
<5_______55_______4>
<5html0>
<5_______55_______>
nội dung riêng biệt. css. Trong tệp này, chúng tôi sẽ cung cấp kiểu dáng cho các phần tử chẵn và lẻ
nội dung riêng biệt. css
html61
>2 0 1html65 3
>2>3html69
>2html71_______61_______1html73 3
>5
html77
>2html79 1html81 3
>2html85 1html87 3
>2html71_______61_______1html73 3
>5
html96
>2 0 1html65 3
>2>3>04
>2html71_______61_______1html73 3
>5
Giải trình. Trong tệp HTML chính, chúng tôi chỉ cần thêm các số nguyên bên dưới
Theo mặc định,
có màu đen. Bây giờ, để cung cấp một số kiểu dáng cho chúng, chúng tôi đã liên kết một biểu định kiểu với nó. Biểu định kiểu này là một tệp CSS, có nội dung riêng biệt và được lưu với phần mở rộng “. css”. Trong tệp CSS này, chúng tôi đã xác định màu văn bản cũng như màu nền cho mỗi lớp tôi. e lẻ và chẵn. Cung cấp một số phần đệm và thay đổi màn hình thành nội tuyến