CSS, bir HTML belgesinin stilini tanımlayan bir dildir.

CSS, HTML öğelerinin nasıl gösterilmesi gerektiğini açıklar.

Bu eğitim, temelden ileri seviyeye kadar size CSS öğretecektir.

CSS Nedir

Web teknolojilerinde oldukça fazla öneme sahip olan CSS (Cascading Style Sheets) Basamaklı Stil Sayfaları olarak dile çevirebiliriz. Web sayfalarını görünürlük açısından iyileştirme sürecini kolaylaştırmak için tasarlanmış basit bir tasarım dilidir.

CSS, HTML öğelerinin ekran üzerinde nasıl görüntüleneceğini açıklar. Bir HTML belgesinin sunumu üzerinde oldukça güçlü bir kontrol mekanizması sağlar. CSS, bir web sayfasının görünüm bölümünü işlemektedir. CSS, web sayfalarınız için farklı cihazlar ve ekran boyutları için tasarım, yerleşim düzeni ve gösterim varyasyonları da dahil olmak üzere stilleri tanımlamak için kullanılır.

CSS kullanarak, örneğin metnin rengini, fontların stilini, paragraflar arasındaki boşluğu, sütunların boyutlarını, kullanılan arka plan görüntülerini veya renkleri, mizanpaj tasarımlarını, farklı cihazlar ve ekran boyutları için farklı tasarımları oluşturma kontrol edebilme, animasyonlar oluşturma gibi ve daha bir çok etkileri yaratabilirsiniz.

CSS kullanımının size kazandıracağı bir takım avantajlar mevcuttur;

CSS zaman kazandırır : CSS ‘i bir kez yazabilir ve birden fazla HTML sayfasında tekrar kullanabilirsiniz. Her bir HTML öğesi için bir stil tanımlayabilir ve istediğiniz kadar çok Web sayfasına uygulayabilirsiniz.
Sayfalar daha hızlı yüklenir : CSS kullanıyorsanız, her seferinde HTML etiketi nitelikleri yazmanız gerekmez. Bir etiketin tek bir CSS kuralını yazıp o etiketin tüm tekrarlarına uygulayın. Dolayısıyla, bu daha az kod daha hızlı indirme süreleri anlamına gelir.
Kolay bakım : Geniş çaplı bir değişiklik yapmak için tek bir stili değiştirmeniz yeterlidir. Sitenizin içinde yeralan tüm web sayfalarındaki bulunan tüm öğeler otomatik olarak güncellenir.
HTML’e üstün stiller : CSS HTML’den çok daha geniş bir nitelik dizisine sahiptir, böylece HTML niteliklerine kıyasla HTML sayfanıza daha iyi bir görünüm verebilirsiniz.
Çoklu Cihaz Uyumluluğu : Stil sayfaları, içeriğin birden fazla cihaz türü için optimize edilmesini sağlar. Aynı HTML belgesini kullanarak, web sitesinin farklı versiyonları, PDA’lar ve cep telefonları, tablet gibi taşınabilir cihazlar için veya daha farklı ebat ve farklı çözünürlüğe sahip monitörler için sunulabilir.
Global web standartları– Web standartlarını belirleyen World Wide Web Konsorsiyumu (W3C) artık HTML nitelikleri kullanımdan çıkarttı. Bunların yerine CSS’in kullanılması önerildi. Bu yüzden gelecekteki tarayıcılara uyumlu hale getirmek için CSS’i tüm HTML sayfalarında kullanmaya başlamak her zaman iyi bir fikirdir.
Çevrimdışı Çalışma : CSS, çevrimdışı olarak web uygulamaları ile beraber tarayıcınız tarafından yerel olarak depolanabilir. Bunu kullanarak, çevrimdışı web sitelerini görebilirsiniz. Aynı zamanda önbellek yardımı ile web sitesinin daha hızlı yüklenmesini ve daha iyi bir genel performans elde etmenizi sağlayacaktır.
Platform Bağımsızlığı : Komut dosyası tutarlı bir platform bağımsızlığı sunar ve en yeni tarayıcıları da destekleyebilir. CSS ‘e giren yeni bir özellik popüle olan tüm tarayıcılar tarafından hemen destek görür.

CSS öğrenmek ve anlamak kolaydır…

CSS Söz Dizimi

CSS ‘in bir tasarım dili olduğundan oldukça basit bir söz dizimine sahiptir. CSS, içeriğin farklı bölümlerinin nasıl sunulması gerektiğini tanımlayan bir dizi kural olarak düzenlenmiştir. Tamamen tarayıcınız tarafından yorumlanmaktadır. CSS, tarayıcı tarafından yorumlanan ve belgenizdeki ilgili öğelere uygulanan stil kuralı üç temel bölümden oluşmaktadır.

Seçici(Selector)- Seçici, bir stilin uygulanacağı bir HTML etiketi ifade eder. Bu, <h1> veya <p> gibi herhangi bir etiket olabilir.
Özellik(Property) , HTML etiketinin nitelik özelliğidir. Basitçe söylemek gerekirse, tüm HTML öznitelikleri CSS özelliklerine dönüştürülür. Örneğin genişlik, renk, font gibi…
Değer– Değerler, özelliklere atanır. Örneğin, renk özelliği, kırmızı veya # F1F1F1 Değerlere sahip olabilir .

Gerçek CSS kodu aşağıda gösterilen türde bir söz dizimine (syntax) sahiptir:


selector { 
    property: value ;
}

selector {

property: value ;

}

Yukarıdaki örnek söz diziminde sayfada bulunan <p> etiketli tüm metinlerin yazı fontu “Arial” tipi olarak tasarlanmıştır.

Web Sayfasına CSS Nasıl Eklenir?

HTML sayfalarınıza CSS eklemenin birkaç farklı yolu vardır. Yani, HTML dökümanınıza CSS bildirimlerini nasıl enjekte etmeniz gerektiği ile ilgili yolları ele alacağız. Her birinin kendi avantajları ve dezavantajları vardır. Doğru yöntemi veya yöntemlerin kombinasyonunu seçmek, yapmanız gereken iş miktarını azaltabileceği gibi, ziyaretçilerin sayfalarınıza erişiminde hafif bir hız kazandıracağı için de önemlidir.

Stilleri HTML belgenize ilişkilendirmenin üç yolu vardır. Bunlar;

Satıriçi Stil (Inline style)
Dahili Stil Sayfası (Internal style sheet)
Harici Stil Sayfası (External style sheet)
İçe Aktarılan Stil Sayfası (Imported style sheet)

1- Satıriçi Stil

Stil kurallarını tanımlamak için herhangi bir HTML öğesinin style niteliğini kullanabilirsiniz . Bu kurallar yalnızca o öğeye uygulanır.

Genel Söz Dizimi;


<!DOCTYPE html>
<html>
  <head>
    <title>yazilimbilisim.net</title>
    <meta charset="utf-8">
    <meta name="description" content="CSS Dersleri">
    <meta name="keywords" content="css,html,inline">
  </head>
  <body style="background-color: aqua;">
 
    <h1 style="color: maroon; margin-left: 40px;">Dahili Stil Sayfası</h1>
    <p style="padding-left : 20px; font-size : 18px; color : brown;">Bu bir paragraftır.</p>
 
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>yazilimbilisim.net</title>

</head>

<h1 style="color: maroon; margin-left: 40px;">Dahili Stil Sayfası</h1>

<p style="padding-left : 20px; font-size : 18px; color : brown;">Bu bir paragraftır.</p>

</body>

</html>

Uygulamayı tarayıcı ile test ettiğimizde aşağıdaki gibi bir görünüm elde edilir.

Tek bir öğe için benzersiz bir stil uygulamak için satır içi stil kullanılabilir. Ancak satıriçi kullanımı, CSS ‘in sunduğu tüm avantajları neredeyse ortadan kaldırmak anlamına gelir. Muhtemelen aynı kodu tekrar tekrar yazmanızı gerektirecek durumlar ortaya çıkarabilir. Ayrıca kodunuzu okumayı zorlaştıracaktır. Bu açıdan değerlendirildiğinde kullanımı pek tavsiye edilmez!

2 – Dahili Stil Sayfası

Dahili Stil yönteminde, CSS bildirimleriniz ayrı bir dosyada bulunmaz, bunun yerine HTML belgesinin üst kısmına eklenir. CSS kurallarınızı <style> öğesini kullanarak bir HTML belgesine yerleştirebilirsiniz. Bu etiket <head> … </ head> etiketlerinin içine yerleştirilir. Bu söz dizimi kullanılarak tanımlanan kurallar, dokümanda bulunan tüm öğelere uygulanır.

Genel Sözdizimi;

index.html


<!DOCTYPE html>
<html>
  <head>
    <title>yazilimbilisim.net</title>
    <meta charset="utf-8">
    <meta name="description" content="CSS Dersleri">
    <meta name="keywords" content="css,html,link">
    <style>
      body {
         background-color: aqua;
      }
      h1 {
         color: maroon;
         margin-left: 40px;
      } 
    </style>
  </head>
  <body>
 
    <h1>Dahili Stil Sayfası</h1>
    <p>Bu bir paragraftır.</p>
 
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>yazilimbilisim.net</title>

<style>

body {

background-color: aqua;

}

h1 {

color: maroon;

margin-left: 40px;

}

</style>

</head>

<body>

<h1>Dahili Stil Sayfası</h1>

<p>Bu bir paragraftır.</p>

</body>

</html>

Uygulamayı tarayıcı ile test ettiğimizde aşağıdaki gibi bir görünüm elde edilir.

Dahili stil kullanımı, CSS’i sitenizin her sayfasına eklemek zorunda olduğunuz için ideal değildir. Genellikle tek bir sayfa eşsiz bir stile sahip olması gerektiği durumlarda dahili bir stil sayfası kullanılabilir.

3 – Harici Stil Sayfası (External Style Sheet)

CSS’yi dahil etmek için en popüler yöntemlerden biridir. Bu yöntem ile tüm CSS bildirimlerinizi harici bir dosyaya (genelde bir .css uzantılı dosya) yazdıktan sonra HTML belgenizin başlığında <head>…</head> etiketleri arasına <link> etiketi ile bağlantısı (ilişkilendirilmesi) aşağıdaki gibi yapılır.


<!DOCTYPE html>
<html>
   <head>
      <title>...<title>
      <link href="stil.css" rel="stylesheet" type="text/css" media="all">
   </head>
   <body>
   
   <body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</html>

<link> etiketi href niteliği ile birlikte, bağlanmak istediğiniz dosya için bir url yolu bildirmenizi ister. rel niteliği ile bağlanılacak linkin siteyle ilişkisi belirtilir. type niteliği dosyanın kaynağı hakkında tarayıcılara bilgi vermek için kullanılırken, media niteliğine atanan “all” değeri tüm cihazlar için geçerli olacak bir bağlantı bildirimini sağlamaktadır. Söz konusu .css uzantılı stil dosyası herhangi bir metin editöründe yazılabilir.

Gerekirse birden fazla stil sayfasına bağlanabilirsiniz. Bunu yapmak için her stil sayfası için ayrı bir bağlantı etiketi eklemelisiniz.

Örneğin;


<!DOCTYPE html>
<html>
   <head>
      <title>...<title>
      <link href="css_dosyasi1.css" rel="stylesheet" type="text/css" media="all">
      <link href="css_dosyasi2.css" rel="stylesheet" type="text/css" media="all">
      <link href="css_dosyasi3.css" rel="stylesheet" type="text/css" media="all">
   </head>
   <body>
   
   <body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</html>

Örnek bir CSS dosyasının içeriğine bir göz atalım.

stil.css


body {
    background-color : aqua;
}
h1 {
    text-decoration : underline;
    color : #4583c2;
}
p {
    padding-left : 20px;
    font-size : 18px;
    color : brown;
}

body {

background-color : aqua;

}

h1 {

text-decoration : underline;

color : #4583c2;

}

p {

padding-left : 20px;

font-size : 18px;

color : brown;

}

index.html


<!doctype html>
<html>
  <head>
    <title>yazilimbilisim.net</title>
    <meta charset="utf-8">
    <meta name="description" content="CSS Dersleri">
    <meta name="keywords" content="css,html,link">
    <link href="stil.css" rel="stylesheet">
  </head>
  <body>
    <h1>Harici Stil Sayfaları</h1>
    <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>
</body>
</html>

<!doctype html>

<html>

<head>

<title>yazilimbilisim.net</title>

</head>

<body>

<h1>Harici Stil Sayfaları</h1>

<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>

</body>

</html>

(Not: Burada stil.css dosyasının, index.html ile aynı dizinde bulunduğu varsayılmıştır. Aksi takdirde, URL’yi buna uygun olarak değiştirmeniz gerekir.)
Uygulamayı tarayıcı ile test ettiğimizde aşağıdaki gibi bir görünüm elde edilir.

Bağlı stil sayfalarını kullanmanın faydaları, tüm kurallarımızı tek bir dosyaya yazabilmemizin ardından bu dosyayı istediğimiz sayıda HTML belgesine bağlayabilmemizdir. Sonra tek bir dosyada değişiklikler yapabilir ve bu değişiklikleri tüm HTML dosyalarımızda gerçekleştiğini görebiliriz. Aynı CSS dosyanızı farklı web projelerinizde tekrar kullanabilirsiniz. Son kullanıcı için bir yararı da hız. Dış stil sayfası ilk kez indirildiğinde tarayıcı kendi önbelleğinde bir kopyasını saklayacaktır. Sonra diğer sayfaları ziyaret ettiğinizde tarayıcınız CSS kurallarının yeraldığı bu dosyayı tekrar indirmeyecektir. Diğer bir başka avantajı ise HTML bildirimleriniz ile stil bildirimlerinizin dosya olarak birbirinden ayrılmasıdır. Böylece .html uzantılı dosyalarınızda web sayfanızın mantıksal tasarımını ve içeriğini ön plana çıkarabilir, biçimlemeye yönelik bildirimlerinizi .css dosyalarınızda kontrol edebilirsiniz.

4- İçe Aktarılan Stil Sayfası

İçe aktarılan CSS ile bir CSS dosyasındaki kuralları, başka bir CSS dosyasındaki kurallarla birleştirebiliriz. Bunu yapmak için, stil sayfamızda @import anahtar kelimesini kullanıyoruz . @import, harici bir stil sayfasını <link> öğesine benzer şekilde içe aktarmak için kullanılır. İşte @import kuralının genel sözdizimi;


@import url ("stil.css") media-types;

@import url ("stil.css") media-types;

Bu satır CSS dosyasına herhangi bir kural bildiriminden önce en üste eklenmelidir.

Bir örnek inceleyelim. Burada, stil.css, daha sonra HTML dokümanına bağlanacak olan tema.css’in içine aktarılır.

stil.css


h1 {
   text-decoration: underline;
}
p {
   padding-left: 20px;
   font-size: 18px;
}

h1 {

text-decoration: underline;

}

p {

padding-left: 20px;

font-size: 18px;

}

tema.css


@import url("stil.css");
h2 {
   color: #4583c2;
}

@import url("stil.css");

h2 {

color: #4583c2;

}

İçe aktarma, CSS’nin HTML sayfalarımıza nasıl uygulandığına dair daha hassas kontrol elde etmek için yararlı olabilir. Web projelerinde büyük olasılıkla tüm sayfalarda genel stillerin uygulanmasını isteriz. Ancak bazı durumlarda projenin belirli bölümlerinin kendi özel stil düzenine sahip olması gerekebilir. Bunu yapmanın en iyi yolu, CSS dosyasını parçalara bölmek olacaktır. Genel olarak tüm ana stilleri içeren bir dosya oluşturduktan sonra, söz konusu belirli bölümler için özel CSS kurallar tanımlayan diğer stil dosyaları yaratılır. Ardından ana stil dosyası, bölümler için oluşturulan alt stil dosyalarına dahil edilerek sonunda bu bölüm stil dosyaları ilgili HTML sayfalarına bağlanabilir.

Sonuç olarak

En iyi yaklaşım genellikle Harici bir stil sayfasıdır. Tüm kuralları tek bir yerde tutmak iş yükümüzü azaltır (kaç tane sayfamız olursa olsun) ve son kullanıcı için indirme süresini biraz azaltacaktır. Sitemizin farklı bölümleri ile biraz daha farklı gösterilmesini istiyorsanız, içe aktarılan stil sayfaları da eklenmelidir.Harici Stil Sayfaları ile çalışmanız size CSS’in tüm gücünü kullanmanıza olanak verecektir. Birden fazla özel stile sahip projelerde ise İçe Aktarma yöntemini kullanarak CSS dosyalarını parçalamak projelerinizde çok fazla esneklik kazandıracaktır.

Tek bir sayfamız varsa (ve bunun değişmeyeceğini biliyoruz) Dahili olması daha iyi bir yol olabilir. Kullanıcı için iki yerine bir dosya indirmek biraz daha etkili olacaktır.

Satır İçi Stil yaklaşımından mümkün olduğunca kaçınılmalıdır.

CSS Kuralları

CSS Kuralları Geçersiz Kılma

Web uygulamalarımızı oluştururken bazı durumlarda yazdığımız CSS bildirimlerinin görevini yerine getirmediği görülür. Bunun bazı temel nedenleri vardır. Bu nedenleri ve yol açabilecek sorunları iyi bilmeden CSS uygulamak bazen sizi dolaylı yollara sürükleyebilir. Böylece stil kodlarınızda gittikçe artan bir karmaşıklık göze çarpar. Şimdi bu nedenleri inceleyelim;

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

Stillerin sahip oldukları bir öncelik vardır.

Satır içi stil (bir HTML öğesinin içinde)
Dolayısıyla, satır içi stil (belirli bir HTML öğesinin içinde) en yüksek önceliğe sahiptir; yani, <head> etiketinde tanımlanan bir stili veya bir harici stil sayfasında veya bir tarayıcı varsayılan değerini geçersiz kılacaktır.
Dahili Stil sayfaları (baş bölümünde)
İkinci önceliğe sahip Dahili Satil Sayfaları <Style> … </ style> etiketlerinde tanımlanan kurallardır. Herhangi bir harici stil sayfası dosyasında tanımlanan kuralları geçersiz kılacaktır.
Harici Stil Sayfaları
Harici stil sayfası dosyasında tanımlanan tüm kurallar en düşük önceliğe sahiptir ve bu dosyada tanımlanan kurallar yalnızca yukarıdaki iki kural geçerli olmadığında uygulanır.
Tarayıcı varsayılan
İlgili HTML öğesine herhangi bir stil bildirimi yok ise tarayıcı varsayılan stili geçerli tutulacaktır.

Tarayıcılarla Uyumlu Çalışma

CSS her geçen gün sürekli olarak güncellenmektedir. Dolaysıyla yeni çıkan özelliklere tarayıcıların cevap vermesi aynı hızda olamayabiliyor. CSS’in bazı özelliklerini hala desteklemeyen birçok tarayıcı var. Dolayısıyla, Katıştırılmış CSS’mizi bir HTML belgesine yazarken hangi tarayıcılarda geçerli olduğu, yada geçerli kılmak için nasıl bir söz dizimine sahip olması gerektiğine dikkat ederek yazmakta yarar var. Bazen tarayıcıların yazdığınız CSS’i farklı yorumlayabilirler. Bu da web sayfalarınızın farklı tarayıcılarda farklı görünmesine yol açacaktır. Biz her zaman siteleri her ortamda aynı stilde kalmasını arzularız. Ama durum her zaman böyle olmayabilir. Bu sorunsalı aşmanın en kolay yollarından biride farklı tarayıcılar için farklı CSS bildirimlerinde bulunmaktır. Bu konuyu ileri konularımızda tekrar ele alacağız.

CSS Yorum Satırları

Çoğu zaman, stil sayfası bloklarınıza ek açıklamalar koymanız gerekebilir. Bu nedenle, stil sayfasındaki herhangi bir bölümü yorum satırı yapmak çok kolaydır. Basitçe // kullanabilirsiniz.


// Bu bir yorum satırıdır

// Bu bir yorum satırıdır

Çok satırlı blokları C ve C ++ programlama dillerinde yaptığınız gibi benzer şekilde yorumlamak için / * …. * / kullanabilirsiniz.


<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: red;
            // Bu bir yorum satırıdır.
            text-align: center;
         }
         /* Çok fazla yorum
            satırı yazabilirsiniz */
      </style>
   </head>
   <body>
      <p>Merhaba CSS</p>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

p {

color: red;

// Bu bir yorum satırıdır.

text-align: center;

}

/* Çok fazla yorum

satırı yazabilirsiniz */

</style>

</head>

<body>

<p>Merhaba CSS</p>

</body>

</html>

CSS Seçicileri (Selectors)

Bu bölümde tüm seçicileri kapsamayacağız (bu çok uzun ve kafa karıştırıcı olacaktır). Bunun yerine, daha kullanışlı seçicilerden bazılarını inceleyeceğiz ve diğerlerinden kolayca keşfedebileceğiniz ve öğrenebileceğiniz bir temel oluşturacağız. CSS seçicileri, HTML öğelerini öğe adı, kimliği, sınıfı, özniteliği ve daha fazlasına dayanarak “bulmak” (veya seçmek) için kullanılır.

Seçicilerin Kullanımını örneklerle inceleyelim;

1 . Eleman Seçici (Element Selector)

Eleman seçici, HTML etiket adına dayalı tüm öğeleri seçer. Seçici olarak CSS bildiriminde etiket ismi vermek yeterli olacaktır.

Örnek;


<!DOCTYPE html>
<html>
<head>
<style>
    body{
        background: yellow;
    }
    h1{
        text-align: center;
        color : green;
    }
    p {
        text-align: center;
        font-size: 24px;
        color: red;
    } 
</style>
</head>
<body>
    <h1>CSS Eleman Seçici</h1>
    <p>CSS Dersleri</p>
    <p>yazilimbilisim.net</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body{

background: yellow;

}

h1{

text-align: center;

color : green;

}

p {

text-align: center;

font-size: 24px;

color: red;

}

</style>

</head>

<body>

<h1>CSS Eleman Seçici</h1>

<p>CSS Dersleri</p>

<p>yazilimbilisim.net</p>

</body>

</html>

Örneğimizde sayfanın gövdesi olan <body> öğesi arkaplanı sarı renkte, başlık olarak verilen <h1> öğesi yeşil renginde ve ortalanmış metin olarak tasarlanırken, tüm <p> öğeleri ise kırmızı renkli ortalanmış ve 24px boyutunda olacaktır. Dikkat edecek olursanız tüm <p> öğeleri bu stilden etkilenmiştir. Uygulamayı test ettiğinizde aşağıdaki gibi bir görünüm elde edilecektir.

2-Kimlik Seçicisi (Id Selector)

Seçici, belirli bir öğeyi seçmek için bir HTML öğesinin id özniteliğini kullanır. Bir öğenin kimliği, bir sayfada benzersiz olmalıdır, dolayısıyla kimliği seçici, benzersiz bir öğe seçmek için kullanılır!

Kimliği, harfler, rakamlar, altçizgiler ve çizgilerle belirtilebilir. Nesneyi temsil ettiğini kolayca tanımlayabilmeniz için açıklayıcı bir şey olarak adlandırmanız en iyisidir. Bir sayfada istediğiniz kadar çok sayıda kimliği olabilir. Sayfadaki herhangi bir etikete bir kimlik uygulayabilirsiniz.

CSS ile belirli bir kimliği olan bir öğeyi seçmek için, öğenin kimliğinden önce (#) karakteri kullanmalısınız.


<!DOCTYPE html>
<html>
<head>
<style>
#icerik {
    text-align: center;
    color: red;
    background-color: yellow;
}
</style>
</head>
<body>
 
    <p id="icerik">ID ile kimliklendirilmiş içerik</p>
    <p>Bu birinci paragraf içeriğidir.</p>
    <p>Bu ikinci paragraf içeriğidir.</p>
 
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

#icerik {

text-align: center;

color: red;

background-color: yellow;

}

</style>

</head>

<body>

<p id="icerik">ID ile kimliklendirilmiş içerik</p>

<p>Bu birinci paragraf içeriğidir.</p>

<p>Bu ikinci paragraf içeriğidir.</p>

</body>

</html>

Yukarıdaki stil kuralı, id = “icerik” olan HTML öğesine uygulanacaktır:

3-Sınıf Seçicisi (Class Selector)

HTML’deki bir id niteliği kullanarak tek bir öğeye atıf yapabilmenin dışında aynı anda birden çok öğeye class niteliği ile bir CSS kuralını uygulamak mümkün. Stil kurallarını öğelerin sınıf özniteliğine göre tanımlayabilir, bu sınıfa sahip tüm öğeler, tanımlanan CSS kuralına göre biçimlendirebilirsiniz. Tek bir sınıf, aynı sayfada farklı etiketler türlerine de uygulanabilir. Dikkat edilmesi gereken husus, uygulanmak istenen HTML öğelerine aynı sınıf ismini vermektir. Diğer bir husus ise belli bir sınıfa sahip öğeleri seçmek için, nokta (.) karakteri kullanarak bunu sınıfın adıyla yazın.


<!DOCTYPE html>
<html>
<head>
<style>
.center {
    text-align: center;
    color: red;
}
</style>
</head>
<body>
 
<h1 class="center">Kırmızı ve ortalanmış bir başlıktır</h1>
<p class="center">Kırmızı ve ortalanmış bir paragraftır.</p> 
<p>Bu bir paragraftır.</p> 
 
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.center {

text-align: center;

color: red;

}

</style>

</head>

<body>

<h1 class="center">Kırmızı ve ortalanmış bir başlıktır</h1>

<p class="center">Kırmızı ve ortalanmış bir paragraftır.</p>

<p>Bu bir paragraftır.</p>

</body>

</html>

Yukarıdaki örnekte, class = “center” olan tüm HTML öğeleri kırmızı ve orta hizalı olacaktır.

Sınıf seçiciler belkide en çok kullanılan seçici şeklidir. Farklı kullanımlarıda mümkün olmaktadır. Örneğin;

Ayrıca, yalnızca belirli HTML öğelerinin bir sınıften etkilenmesi gerektiğini de belirleyebilirsiniz.


<!DOCTYPE html>
<html>
<head>
<style>
p.center {
    text-align: center;
    color: red;
}
</style>
</head>
<body>
 
<h1 class="center">Bu başlık stil kuralından etkilenmeyecektir.</h1>
<p class="center">Bu paragraf kırmızı ve ortaya hizalı olacaktır.</p> 
 
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

p.center {

text-align: center;

color: red;

}

</style>

</head>

<body>

<h1 class="center">Bu başlık stil kuralından etkilenmeyecektir.</h1>

<p class="center">Bu paragraf kırmızı ve ortaya hizalı olacaktır.</p>

</body>

</html>

Yukarıdaki örnekte, yalnızca class = “center” olan <p> öğeleri ortalanacaktır.

HTML öğeleri aynı zamanda birden fazla sınıfa da başvurabilir.


<!DOCTYPE html>
<html>
<head>
<style>
    p.center {
        text-align: center;
        color: red;
    }
 
    p.large {
        font-size: 300%;
    }
</style>
</head>
<body>
 
    <h1 class="center">Bu başlığa stil uygulanmamıştır</h1>
    <p class="center">Bu paragraf kırmızı ve ortaya hizalanmıştır</p>
    <p class="center large">Bu paragraf kırmızı, ortaya hizalanmış ve büyük bir fonta sahiptir.</p> 
 
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

p.center {

text-align: center;

color: red;

}

p.large {

font-size: 300%;

}

</style>

</head>

<body>

<h1 class="center">Bu başlığa stil uygulanmamıştır</h1>

<p class="center">Bu paragraf kırmızı ve ortaya hizalanmıştır</p>

<p class="center large">Bu paragraf kırmızı, ortaya hizalanmış ve büyük bir fonta sahiptir.</p>

</body>

</html>

Yukarıdaki örnekte <p> öğesi, class = “center” ve class = “large” biçiminde olacaktır;

4- Seçicileri Gruplama (Grouping Selectors)

Aynı tarz tanımlarına sahip öğeleriniz varsa, kodu en aza indirgemek için seçicileri gruplandırmak daha iyi olacaktır. Seçicileri gruplamak için, her seçiciyi bir virgül ile ayırın ve ortak CSS bildirimlerini yazın. Örneğin;


h1 {
    text-align: center;
    color: red;
}
 
h2 {
    text-align: center;
    color: red;
}
 
p {
    text-align: center;
    color: red;
}

h1 {

text-align: center;

color: red;

}

h2 {

text-align: center;

color: red;

}

p {

text-align: center;

color: red;

}

Yukarıdaki gibi bir durumda ortak CSS bildirimlerini ait seçicileri gruplamak iyi bir yol olacaktır.


h1, h2, p {
    text-align: center;
    color: red;
}

h1, h2, p {

text-align: center;

color: red;

}

5- Torun Seçici (descendant selector)

Belirtilen bir öğenin altında bulunan tüm alt öğeleri seçmeniz için kullanılan bir yöntemdir. Seçiciden hemen sonra altındaki öğeleri temsilen kullanacağınız ikinci seçici ile aralarında bir boşluk (space) bırakmak yeterlidir.

Örnek

Aşağıdaki örnek, <div> öğelerindeki tüm alt <p> öğelerini seçer.


<!DOCTYPE html>
<html>
<head>
    <title>yazilimbilisim.net</title> 
    <style>
        div p{
            background-color: yellowgreen;
        }
    
    </style>
</head>
<body>   
    <div>
        <p>div altında bulunan bir paragraf</p>
        <p>div altında bulunan bir paragraf</p>
        <span><p>div altında bulunan bir paragraf</p></span>
    </div>

<!DOCTYPE html>

<html>

<head>

<title>yazilimbilisim.net</title>

<style>

div p{

background-color: yellowgreen;

}

</style>

</head>

<body>

<div>

<p>div altında bulunan bir paragraf</p>

<span><p>div altında bulunan bir paragraf</p></span>

</div>

5- Çocuk Seçici (child selector)

Belirtilen bir öğenin bir alt seviyesinde bulunan tüm öğeleri seçmeniz için kullanılan bir yöntemdir. İki seçici arasında “>” işareti kullanılır.

Örnek

Aşağıdaki örnek, <div> öğelerinin hemen altında bulunan tüm <p> öğelerini seçer.


<!DOCTYPE html>
<html>
<head>
    <title>yazilimbilisim.net</title> 
    <style>
        div>p{
            background-color: yellowgreen;
        }
    
    </style>
</head>
<body>   
    <div>
        <p>div altında bulunan bir paragraf</p>
        <p>div altında bulunan bir paragraf</p>
        <span><p>div altında bulunan bir paragraf</p></span>
    </div>
 
<p>Bu paragraf div altında değildir</p>
<p>Bu paragraf div altında değildir</p>
 
</body>
</html>l>

<!DOCTYPE html>

<html>

<head>

<title>yazilimbilisim.net</title>

<style>

div>p{

background-color: yellowgreen;

}

</style>

</head>

<body>

<div>

<p>div altında bulunan bir paragraf</p>

<span><p>div altında bulunan bir paragraf</p></span>

</div>

<p>Bu paragraf div altında değildir</p>

</body>

</html>l>

5- Komşu Seçici (adjacent sibling selector)

Kendinden hemen sonra gelen ilk öğeyi seçmek için kullanılır. Seçiciler arası “+” işareti kullanılır.

Örnek

Aşağıdaki örnek, <div> öğelerinin hemen sonrasına yerleştirilen tüm <p> öğelerini seçer.


<!DOCTYPE html>
<html>
<head>
    <title>yazilimbilisim.net</title> 
    <style>
        div+p{
            background-color: yellowgreen;
        }
    
    </style>
</head>
<body>   
    <div>
        <p>div altında bulunan bir paragraf</p>
        <p>div altında bulunan bir paragraf</p>
        <span><p>div altında bulunan bir paragraf</p></span>
    </div>
 
<p>Bu paragraf div altında değildir</p>
<p>Bu paragraf div altında değildir</p>
 
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>yazilimbilisim.net</title>

<style>

div+p{

background-color: yellowgreen;

}

</style>

</head>

<body>

<div>

<p>div altında bulunan bir paragraf</p>

<span><p>div altında bulunan bir paragraf</p></span>

</div>

<p>Bu paragraf div altında değildir</p>

</body>

</html>

5- Kardeş Seçici (general sibling selector)

Kendinden sonra gelen tüm öğeleri seçmek için kullanılır. Seçiciler arası “~” işareti kullanılır.

Örnek


<!DOCTYPE html>
<html>
<head>
    <title>yazilimbilisim.net</title> 
    <style>
        div~p{
            background-color: yellowgreen;
        }
    
    </style>
</head>
<body>   
    <div>
        <p>div altında bulunan bir paragraf</p>
        <p>div altında bulunan bir paragraf</p>
        <span><p>div altında bulunan bir paragraf</p></span>
    </div>
 
<p>Bu paragraf div altında değildir</p>
<p>Bu paragraf div altında değildir</p>
 
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>yazilimbilisim.net</title>

<style>

div~p{

background-color: yellowgreen;

}

</style>

</head>

<body>

<div>

<p>div altında bulunan bir paragraf</p>

<span><p>div altında bulunan bir paragraf</p></span>

</div>

<p>Bu paragraf div altında değildir</p>

</body>

</html>

CSS Renkleri

Bir web sayfasının görünümüyle oynayacaksanız, doğru yapmanız gereken en önemli işlerden biri renktir. Metni, arka planı, sınırını ve daha fazlasını içeren web sitemizin, renklerini değiştirebiliriz. Doğru renk düzenini elde etmek sayfalarımızın görünümünü önemli ölçüde etkileyebilir. Çeşitli biçimlerde renk değerlerinizi belirtebilirsiniz. Renkler;

Önceden Tanımlı Renk Adları
RGB
HEX
HSL
RGBA
HSLA

değerleri kullanılarak belirtilir.

1-HTML ile bir renk, önceden tanımlanmış adı kullanarak belirtilebilir;

HTML’de isimlendirilmiş 140 civarında renk tanımı vardır. Bu renklerden birini kullanmak için tanım adını vermeniz yeterlidir.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="css renkler">
    <title>CSS Renkler</title>    
</head>
<body>  
    
    <h1 style="background-color:Tomato;">Tomato</h1>
    <h1 style="background-color:Orange;">Orange</h1>
    <h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
    <h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
    <h1 style="background-color:Gray;">Gray</h1>
    <h1 style="background-color:SlateBlue;">SlateBlue</h1>
    <h1 style="background-color:Violet;">Violet</h1>
    <h1 style="background-color:LightGray;">LightGray</h1>
    


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS Renkler</title>

</head>

<body>

<h1 style="background-color:Tomato;">Tomato</h1>

<h1 style="background-color:Orange;">Orange</h1>

<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>

<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>

<h1 style="background-color:SlateBlue;">SlateBlue</h1>

<h1 style="background-color:Violet;">Violet</h1>

<h1 style="background-color:LightGray;">LightGray</h1>

</body>

</html>

Yukarıdaki örnekte <h1> etiketlerinin background-color özelliğine renklerin adlarının uygulandığını görebilirsiniz.

2-RGB Değerleri ile Çalışmak

HTML’de, bir renk aşağıdaki formülü kullanarak bir RGB değeri olarak belirtilebilir:

rgb ( kırmızı, yeşil , mavi )

Her parametre (kırmızı, yeşil ve mavi) 0 ile 255 arasındaki rengin yoğunluğunu tanımlar. Örneğin rgb (255, 0, 0) kırmızı olarak görüntülenir, çünkü kırmızı en yüksek değerine (255), diğerleri 0’a ayarlanmıştır. Siyah rengi görüntülemek için, tüm renk parametrelerinin rgb (0, 0, 0) olarak ayarlanması gerekir. Beyaz rengi görüntülemek için, tüm renk parametrelerinin 255 olarak ayarlanması gerekir: rgb (255, 255, 255)


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="css renkler">
    <title>CSS Renkler</title>    
</head>
<body>  
    
    <h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
    <h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
    <h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
    <h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
    <h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
    <h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>    


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS Renkler</title>

</head>

<body>

</body>

</html>

Yukarıdaki örnekte farklı RGB değerleri ile renk gösterimi yapılmıştır.

3-HEXADECIMAL (Onaltılık) Sayı Olarak Renk Değerleri

Onaltılık, bir rengin 6 basamaklı bir temsilidir.

# rrggbb

Her onaltılık kodu ‘#’ işareti ile birlikte belirtilmelidir.

İlk iki rakam (RR) kırmızı bir değeri temsil eder, sonraki ikisi yeşil bir değerdir (GG) ve sonuncusu mavi değerdir (BB).

Her renk birimi 00 ile ff arasındaki onaltılık değerler olabilir.(ondalık 0-255 ile aynıdır).

Örneğin, kırmızı, en yüksek değerine (ff) ve diğerleri en düşük değere (00) ayarlandığından # ff0000 kırmızı olarak görüntülenir.

Onaltılık bir değer, Adobe Photoshop, Jasc Paintshop Pro gibi herhangi bir grafik yazılımından veya hatta Gelişmiş Paint Fırça kullanılarak alınabilir.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="css renkler">
    <title>CSS Renkler</title>    
</head>
<body>  
    
    <h1 style="background-color:#ff0000;">#ff0000</h1>
    <h1 style="background-color:#0000ff;">#0000ff</h1>
    <h1 style="background-color:#3cb371;">#3cb371</h1>
    <h1 style="background-color:#ee82ee;">#ee82ee</h1>
    <h1 style="background-color:#ffa500;">#ffa500</h1>
    <h1 style="background-color:#6a5acd;">#6a5acd</h1>    


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS Renkler</title>

</head>

<body>

</body>

</html>

Yukarıdaki örneğimizde onaltılık (hexadecimal) değerler kullanılarak çeşitli renk gösterimi yapılmıştır.

4-HSL Değeri Kullanımı

Renkleri temsil etmenin başka bir yolu da HSL‘dir.

hsl ( ton , doygunluk , hafiflik )

Ton, renk çarkı üzerinde bir dereceye kadar baz rengi belirtir. Kırmızı 0 °, yeşil 120 °, mavi 240 ° ve nihayetinde yine 360 ° döndürür.

Ardından , rengin ne kadar canlı olduğu Doygunluğu belirtiyoruz . Tam canlılık 100 ve donuk veya gri olan 0 arasında bir değere sahiptir.
Son olarak Parlaklık veya açıklık belirtiyoruz. Siyaha eğilimli olan 0 ile beyaza eğilimli olan 100 arasında bir değere sahiptir.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="css renkler">
    <title>CSS Renkler</title>    
</head>
<body>  
    
    <h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
    <h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
    <h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
    <h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
    <h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
    <h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS Renkler</title>

</head>

<body>

</body>

</html>

Yukarıdaki örnekte HSL değerleri üzerinden farklı renk gösterimi yapılmıştır.

5-RGBA Değeri

RGBA renk değerleri, RGB değerinin yanı sıra bir rengin opaklığını (şeffaflığı) belirleyen bir alfa kanalının eklenmesiyle belirtilir. Bir RGBA renk değeri aşağıdaki şekilde tanımlanır:

rgba ( kırmızı, yeşil , mavi, alfa )

Alfa parametresi, 0.0 (tamamen şeffaf) ile 1.0 (hiç şeffaf değil) arasındaki bir sayıdır:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="css renkler">
    <title>CSS Renkler</title>    
</head>
<body>  
    
    <h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
    <h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
    <h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
    <h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
    <h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
    <h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS Renkler</title>

</head>

<body>

</body>

</html>

Yukarıdaki örnekte RGBA değerleri kullanılarak farklı renk gösterimi yapılmıştır.

6-HSLA Değeri

HSLA renk değerleri, HSL değerine sahip bir rengin opaklığını belirleyen bir alfa kanalı ile birlikte belirtilir. Bir HSLA renk değeri aşağıdaki şekilde tanımlanır:

hsla ( ton, doygunluk , açıklık, alfa )

Alfa parametresi, 0.0 (tamamen şeffaf) ile 1.0 (hiç şeffaf değil) arasındaki bir sayıdır.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="css renkler">
    <title>CSS Renkler</title>    
</head>
<body>  
    
    <h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
    <h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.4)</h1>
    <h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
    <h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
    <h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
    <h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS Renkler</title>

</head>

<body>

</body>

</html>

Yukarıdaki örnekte HSLA değerleri kullanılarak farklı renk gösterimi yapılmıştır.

CSS Arka Plan Background Kullanımı

HTML öğelerinin arka plan efektlerini tanımlamak için CSS Arka plan özeliklerinden faydalanabilirsiniz. Şimdi bu özelliklerin neler olduğuna ve nasıl kullanıldıklarına bakalım;

1-background-color

background-color özelliği bir HTML öğesinin arka plan rengini belirlemenizi sağlar.


body {
    background-color: aqua;
}

body {

background-color: aqua;

}

Yukarıdaki örnekte sayfanızın tüm arka plan rengini aqua yapmanızı sağlar.

CSS ile bir renk seçimini, genellikle aşağıdakiler şekillerden biri ile belirlenir.

geçerli bir renk adı – “red” gibi
bir Hex değeri – “# ff0000” gibi
bir RGB değeri – “rgb (255,0,0)” gibi

CSS ile Renkler üzerine daha fazla bilgi almak için CSS Renkler başlıklı konuda inceleme yapabilirsiniz.

Örnek ;


<!DOCTYPE html>
<html>
<head>
<style>
    h1 {
        background-color: aqua;
    }


    div {
        background-color: rgb(100,150,100);
    }


    p {
        background-color: #FFFF00;
    }
</style>
</head>
<body>


    <h1>CSS Arka Plan Renkleri Belirleme</h1>
    <div> Bu bir div elementidir.
        <p>Bu bir paragraf metindir.</p>
    div elementi bu noktadan sonra devam etmektedir.
    </div>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

background-color: aqua;

}

div {

background-color: rgb(100,150,100);

}

p {

background-color: #FFFF00;

}

</style>

</head>

<body>

<h1>CSS Arka Plan Renkleri Belirleme</h1>

<div> Bu bir div elementidir.

<p>Bu bir paragraf metindir.</p>

div elementi bu noktadan sonra devam etmektedir.

</div>

</body>

</html>

Yukarıdaki örnekte HTML belgesi içinde bulunan <h1> <div> <p> öğelerinin arkaplan renkleri farklı renk gösterim şekilleri kullanılarak tanımlanmıştır.

2-background-image

background-image özelliği bir HTML öğesinin arka plan resmini tayin etmenizi sağlar. Varsayılan olarak, resim tüm elemanı kapsayacak şekilde tekrarlanır.

Bir sayfanın arka plan resmi aşağıdaki şekilde ayarlayabilirsiniz.


body {
    background-image: url("resim.jpg");
}

body {

}

Not : “resim.jpg” dosyası, sayfa ile aynı dizinde olduğu varsayılarak url() yolu yazılmıştır.

Örnek;


<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url(resim.png);
}
</style>
</head>
<body>


<h1>CSS Arka Plan Resmi</h1>
<p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

}

</style>

</head>

<body>

<h1>CSS Arka Plan Resmi</h1>

<p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p>

</body>

</html>

Sayfa tasarımlarında arka plan resmi kullanmak her zaman iyi bir bikir olmayabilir. Bir arka plan resmi kullanırken, metni rahatsız etmeyen bir görüntü kullanmanız tavsiye edilir.

3-background-repeat : repeat-x , repeat-y ,no-repeat

background-image özelliği ile tanımladığınız arka plan resmi resmin büyüklüğü ile orantılı olarak yatayda ve dikeyde tekrarlanarak tüm zemini dolduracaktır. Ancak tekrarlama sürecini sadece yatay (repeat-x), sadece dikey(repeat-y) veya tekrarsız(no-repeat) bir şekilde yapılmasını isteyebilirsiniz.

repeat-x kullanımına dair bir örnek;


<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url(resim.png);
    background-repeat: repeat-x;
}
</style>
</head>
<body>


<h1>CSS Arka Plan Resmi</h1>
<p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: repeat-x;

}

</style>

</head>

<body>

<h1>CSS Arka Plan Resmi</h1>

<p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p>

</body>

</html>

repeat-y kullanımına dair bir örnek;


<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url(resim.png);
    background-repeat: repeat-y;
}
</style>
</head>
<body>


<h1>CSS Arka Plan Resmi</h1>
<p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: repeat-y;

}

</style>

</head>

<body>

<h1>CSS Arka Plan Resmi</h1>

<p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p>

</body>

</html>

no-repeat kullanımına dair bir örnek;


<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url(resim.png);
    background-repeat: no-repeat;
}
</style>
</head>
<body>


<h1>CSS Arka Plan Resmi</h1>
<p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: no-repeat;

}

</style>

</head>

<body>

<h1>CSS Arka Plan Resmi</h1>

<p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p>

</body>

</html>

background-position

Arka plan resmini sayfanızın belirli bir konumuna veya merkezine yerleştirebilirsiniz. Bunun için background-position özelliğine konumlandırmak istediğiniz yeri belirtmeniz yeterli olacaktır.

background-position özelliğinin alabileceği değerler;

Örnek;


<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background-image: url(yazilimbilisim.png);
        background-repeat:no-repeat;
        background-position: right top;
    }
</style>
</head>
<body>


<h1>CSS Arka Plan Resmi</h1>
<p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p>
<div>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat:no-repeat;

background-position: right top;

}

</style>

</head>

<body>

<h1>CSS Arka Plan Resmi</h1>

<p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p>

<div>

</div>

</body>

</html>

Yukarıdaki örneğimizde arka plan resmi sağ-üst köşeye yerleşmesi sağlanmıştır.

background-attachment

Sayfa içeriğiniz ne kadar uzun olursa olsun arka plan resmini sabitlemek istiyorsanız background-attachment özelliğine, sayfanın geri kalanıyla birlikte kaydırma yapmayacağınızı belirtmek için fixed değeri ile birlikte kullanabilirsiniz.


<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background-image: url(yazilimbilisim.png);
        background-repeat:no-repeat;
        background-position:right top;
        background-attachment: fixed;
    }
    div{
        height: 4000px;
        background-color: cadetblue;
    }
</style>
</head>
<body>


    <h1>CSS Arka Plan Resmi</h1>
    <p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p>
    <div>Bu div öğesi 4000px uzunluğundadır.</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat:no-repeat;

background-position:right top;

background-attachment: fixed;

}

div{

height: 4000px;

background-color: cadetblue;

}

</style>

</head>

<body>

<h1>CSS Arka Plan Resmi</h1>

<p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p>

<div>Bu div öğesi 4000px uzunluğundadır.</div>

</body>

</html>

background

Kodu kısaltmak için, tek bir bildirimde tüm arka plan özelliklerini belirtmek de mümkündür. Buna, kısaltılmış bildirim denir.

background özelliği kısaltılmış bir bildirim özelliğidir. Kısaltmayı kullanırken sıralamanız şöyle olmalıdır.


background : background-color background-image background-repeat background-attachment background-position

background : background-color background-image background-repeat background-attachment background-position

Özellik değerlerinden birinin eksik olduğu durumda, diğerleri bu sırada olduğu sürece herhangi bir sorun oluşturmaz.

Örnek


<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background: #AA0000 url(yazilimbilisim.png) no-repeat fixed right top;
    }
    div{
        height: 4000px;
        background-color: cadetblue;
    }
</style>
</head>
<body>


<h1>CSS Arka Plan Resmi</h1>
<p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p>
<div>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

background: #AA0000 url(yazilimbilisim.png) no-repeat fixed right top;

}

div{

height: 4000px;

background-color: cadetblue;

}

</style>

</head>

<body>

<h1>CSS Arka Plan Resmi</h1>

<p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p>

<div>

</div>

</body>

</html>

background-size

CSS3 ile birlikte gelen background-size özelliği arka plan görüntülerinin boyutunu belirlemenizi sağlar. CSS3’ten önce, bir arka plan resminin boyutu, resmin gerçek boyutuydu. Bir arka plan resmini tam ekran yapabilmek için farklı tekniklerden faydalanıyorduk. Ancak CSS3, arka plan görüntülerini farklı bağlamlarda yeniden kullanmamızı sağlıyor.

Boyutlar, uzunluklar, yüzdeler veya iki anahtar kelimeden birini kullanarak belirtilebilir: içerme veya kapak.

Örnek;

Aşağıdaki örnek, bir arka plan resmini orijinal resminkinden çok daha küçük boyuta getirir (pikselleri kullanarak):


<!DOCTYPE html>
<html>
<head>
<title>CSS ile dikey ortalama</title>
<style>
    .arkaplan1{
        border: 1px solid black;
        background:url(yazilimbilisim-logo.png);
        background-repeat: no-repeat;
        padding:35px;
    }
    .arkaplan2 {
        border: 1px solid black;
        background:url(yazilimbilisim-logo.png);
        background-size: 80px 80px;
        background-repeat: no-repeat;
        padding:15px;
    }


</style>
</head>
<body>
    
    <h1>Arka Plan Resim Kullanımı</h1>
    <div class="arkaplan1">
        <h2>Orjinal Arkaplan Resmi</h2>
        <p>Bu div öğesinin arkasında kullanılan arkaplan resmi orjinal boyutundadır.</p>
    </div>
    <br>
    <div class="arkaplan2">
        <h2>Boyutlandırılmış Arkaplan Resmi</h2>
        <p>Bu div öğesinin arkasında kullanılan arkaplan resmi daha orjinalinden da küçük boyuttadır.</p>
    </div>
  
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS ile dikey ortalama</title>

<style>

.arkaplan1{

border: 1px solid black;

background:url(yazilimbilisim-logo.png);

background-repeat: no-repeat;

padding:35px;

}

.arkaplan2 {

border: 1px solid black;

background:url(yazilimbilisim-logo.png);

background-size: 80px 80px;

background-repeat: no-repeat;

padding:15px;

}

</style>

</head>

<body>

<h1>Arka Plan Resim Kullanımı</h1>

<h2>Orjinal Arkaplan Resmi</h2>

<p>Bu div öğesinin arkasında kullanılan arkaplan resmi orjinal boyutundadır.</p>

</div>

<br>

<h2>Boyutlandırılmış Arkaplan Resmi</h2>

<p>Bu div öğesinin arkasında kullanılan arkaplan resmi daha orjinalinden da küçük boyuttadır.</p>

</div>

</body>

</html>

Örnek;

Tam ekran arka plan resmi yapabilirsiniz.

Bunun için background-size özelliğine “cover” değeri atamanız yeterlidir.

CSS Kenarlık Ekleme

Her HTML elementin sahip olduğu bir kenarlığı (Border) mevcuttur. Siz onu biçimlendirmediğiniz sürece görülmez.

CSS Border özelliği, bir HTML öğesinin kenarlık stilini, genişliğini ve rengini belirtmenizi sağlar.

border-style Özelliği

border-style özelliği kenar çizgisinin dolgu stilini belirlemenizi sağlar. Aşağıda bu özellikler kısaca gösterilmiştir.

dotted – Noktalı çizgiye sahip kenarlığı tanımlar
dashed – Kesik çizgili kenarlığı tanımlar
solid – Düz bir sınır tanımlar
double – Çift çizgili kenarlığı tanımlar
groove – Oluklu bir kenarlığı tanımlar. Etkisi kenar renk değerine bağlıdır.
ridge – 3 boyutlu etkiye sahip düzleştirilmiş bir sınır tanımlar. Etkisi kenar renk değerine bağlıdır.
inset – 3 boyutlu etkiye sahip iç bükey kenar çizgisi tanımlar. Etkisi kenar renk değerine bağlıdır.
outset – 3 boyutlu etkiye sahip dış bükey kenar çizgisi tanımlar. Etkisi kenar renk değerine bağlıdır.
none – Herhangi bir kenar tanımlamaz
hidden – Gizli bir kenarlığı tanımlar

Örnek bir uygulama;

Aşağıda <p> etiketine uygulanmış farklı kenar stillerini görebileceğiniz bir örnek uygulama gösterilmiştir.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="CSS Border (Kenarlılık)">
    <title>CSS Dersler 4</title>    
</head>
    <style>
        p.p1 {border-style: dotted;}
        p.p2 {border-style: dashed;}
        p.p3 {border-style: solid;}
        p.p4 {border-style: double;}
        p.p5 {border-style: groove;}
        p.p6 {border-style: ridge;}
        p.p7 {border-style: inset;}
        p.p8 {border-style: outset;}
        p.p9 {border-style: none;}
        p.p10 {border-style: hidden;}
        p.p11 {border-style: dotted dashed solid double;}    
</style>
<body>  
    
    <h1>border-Style Özelliği</h1>
    <p class="p1">dotted stilinde kenar.</p>
    <p class="p2">dashed stilinde kenar.</p>
    <p class="p3">solid stilinde kenar.</p>
    <p class="p4">double stilinde kenar.</p>
    <p class="p5">groove stilinde kenar.</p>
    <p class="p6">ridge stilinde kenar.</p>
    <p class="p7">inset stilinde kenar.</p>
    <p class="p8">outset stilinde border.</p>
    <p class="p9">kenar yok.</p>
    <p class="p10">gizli border.</p>
    <p class="p11">karışık düzenlenmiş kenarlar.</p>  
  
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS Dersler 4</title>

</head>

<style>

p.p1 {border-style: dotted;}

p.p2 {border-style: dashed;}

p.p3 {border-style: solid;}

p.p4 {border-style: double;}

p.p5 {border-style: groove;}

p.p6 {border-style: ridge;}

p.p7 {border-style: inset;}

p.p8 {border-style: outset;}

p.p9 {border-style: none;}

p.p10 {border-style: hidden;}

p.p11 {border-style: dotted dashed solid double;}

</style>

<body>

<h1>border-Style Özelliği</h1>

<p class="p1">dotted stilinde kenar.</p>

<p class="p2">dashed stilinde kenar.</p>

<p class="p3">solid stilinde kenar.</p>

<p class="p4">double stilinde kenar.</p>

<p class="p5">groove stilinde kenar.</p>

<p class="p6">ridge stilinde kenar.</p>

<p class="p7">inset stilinde kenar.</p>

<p class="p8">outset stilinde border.</p>

<p class="p9">kenar yok.</p>

<p class="p10">gizli border.</p>

<p class="p11">karışık düzenlenmiş kenarlar.</p>

</body>

</html>

Ayrı ayrı kenarlara farklı stillerde uygulayabilirsiniz.


<!DOCTYPE html>
<html>
<head>
<style>
    p {
        border-top-style: dotted;
        border-right-style: solid;
        border-bottom-style: double;
        border-left-style: dashed;
    }
</style>
</head>
<body>


    <p>Kernarları farklı stilde olan bir paragraf</p>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

p {

border-top-style: dotted;

border-right-style: solid;

border-bottom-style: double;

border-left-style: dashed;

}

</style>

</head>

<body>

<p>Kernarları farklı stilde olan bir paragraf</p>

</body>

</html>

Peki, işler nasıl işliyor:

Eğer border-style özelliğine dört değer birden verilirse;


border-style : solid doshed dotted groove ;

border-style : solid doshed dotted groove ;

üst kenar “solid”
sağ kenarlık “dashed”
alt sınır “dotted”
sol sınır “groove” olarak tayin edilir.

Eğer border-style özelliğine üç değer verilirse;


border-style : solid dashed groove ;

border-style : solid dashed groove ;

üst kenar “solid”
sağ ve sol kenarlar”dashed”
alt kenar “groove”

Eğer border-style özellik iki değer verilirse;


border-style : solid groove ;

border-style : solid groove ;

üst ve alt sınırlar “solid”
sağ ve sol kenarlıklar “groove”

Eğer border-style özellik bir değeri varsa;


border-style : solid ;

border-style : solid ;

dört kenarın hepsi “solid”

şeklinde stil tayin edilmiş kabul edilir. Bu durum border-width ve border-color için de geçerlidir.

border-width Özelliği

border-width özelliği kenar çizgisinin kalınlığını (genişliğini) belirlemenizi sağlar. Çizgi kalınlığını (px, pt, cm, em vb…) türünden ölçülerle ifade edebilirsiniz. Tek değer vermeniz durumunda tüm çevre çizgi kalınlığını ifade etmiş olursunuz. Ayrı çizgi kalınlığı için 4 ayrı değerde verebilirsiniz. Bu durumda vermiş olduğunuz ölçüler sırayla üst, sağ, alt ve sol kenar taraflarının ölçüleri olacak şekilde tayin edilmiş olacaktır.

Aşağıda border-width CSS özelliğinin kullanımını inceleyebilirsiniz.


<!DOCTYPE html>
<html>
<head>
<style>
    p{
        border-style: solid;
    }
    p.bir {        
        border-width: 5px;
    }
    p.iki {
        border-width: medium;
    }
    p.uc {
        border-width: 2px;
    }
    p.dort {
        border-width: thick;
    }    
    p.bes {
        border-width: 2px 10px 4px 20px;
    }
</style>
</head>
<body>


    <h2>border-width Özelliği</h2>
    <p class="bir">Çizgi kalınlığım 10 px değerindedir.</p>
    <p class="iki">Medium çizgi kalınlığına sahibim.</p>
    <p class="uc">Çizgi kalınlığım 2 px değerindedir.</p>
    <p class="dort">Thick çizgi kalınlığına sahibim.</p>
    <p class="bes">Her kenar farklı ölçüdedir.</p>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

border-style: solid;

}

p.bir {

border-width: 5px;

}

p.iki {

border-width: medium;

}

p.uc {

border-width: 2px;

}

p.dort {

border-width: thick;

}

p.bes {

border-width: 2px 10px 4px 20px;

}

</style>

</head>

<body>

<h2>border-width Özelliği</h2>

<p class="bir">Çizgi kalınlığım 10 px değerindedir.</p>

<p class="iki">Medium çizgi kalınlığına sahibim.</p>

<p class="uc">Çizgi kalınlığım 2 px değerindedir.</p>

<p class="dort">Thick çizgi kalınlığına sahibim.</p>

<p class="bes">Her kenar farklı ölçüdedir.</p>

</body>

</html>

border-color Özelliği

border-color özelliği kenarların rengini tayin eder.

CSS ile bir renk seçimini, genellikle aşağıdakiler şekillerden biri ile belirleyebilirsiniz.

geçerli bir renk adı – “red” gibi
bir Hex değeri – “# ff0000” gibi
bir RGB değeri – “rgb (255,0,0)” gibi

Örnek;


<!DOCTYPE html>
<html>
<head>
<style>
    p.bir {
        border-style: solid;
        border-color: red;
    }


    p.iki {
        border-style: solid;
        border-color: green;
    }


    p.uc {
        border-style: solid;
        border-color: red green blue yellow;
    }
</style>
</head>
<body>


    <h2>border-color Özelliği</h2>


    <p class="bir">Bu paragrafın kırmızı kenarları var</p>
    <p class="iki">Bu paragrafın yeşil kenarları var</p>
    <p class="uc">Farklı renklere sahip kenarları olan bir paragraf</p>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

p.bir {

border-style: solid;

border-color: red;

}

p.iki {

border-style: solid;

border-color: green;

}

p.uc {

border-style: solid;

border-color: red green blue yellow;

}

</style>

</head>

<body>

<h2>border-color Özelliği</h2>

<p class="bir">Bu paragrafın kırmızı kenarları var</p>

<p class="iki">Bu paragrafın yeşil kenarları var</p>

<p class="uc">Farklı renklere sahip kenarları olan bir paragraf</p>

</body>

</html>

border Özelliği

Yukarıdaki örneklerden de görebileceğiniz gibi, kenarlar ile uğraşırken göz önüne alınması gereken birçok özellik vardır. Kodu kısaltmak için, tek bir “border” özelliğinde tüm bireysel kenarlık özelliklerini toplamakta mümkündür.

border özelliği sırayla ;

border-width
border-style
border-color özelikleri için bir kestirme niteliktir

Örnek;


<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid red;
}
</style>
</head>
<body>


<h2>border Özeliği</h2>
<p>5 piksel düz çizgili kırmızı renkli kenarları olan bir paragraf.</p>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

p {

border: 5px solid red;

}

</style>

</head>

<body>

<h2>border Özeliği</h2>

<p>5 piksel düz çizgili kırmızı renkli kenarları olan bir paragraf.</p>

</body>

</html>

Örnek;

Ayrıca, tek taraf için tüm bireysel kenarlık özelliklerini belirtebilirsiniz;


<!DOCTYPE html>
<html>
<head>
<style>
    p {
        border-left: 6px solid red;
        background-color: lightgrey;
    }
</style>
</head>
<body>


    <h2>border Özelliği</h2>
    <p>Sol kenarı 6px kalınlığında düz bir hattı olan kırmızı ve arka plan rengi olan bir paragraf</p>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

p {

border-left: 6px solid red;

background-color: lightgrey;

}

</style>

</head>

<body>

<h2>border Özelliği</h2>

<p>Sol kenarı 6px kalınlığında düz bir hattı olan kırmızı ve arka plan rengi olan bir paragraf</p>

</body>

</html>

Örnek;


<!DOCTYPE html>
<html>
<head>
<style>
    p {
        border-bottom: 6px solid red;
        background-color: lightgrey;
    }
</style>
</head>
<body>


    <h2>border Özelliği</h2>
    <p>Alt kenarı 6px kalınlığında düz bir hattı olan kırmızı ve arka plan rengi olan bir paragraf</p>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

p {

border-bottom: 6px solid red;

background-color: lightgrey;

}

</style>

</head>

<body>

<h2>border Özelliği</h2>

<p>Alt kenarı 6px kalınlığında düz bir hattı olan kırmızı ve arka plan rengi olan bir paragraf</p>

</body>

</html>

border-radius Özelliği

border-radius özelliği kenarları yuvarlatmak için kullanılır.

Örnek;

Aşağıdaki örnekte <p> elementine uygulanmış birbirinden farklı değerler ile köşeleri yuvarlatılmış kenar stilleri görebilirsiniz.


<!DOCTYPE html>
<html>
<head>
<style>
    p.normal {
        border: 2px solid blue;
    }


    p.round1 {
        border: 2px solid red;
        border-radius: 5px;
    }


    p.round2 {
        border: 2px solid yellow;
        border-radius: 8px;
    }


    p.round3 {
        border: 2px solid green;
        border-radius: 12px;
    }
</style>
</head>
<body>


    <h2>border-radius Özelliği</h2>


    <p class="normal">Normal Kenar</p>
    <p class="round1">Yuvarlatılmış kenarlar</p>
    <p class="round2">Yuvarlatılmış kenarlar</p>
    <p class="round3">Yuvarlatılmış kenarlar</p>
    
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

p.normal {

border: 2px solid blue;

}

p.round1 {

border: 2px solid red;

border-radius: 5px;

}

p.round2 {

border: 2px solid yellow;

border-radius: 8px;

}

p.round3 {

border: 2px solid green;

border-radius: 12px;

}

</style>

</head>

<body>

<h2>border-radius Özelliği</h2>

<p class="normal">Normal Kenar</p>

<p class="round1">Yuvarlatılmış kenarlar</p>

<p class="round2">Yuvarlatılmış kenarlar</p>

<p class="round3">Yuvarlatılmış kenarlar</p>

</body>

</html>

CSS Margin Kullanımı

CSS margin özellikleri ile HTML öğesine ait kenarların (border) dışından başlayarak elemanın çevresinde boşluk oluşturmak için kullanılır. Bu sayede margin kullanımı ile HTML öğelerinizin birbirleri ile aralarında oluşacak olan dış boşlukları ve aralarındaki mesafeleri tayin edebilirsiniz.

Örnek;

Aşağıdaki örneğimizde bir <div> öğesinin dış boşluğu 90 piksel olarak tayin edilmiştir.


<!DOCTYPE html>
<html>
<head>
<style>
    div {
        margin: 70px;
        border: 1px solid #4CAF50;
    }
</style>
</head>
<body>


    <div>div öğesinin kenar boşluğu 90 pikseldir.</div>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div {

margin: 70px;

border: 1px solid #4CAF50;

}

</style>

</head>

<body>

<div>div öğesinin kenar boşluğu 90 pikseldir.</div>

</body>

</html>

CSS, aynı zamanda bir öğenin her bir kenarına ait özel margin değeri belirlemek için alt özelliklere sahiptir;

margin-top
margin-right
margin-bottom
margin-left

Tüm margin özelliklerinde aşağıdaki türden değerler verilebilir;

auto – tarayıcı marjı hesaplar
bir değer – px, pt, cm vb. cinsinden bir kenar boşluğu belirtir.
% – içeren öğenin genişliğinin yüzdesi cinsinden bir kenar boşluğu belirtir
inherit – kenar boşluğunun üst öğeden devralınması gerektiğini belirtir.

Not: margin özelliğinde Negatif değerlere izin verilir.

Örnek;

Aşağıdaki örnek, bir <p> öğesinin dört kenarının tümünde farklı kenar boşlukları ayarlamaktadır:


<!DOCTYPE html>
<html>
<head>
<style>
    div {
        border: 1px solid black;
        margin-top: 100px;
        margin-bottom: 100px;
        margin-right: 150px;
        margin-left: 80px;
        background-color: lightblue;
    }
</style>
</head>
<body>


<h2>margin Özelliği</h2>


<div>Bu div öğesi üstten 100px, sağdan 150px, alttan 100px, soldan 80px dış boşluğa sahiptir.</div>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

margin-top: 100px;

margin-bottom: 100px;

margin-right: 150px;

margin-left: 80px;

background-color: lightblue;

}

</style>

</head>

<body>

<h2>margin Özelliği</h2>

<div>Bu div öğesi üstten 100px, sağdan 150px, alttan 100px, soldan 80px dış boşluğa sahiptir.</div>

</body>

</html>

margin özelliği

Kodu kısaltmak için bir margin özelliğinde tüm kenar boşluklarını belirlemek mümkündür.

margin özelliği sırayla aşağıdaki bireysel margin özellikleri için bir kestirme nitelik olarak kullanılmaktadır.

margin-top
margin-right
margin-bottom
margin-left

margin özelliğinin kullanımına bir bakalım;

Eğer margin özelliğine dört değer birden verilirse;


    margin: 35px 50px 75px 100px;

margin: 35px 50px 75px 100px;

üst kenar boşluğu 35 pikseldir
sağ kenar boşluğu 50 pikseldir
alt kenar boşluğu 75 pikseldir
sol kenar boşluğu 100 pikseldir.

Eğer margin özelliğine üç değer verilirse;


    margin: 25px 50px 75px;

margin: 25px 50px 75px;

üst kenar boşluğu 25 pikseldir
sağ ve sol kenar boşlukları 50 pikseldir
alt kenar boşluğu 75 pikseldir

Eğer margin özelliğinde iki değer varsa;


    margin: 25px 50px;

margin: 25px 50px;

üst ve alt kenar boşlukları 25 pikseldir
sağ ve sol kenar boşlukları 50 pikseldir

Eğer margin özelliği tek bir değer ise;


    margin: 25px;

margin: 25px;

dört kenar boşluğu da 25 pikseldir

auto değeri

margin değeri olarak auto verilmesi, HTML öğesinin kendini kapsayan elementin sınırları içinde yatay olarak orta kısımda hizalanmasını sağlayacaktır. Uygulanan HTML elemanı, belirtilen genişliğini alacak ve kalan alan sol ve sağ kenar boşlukları arasında eşit olarak bölünecektir;

Örnek;


<!DOCTYPE html>
<html>
<head>
<style>
    div {
        width: 300px;
        margin: auto;
        border: 1px solid red;
    }
</style>
</head>
<body>


    <h2>margin : auto; Değeri</h2>
    <p>CSS ile herhangi bir elementin margin özelliğine auto değeri verirseniz, bu element onu kapsayan öğenin ortasında bulunacaktır.</p>


    <div>
    Bu div bloğu sayfanın tam ortasında bulunur.
    </div>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

margin: auto;

border: 1px solid red;

}

</style>

</head>

<body>

<h2>margin : auto; Değeri</h2>

<p>CSS ile herhangi bir elementin margin özelliğine auto değeri verirseniz, bu element onu kapsayan öğenin ortasında bulunacaktır.</p>

<div>

Bu div bloğu sayfanın tam ortasında bulunur.

</div>

</body>

</html>

inherit değeri

margin değerine atanabilecek değerlerden biride “inherit” tir. Bu değerin anlamı devralmadır. Değerin atandığı HTML öğesini kapsayan öğenin özellik değerini alması gerektiğini belirtir.

Örnek;

Aşağıdaki örneğimizde <p> etiketinin sol dış boşluğu onu kapsayan <div> bloğu ile aynı değerde olacaktır.


<!DOCTYPE html>
<html>
<head>
<style>
    div {
        border: 1px solid red;
        margin-left: 100px;
    }


    p.ex1 {
        margin-left: inherit;
    }
</style>
</head>
<body>


<h2>margin Özelliğinde inherit Değeri ile Çalışmak</h2>


<div>
<p class="ex1">Bu paragrafın sol kenara ait margin değerini onu kapsayan div elementinden almaktadır.</p>
</div>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid red;

margin-left: 100px;

}

p.ex1 {

margin-left: inherit;

}

</style>

</head>

<body>

<h2>margin Özelliğinde inherit Değeri ile Çalışmak</h2>

<div>

<p class="ex1">Bu paragrafın sol kenara ait margin değerini onu kapsayan div elementinden almaktadır.</p>

</div>

</body>

</html>

margin Özelliğinin Çalışmadığı Durumlar

Üst üste gelmesini istediğimiz her iki HTML öğelerinin üst ve alt kenar boşluklarına margin atanabilir. Böyle durumlarda iki öğenin toplam margin değeri kadar boşluk bırakması beklenirken durum böyle olmaz. Bu gibi senaryolarda iki öğenin arasındaki boşluk margin değeri en yüksek olana eşitlenir. Bir örnekle inceleyelim;


<!DOCTYPE html>
<html>
<head>
<style>
    h1 {        
        margin: 50px;
    }

    h2 {
        margin: 20px;
    }
</style>
</head>
<body>


    <h1>Bu başlığın alt kenarında 50 piksel boşluk bırakılmıştır.</h1>
    <h2>Bu başlığın her kenarında 20 piksel boşluk bırakılmıştır.</h2>    


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

margin: 50px;

}

h2 {

margin: 20px;

}

</style>

</head>

<body>

<h1>Bu başlığın alt kenarında 50 piksel boşluk bırakılmıştır.</h1>

<h2>Bu başlığın her kenarında 20 piksel boşluk bırakılmıştır.</h2>

</body>

</html>

Yukarıdaki örneğimizde <h1> öğesine 50px <h2> öğesine ise 20px margin dış boşluk verilmiştir. Hesaplamalara göre <h1> başlığı ile <h2> başlığı arasında toplam (50px+20px) 70 piksel boşluk olması beklenirken, ekran çıktısında aradaki boşluğun 50 piksel olduğu görülür.

Bu durum yalnızca alt ve üst boşluklarda meydana gelmektedir, sol ve sağ kenar boşluklarında gerçekleşmez!

İlgili

CSS Nedir

CSS Söz Dizimi

Web Sayfasına CSS Nasıl Eklenir?

1- Satıriçi Stil

2 – Dahili Stil Sayfası

3 – Harici Stil Sayfası (External Style Sheet)

4- İçe Aktarılan Stil Sayfası

Sonuç olarak

CSS Kuralları

CSS Kuralları Geçersiz Kılma

Tarayıcılarla Uyumlu Çalışma

CSS Yorum Satırları

CSS Seçicileri (Selectors)

1 . Eleman Seçici (Element Selector)

2-Kimlik Seçicisi (Id Selector)

3-Sınıf Seçicisi (Class Selector)

4- Seçicileri Gruplama (Grouping Selectors)

5- Torun Seçici (descendant selector)

5- Çocuk Seçici (child selector)

5- Komşu Seçici (adjacent sibling selector)

5- Kardeş Seçici (general sibling selector)

CSS Renkleri

1-HTML ile bir renk, önceden tanımlanmış adı kullanarak belirtilebilir;

2-RGB Değerleri ile Çalışmak

3-HEXADECIMAL (Onaltılık) Sayı Olarak Renk Değerleri

4-HSL Değeri Kullanımı

5-RGBA Değeri

6-HSLA Değeri

CSS Arka Plan Background Kullanımı

1-background-color

2-background-image

3-background-repeat : repeat-x , repeat-y ,no-repeat

background-position

background-attachment

background

background-size

CSS Kenarlık Ekleme

border-style Özelliği

border-width Özelliği

border-color Özelliği

border Özelliği

border-radius Özelliği

CSS Margin Kullanımı

margin özelliği

auto değeri

inherit değeri

margin Özelliğinin Çalışmadığı Durumlar

Bunu paylaş:

İlgili

You may also like

About the author

admin

Add Comment