Tanda <style> HTML

Definisi dan penggunaan

<style> digunakan untuk menentukan maklumat gaya dokumen (CSS).

dalam <style> di dalam elemen, anda boleh menentukan cara pengedaran elemen HTML di dalam pelayar.

Perhatian, element style mendefinisikan gaya CSS yang disambungkan ke dalam dokumen HTML, sementara element link digunakan untuk mengimport gaya daripada papan gaya luaran.

Element style boleh muncul di mana-mana dalam dokumen HTML. Satu dokumen boleh mengandungi beberapa element style, jadi tiada perlu untuk memasukkan semua definisi gaya ke bahagian head. Kegunaan ini sangat berkesan dalam situasi penggunaan enjin tempatan untuk membuat halaman, kerana demikian boleh memberikan penambahan gaya untuk gaya yang ditakrifkan oleh tempatan halaman.

Lihat juga:

Maklumat Tutorial HTML:HTML CSS

Maklumat Tutorial CSS:CSS 教程

Panduan HTML DOM:Objek Style

Contoh

Contoh 1

Guna <style> Elemen menerapkan papan gaya sederhana ke dokumen HTML:

<html>
<head>
<style>
  h1 {warna: merah;}
  p {warna: biru;}
</style>
</head>
<body>
<h1>Ini adalah tajuk</h1>
<p>Ini adalah paragraf.</p>
</body>
</html>

Cuba sendiri

Contoh 2

Berbagai gaya untuk elemen yang sama:

<html>
<head>
<style>
  h1 {warna: merah;}
  p {warna: biru;}
</style>
<style>
  h1 {warna: hijau;}
  p {warna:merah jambu;}
</style>
</head>
<body>
<h1>Ini adalah tajuk</h1>
<p>Ini adalah paragraf.</p>
</body>
</html>

Cuba sendiri

Petunjuk dan Komentar

Perhatian:Apabila pelayar baca papan gaya, beliau akan mengformatkan dokumen HTML berdasarkan maklumat di dalam papan gaya. Jika beberapa properti telah didefinisikan untuk pemilih yang sama (elemen) di dalam papan gaya yang berbeza, maka nilai yang terakhir di baca daripada papan gaya yang terakhir (lihat contoh di atas)!

提示：要链接到外部样式表，请使用 <link> 标签。

提示：要了解有关样式表的更多信息，请阅读我们的 CSS 教程。

属性

属性 值 描述
media 媒体查询 规定样式使用的媒体。
type text/css 规定 <style> 标签的媒体类型。

全局属性

<style> 标签还支持 HTML 中的全局属性。

事件属性

<style> 标签还支持 HTML 中的事件属性。

默认的 CSS 设置

大多数浏览器将显示具有以下默认值的 <style> 元素：

style {
  display: none;
}

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持