Bagaimana untuk menyambung css-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menyambung css

王林

Lepaskan： 2023-05-21 10:47:36

asal

1480 orang telah melayarinya

Dalam reka bentuk web, CSS (Cascading Style Sheets) digunakan secara meluas. CSS boleh menambah ciri seperti gaya, pemformatan dan reka letak pada halaman web, menjadikannya lebih cantik dan lebih mudah dibaca. Oleh itu, mengetahui cara menyambungkan fail CSS adalah langkah penting dalam mempelajari reka bentuk web. Seterusnya, artikel ini akan memperincikan cara menyambungkan CSS.

1. CSS Sebaris

CSS Sebaris ialah kaedah membenamkan kod CSS terus ke dalam fail HTML. Untuk menggunakan CSS sebaris, anda perlu menambah teg gaya pada teg kepala HTML dan menulis kod CSS di dalamnya. Berikut ialah contoh:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
}
p {
  color: red;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan teg <style> untuk membenamkan kod CSS ke dalam fail HTML. Kod CSS mentakrifkan gaya teg h1 dan p, menjadikan teks teg h1 berwarna biru dan teks teg p merah, dan meningkatkan saiz fon.

Walaupun CSS sebaris sangat mudah, ia jarang digunakan dalam amalan. Ini kerana CSS sebaris boleh menjadikan fail HTML bersepah dan sukar untuk diselenggara. Apabila tapak web anda semakin besar, menggunakan fail CSS luaran ialah pendekatan yang lebih baik.

2. Fail CSS luaran

Fail CSS luaran ialah cara untuk menyimpan kod CSS dalam fail berasingan dan kemudian merujuk fail dalam fail HTML.

Pertama, anda perlu mencipta fail CSS dan menyimpan semua kod CSS anda dalam fail tersebut. Apabila menamakan fail anda, gunakan .css sebagai sambungan fail. Apabila membuat fail CSS, anda harus memastikan bahawa kod yang anda tulis berstruktur dengan baik. Berikut ialah contoh:

/* styles.css */
h1 {
  color: blue;
}
p {
  color: red;
  font-size: 20px;
}

Salin selepas log masuk

Seterusnya, pautkan fail CSS ke fail HTML dalam fail HTML. Tambahkan teg pautan di dalam teg kepala, atribut rel bagi teg hendaklah lembaran gaya dan atribut href harus menghala ke fail CSS anda. Berikut ialah contoh:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan teg pautan untuk mengaitkan fail HTML dengan fail CSS. Dalam teg kepala, kami menambah teg pautan dan menetapkan atribut rel kepada "stylesheet" dan atribut href ke laluan fail fail CSS kami. Ini akan menggunakan gaya CSS pada semua elemen yang berkaitan dalam fail HTML.

3. CSS Sebaris

CSS Sebaris ialah kaedah menggunakan kod CSS secara terus pada elemen HTML. Untuk menggunakan CSS sebaris, anda perlu menulis kod CSS ke dalam atribut gaya elemen HTML. Berikut ialah contoh:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;font-size:20px;">This is a paragraph.</p>

</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan atribut gaya untuk menggunakan CSS sebaris terus pada elemen h1 dan p. Seperti CSS sebaris, CSS sebaris kurang biasa digunakan, tetapi ia boleh digunakan untuk menambah gaya dengan cepat.

4. Gunakan @import

@import ialah cara lain untuk menyambungkan fail CSS. Ia berfungsi dengan mengimport satu fail CSS ke dalam fail CSS yang lain. Berikut ialah contoh:

/* styles.css */
@import url("small-styles.css") screen and (max-width: 600px);

h1 {
  color: blue;
}
p {
  color: red;
}

/* small-styles.css */
p {
  font-size: 20px;
}

Salin selepas log masuk

Dalam contoh ini, kami mencipta fail CSS utama dan fail CSS yang lebih kecil dan mengimportnya menggunakan @import.

Apabila pelayar memuatkan fail CSS, mereka memuatkan fail utama dahulu dan kemudian fail yang lebih kecil. Fail kecil hanya menggunakan gaya pada pelayar dengan skrin kurang daripada 600 piksel lebar.

Kelebihan menggunakan @import ialah ia boleh membantu mengatur kod anda dan mengurangkan saiz fail. Walau bagaimanapun, dalam amalan, penyemak imbas moden boleh mengendalikan fail CSS yang mengandungi banyak fail, jadi @import tidak diperlukan.

Kesimpulan

Menghubungkan CSS ialah langkah penting dalam mencipta tapak web yang cantik. Dalam CSS sebaris, membenamkan kod CSS terus ke dalam fail HTML boleh menjadikan gaya lebih mudah dan jelas. Menggunakan fail CSS luaran boleh menjadikan fail HTML lebih mudah untuk diselenggara dan memisahkan bahagian kod gaya daripada dokumen HTML. Walaupun kaedah CSS sebaris dan @import jarang digunakan, tetapi masih boleh berguna dalam beberapa situasi.

Bagaimanapun, mempelajari cara menyambungkan CSS ialah asas reka bentuk web. Semoga artikel ini telah membantu anda lebih memahami pelbagai cara untuk menyambungkan CSS.

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