HTML TEMELLERİ
HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)
HTML5
İLERİ SEVİYE
HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)
CSS TEMELİ
CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)
css arkaplan kodu
css arkaplan rengi
css arkaplan resmi boyutlandırma
css arkaplan rengi değiştirme
css arkaplan sabitleme
css background kullanımı
css background kodu
css arkaplan resmi sığdırma
css arkaplan tekrarlama
css arkaplan resmi koyma
css arkaplan resmi ekleme
css arkaplan rengi kodu
css arkaplan renk
css arkaplan renk geçişi
css background image align
css background image ekleme
css background color code
css background color example
css background color and image together
css background repeat image size
css background repeat and position
css background position kullanımı
css background position example
css background position nedir
css background attachment nedir
background attachment css code
background attachment in css
css background color
css background position
css background align

CSS Backgrounds(Arkaplan)

CSS Backgrounds(Arkaplan)

Css derslerimize en temel özellik olan arkaplan ile başlıyoruz. Web sayfanızı yada web sayfanızdaki dilediğiniz bölümleri css dilinin arkaplan özellikleri ile dilediğiniz gibi şekillendirebilirsiniz. Bu arkaplan özelliklerini birer örnek ile açıklayalım..

1-Background Image(Arkaplan Resmi)

Bu özellik ise adında anlaşılacağı gibi ilgili bölüme arkaplan resmi eklemenizi sağlar. Bunu yaparken resmin yolunu, ismini ve formatını uygun şekilde belirtmeyi unutmayın. Aşağıdaki örnekte cikti id değerine sahip div etiketimizin arkaplan özelliğini değiştiriyoruz.

Kullanımı:

Css
#cikti{
background-image: url("../../../img/kucuk_bg.png");
}
h2{
color:white;
}
p{
color:white;
}
Html
<html>
<head>
</head>
<body>
<h2>Birinci başlık</h2>
<p>Paragraf yazısı 1</p>
<h2>İkinci başlık</h2>
<p>Paragraf yazısı 2</p>
<h2>Üçüncü başlık</h2>
<p>Paragraf yazısı 3</p>
</body>
</html>

2-Background Color(Arkaplan Rengi)

Bu özellik ile ilgili bölüme arkaplan rengi verebilirsiniz. Renk değerini verirken rengin ismini, hex veya rgb kodlarını kullanabilirsiniz.Renk kodlarının ne olduğunu bilmiyorsanız renk kodları dersimize bir göz atınız.

Kullanımı:

Css
.icerik h2 {/* sayfadaki tüm h2 etiketleri */
background-color: #ccc;
}
.icerik p {/*sayfadaki tüm p etiketleri */
background-color: red;
}
#cikti{/* cikti div bölümü */
background-color:lightblue;
}
Html
<html>
<head>
</head>
<body>
<div class="icerik">
<h2>Birinci başlık</h2>
<p>Paragraf yazısı 1</p>
<h2>İkinci başlık</h2>
<p>Paragraf yazısı 2</p>
<h2>Üçüncü başlık</h2>
<p>Paragraf yazısı 3</p>
</div>
</body>
</html>

3-Background Repeat(Arkaplan Tekrarı)

Bu özellik ile istediğiniz bölümdeki arkaplan resmini tekrar etmesini sağlayabilir yada otomatik olarak tarayıcı resim küçük ise aynı resmi alanı doldurmak için tekrar tekrar ekleyecektir bunu engelleyebilirsiniz. Açıklamasında kafanız karışmış olabilir örnekte daha iyi anlayacaksınız.

Kullanımı:

Css
.icerik h1{/* sayfadaki tüm h1 etiketleri */
background-image: url("../../../img/gradient.png");
background-repeat: repeat-x;/*yatayda tekrarı sağlar*/
/*background-repeat: repeat-y; dikeyde tekrarı sağlar*/
/*background-repeat: no-repeat; tekrar etmesini engeller*/
}
Html
<html>
<head>
</head>
<body>
<div class="icerik">
<h1>Birinci başlık</h1>
<p>Paragraf yazısı 1</p>
<h1>İkinci başlık</h1>
<p>Paragraf yazısı 2</p>
<h1>Üçüncü başlık</h1>
<p>Paragraf yazısı 3</p>
</div>
</body>
</html>

4-Background Position(Arkaplan Konumu)

Bu özellik ile ilgili alanın arkaplan resminin konumunu belirlemenizi sağlar. Bu özellik genelde küçük resimler için kullanılır.

Kullanımı:

Css
#cikti{
height:300px;/*yükseklik değerini veriyoruz*/
background-image: url("../../../img/flower.png");
background-repeat: no-repeat;/*resmin tekrarlanmasını önlüyoruz*/
background-position: right top;/*resim sağ üstte gösterilsin*/
/*background-position: right bottom; resim sağ altta gösterilsin */
/*background-position: left top; resim sağ üstte gösterilsin.*/
/*background-position: center; resim ortada gösterilsin.*/
/*Not: Bunun gibi birçok konum verebilirsiniz.*/
/* Kısa yazımı */
/*background: #ffffff url("../../img/flower.png") no-repeat right top;*/
}
Html
<html>
<head>
</head>
<body>
<h1>Birinci başlık</h1>
<p>Paragraf yazısı 1</p>
<h1>İkinci başlık</h1>
<p>Paragraf yazısı 2</p>
<h1>Üçüncü başlık</h1>
<p>Paragraf yazısı 3</p>
<h1>Dördüncü başlık</h1>
<p>Paragraf yazısı 4</p>
<h1>Beşinci başlık</h1>
<p>Paragraf yazısı 5</p>
<h1>Altıncı başlık</h1>
<p>Paragraf yazısı 6</p>
</body>
</html>

5-Background Attachment(Arkaplan Bağlılığı)

Bu özellik ile arkaplan resimlerinizin sayfaya olan bağlılığını kontrol edebilirsiniz. Resimlerinizi bulunduğu alana sabitleyebilir veya kaymalarını sağlayabilirsiniz.

Kullanımı:

Css
#cikti{
background-image: url("../../../img/flower.png");
background-repeat: no-repeat;/*resmin tekrarlanmasını önlüyoruz*/
background-position: left top;/*resim sol üstte gösterilsin*/
background-attachment: fixed;/*resim sabit kalsın*/
/*background-attachment: scroll; resim kaysın*/
/* Kısa yazımı */
/*background: #ffffff url("../../img/flower.png") no-repeat right top;*/
}
Html
<html>
<head>
</head>
<body>
<h1>Birinci başlık</h1>
<p>Paragraf yazısı 1</p>
<h1>İkinci başlık</h1>
<p>Paragraf yazısı 2</p>
<h1>Üçüncü başlık</h1>
<p>Paragraf yazısı 3</p>
</body>
</html>


Paylaş:

Enes KILIÇ
Webmaster