CSS eklemek nasıl yapılır

Tarayıcı stil tablosunu okuduğunda, HTML belgesini stil tablosundaki bilgilere göre biçimlendirecektir.

CSS kullanmanın üç yöntemi

Stil tablosu eklemek için üç yöntem vardır:

  • Harici CSS
  • iç CSS
  • satır içi CSS

Harici CSS

Harici stil tablosu kullanarak, sadece bir dosyayı değiştirerek tüm web sitesinin görünümünü değiştirebilirsiniz!

Her HTML sayfası, head bölümündeki <link> öğesi içinde harici stil tablosu dosyasına atıf içermelidir.

örnek

HTML sayfasının <head> bölümündeki <link> öğesi içinde tanımlanan dış tarz:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>Bu bir başlıktır</h1>
<p>Bu bir paragraftır.</p>
</body>
</html>

Kişisel Deneyim

dış tarz tablosu herhangi bir metin düzenleyicisinde yazılabilir ve .css uzantısı ile kaydedilmelidir.

dış .css dosyası herhangi bir HTML etiketi içermemelidir.

"mystyle.css" şu şekildedir:

"mystyle.css"

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

dikkat:özellik değerleri ile birim arasında boşluk eklemeyin (örneğin margin-left: 20 px;()). Doğru yazım şu şekildedir:margin-left: 20px;

iç CSS

eğer bir HTML sayfası benzersiz bir tarzsa, iç tarz tablosu kullanılabilir.

iç tarz, head bölümündeki <style> ögesinde tanımlanır.

örnek

iç tarz, HTML sayfasının <head> bölümündeki <style> ögesinde tanımlanır:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>
<h1>Bu bir başlıktır</h1>
<p>Bu bir paragraftır.</p>
</body>
</html>

Kişisel Deneyim

satır içi CSS

satır içi tarz (ayrıca yerel tarz olarak bilinir) tek bir ögeye benzersiz tarz uygulamak için kullanılabilir.

satır içi tarz kullanmak için, ilgili ögeye style özelliği ekleyin. style özelliği herhangi bir CSS özelliğini içerebilir.

örnek

satır içi tarz, ilgili ögenin "style" özelliğinde tanımlanır:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">Bu bir başlıktır</h1>
<p style="color:red;">Bu bir paragraftır.</p>
</body>
</html>

Kişisel Deneyim

ipucu:satır içi tarz, tarz tablolarının birçok avantajını kaybetmiştir (içerik ile sunumu birleştirerek). Bu yöntemi dikkatli kullanın.

çok sayıda tarz tablosu

eğer aynı seçici (öge) için farklı tarz tablolarında bazı özellikler tanımlanmışsa, en son okunan tarz tablosundaki değerler kullanılacaktır.

varsayalımdış tarz tablosuise <h1> ögesi için aşağıdaki tarzı ayarladı:

h1 {
  color: navy;
}

daha sonra, bir tane varsayalımiç tarz tablosuise <h1> ögesi için aşağıdaki tarzı ayarladı:

h1 {
  color: orange;    
}

örnek

eğer iç tarz dış tarz tablosuna bağlanırsasonratanımlanan, ise <h1> ögesi turuncu olacak:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

Kişisel Deneyim

örnek

ancak, eğer dış tarz tablosuna bağlanırsaönceDahili stilleri tanımladıysanız, <h1> öğesi koyu mavi olacaktır:

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Kişisel Deneyim

Katmanlama Sırası

Bir HTML öğesine birden fazla stil tanımlandığında hangi stili kullanırız?

Sayfadaki tüm stiller aşağıdaki kurallara göre 'katmanlanır' ve yeni 'sanal' bir stil tablosu oluşturulur, en yüksek öncelik olan ilk:

  1. Satır içi stiller (HTML öğelerinde)
  2. Dış ve İç Stileşimler (head bölümünde)
  3. Tarayıcı Varsayılan Stilleri

Bu nedenle, satır içi stiller en yüksek önceliklidir ve dış ve iç stillerle birlikte tarayıcı varsayılan stillerini de kapsar.

Kişisel Deneyim