12/03/2011, 13:19
Tarih: 12.03.2011
Konu : CSS Tanımı ve Kullanım alanları.
İçerik : CSS; Kelime anlamı nedir? Neden Tercih edilir? Ne işe yarar? Nasıl kullanılır?
CSS’in Kelime anlamı nedir?: (Cascading Style Sheets) Türkçesiyle Stil şablonlarıdır.
CSS Neden Tercih edilir: Tüm yazılım dillerinin ortak dilidir ve tüm tarayıcılar tarafından desteklenir. Css en hızlı biçimlendirme yöntemidir
CSS Ne işe yarar: Web uygulamalarında kullanılır, web uygulamarında adındanda anlaşılacağı gibi nesnelerin stil, renk, yapı, boyut gibi özelliklerini yönetmek için kullanılmaktadır.
CSS Nasıl kullanılır : İki şekilde kullanılır.
1- Sayfa içerisinde. Bu yöntem pek tercih edilmez çünkü; sadece css in yazıldığı sayfa içerisinde kullanılabilir.
Örn. : Sayfanın Head (Head Sayfanın üst bölümünde bulunur ziyaretçileri göremediği alan olarakta nitelendirilir kelime anlamı baş, kafa dır.) css kodları buraya yazılır. Bu kodlar direk bir nesneyede yazılabilir bağımsız olarak yazılıp nesnenin class özelliğine atanır. Biz CSS'in her iki özelliğinide kullanarak birer örnek yapalım.
Body (Body; Sayfanın gövdesi vucudu ziyaretçinin görüntülediği alan) alanının arka plan reginin değiştirilmesini sağlayan css kodudur. Bu kod için başka hiçbir işlem yapılmasına gerek yoktur direk nesneye özel yapıldığı için bu sayfanın arka plan rengi anında değişir.
.buyuk adında bir css tanımladık bu css’i nedere ve hangi yazı nesnesine uygulayacak isek o nesnenin class özelliklerine atamamız gerekir.
Bu css sonrasında Merhaba yazısı yukarıda belirlediğimiz özelliklerde olacaktır yani yazı tipi Verdana varsa yoksa Greneva oda yoksa sans-serif, boyutu 18 px. stili italik, kalın ve #000 renginde olacaktır.
2- CSS sayfası oluşturma çok yaygın kullanılan ve en etkin yöntemdir. Projenizin içine CSS bir stil dosyası oluşturularak tüm kodlar buraya yazılır. Yazılan bu kodların hangi sayfada geçerli olmasını istiyorsanız o sayfaya css dosyasını ilişkilendirmelisiniz. İlişkilendirme işlemi yine sayfanın head bölümüne yapılmalıdır.
Bu ilişkilendirmeyi yaptıktan sonra CSS dosyanızda yapmış olduğunuz tüm kodlar bu sayfada geçerli olacaktır.
Bu özellikler sayesinde CSS dosyaları bize estetik ve hızlı düzenlenilir sayfalar oluşturmamıza olanak sağlamaktadır.
css dosyalarını oluştururken tek kullanımlık kodlar değilde sürekli olarak kullanılacak bakıldığında ne işe yaradığı anlaşılacak kodlar ile yazılması gerekir. Anlaşılır ve genel kullanımlı kodlar yazakarak kendinize özel bir css dosyası oluşturabilirsiniz.
CSS dosyanızı bir defa hazırlayıp tüm projelerinizde kullabilirsiniz, bu sayede sizin tarzınızı geliştirerek hızlı olmanızı sağlayacaktır.
CSS dosyasının oluşturulmasında dikkat edilmesi gerekenler;
1- CSS dosyası hazırlamak için herhangi bir editor kullanabilirsin. Eğer Kodlama için Visual Studio Kullanıyorsanız, zaten başka bir editore ihtiyaç duymazsınız, Css dosyanız .css uzantılı olmalıdır.
2- CSS dosyasında bir property için value tanımlarken birimler ile value arasında boşluk bırakmayın, bu css tanımlamanızın internet explorer dışındaki tarayıcılarda çalışmamasına sebep olur. Yani margin-left:10px; yerine margin-left:10 px; gibi 10 ile px arasında boşluk olan bir tanımlama yapmayın.
3- Css dosyalarının daha rahat okunabilmesi ve anlaşılabilmesi için her tanımlamadan sonra yeni bir satıra geçeriz. Css dosyamızın daha az yer kaplaması için bazen tüm css kodlarını yan yana yazarız.
4- Açıklama satırları adındanda anlaşıldığı gibi CSS kodlarımızı açıklamak için kullanılır ve sonradan kod üzerinde bir düzenleme yapacağımız zaman bize yardımcı olurlar. Açıklama satırları tarayıcılar tarafından göz ardı edilir. Bir CSS açıklama satırı "/*" ile başlar ve "*/" ile biter. Bu ikisinin arasına yazacağımız herşey tarayıcı tarafından açıklama olarak görülür ve herhangi bir işleme tabi tutulmaz.
Burada dikkat etmemiz gereken bir durumda şudur: Eğer harici css dosyası için tanımladığımız bağlantı head etiketi içinde tanımladığımız sitilden sonra yapıldı ise harici dosyadaki tanımlama bu sefer head etiketi içindeki tanımlamayı ezecektir.
Özetliyecek olursam sistem ilk olarak css dosyasını görür ve onu dikkate alır diğer sayfa içine yazılmış CSS kodlarını görmez.
Bu konuyu fazla uzatmak istemiyorum ne anlatmak istediğimi anlamışsınızdır umarım.
Sizlerin affına sığınarak konuyu kapatıyorum. AccessTR Eğitim Günlüğü.
Konu : CSS Tanımı ve Kullanım alanları.
İçerik : CSS; Kelime anlamı nedir? Neden Tercih edilir? Ne işe yarar? Nasıl kullanılır?
CSS’in Kelime anlamı nedir?: (Cascading Style Sheets) Türkçesiyle Stil şablonlarıdır.
CSS Neden Tercih edilir: Tüm yazılım dillerinin ortak dilidir ve tüm tarayıcılar tarafından desteklenir. Css en hızlı biçimlendirme yöntemidir
CSS Ne işe yarar: Web uygulamalarında kullanılır, web uygulamarında adındanda anlaşılacağı gibi nesnelerin stil, renk, yapı, boyut gibi özelliklerini yönetmek için kullanılmaktadır.
CSS Nasıl kullanılır : İki şekilde kullanılır.
1- Sayfa içerisinde. Bu yöntem pek tercih edilmez çünkü; sadece css in yazıldığı sayfa içerisinde kullanılabilir.
Örn. : Sayfanın Head (Head Sayfanın üst bölümünde bulunur ziyaretçileri göremediği alan olarakta nitelendirilir kelime anlamı baş, kafa dır.) css kodları buraya yazılır. Bu kodlar direk bir nesneyede yazılabilir bağımsız olarak yazılıp nesnenin class özelliğine atanır. Biz CSS'in her iki özelliğinide kullanarak birer örnek yapalım.
Kod:
<head>
body
{
background-color:tan;
}
</head>Kod:
<head>
.buyuk
{
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
font-style: italic;
font-weight: bold;
color: #000;
}
</head>Kod:
<p class:”buyuk”> Merhaba</p>2- CSS sayfası oluşturma çok yaygın kullanılan ve en etkin yöntemdir. Projenizin içine CSS bir stil dosyası oluşturularak tüm kodlar buraya yazılır. Yazılan bu kodların hangi sayfada geçerli olmasını istiyorsanız o sayfaya css dosyasını ilişkilendirmelisiniz. İlişkilendirme işlemi yine sayfanın head bölümüne yapılmalıdır.
Kod:
<head>
<link rel="stylesheet" type="text/css" href="SitilDosyasiadi.css"/>
</head>Bu özellikler sayesinde CSS dosyaları bize estetik ve hızlı düzenlenilir sayfalar oluşturmamıza olanak sağlamaktadır.
css dosyalarını oluştururken tek kullanımlık kodlar değilde sürekli olarak kullanılacak bakıldığında ne işe yaradığı anlaşılacak kodlar ile yazılması gerekir. Anlaşılır ve genel kullanımlı kodlar yazakarak kendinize özel bir css dosyası oluşturabilirsiniz.
CSS dosyanızı bir defa hazırlayıp tüm projelerinizde kullabilirsiniz, bu sayede sizin tarzınızı geliştirerek hızlı olmanızı sağlayacaktır.
CSS dosyasının oluşturulmasında dikkat edilmesi gerekenler;
1- CSS dosyası hazırlamak için herhangi bir editor kullanabilirsin. Eğer Kodlama için Visual Studio Kullanıyorsanız, zaten başka bir editore ihtiyaç duymazsınız, Css dosyanız .css uzantılı olmalıdır.
2- CSS dosyasında bir property için value tanımlarken birimler ile value arasında boşluk bırakmayın, bu css tanımlamanızın internet explorer dışındaki tarayıcılarda çalışmamasına sebep olur. Yani margin-left:10px; yerine margin-left:10 px; gibi 10 ile px arasında boşluk olan bir tanımlama yapmayın.
3- Css dosyalarının daha rahat okunabilmesi ve anlaşılabilmesi için her tanımlamadan sonra yeni bir satıra geçeriz. Css dosyamızın daha az yer kaplaması için bazen tüm css kodlarını yan yana yazarız.
4- Açıklama satırları adındanda anlaşıldığı gibi CSS kodlarımızı açıklamak için kullanılır ve sonradan kod üzerinde bir düzenleme yapacağımız zaman bize yardımcı olurlar. Açıklama satırları tarayıcılar tarafından göz ardı edilir. Bir CSS açıklama satırı "/*" ile başlar ve "*/" ile biter. Bu ikisinin arasına yazacağımız herşey tarayıcı tarafından açıklama olarak görülür ve herhangi bir işleme tabi tutulmaz.
Burada dikkat etmemiz gereken bir durumda şudur: Eğer harici css dosyası için tanımladığımız bağlantı head etiketi içinde tanımladığımız sitilden sonra yapıldı ise harici dosyadaki tanımlama bu sefer head etiketi içindeki tanımlamayı ezecektir.
Özetliyecek olursam sistem ilk olarak css dosyasını görür ve onu dikkate alır diğer sayfa içine yazılmış CSS kodlarını görmez.
Bu konuyu fazla uzatmak istemiyorum ne anlatmak istediğimi anlamışsınızdır umarım.
Sizlerin affına sığınarak konuyu kapatıyorum. AccessTR Eğitim Günlüğü.