masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > Bagaimana untuk memautkan fail css dengan fail html

Bagaimana untuk memautkan fail css dengan fail html

下次还敢
Lepaskan： 2024-04-11 09:23:22
asal
1164 orang telah melayarinya

Memautkan fail CSS ke fail HTML memerlukan langkah berikut: Cipta dan simpan fail CSS ke lokasi yang sesuai. Tambahkan

Bagaimana untuk memautkan fail css dengan fail html

Cara memautkan fail CSS ke fail HTML

Dalam pembangunan web, menggunakan fail CSS luaran boleh memisahkan gaya daripada kandungan HTML, dengan itu meningkatkan kebolehselenggaraan dan kebolehgunaan semula. Berikut ialah langkah-langkah untuk memautkan fail CSS ke fail HTML:

1 Cipta fail CSS

Buat fail teks baharu dan berikannya sambungan ".css" (contohnya, mystyle.css). Dalam fail ini, tulis peraturan gaya yang diperlukan.

2. Simpan fail CSS ke lokasi yang sesuai

Simpan fail CSS ke lokasi yang sesuai dalam direktori laman web. Biasanya, fail CSS diletakkan dalam direktori yang sama seperti fail HTML, tetapi ia juga boleh diletakkan dalam direktori yang berbeza.

3 Tambahkan teg <link> dalam fail HTML <link> 标记

在 HTML 文件的 <head> 部分，添加以下代码：

<code class="html"><link rel="stylesheet" href="mystyle.css"></code>
Salin selepas log masuk

其中：

  • rel="stylesheet" 指定这是一个 CSS 样式表。
  • href="mystyle.css" 指示浏览器加载名为 mystyle.css 的 CSS 文件。

示例

<code class="html"><html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>标题</h1>
  <p>段落</p>
</body>
</html></code>
Salin selepas log masuk

保存 HTML 文件并将其加载到浏览器中。浏览器将解析 HTML 文件并加载 style.css 文件，应用其中定义的样式。

提示：

  • 确保 CSS 文件的路径正确。
  • 可以链接多个 CSS 文件，只需在 <head> 部分中添加额外的 <link>
  • Dalam bahagian <head> fail HTML, tambahkan kod berikut:
    • rrreee
di mana : 🎜
    🎜rel="stylesheet" Menentukan bahawa ini ialah helaian gaya CSS. 🎜🎜href="mystyle.css" mengarahkan penyemak imbas untuk memuatkan fail CSS bernama mystyle.css. 🎜🎜🎜🎜Contoh🎜🎜rrreee🎜Simpan fail HTML dan muatkan ke dalam penyemak imbas. Penyemak imbas akan menghuraikan fail HTML dan memuatkan fail style.css, menggunakan gaya yang ditakrifkan di dalamnya. 🎜🎜🎜Petua: 🎜🎜
      🎜Pastikan laluan ke fail CSS adalah betul. 🎜🎜 Berbilang fail CSS boleh dipautkan dengan menambahkan teg <link> tambahan dalam bahagian <head>. 🎜🎜Menggunakan fail CSS luaran boleh meningkatkan prestasi kerana penyemak imbas tidak perlu menghuraikan peraturan gaya setiap kali fail HTML dimuatkan. 🎜🎜

Atas ialah kandungan terperinci Bagaimana untuk memautkan fail css dengan fail html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
css
sumber：php.cn
Artikel sebelumnya：Bagaimana untuk membaca fail tempatan dalam html Artikel seterusnya：Bagaimana untuk membaca pangkalan data dalam html
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1335
Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Ubah suai gaya CSS sebaris secara dinamik dalam Javafx Saya cuba menukar imej latar belakang anak tetingkap apabila aplikasi dimaksimumkan. Latar...
daripada 2024-04-06 20:57:16
0
1
487
Bagaimana untuk membuat elemen terapung disusun secara menegak dan bukannya secara mendatar dalam CSS? Saya cuba membuat halaman web dengan dua lajur, dengan kandungan utama di satu pihak dan k...
daripada 2024-04-06 20:45:26
0
2
386
Adakah terdapat cara untuk memaksa teks dalam flexbox dipusatkan secara menegak, tidak kira apa kod CSS lain yang kita ada? Saya mempunyai kod CSS berikut yang merupakan sebahagian daripada kod CSS yang lebih besar...
daripada 2024-04-06 20:41:51
0
1
518
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan