- Konu sahibi
- #1
CSS inline, CSS kurallarının doğrudan HTML etiketi üzerindeki
Aşağıdaki dosyayı
Beklenen sonuç, paragraf metninin mavi ve kalın görünmesidir. Görünüm değişmiyorsa
Inline CSS, HTML öğesinin
Burada
Normal bir inline bildirim, aynı öğeyi hedefleyen normal harici veya sayfa içi CSS bildirimlerine göre önceliklidir. Bu nedenle aşağıdaki örnekte metin kırmızı görünür:
Yazar stil dosyasındaki
Karar verirken şu ayrımı kullanın:
Örneğin yalnızca sunucudan gelen bir genişlik değeri öğeye özel ise inline kullanım anlamlı olabilir:
Buna karşılık tüm butonların ortak görünümü için her butona ayrı ayrı
Böylece renk veya boşluk değişikliği gerektiğinde tek CSS kuralını güncellemeniz yeterlidir. Responsive davranış gerektiğinde de sınıf tabanlı CSS,
Hayır. Inline CSS, bildirimin HTML öğesinin style niteliğine yazıldığı yeri anlatır.
Style niteliği normal CSS bildirimlerini kabul eder; standart kullanımda seçici,
style niteliğine yazılmasıdır. Yalnızca ilgili HTML öğesini etkiler. Örneğin <p style="color: red;"> kodu, o paragrafın yazı rengini kırmızı yapar. Küçük ve tek seferlik değişikliklerde pratiktir; ancak çok sayıda öğede kullanıldığında bakım, tekrar kullanım ve responsive tasarım zorlaşır.En küçük çalışır örnek
Aşağıdaki dosyayı
inline.html adıyla kaydedip tarayıcıda açın:
Kod:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>CSS inline örneği</title>
</head>
<body>
<p style="color: #1565c0; font-weight: 700;">
Bu metin inline CSS ile biçimlendirilmiştir.
</p>
</body>
</html>Beklenen sonuç, paragraf metninin mavi ve kalın görünmesidir. Görünüm değişmiyorsa
style niteliğinin doğru etikete yazıldığını, özellikler arasında noktalı virgül bulunduğunu ve HTML dosyasını kaydettikten sonra yenilediğinizi kontrol edin. Son satırdaki noktalı virgül zorunlu değildir; birden fazla özellik yazarken özellikleri birbirinden ayırır.Nasıl çalışır?
Inline CSS, HTML öğesinin
style niteliği içinde CSS bildirimleri olarak yazılır. Her bildirim özellik: değer biçimindedir:
Kod:
<div style="background-color: #f2f2f2; padding: 12px;">
İçeriği olan kutu
</div>Burada
background-color arka planı, padding ise iç boşluğu belirler. Aynı öğeye birden fazla CSS özelliği eklenebilir. Bildirim doğrudan bu öğeyi hedefler. Ancak color gibi miras alınabilen özellikler, çocuk öğede başka bir değer yoksa alt öğelere de yansıyabilir; bağımsız kardeş öğelere kopyalanmaz.Normal bir inline bildirim, aynı öğeyi hedefleyen normal harici veya sayfa içi CSS bildirimlerine göre önceliklidir. Bu nedenle aşağıdaki örnekte metin kırmızı görünür:
Kod:
<style>
.uyari {
color: black;
}
</style>
<p class="uyari" style="color: red;">Uyarı metni</p>Yazar stil dosyasındaki
!important bir bildirim, normal inline bildirimi geçersiz kılabilir. Fakat bu, her öncelik çatışmasını yeni !important ekleyerek çözmeniz gerektiği anlamına gelmez. Bu yaklaşım kodu karmaşıklaştırabileceği için inline kuralı yalnızca gerçekten öğeye özel bir değer gerektiğinde kullanın.Inline CSS ne zaman kullanılmalı?
Karar verirken şu ayrımı kullanın:
| İhtiyaç | Uygun yaklaşım | Neden |
|---|---|---|
| Tek bir öğeye özel, küçük değişiklik | Inline CSS | Hızlı ve doğrudan uygulanır |
| Aynı görünüm birçok öğede kullanılacak | Sınıf ve harici CSS | Tek noktadan bakım yapılır |
| Responsive düzen veya tema | Harici CSS | Media query ve tekrar kullanım daha kolaydır |
| JavaScript ile anlık değer değişimi | Inline stil veya CSS sınıfı | Değer çalışma anında güncellenebilir |
Kod:
<div style="width: 65%;">İlerleme</div>Buna karşılık tüm butonların ortak görünümü için her butona ayrı ayrı
style yazmak yerine bir sınıf tanımlayın:
Kod:
.buton {
background: #1565c0;
color: white;
padding: 10px 14px;
border-radius: 4px;
}
Kod:
<button class="buton">Gönder</button>Böylece renk veya boşluk değişikliği gerektiğinde tek CSS kuralını güncellemeniz yeterlidir. Responsive davranış gerektiğinde de sınıf tabanlı CSS,
@media kurallarıyla daha rahat yönetilir.Sık yapılan hatalar
- Aynı CSS değerini onlarca etikete kopyalamak: Ortak tasarım için sınıf kullanın.
- Inline CSS ile responsive düzen kurmaya çalışmak: Farklı ekran genişlikleri için harici veya sayfa içi CSS ve media query tercih edin.
- Özellikleri ayırmamak:
color: red; font-size: 18px;biçiminde noktalı virgül kullanın. - Inline kuralı
!importantile bastırmaya çalışmak: Önce gereksizstyleniteliğini kaldırmayı veya değeri sınıfa taşımayı değerlendirin. - Güvenlik politikası kısıtlamasını gözden kaçırmak: Sunucunun CSP ayarları inline
styleniteliklerini engelliyorsa stil uygulanmayabilir; bu durumda CSS'i izin verilen bir stylesheet'e taşıyın.
Sık sorulan sorular
Inline CSS ile display: inline aynı şey midir?
Hayır. Inline CSS, bildirimin HTML öğesinin style niteliğine yazıldığı yeri anlatır.
display: inline ise öğenin yerleşim davranışını belirleyen bir CSS değeridir. Harici dosyada da display: inline tanımlanabilir.Style niteliğine hover seçicisi veya media query yazabilir miyim?
Style niteliği normal CSS bildirimlerini kabul eder; standart kullanımda seçici,
:hover kuralı veya @media bloğu yazılmaz. Bunlar için sayfa içi style öğesi veya harici stil dosyası kullanın. JavaScript ile değer güncellemek ayrı bir işlemdir.