Yana Yaslama (Float ve Clear) Günümüzde modern web sayfalarında float özelliği bir çok yerde kullanılmaktadır. Örnek vermek gerekirse navbar yapımında genellikle listeler sola veya sağa yaslanmış durumda kullanılır. Resimli bir makalenin içinde paragraflar ve resimler ile ilgili olarak birçok yerde kullanılır. Float özelliğinin en çok left veya right hizalaması kullanılır. Aldığı değerler; Float: left | […]

Pozisyon ve Katman (Layer) Mantığı CSS’de HTML elementlerinin pozisyonları (position) konusuna hakim olmak tasarımımızın güçlü ve estetik olmasını sağlayacak önemli bir unsurdur.  CSS’de elementlerin pozisyonlarını anlatmadan önce layer mantığını kavramış olmamız gerekir. Layer (katman) mantığından biraz bahsetmek gerekirse, HTML sayfasını öncelikle 2 boyutlu olarak düşünürsek bütün HTML blok seviyesindeki elementler sayfaya yerleştirildiğinde farklı farklı noktalarda […]

Blok (Block) ve Satır İçi (inline) Seviye Elemanları CSS dersimizin bu bölümünde Elementlerin hangi seviyede element olduklarından ve bunların görünürlük durumlarından bahsedeceğiz. Elementlerin seviye durumunu 2 kategoriye ayırabiliriz. Birincisi Blok (Block) seviye elementler, İkincisi Satır içi  (inline) elementler. Blok (Block) Seviyesi Elementler/Etiketler Başlıca blok seviyesi elementler; <div>, <h1>…<h6>, <p>, <form>, <header>, <footer>, <section> Blok seviyesi mantığını […]

Aşağıda temel olarak html dosyasında tablo oluşturulmuş ve aşağıdaki tüm anlatım ve örnekler bu dosya üzerinden verilmiştir. Tablo Kenarlıkları (Border) / Sınırları Kenarlıklar konusunda anlatılan tüm özellikler tablo işlemlerinde de kullanılabilir. Kenarlık (Border) ve Özellikleri adlı yazıma ulaşmak için tıklayınız. Tablo Kenarlıklarını Daraltma (border-collapse) Tablo ögelerinden tablo başlığı (<th> table head), hüçre içeriklerine (<td> table […]

CSS’de Hyperlink Bağlantı Stilleri Hyperlinklerin bilindiği üzere varsayılan stil atamaları mevcuttur. Normal hiç ziyaret edilmemiş bir link mavi renkte, ziyaret edilen link mor renkli olur. Ayrıca her hyperlink yaratıldığında altı çizili bir görünüm alır. Üzerine basılı tutulduğunda aktif halde kırmızı rengi alacaktır. İşte bu stilleri biz kendimize göre tasarlayabiliriz. Bahsettiğim üzere bir hyperlink’in 4 çeşit […]

Bu yazımda ve eğitimde CSS dilinin text, yazı  özellikleri ve değerlerinin HTML üzerinde yazılara nasıl etki ettiğini göreceğiz. Aşağıdaki HTML kod bloğuna style.css dosyası external olarak eklenmiştir. Her bir özellik maddesi için yazılmış olan style.css dosyasını ayrı ayrı index.html üzerinde deneyebilirsiniz. index.html Yazı Rengi Özelliği (color:) CSS’de color özelliğini en yaygın olarak kullanılan 3 şekli […]

CSS’de Genişlik ve Yükseklik CSS’de en çok kullanılan özellikler arasındadır genişlik ve yükseklik özellikleri. Web tasarımları genellikle bir tasarımcı tarafından photoshop gibi programlarda tasarlanır ve buna bağlı olarak html ve css kullanılarak büyük oranda aynısı elde edilir. Bu noktada bir web sayfasının genişlik değerine göre ölçme, biçme ve hesaplama gerekir. Bu noktada etiketlerin konumuna göre […]

Padding Türkçe anlamı malumunuz dolgu demektir. Padding özelliğinin mantığı için şunu düşünün, bir arsanız var ve ev yapacaksınız. Arsanızın bir kare olduğunu ve her bir kenarının 10 metre olduğunu düşünün. Bu arsanın alanı doğal olarak 100metre kare yapar. Bu arsaya bir ev yaptığınızda net daire alanı hiç bir zaman 100metre kare olamaz. Çünkü kullandığınız tuğla, […]

Kenarlık (Border) Özellikleri Bu dersimizde HTML etiketleri üzerinde kenarlık özelliklerin nasıl atandığını, çeşitlerini ve kullanım şekillerinin anlatılarak öğrenilmesi hedeflenmektedir. Örnekte verilen index.html dosyası üzerine yine örnekleri verilen style.css dosyaları tanımlanarak kendi tarayıcınızda sonuçları gözlemleyebilirsiniz. Kenarlık Çeşitleri (border-style) HTML üzerinde elementlere bir çok çeşitte ve yöntemle border ataması yapabiliriz. Kullanılacak olan border çeşitlerini veya border stillerini […]

Bu dersimizde CSS’de arkaplan özelliklerini ve alabileceği değerleri öğreneceğiz. Aşağıdaki tüm stil özelliklerini HTML sayfası üzerinde kendi editörünüzde deneyebilirsiniz. Arkaplan Rengi (background-color) Bu özelliğin alacağı değerler doğrudan yazılacağı gibi (Ör: red, white, purple, black) HEX renk kodları ve RGB renk skalası kullanılabilir. Arkaplan Resmi (background-image) Örneklerde kullanılan arkaplan resimlerini indirmek için tıklayınız. Arka plan stil […]