CSS KODLARI

Css Kodları

Css (Cascading Style Sheets) html içeriğin görsel olarak düzenlemesini sağlayarak web tasarım sitelerimizin stil şablonları anlamına gelmektedir. Web projeleri üretmek istiyorsak bunun temeli html ve css öğrenmekten geçmektedir.

Tarayıda görüntülenen websitenin içeriğinin font, renk, genişlik yükseklğini ayarlamak için css kodları kullanılır. Kullanılan fontun hangi font ailesinden olduğunu, renginin belirlenmesi, yazı karakterin büyüklük ölçüsü css kodlama ile yapılır. Html olarak bir paragraf yazısının fontunu, rengini ve büyüklüğünü ayarlayalım.

Css Kodları Kullanımı

Css kodları kullanımı sitenizin görüntüsünün daha özenli, daha okunaklı olmasını sağlar. Bu da sitenize gelen ziyaretçinin daha uzun süre keyifle sitede kalmasını sağlayabilirsiniz. Html css kodları kullanımı için sizleri örneklerle açıklama yapacağız.

Css Kodları Örnekleri

<style type="text/css">
 p{
 font-family: "arial",sans-serif;
 font-size: 12px;
 font-color: black
}
</style>

<p>Bu bir paragraf cümlesidir.</p>

Yukardaki örnekte p etiketi içersinde bir metin girdik. Yukardaki style dosyasında iste p etiketin özelliklerini girdik. Peki bu özellikler ne anlama geliyor.

• 1. font-family: "Font ailesi yani hangi font kullanılacağı."
• 2. font-size: "Font büyüklüğünü belirleme."
• 3. font-color: "Font renginin belirlenmesi."

Peki sayfamızda bir alan oluşturduk ve bu alana genişlik veya yükseklik değerleri verip sayfada ortalanmasını istiyoruz. Bu gibi durumda ne yapmalız? Yada responsive tasarım yapıcaz fakat buna göre css içeriğimiz ne olmalı bu konuda detaylı bilgi için responsive tasarım ölçüleri yazımızı okumanızı öneririz. Sayfada bir alana genişlik verip ortalamak için aşağıdaki örneği inceleyiniz.

<style type="text/css">
 div{
 width: 600px;
 padding: 15px;
 margin: 0 auto;
}
</style>

<div>Bu alanı sayfaya ortalama.</div>

Yaptığımız işlemi anlatmak gerekirse div alanını css içersinde genişlik değerleri veriyoruz. Daha sonra padding ile içe boşluk veriyoruz. Margin alanı ilede yukardan ve aşağıdan 0 değeri, sağdan ve soldan auto yaparak sayfa içine ortalamoş oluyoruz. Verdiğimiz değerlerin ne anlama geldiğini belirtelim.

• 1. width: "Alanın genişliğini belirtme."
• 2. padding: "İçe boşluk anlamına gelir."
• 3. margin: "Dışa boşluk anlamına gelmektedir."

Şuana kadar örnekleri hep kendi etiketleri adı altında yaptık. Gelin bunu class olarak yapalım. Kısaca bahsetmek gerekirse class yazımı stilin birden fazla yerde kullanılmasını sağlamak için class tanımlıyoruz ve gereken yerdede kullanım için bir örnek verelim.

<style type="text/css">
 .ortala{
 width: 600px;
 padding: 15px;
 margin: 0 auto;
}
</style>

<div class="ortala">Bu alanı sayfaya ortalama.</div>

Class adını ".ortala" olarak tanımlıyoruz ve kullanmak istediğimiz yerlerde "class='ortala'" yazdığımız zaman bu class kullanıldığı yerlerde o özelliklerin aynısını kullanmamızı sağlıyacaktır. Peki id ile kullanımı nasıl? Bu kullanım aslında bir alan için geçerli olucaktır. Id alanları tek olduğu için tek bir yerde kullanacağımız alanlarda aşağıdaki kodlamayı yapabiliriz.

<style type="text/css">
 #ortala{
 width: 600px;
 padding: 15px;
 margin: 0 auto;
}
</style>

<div id="ortala">Bu alanı sayfaya ortalama.</div>

Html kodlama yaparken a etiketi kullanımında stilsiz ama link olduğunu belli eden bir görüntü gösterilir. Fakat genelde bu klasik görüntü tercih edilmediğinden dolayı stil yazma gereksenimi duyulur. Bu gibi durumlar için örnekleyelim.

<style type="text/css">
 .link{
 color: gray;
 font-size: 12px;
 font-weight: bold;
 text-decoration: none;
}
</style>

<a class="link">Detay Butonu.</a>

Yukardaki örnekteki a etkimetize link adında class tanımlıyoruz. Bu class içersinde rengini, font yüksekliğini, genişliğini ayarlayarak "text-decoration" ile altı çizgili olma durumunu kaldırıyoruz. Css bilginizi geliştirmek ve responsive siteler yapmak için Responsive tasarım nedir? yazımızı okumanızı öneririz. Diğer css özellikleri için w3schools.com sitesini ziyaret ediniz.