Css Font Özellikleri

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

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

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ı

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