Bagaimana untuk memanggil gaya css-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk memanggil gaya css

PHPz

Lepaskan： 2023-04-21 13:36:57

asal

1164 orang telah melayarinya

Dengan pembangunan berterusan Internet, reka bentuk dan pembangunan halaman web menjadi semakin penting. CSS (cascading style sheet) ialah bahasa yang digunakan untuk mengawal gaya halaman web, dan ia juga merupakan teknologi yang mesti dikuasai dalam pembangunan web. Tetapi sesetengah pemula mungkin tidak tahu cara memanggil gaya CSS Artikel ini akan memperkenalkan anda kepada kaedah panggilan gaya CSS secara terperinci.

1. Helaian gaya terbenam

Gunakan teg gaya dalam fail HTML untuk menentukan helaian gaya terbenam Gaya yang ditakrifkan dalam helaian gaya hanya sah untuk halaman semasa, seperti:

<!DOCTYPE html>
<html>
<head>
  <title>内嵌样式表</title>
  <style>
    body {
      background-color: #f0f0f0;
    }
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1>欢迎访问我的网站</h1>
  <p>这里是我的个人主页，欢迎来逛逛。</p>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, dua gaya ditakrifkan di dalam teg gaya untuk menetapkan warna latar belakang dan warna fon tajuk halaman web. Dengan menjalankan kod, anda boleh mendapati bahawa warna latar belakang halaman berubah kepada kelabu dan warna fon tajuk bertukar kepada merah.

2. Helaian gaya luaran

Gunakan teg pautan dalam fail HTML untuk memperkenalkan helaian gaya luaran tidak akan dibenamkan dalam fail HTML, tetapi akan wujud secara bebas dalam a Fail CSS. Ia boleh dikongsi oleh berbilang fail HTML, menjadikan struktur fail HTML lebih ringkas dan lebih mudah untuk diselenggara, seperti:

<!DOCTYPE html>
<html>
<head>
  <title>外部样式表</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>欢迎访问我的网站</h1>
  <p>这里是我的个人主页，欢迎来逛逛。</p>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, fail CSS bernama style.css diperkenalkan melalui tag pautan Pelbagai gaya boleh ditakrifkan dalam fail, dan helaian gaya boleh dikongsi dalam berbilang fail HTML melalui pautan untuk mencapai penggunaan semula gaya. Cara untuk menentukan gaya dalam style.css adalah serupa dengan helaian gaya sebaris, contohnya:

body {
  background-color: #f0f0f0;
}
h1 {
  color: red;
}

Salin selepas log masuk

Dalam contoh ini, pemilih badan digunakan untuk menetapkan warna latar belakang halaman web dan pemilih h1 digunakan untuk menetapkan warna fon tajuk. Apabila helaian gaya ini dirujuk dalam berbilang fail HTML, gaya ini akan dikongsi.

3. Gaya sebaris

Helaian gaya sebaris menentukan gaya dalam teg HTML dan anda boleh menggunakan gaya terus pada teg tertentu, seperti:

<!DOCTYPE html>
<html>
<head>
  <title>内联样式表</title>
</head>
<body>
  <h1 style="color:red">欢迎访问我的网站</h1>
  <p>这里是我的个人主页，欢迎来逛逛。</p>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, helaian gaya sebaris ditakrifkan dalam teg h1 untuk menetapkan warna fon tajuk kepada merah. Berbeza daripada helaian gaya sebaris dan helaian gaya luaran, helaian gaya sebaris hanya sah untuk penanda semasa dan tidak boleh digunakan semula Apabila terdapat banyak gaya, kod HTML akan kelihatan tidak teratur, yang tidak sesuai untuk penyelenggaraan.

Ringkasan:

Ringkasnya, memanggil gaya CSS dalam fail HTML boleh dilakukan dalam tiga cara: helaian gaya terbenam, helaian gaya luaran dan helaian gaya sebaris. Ia sesuai untuk membangunkan Web kompleks Untuk aplikasi, adalah disyorkan untuk menggunakan helaian gaya luaran kerana ia membenarkan berbilang fail HTML untuk berkongsi gaya, menjadikannya lebih mudah untuk dibangunkan dan diselenggara. Tetapi untuk aplikasi mudah, helaian gaya sebaris dan helaian gaya sebaris juga merupakan pilihan yang baik. Senario dan keperluan yang berbeza memerlukan pilihan teknologi yang berbeza Menguasai kaedah memanggil gaya CSS di atas boleh menjadikan pembangunan web lebih cekap dan fleksibel.

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