HTML - Stil Sayfası

Basamaklı Stil Sayfaları (CSS) belgelerin ekranlarda, baskıda nasıl sunulduğunu veya belki de nasıl telaffuz edildiğini açıklar. W3C, konsorsiyumun kurulduğu 1994 yılından bu yana Web'de stil sayfalarının kullanımını aktif olarak desteklemektedir.

Basamaklı Stil Sayfaları (CSS), HTML etiketleri için çeşitli nitelikler belirtmek için kolay ve etkili alternatifler sağlar. CSS kullanarak, belirli bir HTML öğesi için bir dizi stil özelliği belirtebilirsiniz. Her özelliğin iki nokta üst üste (:) ile ayrılmış bir adı ve değeri vardır. Her özellik bildirimi noktalı virgülle (;) ayrılır.

Misal

İlk olarak, metin rengini ve yazı tipi boyutunu belirtmek için <font> etiketini ve ilişkili nitelikleri kullanan bir HTML belgesi örneğini ele alalım -

Note- Yazı tipi etiketi kullanımdan kaldırıldı ve HTML'nin gelecekteki bir sürümünde kaldırılması gerekiyor. Bu yüzden kullanılmamaları gerekir, yazı tiplerinizi değiştirmek için CSS stillerini kullanmanız önerilir. Yine de öğrenme amacıyla, bu bölüm yazı tipi etiketini kullanan bir örnekle çalışacaktır.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>
	
   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>

Yukarıdaki örneği Style Sheet yardımıyla aşağıdaki gibi yeniden yazabiliriz -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

CSS'yi HTML belgenizde üç şekilde kullanabilirsiniz -

External Style Sheet - Stil sayfası kurallarını ayrı bir .css dosyasında tanımlayın ve ardından bu dosyayı HTML <link> etiketini kullanarak HTML belgenize dahil edin.
Internal Style Sheet - <style> etiketini kullanarak HTML belgesinin başlık bölümünde stil sayfası kurallarını tanımlayın.
Inline Style Sheet - Stil sayfası kurallarını doğrudan HTML öğeleriyle birlikte tanımlayın: style öznitelik.

Her üç durumu da uygun örnekler yardımıyla tek tek görelim.

Harici Stil Sayfası

Stil sayfanızı çeşitli sayfalarda kullanmanız gerekiyorsa, her zaman ayrı bir dosyada ortak bir stil sayfası tanımlamanız önerilir. Basamaklı bir stil sayfası dosyası şu uzantıya sahip olacaktır:.css ve <link> etiketi kullanılarak HTML dosyalarına dahil edilecektir.

Misal

Bir stil sayfası dosyası tanımladığımızı düşünün style.css aşağıdaki kuralları olan -

.red {
   color: red;
}
.thick {
   font-size:20px;
}
.green {
   color:green;
}

Burada, HTML etiketleri için tanımlanan üç farklı sınıfa uygulanabilecek üç CSS kuralı tanımladık. CSS çalışırken öğreneceğiniz için bu kuralların nasıl tanımlandığı konusunda endişelenmemenizi öneririm. Şimdi aşağıdaki HTML belgemizde yukarıdaki harici CSS dosyasını kullanalım -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML External CSS</title>
      <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
   </head>

   <body>
      <p class = "red">This is red</p>
      <p class = "thick">This is thick</p>
      <p class = "green">This is green</p>
      <p class = "thick green">This is thick and green</p>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

Dahili Stil Sayfası

Stil Sayfası kurallarını yalnızca tek bir belgeye uygulamak istiyorsanız, <style> etiketini kullanarak bu kuralları HTML belgesinin başlık bölümüne dahil edebilirsiniz.

Dahili stil sayfasında tanımlanan kurallar, harici bir CSS dosyasında tanımlanan kuralları geçersiz kılar.

Misal

Yukarıdaki örneği bir kez daha yazalım, ama burada stil sayfası kurallarını aynı HTML belgesine <style> etiketini kullanarak yazacağız -

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Internal CSS</title> 
      
      <style type = "text/css"> 
         .red { 
            color: red; 
         } 
         .thick{ 
            font-size:20px; 
         } 
         .green { 
            color:green; 
         } 
      </style> 
   </head>
	
   <body> 
      <p class = "red">This is red</p>  
      <p class = "thick">This is thick</p>  
      <p class = "green">This is green</p>  
      <p class = "thick green">This is thick and green</p> 
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Satır İçi Stil Sayfası

Stil sayfası kurallarını doğrudan herhangi bir HTML öğesine uygulayabilirsiniz. styleilgili etiketin özelliği. Bu, yalnızca herhangi bir HTML öğesinde belirli bir değişiklik yapmak istediğinizde yapılmalıdır.

Öğe ile satır içi olarak tanımlanan kurallar, harici bir CSS dosyasında tanımlanan kuralları ve <style> öğesinde tanımlanan kuralları geçersiz kılar.

Misal

Yukarıdaki örneği bir kez daha yazalım, ancak burada stil sayfası kurallarını HTML öğeleriyle birlikte yazacağız. style bu unsurların niteliği.

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Inline CSS</title> 
   </head>
 
   <body> 
      <p style = "color:red;">This is red</p>  
      <p style = "font-size:20px;">This is thick</p>  
      <p style = "color:green;">This is green</p>  
      <p style = "color:green;font-size:20px;">This is thick and green</p> 
   </body>
 
</html>

Bu, aşağıdaki sonucu verecektir -