Css Liste Özellikleri

Egemen Özbeyli 3 Yorum CSS3

Merhaba arkadaşlar,

Bu paylaşımımda sizlere Css ile liste tanımlamayı ve liste özelliğini kullanarak yapabileceğiniz uygulamalardan bahsedeceğim.

İlk olarak konu hakkında genel bi bilgi vermek gerekirse,Css liste özelliği ilk zamanlarda konuları veya maddeleri listelemede kullanılıyordu fakat artık liste yapısı menu yapımında daha çok kullanılmakta.Yani güzel menüler tasarlamak için Css ve liste yapısını bilmek çok etkilidir.

Şimdi liste özelliklerine madde madde göz atalım ;

1 – List Style Type :

disc,circle,square,decimal,lower-roman,upper roman gibi farklı kullanım özellikleri bulunmaktadır,Bu özellikler list-style-image değeri none olduğunda kullanılan özelliklerdir.Listelerin başındaki simgeleri bu özellikleri kullanarak değiştirebilir,listelerin başında daire,çember,kare veya sayı değerleri şeklinde sıralayabilirsiniz.

Kullanımı aşağıdaki gibidir,İlk olarak Css tanımlamasını belirleyip sonra Html kısmını düzenliyoruz.


ul.a {list-style-type:circle;}  // circle yazan kısma diğer parametleri koyarak deneme yapabilirsiniz.

/////////////////////////////////////

<ul class="a">
<li>Adana</li>
<li>İstanbul</li>
<li>Zonguldak</li>
</ul>

List-Style-Type | değer ; Diğer değerlerle listelendiğinde nasıl göründüğü önizlemek için buraya bakabilirsiniz.

2 – List-Style-Position :

Bu özellikle list-item işaretlerinin metinin içindenmi , dışındanmı olacağını belirleyebilirsiniz.Bu şekilde net anlaşılmasada buradaki örneğe bakara dediğimi daha iyi anlayabilirsiniz.

3 – List-Style-İmage :

Bence bu konuda bilmeniz gereken en önemli özellik budur,Çünkü yazımın başındada söylediğim gibi bu özellik sayesinde çok güzel menüler oluşturabilirsiniz.Ben bu yazımda bu bölümü direk eski paylaşımıma yönlendirmek istiyorum çünkü geçmiş zamanda bu konu hakkında ayrıntılı bir paylaşımda bulunmuştum.Ayrıntılı bilgi için buraya

Umarım faydalı bir paylaşım olmuştur,Kafanıza takılan veya merak ettiğiniz kısımları bana yorum bölümünden iletebilirsiniz.

Devamını Oku

Css Font Özellikleri

Egemen Özbeyli 1 Yorum CSS3

Merhaba arkadaşlar,

Uzun zamandır işlerimin yoğunluğundan dolayı yapamadığım paylaşımlarıma somut olarak işlemler yapabileceğiniz ve web sayfalarının en önemli kısımlarından biri olan font ve özellikleriyle devam edeceğim.Bu paylaşımda css ile fontları nasıl ve ne şekillerde değiştirebiliriz onu öğreneceğiz.

İlk olarak Css’de font için kullanabileceğiniz özellikler aşağıdaki gibidir,

i . Color
ii . Font Family
iii . Font Size
iv . Font Weight
v . Font Style
vi . Font Variant
vii . Font

Şimdi adım adım yukarıdaki değelerin nasıl uygulanacağına geçebiliriz.

1 – Color :

Bu özellik sayesinde web sayfalarında yazılarımıza istediğimiz rengi tanımlayabiliriz.Örnekle açıklayacak olursak aşağıdaki satırlar net bir uygulama olacaktır.


p.header { color:#FF0000;} // Bu şekilde header bölümünde yazılarımız kırmızı olarak yazacaktır.

2 – Font Family :

Metinlerde kullanacağımız font ailelerini belirlemek için kullanacağımız özelliktir,Kullanımı hakkında aşağıdaki örneğe bakabilirsiniz.


p{

color:#FF0000;

 font-family:"Times New Roman", Times, serif; } // Bu durumda yazdığımız yazılar kırmızı ve Times New Roman ailesiyle yazılacaktır.

3 – Font Size :

Bu özellik yazdığımız yazıların boyutlarını belirlemekte kullanacağımız özelliktir,Kullanımının farklı çeşitleri vardır,Bu farklı kullanımlar aşağıdaki örnekte (daha&helliip;)

Devamını Oku

Css Background (Arkaplan) Özellikleri

Egemen Özbeyli 3 Yorum CSS3

Merhaba arkadaşlar, bu makalemizi geliştirdik. İsterseniz yeni haline buradan erişebilirsiniz.

Css derslerimin bir diğer paylaşımında sizlere css background özelliği hakkında bilmeniz gereken kısımları ve bu özelliğin nasıl kullanıldığını örneklerle anlatacağım.Background’ın kullanım şekli ve özellikleri farklılık gösterdiğinden adım adım tüm özellikleri anlatmanın en doğru yol olacağını düşündüm ve anlatım sırası aşağıdaki gibi olacaktır.

i . Background-color

ii . Background-image

iii . Background-repeat

iv . Background-position

v . Background-attachment

Css ile background özelliklerine ilk madde olan background-color ile başlıyoruz.

background-color:

Bu özellik sayesinde belirlediğimiz elementlerimize arkaplan rengi atayabiliriz,örnek kullanım aşağıdaki gibidir.

body { background-color:#FF0000; } // Bu kod satırı sayfamızın arkaplan rengini kırmızı olarak belirleyecektir.

Burada renk seçimi farklı şekillerde (rgb,rgba) tanımlanabilir,bu renk seçimleri hakkında ayrıntılı bilgiye buradan ulaşabilirsiniz. (daha&helliip;)

Devamını Oku

Css Web Sayfalarına Nasıl Eklenir

Egemen Özbeyli 9 Yorum CSS3

Merhaba arkadaşlar,

Geçen hafta yaptığım paylaşımımda Css’e Başlamak ve Css’in yapısı adlı paylaşımımda Css’e giriş yapmıştık,bu hafta ise Css’i web sayfamıza nasıl ekleyeceğimizi anlattıktan sonra artık Css üzerine somut çalışmalar yapmaya başlayacağız.

Bu paylaşımı sakın göz ardı etmeyin,Çünkü bundan önceki hafta yaptığım css’in temel yapısı ve bugünkü paylaşımım css’i web sayfasına entegre adlı paylaşımlarım Css’in temelini oluşturmaktadır,Bu 2 anlatımı kavramadan css’in temelini kavrayamayız,Neyse konuyu fazla uzatmadan paylaşımıma geçiyim.

1 – Css’i Satır İçinde Tasarıma Eklemek

Css’i direk olarak kod satırlarımıza dahil edebiliriz fakat bu fazla tercih edilen bir yöntem değildir,fakat yinede bilmenizde fayda olucağını düşünüyorum.Bunun nasıl yapıldığını merak ederseniz aşağıdaki örnekten faydalabilirsiniz.


<p style="color:#FF0000; font-size:15px;">Buraya paragraf geliyor</p>

(daha&helliip;)

Devamını Oku

Css’e başlamak ve Css’in yapısı

Egemen Özbeyli 1 Yorum CSS3

Merhaba arkadaşlar,

Bundan önce yaptığım bu paylaşımda Css’e ufak bir giriş yapmıştım ve css’i adım adım öğreticeğimi söylemiştim.Bu rehber niteliğindeki paylaşım serime bugün itibariyle başlamış bulunmaktayım.Amacım adım adım css bilgilerini sizlere sunmak ve öğrenmek isteyenler için ayrıntılı ve örneklerle süslenmiş paylaşımlar yaparak faydalı olmak isteğimdir.

Bu yazımda css’in genel yapısı,bize sağladığı kolaylıklar ve kullanımı hakkında faydalı bilgiler verip,bundan sonraki paylaşımlar için bir bilgi birikimi , temel oluşturmak istiyorum.

* Css’e Başlamak

CSS ( Cascading Style Sheets ) : Bir web sitesinin içeriğini ve tasarımını ayırmak için geliştirilen bir sistemdir.
Html dilinde görsellerin özelleştirilmesi için geliştirilen taglarla birlikte büyük tasarımcılar için zorluk oranı çok arttı çünkü çok sayıda sayfanın bulunduğu bir websitesinde her sayfadaki başlığı aynı ölçüde düzenlemek için her sayfaya ayrı ayrı tag tanımlaması yapmamız gerekiyordu ve bu bize iş yükü ve zaman kaybı olarak geri dönüyordu ve bu sorunun çözümü için the World Wide Web Consortium (W3C) tarafından CSS geliştirildi ve kaybedilen zaman kazanılmakla beraber ,iş yükümüz neredeyse dibe çekilmiş oldu.

* Css’in Yapısı

Css’in genel yapısına göz attığımızda iki ana bölümden oluştuğunu görebiliriz.

(daha&helliip;)

Devamını Oku

Css’e Giriş – Css Dersleri 1

Egemen Özbeyli 1 Yorum CSS3

Merhaba arkadaşlar ;

Bu paylaşımımda sizlere temel teşkil etmesi bakımından Css hakkında kısa bir ön bilgi vermek istiyorum.Bundan sonraki Css paylaşımlarımda daha ayrıntıları konulara değineceğim için böyle bir giriş yapmak istedim.Aslında amacım blog üzerinden sade ve faydalı bir kaynak oluşturup,bilmeyenlerede en azından Css‘in tam olarak ne işe yaradığını ve az da olsa css kullanımını öğretmektir.

İlk olarak Css nedir bunun tanımını yapalım.
Css’in açılımı Cascading Style Sheets’tir.Yani Stil Şablonları.
Peki bu ne demek diyecek olursanız web tasarımıyla uğraşan arkadaşlar bilirler ki Css kullanımı başlamadan önce tasarımlarımızda belirlediğimiz her eleman için ayrı renk tanımlamaları gibi özellikler belirlerdik ve teker teker her element için uğraşırdık.Css’in kullanımı işte burda devreye giriyor.
Artık eskisi gibi her element için ayrı ayrı özellikler tanımlamaktansa bu özellikleri bir kere stil dosyamızda tanımlayarak sayfamıza dahil edebiliriz.

Eski sisteme bir örnek vermek gerekirse çok sayfalı bir tasarımımız var ve her sayfadaki başlıkları tek tek düzenliyoruz.Harcadığımız zamanın haddi hesabı yoktur.Fakat css yardımıyla h1 olarak tanımladığımız başlık yapılarına bir defaya mahsus özellik tanımlamalarını yaparak diğer sayfalardaki h1 taglarının mevcut olduğu başlıklarıda bu kod sayesinde düzenleyebilir,1 satır kod değiştirerek hepsinin özelliğine ulaşabiliriz. (daha&helliip;)

Devamını Oku