Merhaba Banadersanlat.com takipçileri bu günkü dersimizde Css’de class ve ıd’leri işleyeceğiz, ıd’ler css de belirli bir şeyi biçimlendirirken kullanırız class’lar ise birden fazla şeyi biçimlendirmek için kullanılır bir örnek ile işleyelim.Sadece html taglarımızın ve style yani css kodlarımızı yazacağımız bölümlerin olduğu html dosyamızı oluşturuyoruz ve paragraf oluşturalım.
<html>
<head>
<style type=”text/css”>
#banadersanlat //id lerde tanımlama kuralı # dir ve banadersanlat ı biçimlendirecek köşeli parantezlerimizi oluşturalım ve paragrafımızı ortalayıp rengini değiştirelim
{
text-align:center; //bu komutumuz ile yazımızı ortaladık
color:red; //bu komutumuz ile rengini degiştirdik bu arada hatırlatma olarak color dedigimiz özellik red ile renk kodumuz yani özelliğimiz
}
</style>
</head>
<body>
<p id=”banadersanlat”>Bu paragrafı css de id ile biçimlendireceğiz. </p> //head tagları arasına paragrafımızı ekliyoruz ve css de id kuralı ile biçimlendireceğiz
//id kuralı ile biçimlendirmek için id=”banadersanlat” ile paragrafımıza bir id atıyoruz tabikide bu id üstte yazdıgımız css deki kural id si ile aynı olmalıdır
</body>
</html>
bu kodlarımızı yazdıktan sonra html dosyamızı kayıt edip açtıgımızda bu görüntü ile karşılaşacağız, paragrafımız hem ortalı hemde kırmızı oldu
id kullanımı bu şekildedir şimdi class kullanımına bakalım.Class lar başlangıçtada bahsettigim gibi birden çok nesneyi biçimlendirmeye yarar
<html>
<head>
<style type=”text/css”>
#banadersanlat
{
text-align:center;
color:red;
}
.ortala //id’lerde tanımlama kuralı # idi class larda ise .’dır şimdi .ortala diye bir class oluşturduk bu class’ı ne zaman ihtiyacımız olursa kullanacağız paragraflarımızı
{ //yazılarımızı ortalamak için kulalancağız kuralımızı tanımladıktan sonra ortala kuralının kodlarını yazacağımız köşeli parantezlerimizi koyuyoruz isterseniz { kodlarınız }
//şeklindede kullanabilirsiniz ama alt alta olması daha anlaşılır olmasını sağlıyor bence kodlardan sonra boşluk bırakmak önemli degildir istediginiz kadar bırakabilirsiniz
text-align:center; //bu kodlar .ortala kuralının çalışmasını sağlayacak kodlardır şimdi yeni bir heading oluşturup bu kuralımızı uygulayalım
}
</style>
</head>
<body>
<h1 class=”ortala”>Bu başlığı class ile biçimlendirelim</h1> //ortalamak için h1 tagının içine class=”ortala” yazıyoruz ve yazımız ortalanıyor bunu her //yazı için kullanabilirsiniz id gibi degildir tek bir şey yerine istediğiniz her şeyde kullanabilirsiniz şimdi ortala özelliginiz 2. paragrafımızada uygulayalım
<p id=”banadersanlat”>Bu paragrafı css de id ile biçimlendireceğiz. </p>
<p class=”ortala”>2. Paragrafımız.</p> //bu paragrafımızada ortala class’ındaki kodları uygulaması için class=”ortala” komutunu p tagları arasına yazdık
</body>
</html>
html dosyamızı kayıt edip sayfamızı açtığımızda böyle bir görüntü elde edeceksiniz
bu günkü dersimizi kısaca tekrar edecek olursak # işareti id leri tanımlamak için . ise class ları tanımlamak için kullanılıyor ve id ler tek bir şey için geçerli olurken class lar bir çok şey için ihtiyacımız olduğu her yerde kullanabileceğimiz kurallardır.
Ders 2 Sonu
Bahadır TEMİZER