Bagaimana untuk memperkenalkan css ke dalam html-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk memperkenalkan css ke dalam html

WBOY

Lepaskan： 2023-05-29 19:55:06

asal

1533 orang telah melayarinya

Cara memperkenalkan CSS ke dalam HTML

Sebagai asas pembangunan bahagian hadapan, hubungan antara HTML dan CSS saling melengkapi. HTML bertanggungjawab untuk membina struktur dan kandungan halaman, manakala CSS bertanggungjawab untuk menambah warna dan mencantikkan halaman atas dasar ini. Jadi, bagaimana untuk memperkenalkan gaya CSS ke dalam dokumen HTML? Artikel ini akan memperkenalkan cara memperkenalkan CSS dan perkara yang perlu diberi perhatian.

Rujuk CSS luaran dalam kepala HTML

Ini ialah cara yang paling biasa dan disyorkan untuk merujuk CSS. Mengambil struktur halaman biasa sebagai contoh, tambahkan teg pautan dalam teg pengepala HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>标题</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
      页面内容
  </body>
</html>

Salin selepas log masuk

Antaranya, teg pautan mempunyai tiga atribut:

rel: mewakili gaya helaian dan Perhubungan dokumen semasa ialah helaian gaya luaran, dan nilainya ialah "lembaran gaya";
jenis: menunjukkan jenis MIME fail helaian gaya, dan nilainya ialah "teks/css";
href: menunjukkan Laluan rujukan kepada fail helaian gaya.

Apa yang perlu diperhatikan di sini ialah laluan atribut href hendaklah berdasarkan laluan HTML semasa, bukan laluan relatif di mana fail CSS berada. Dengan mengandaikan bahawa fail CSS berada dalam direktori yang sama dengan HTML semasa, gaya rujukan harus ditulis seperti ini:

<link rel="stylesheet" type="text/css" href="./style.css">

Salin selepas log masuk

di mana "." menunjukkan direktori semasa dan akhiran nama fail ".css" tidak boleh ditinggalkan.

Benamkan CSS dalaman dalam pengepala HTML

Dalam dokumen HTML, kami boleh membenamkan CSS dalaman melalui teg gaya. Kaedah ini tidak dapat tidak meningkatkan saiz fail HTML, tetapi untuk beberapa tapak web yang ringkas dan kecil, ia boleh menjimatkan permintaan dan masa muat turun fail luaran dan mempercepatkan kelajuan respons halaman. Berikut ialah contoh kod:

<!DOCTYPE html>
<html>
  <head>
    <title>标题</title>
    <style type="text/css">
      /* CSS样式内容 */
      body {background-color: #F1F1F1;}
      h1 {color: orange;}
    </style>
  </head>
  <body>
      页面内容
  </body>
</html>

Salin selepas log masuk

Antaranya, kandungan dalam teg gaya mempunyai format yang sama seperti fail CSS luaran, kecuali kod gaya ditulis terus di dalam teg gaya. Perlu diingat bahawa untuk mengelakkan pencemaran gaya (gaya CSS mempengaruhi satu sama lain), CSS dalaman harus menggunakan pemilih CSS yang bermakna untuk mengehadkan skop gaya.

Membenamkan gaya sebaris dalam elemen HTML

Gaya sebaris merujuk kepada membenamkan kod gaya CSS terus ke dalam atribut gaya elemen HTML. Kaedah ini sangat fleksibel, tetapi ia tidak kondusif untuk penggunaan semula dan penyelenggaraan kod. Berikut ialah kod contoh:

<!DOCTYPE html>
<html>
  <head>
    <title>标题</title>
  </head>
  <body>
    <h1 style="color:orange;">页面标题</h1>
    <p style="font-size:18px;">页面内容</p>
  </body>
</html>

Salin selepas log masuk

Perlu diambil perhatian bahawa apabila menggunakan gaya sebaris, anda harus memastikan bahawa kod gaya tidak menjejaskan kebolehcapaian dan kebolehgunaan halaman. Untuk sesetengah gaya yang serupa dengan kesan visual, anda harus menggunakan gaya luaran atau gaya dalaman.

Rujukan:

W3Schools - CSS - Helaian Gaya Luaran
W3Schools - Gaya Dalaman
W3Schools
Nota Kajian: Pengetahuan Asas HTML dan CSS

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