CSS3 ve HTML Dersleri | Yana Yaslama (Float-Clear) ve Saçıntılar-Taşmalar (Overflow)
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 | […]
CSS3 ve HTML Dersleri | Elementlerin Pozisyonları (Position)
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 […]
CSS3 ve HTML Dersleri | Block ve Inline Seviyesi Elemanlar, Görünürlük (Visibility)
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ı […]
CSS3 ve HTML Dersleri | Tablo (Table) Özellikleri
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 […]
CSS3 ve HTML Dersleri | Liste Özellikleri
CSS Listeler Bu konumuzda CSS ile liste stil atamalarını göreceğiz. HTML derslerimizden hatırlarsak kullandığımız 3 çeşit liste etiketi bulunuyordu. Sayılabilen Listeler (Ordered Lists <ol>) Sayılamayan Listeler (Unoredered Lists <ul>) Açıklama Listeleri (Description Lists <dl>) Açıklama listelerinin çok fazla kullanılmamasına rağmen sayılabilen veya sayılamayan listeler HTML tasarımlarında çokça kullanılırlar. Sadece liste olarak düşünmeyin CSS ile bir navbar yapımında dahi […]
CSS3 ve HTML Dersleri | Hyperlink ve Bağlantılar
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 […]
CSS3 ve HTML Dersleri | Fontlar ve Özellikleri
Fontlar ve Özellikleri Bu bölümümüzde CSS üzerinden web sayfalarında kullanılan fontlar, yazı şekillerinden bahsedeceğiz. Genelde yeni başlayanlar için bu konu biraz soru işaretleriyle doludur. Başınıza gelmiştir, siteniz için bir font seçmişsinizdir, harikadır, sanki sizin web siteniz için yaratılmıştır bu fontlar. Local hostunuzda tasarladığınız ve hostinginize yükleyeceğiniz web sayfanızı görüyorsunuz mükemmel, hosting adresinize kopyalıyorsun ve ilk […]
CSS3 ve HTML Dersleri | Yazı (Text) Özellikleri
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 […]
CSS3 ve HTML Dersleri | BoxModel ve Outline
Kutu Modeli CSS’de tüm HTML etiketleri veya elemanları genişliği ve yüksekliği olan bir kutu (box) olarak düşünülür. CSS Kutu modeli (BoxModel) bu mantıkla, HTML etiketinin etrafını saran katmanlar dizisi olup, içeriğin kendisi (content), dolgu (padding), kenarlıklar (border) ve kenar boşluklarından (margin) oluşur. Bir elementin toplam genişlik ve toplam yüksekliği, box model (kutu modeli) kavramındaki elemanların […]
CSS3 ve HTML Dersleri | Genişlik ve Yükseklik
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 […]
Son Yorumlar