Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggunakan CSS untuk memisahkan kandungan dan reka bentuk?
Bagaimana untuk menggunakan CSS untuk memisahkan kandungan dan reka bentuk?
- WBOYke hadapan
- 2023-09-12 13:25:02746semak imbas
Tapak web yang bagus sentiasa terdiri daripada dokumen HTML yang tersusun sempurna dan reka bentuk yang cantik yang menarik perhatian pengguna. Laman web jenis ini boleh meningkatkan interaktiviti keseluruhan tapak web dan menjadikannya lebih menarik.
Apabila menggunakan gaya pada halaman web kami, kami menggunakan Cascading Style Sheets, atau ringkasnya CSS. Dengan menggunakan CSS, kami boleh menjadikan laman web kami cantik dengan lebih mudah. Ia membezakan antara struktur dokumen HTML dan persembahannya, yang merujuk kepada elemen yang pengguna lihat dan berinteraksi.
Tidak seperti tapak web hambar yang dibuat hanya menggunakan HTML, mempunyai gaya yang unik dan kreatif telah menjadi ciri yang mesti ada untuk tapak web.
Gabung CSS
Terdapat tiga cara berbeza kami boleh memasukkan CSS ke dalam tapak web kami -
Gaya Sebaris - Apabila kita menggunakan gaya pada setiap teg HTML individu, ia dipanggil gaya sebaris.
Gaya Terbenam - Teg kepala terkandung dalam teg gaya dan kelihatan seperti CSS telah digabungkan ke dalam fail HTML. Kemudian gunakan istilah "gaya terbenam".
Gaya Luaran - Ini adalah teknik yang paling disyorkan untuk menggunakan CSS kerana ia digunakan untuk memisahkan CSS daripada HTML. Kandungan HTML disambungkan ke fail CSS yang mengandungi semua maklumat penggayaan. Menggunakan pendekatan penggayaan ini kami boleh melampirkan banyak fail CSS.
Dengan menggunakan fail berasingan dan mengumpulkan jenis format yang serupa ke dalam atribut yang sama, kami boleh mengurangkan panjang kod yang digunakan dengan ketara. Ini membantu mengekalkan kod kerana kurang kod menjadikan proses mencari pepijat lebih mudah dan meningkatkan kebolehbacaan keseluruhan kod.
Satu lagi kelebihan menggunakan fail CSS yang berasingan ialah anda boleh menggunakan semula fail yang sama seberapa banyak kali yang diperlukan berbanding dengan pemformatan tradisional di mana anda perlu mengulang pemformatan dalam setiap halaman secara berasingan. Anda boleh menggunakan semula fail dengan mengimportnya atau memautkan lembaran kerja.
Pautkan fail menggunakan tag pautan
Seperti yang telah dibincangkan, kita boleh memisahkan kandungan (struktur) halaman web daripada reka bentuk (pemformatan dan gaya) halaman web dengan menggunakan fail .CSS yang dipautkan ke dokumen HTML. Kami boleh memautkan fail CSS ke fail HTML menggunakan teg html.
Kami menggunakan teg pautan untuk menentukan cara dua dokumen berkaitan antara satu sama lain, ia adalah elemen kosong, yang bermaksud ia tidak mempunyai sebarang teg pembuka atau penutup dan bukan juga teg penutup sendiri. Semua maklumat yang diperlukannya disimpan dalam sifatnya. Terdapat banyak atribut yang boleh digunakan dalam teg pautan, tetapi yang perlu kami gunakan ditakrifkan di bawah.
Rel - Ia adalah atribut yang mesti ada pada teg pautan yang menentukan cara dokumen yang sedang digunakan berkaitan dengan dokumen yang kami cuba pautkan. Biasanya, kita hanya cenderung untuk memikirkan helaian gaya atau favicon sebagai perhubungan.
Href - Digunakan untuk menentukan URL fail yang hendak dipautkan.
Tag pautan digunakan dalam tag kepala. Dalam dokumen yang sama, setiap teg boleh mempunyai berbilang contoh teg pautan yang menunjuk ke fail yang berbeza. Diberikan di bawah ialah sintaks untuk memautkan fail CSS dalam HTML menggunakan tag pautan -
<link rel=”the Relationship” href=”source” >
Contoh
Mari kita lihat contoh penggunaan tag pautan untuk memisahkan kandungan dan bahagian reka bentuk halaman web.
Bahagian HTML
<html>
<head>
<title>Separating Content and Design using the link HTML tag</title>
<style>
body {
background-color: rgb(230, 228, 228);
}
h1 {
color: rgb(125, 211, 125);
}
h3 {
color: rgb(40, 15, 57);
}
h1,
h3{
text-align: right;
font-family: fantasy;
}
.formattedContent {
text-align: justify;
font-family: sans-serif;
margin-left: 2%;
margin-right: 2%;
color: rgb(149, 84, 72);
}
</style>
</head>
<body>
<div>
<h1>Example of separating content and design using external styleheet with link tag.</h1>
<h3>External Stylesheet and link tags</h3>
<p class="FormattedContent">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam earum eligendi, dignissimos nobis a nam similique animi tenetur expedita pariatur nulla recusandae repellendus sequi quisquam corporis, voluptates nisi iure perferendis?
</p>
</div>
</body>
</html>
Gunakan pengisytiharan import
Kami juga boleh menggunakan pernyataan import dalam CSS untuk memisahkan kandungan daripada reka bentuk. Kami menggunakan pernyataan ini apabila kami perlu mengimport gaya yang disimpan dalam fail berasingan. Kami hanya perlu menyediakan URL atau laluan sumber di mana fail CSS terletak dalam petikan.
Kami juga boleh memilih untuk menggunakan pertanyaan media dengan kenyataan ini. Ini ialah pernyataan fleksibel yang turut menyokong lata helaian gaya.
Satu-satunya perkara yang perlu kita ubah apabila menggunakannya untuk memisahkan reka bentuk dan kandungan ialah mengalih keluar teg pautan daripada kod contoh di atas dan menambah pernyataan berikut sebagai gantinya.
<style> @import(‘LinkedStyle.css’) </style>
Keluaran kod akan sama dengan keluaran kod contoh di atas.
Kesimpulan
Kesimpulannya, CSS ialah alat yang berkuasa untuk pereka web, membolehkan mereka mengasingkan kandungan daripada reka bentuk. Dengan menggunakan CSS, pereka bentuk boleh mencipta rupa yang konsisten merentas berbilang tapak web dan peranti sambil memastikan kandungan teratur dan mudah dikemas kini. Dengan pemahaman yang betul tentang HTML dan CSS, mana-mana pereka boleh memanfaatkan ciri ini dengan mudah untuk mencipta reka bentuk yang menakjubkan tanpa menjejaskan kebolehgunaan atau kebolehaksesan.
Atas ialah kandungan terperinci Bagaimana untuk menggunakan CSS untuk memisahkan kandungan dan reka bentuk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!