HTML <stil> Etiketi


Örnek

Bir HTML belgesine basit bir stil sayfası uygulamak için <style> öğesinin kullanımı:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>

</body>
</html>

Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.


Tanım ve Kullanım

Etiket <style>, bir belge için stil bilgilerini (CSS) tanımlamak için kullanılır.

Öğenin içinde, <style>HTML öğelerinin bir tarayıcıda nasıl oluşturulacağını belirtirsiniz.


İpuçları ve Notlar

Not: Bir tarayıcı bir stil sayfasını okuduğunda, HTML belgesini stil sayfasındaki bilgilere göre biçimlendirir. Aynı seçici (eleman) için farklı stil sayfalarında bazı özellikler tanımlanmışsa, son okunan stil sayfasındaki değer kullanılacaktır (aşağıdaki örneğe bakın)!

İpucu: Harici bir stil sayfasına bağlanmak için <link> etiketini kullanın.

İpucu: Stil sayfaları hakkında daha fazla bilgi edinmek için lütfen CSS Eğitimimizi okuyun .


Tarayıcı Desteği

Element
<style> Yes Yes Yes Yes Yes


Öznitellikler

Attribute Value Description
media media_query Specifies what media/device the media resource is optimized for
type text/css Specifies the media type of the <style> tag

Genel Özellikler

Etiket ayrıca HTML'deki Global Nitelikleri<style> de destekler .


Etkinlik Özellikleri

Etiket ayrıca HTML'deki Etkinlik Niteliklerini<style> de destekler .


Daha fazla örnek

Örnek

Aynı öğeler için birden çok stil:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>

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

</body>
</html>

İlgili Sayfalar

HTML eğitimi: HTML CSS

CSS eğitimi: CSS Eğitimi

HTML DOM referansı: Stil Nesnesi


Varsayılan CSS Ayarları

Çoğu tarayıcı, <style>öğeyi aşağıdaki varsayılan değerlerle görüntüler:

style {
  display: none;
}