HTML - CSS Stil Yapısı!

HTML Stilleri - CSS — HTML Stilleri – CSS

Html dosyalarını <style></style> etiketleri ile biçimlendirebiliyoruz. Ancak CSS dosyalarımız ile bu biçimlendirmeyi daha etkili yapabiliriz.

HTML’yi CSS ile biçimlendirme

CSS açılımı C ascading S tyle S heets.

CSS, HTML öğelerinin ekranda, kağıtta veya başka bir ortamda nasıl görüntüleneceğini açıklar .

CSS çok fazla iş tasarrufu sağlar . Aynı anda birden fazla web sayfasının düzenini kontrol edebilir.

CSS, HTML öğelerine 3 şekilde eklenebilir:

Satır içi – HTML öğelerinde stil özelliğini kullanarak
Dahili – bölümdeki bir <style>öğeyi kullanarak.
Harici – harici bir CSS dosyası kullanarak

CSS eklemenin en yaygın yolu, stilleri ayrı CSS dosyalarında tutmaktır. Ancak, burada satır içi ve dahili stil kullanacağız, çünkü bunu göstermeniz daha kolay ve kendiniz denemeniz daha kolay.

Satır içi CSS

Bir satır içi CSS, tek bir HTML öğesine benzersiz bir stil uygulamak için kullanılır.

Satır içi bir CSS, bir HTML öğesinin stil niteliğini kullanır.

Bu örnek, <h1>öğenin metin rengini mavi olarak ayarlar :

<h1 style="color:blue;">Bu bir mavi başlık</h1>

Çıktısı;

See the Pen mavi başlık by ArmyYazılım (@armyyazilim) on CodePen.

Dahili CSS

Tek bir HTML sayfasının stilini tanımlamak için dahili bir CSS kullanılır.

Bir <head>HTML sayfasının bölümünde, bir <style>öğenin içinde bir iç CSS tanımlanmıştır :

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>Bu bir başlık</h1>
<p>Bu bir paragraf.</p>

</body>
</html>

Çıktısı;

See the Pen dahili css by ArmyYazılım (@armyyazilim) on CodePen.

Dış CSS

Birçok HTML sayfasının stilini tanımlamak için harici bir stil sayfası kullanılır.

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

Harici bir stil sayfası kullanmak için <head>, HTML sayfasının bölümüne bir link ekleyin :

<link rel="stylesheet" href="styles.css">

“style.css” burada stil doyanızın adıdır. Burayı tendinize göre düzenleyebilirsiniz.

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

<h1>Bu bir başlık</h1>
<p>Bu bir paragraf.</p>

</body>
</html>

Çıktısı;

See the Pen dış css by ArmyYazılım (@armyyazilim) on CodePen.

Harici bir stil sayfası herhangi bir metin düzenleyicisine yazılabilir. Dosya herhangi bir HTML kodu içermemeli ve bir .css uzantısıyla kaydedilmelidir.

İşte “styles.css” böyle görünüyor:

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

CSS Yazı Tipleri

CSS colorözelliği, kullanılacak metin rengini tanımlar.

CSS font-familyözelliği kullanılacak yazı tipini tanımlar.

CSS font-size özelliği, kullanılacak metin boyutunu tanımlar.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Çıktısı;

See the Pen css text stilleri by ArmyYazılım (@armyyazilim) on CodePen.

CSS Border

CSS borderözelliği, bir HTML öğesinin etrafındaki bir kenarlığı tanımlar:

p {
  border: 1px solid powderblue;
}

Çıktısı;

See the Pen css border by ArmyYazılım (@armyyazilim) on CodePen.

CSS Padding

CSS paddingözelliği, metin ve kenarlık arasında bir dolgu (boşluk) tanımlar:

p {
  border: 1px solid powderblue;
  padding: 30px;
}

Çıktısı;

See the Pen css padding by ArmyYazılım (@armyyazilim) on CodePen.

CSS Margin

CSS marginözelliği, sınırın dışında bir boşluk (boşluk) tanımlar:

p {
  border: 1px solid powderblue;
  margin: 50px;
}

Çıktısı;

See the Pen css margin by ArmyYazılım (@armyyazilim) on CodePen.

Kimlik Özniteliği

Özel bir öğeye belirli bir stil tanımlamak için öğeye id özellik ekleyin :

<p id="p01">Ben farklı paragrafım.</p>

daha sonra, belirli bir kimliğe sahip eleman için bir stil tanımlayın:

#p01 {
  color: blue;
}

Çıktısı;

See the Pen css id by ArmyYazılım (@armyyazilim) on CodePen.

Not: Bir öğenin kimliği sayfa içinde benzersiz olmalıdır, bu nedenle kimlik seçicisi benzersiz bir öğe seçmek için kullanılır!

Sınıf Özniteliği

Özel eleman türleri için bir stil tanımlamak için, classelemana bir özellik ekleyin :

<p class="error">I am different</p>

daha sonra belirli sınıfa sahip elemanlar için bir stil tanımlayın:

p.error {
  color: red;
}

Çıktısı;

See the Pen css class by ArmyYazılım (@armyyazilim) on CodePen.

Not: “class” yani sınıf stillerini istediğiniz etiketler için kullanabilirsiniz.

Dış Kaynaklar

Dış stil sayfalarına tam URL ile veya geçerli web sayfasına göre bir yolla başvurulabilir.

Bu örnek, stil sayfasına bağlantı oluşturmak için tam bir Web URL kullanır:

<link rel="stylesheet" href="https://www.armyyazilim.com/html/styles.css">

Bu örnek, geçerli web sitesindeki html klasöründe bulunan bir stil sayfasına bağlantı verir:

<link rel="stylesheet" href="/html/styles.css">

Bu örnek, geçerli sayfayla aynı klasörde bulunan bir stil sayfasına bağlantı verir:

<link rel="stylesheet" href="styles.css">

Bölüm özeti

style:Satır içi stil için HTML özelliğini kullanın

<style>:Dahili CSS’yi tanımlamak için HTML öğesini kullanın

<link>:Harici bir CSS dosyasına başvurmak için HTML öğesini kullanın

<head>:<style> ve <link> öğelerini saklamak için HTML öğesini kullanın

color:Metin renkleri için CSS özelliğini kullanın

font-family:Metin yazı tipleri için CSS özelliğini kullanın

font-size:Metin boyutları için CSS özelliğini kullanın

border:Kenarlıklar için CSS özelliğini kullanın

padding:Kenarlığın içindeki boşluk için CSS özelliğini kullanın.

margin:Kenarlığın dışındaki boşluk için CSS özelliğini kullanın.

HTML Stili Etiketleri

<style> : Bir HTML belgesi için stil bilgilerini tanımlar.

<link> : Belge ile harici kaynak arasındaki bağlantıyı tanımlar.

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …