CSS Nasıl Eklenir
Bir tarayıcı bir stil sayfasını okuduğunda, HTML belgesini stil sayfasındaki bilgilere göre biçimlendirir.
CSS Eklemenin Üç Yolu
Stil sayfası eklemenin üç yolu vardır:
- Harici CSS
- Dahili CSS
- Satır içi CSS
Harici CSS
Harici bir stil sayfasıyla, yalnızca bir dosyayı değiştirerek tüm web sitesinin görünümünü değiştirebilirsiniz!
Her HTML sayfası, <link> öğesinin içindeki harici stil sayfası dosyasına bir referans içermelidir, başlık bölümü içinde.
Örnek
Dış stiller, bir HTML sayfasının <head> bölümünün içindeki <link> öğesi içinde tanımlanır:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Herhangi bir metin düzenleyicide harici bir stil sayfası yazılabilir ve bir .css uzantısıyla kaydedilmelidir.
Harici .css dosyası herhangi bir HTML etiketi içermemelidir.
"mystyle.css" dosyası şu şekilde görünür:
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Not: Özellik değeri ile birim arasına boşluk eklemeyin:
Yanlış (boşluk): margin-left: 20 px;
Doğru (boşluk):margin-left: 20px;
Dahili CSS
Tek bir HTML sayfasının benzersiz bir stili varsa, dahili bir stil sayfası kullanılabilir.
İç stil, <style> öğesinin içinde, baş bölümünün içinde tanımlanır.
Örnek
Dahili stiller, bir HTML sayfasının <head> bölümünün içindeki <style> öğesi içinde tanımlanır:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Satır içi CSS
Tek bir öğe için benzersiz bir stil uygulamak için satır içi stil kullanılabilir.
Satır içi stilleri kullanmak için, ilgili öğeye style niteliğini ekleyin. style niteliği, herhangi bir CSS özelliğini içerebilir.
Örnek
Satır içi stiller, ilgili öğenin "stil" özelliği içinde tanımlanır:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
İpucu: Satır içi stil, stil sayfasının birçok avantajını kaybeder (içeriği sunumla karıştırarak). Bu yöntemi dikkatli kullanın.
Çoklu Stil Sayfaları
Farklı stil sayfalarında aynı seçici (eleman) için bazı özellikler tanımlanmışsa, son okunan stil sayfasındaki değer kullanılacaktır.
Bir harici stil sayfasının <h1> öğesi için aşağıdaki stile sahip olduğunu varsayalım :
h1
{
color: navy;
}Ardından, bir dahili stil sayfasının <h1> öğesi için aşağıdaki stile de sahip olduğunu varsayalım :
h1
{
color: orange;
}Örnek
Dahili stil, harici stil sayfasına bağlantıdan sonra tanımlanırsa , <h1> öğeleri "turuncu" olacaktır:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Örnek
Ancak, dahili stil, harici stil sayfasına bağlantıdan önce tanımlanırsa, <h1> öğeleri "lacivert" olacaktır:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Basamaklı Sıra
Bir HTML öğesi için birden fazla stil belirtildiğinde hangi stil kullanılacak?
Bir sayfadaki tüm stiller, bir numaranın en yüksek önceliğe sahip olduğu aşağıdaki kurallara göre yeni bir "sanal" stil sayfasına "kademeli" olacaktır:
- Satır içi stil (bir HTML öğesinin içinde)
- Dış ve iç stil sayfaları (baş bölümünde)
- tarayıcı varsayılanı
Bu nedenle, bir satır içi stil en yüksek önceliğe sahiptir ve harici ve dahili stilleri ve tarayıcı varsayılanlarını geçersiz kılar.
W3Schools Spaces'ı hiç duydunuz mu? Burada kendi web sitenizi oluşturabilir veya daha sonra kullanmak üzere kod parçacıklarını ücretsiz olarak kaydedebilirsiniz.
Ücretsiz başlayın ❯* Kredi kartına gerek yok