hujung hadapan web
tutorial css
Bagaimana untuk menggunakan CSS untuk memisahkan kandungan dan reka bentuk?
Bagaimana untuk menggunakan CSS untuk memisahkan kandungan dan reka bentuk?
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 id="Example-of-separating-content-and-design-using-external-styleheet-with-link-tag">Example of separating content and design using external styleheet with link tag.</h1>
<h3 id="External-Stylesheet-and-link-tags">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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1389
52
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Vue 3
Apr 02, 2025 pm 06:32 PM
Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.
Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas?
Apr 02, 2025 pm 06:17 PM
Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.
Kad yang disusun dengan kedudukan melekit dan sasaran sass
Apr 03, 2025 am 10:30 AM
Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.
Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress
Apr 02, 2025 am 04:27 AM
Jika kita perlu menunjukkan dokumentasi kepada pengguna secara langsung dalam editor WordPress, apakah cara terbaik untuk melakukannya?
Membandingkan penyemak imbas untuk reka bentuk responsif
Apr 02, 2025 pm 06:25 PM
Terdapat beberapa aplikasi desktop ini di mana matlamat menunjukkan laman web anda pada dimensi yang berbeza pada masa yang sama. Oleh itu, anda boleh menulis
Mari kita gunakan (x, x, x, x) untuk bercakap mengenai kekhususan
Mar 24, 2025 am 10:37 AM
Saya hanya berbual dengan Eric Meyer pada hari yang lain dan saya teringat cerita Eric Meyer dari tahun -tahun pembentukan saya. Saya menulis catatan blog mengenai kekhususan CSS, dan
