Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Apakah kaedah untuk memanggil gaya luaran dalam halaman html

Apakah kaedah untuk memanggil gaya luaran dalam halaman html

青灯夜游
Lepaskan: 2022-09-15 18:17:24
asal
6461 orang telah melayarinya

Dua kaedah panggilan: 1. Panggil menggunakan teg pautan, sintaksnya ialah "" ; 2 , gunakan kata kunci "@import" untuk memanggil, sintaksnya ialah "".

Apakah kaedah untuk memanggil gaya luaran dalam halaman html

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi HTML5, komputer Dell G3.

Lembaran Gaya Luar CSS

Jika gaya CSS diletakkan dalam fail di luar dokumen web, ia dipanggil helaian gaya luaran, CSS Dokumen helaian gaya mewakili helaian gaya luaran.

Apakah kaedah untuk memanggil gaya luaran dalam halaman html

Sebenarnya, helaian gaya luaran hanyalah fail teks dengan sambungan .css. Apabila anda menyalin kod gaya CSS ke dalam fail teks dan menyimpannya sebagai fail .css, ia ialah helaian gaya luaran.

Dua cara untuk memanggil helaian gaya luaran dalam halaman html

Helaian gaya luaran mesti diimport ke dalam dokumen web sebelum ia boleh digunakan oleh pelayar Kenal pasti dan huraikan. Fail helaian gaya luaran boleh diimport ke dalam dokumen HTML dalam dua cara.

1. Gunakan teg untuk memanggil (gaya pautan)

Gunakan teg >

<link href="外部样式表文件路径" rel="stylesheet" type="text/css" />
Salin selepas log masuk
Penjelasan setiap atribut:

  • atribut href menetapkan alamat fail helaian gaya luaran, yang boleh menjadi alamat relatif atau alamat mutlak. Atribut

  • rel mentakrifkan dokumen yang berkaitan, yang di sini bermaksud helaian gaya yang berkaitan.

  • Atribut jenis mentakrifkan jenis fail yang diimport Seperti elemen gaya, teks/css menunjukkan fail teks CSS.

Secara amnya apabila mentakrifkan teg 3 atribut asas harus ditakrifkan, antaranya href ialah atribut yang mesti ditetapkan.

Memautkan fail helaian gaya luaran ke dokumen HTML melalui teg HTML ialah kaedah yang paling biasa digunakan untuk tapak web di Internet, dan ia juga merupakan kaedah yang paling praktikal. Kaedah ini mengasingkan sepenuhnya dokumen HTML dan fail CSS, mencapai pemisahan lengkap lapisan struktur dan lapisan pembentangan, dan meningkatkan kebolehskalaan struktur halaman web dan kebolehselenggaraan gaya CSS.

Contoh: Gunakan gaya pautan untuk menggunakan gaya pada kod HTML, yang mudah ditulis dan diubah.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="lianjie.css" type="text/css" rel="stylesheet" />
<link href="lianjie-2.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <p>我是被 lianjie-2.css 文件控制的,楼下的你呢??</p>
    <h3>楼上的,<span>lianjie.css</span> 文件给我穿的花衣服。</h3>
</body>
</html>
Salin selepas log masuk

Apakah kaedah untuk memanggil gaya luaran dalam halaman html

Dalam contoh di atas, dua fail CSS dipautkan melalui pautan, dan kedua-duanya adalah sah Inilah sebabnya pembuat tapak web meletakkan bahagian awam ke dalam satu fail CSS Pada masa ini gaya halaman menulis fail gaya baharu.

Kod fail lianjie.css:

h3{
    font-weight: normal;  /*取消标题默认加粗效果*/
    background-color: #66CC99;  /* 设置背景色 */
    height: 50px;  /*设置标签的高度*/
    line-height:50px;  /* 设置标签的行高 */
}
span{
    color: #FFOOOO;  /* 字体颜色 */
    font-weight:bold;  /* 字体加粗 */
}
Salin selepas log masuk
kod fail lianjie-2.css:

p{
    color: #FF3333;  /*字体颜色设置*/
    font-weight: bold;  /* 字体加粗 */
    border-bottom: 3px dashed #009933;  /* 设置下边框线 */
    line-height: 30px;  /* 设置行高 */
}
Salin selepas log masuk
Gaya pautan memisahkan kod CSS dan kod HTML sepenuhnya pemisahan struktur dan gaya, kod HTML secara khusus membina struktur halaman, manakala kerja pengindahan diselesaikan oleh CSS.

Faedah import gaya CSS berasaskan pautan:

  • Fail CSS boleh diletakkan dalam fail HTML yang berbeza untuk menjadikan semua halaman tapak web bersatu dalam gaya; >

  • Selain itu, meletakkan kod CSS ke dalam fail CSS memudahkan pengurusan dan mengurangkan masa kod dan penyelenggaraan
  • Apabila fail CSS diubah suai, semua aplikasi yang menggunakan fail CSS ini Fail HTML semuanya akan dikemas kini tanpa perlu mengambil semua halaman daripada pelayan dan kemudian memuat naiknya selepas pengubahsuaian.
2 Gunakan kata kunci @import untuk memanggil (import)

Arahan @import ialah sebahagian daripada bahasa CSS apabila menggunakannya , letakkan arahan ini Ditambah pada teg