HTML <style> etiketi

Tanım ve kullanım

<style> etiketi, belgenin stillerini tanımlamak için kullanılır (CSS).

içinde <style> etiketi, HTML elementinin tarayıcıdaki sunumunu belirlemek için kullanılır.

Lütfen dikkat edin, style elementi HTML belgesine gömülü CSS stillerini tanımlar, link elementi ise dış tarz sayfalarındaki stilleri içe aktarır.

Style elementi HTML belgesinin herhangi bir kısmında出现 olabilir. Bir belge birden fazla style elementi içerebilir, bu yüzden tüm stil tanımlarını head bölümüne yerleştirmek zorunda değilsiniz. Sayfa özel stilleri oluşturmak için şablon motorları kullanılırken bu özellik oldukça yardımcı olabilir, çünkü bu şekilde şablon tanımlarına özel stiller ekleyebilirsiniz.

Ayrıca bakınız:

HTML eğitim:HTML CSS

CSS eğitim:CSS Eğitimi

HTML DOM referans kılavuzu:Style nesnesi

Örnek

Örnek 1

Kullanım: <style> Element HTML belgesine basit bir stil sayfası uygular:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>
<h1>Bu bir başlıktır</h1>
<p>Bu bir paragraftır.</p>
</body>
</html>

Kendiniz deneyin

Örnek 2

Aynı elementin çeşitli stilleri:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>
<h1>Bu bir başlıktır</h1>
<p>Bu bir paragraftır.</p>
</body>
</html>

Kendiniz deneyin

İpuçları ve açıklamalar

Dikkat:Tarayıcı tarayıcı stil sayfasını okurken, HTML belgesini stil sayfasındaki bilgilerine göre biçimlendirir. Aynı seçici (element) için farklı stil sayfalarında bazı özellikler tanımlanmışsa, en son okunan stil sayfasındaki değerler kullanılır (yukarıdaki örneğe bakın)!

İpucu:Dışarıdan stil sheete bağlanmak için kullanın <link> etiketi.

İpucu:Stil sheetlerle ilgili daha fazla bilgi edinmek için bizim CSS Eğitimi.

Özellik

Özellik Değer Açıklama
media Media Sorgulama Stilin kullanacağı medyayı belirtir.
type text/css <style> etiketinin medya türünü belirler.

Genel Özellikler

<style> Bu etiketler, aşağıdaki olay özelliklerini destekler: HTML'deki genel özellikler.

Olay Özellikleri

<style> Bu etiketler, aşağıdaki olay özelliklerini destekler: HTML'deki olay özellikleri.

Öntanımlı CSS Ayarları

Çoğu tarayıcı, aşağıdaki öntanımlı değerleri gösterecektir: <style> Element:

style {
  display: none;
}

Tarayıcı Desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek