4Css nasil eklenir.fw min

Css Ders 4 | Nasıl Eklenir?

Bir tarayıcı bir stil sayfasını okuduğunda, HTML belgesini stil sayfasındaki bilgilere göre formatlayacaktır. Peki css dosyası nasıl eklenir?

CSS Eklemenin Üç Yolu

Bir 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 bir web sitesinin görünümünü değiştirebilirsiniz!

Her HTML sayfası, head bölümünün içindeki <link> öğesinin içinde harici stil sayfası dosyasına bir referans içermelidir.

Örnek:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1>Bu bir başlıktır</h1>
<p>Bu bir paragraftır</p>

</body>
</html>

Harici bir stil sayfası herhangi bir metin düzenleyicide yazılabilir ve bir .css uzantısıyla kaydedilmelidir.

Harici .css dosyası herhangi bir HTML etiketi içermemelidir.

“style.css” dosyası şu şekildedir:

body {
  background-color: lightblue;
}

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

Not: Özellik değeri ile birim arasına (margin-left: 20 px; boşluk eklemeyin . Doğru yol şudur: (margin-left: 20px;)

Dahili CSS

Tek bir HTML sayfasının benzersiz bir stili varsa dahili bir stil sayfası kullanılabilir.

Dahili stil, head bölümünün içindeki <style> öğesinin içinde tanımlanır.

Örnek:

<!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>

Satır içi CSS

Satır içi stil, tek bir öğeye benzersiz bir stil uygulamak için 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:

<!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>

Çoklu Stil Sayfaları

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. 

Harici bir 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 sahip olduğunu varsayalım :

h1 {
  color: orange;   
}

Dahili stilharici stil sayfasına bağlantıdan sonra tanımlanırsa , <h1> öğeleri “turuncu” olur:

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

Bununla birlikte, dahili stil harici stil sayfasına bağlantıdan önce tanımlanmışsa , <h1> öğeleri “lacivert” olacaktır: 

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

Öncelikli Sıra

Bir HTML öğesi için birden fazla stil belirtildiğinde hangi stil kullanılacaktır?

  1. Satır içi stil (bir HTML öğesinin içinde)
  2. Dış ve iç stil sayfaları (head bölümünde)
  3. Tarayıcı varsayılanı

Bu nedenle, 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.

İletişim: admin@herseymi.com
Yazı oluşturuldu 96

Bir Yorum Yazın

Benzer yazılar

Aramak istediğinizi üstte yazmaya başlayın ve aramak için enter tuşuna basın. İptal için ESC tuşuna basın.

Üste dön