Merhaba TürkHackTeam Ailesi bu konumuzda CSS alanını inceleyeceğiz.
CSS nedir?
Cascading Style Sheets kelimesinin baş harflerinin kısaltmasıdır. Türkçe anlamı ise basamaklı stil sayfasına gelmektedir. Bir html elementinin nasıl görüneceğini belirlemeye yarar. Stil dosyalarının uzantısı .css ile biter ve tek bir dosya halinde bulunur.
Css kod yapısı nasıl oluşur?
Css kodu 2 temelden oluşur biri html elementleridir(h1,p,a vb.) diğeri ise ekleyeceğimiz özellikleri bildirdiğimiz ifade bölümüdür.
Css kod örneği;
Bir css ifadesi her zaman noktalı virgül ile biter ve ifadeler kıvrımlı parantez içerisinde yazılır.
Kod:
h1 {color: red; text-align: center; }
Cssde yorum satırı yapmak
Her programlama dilinde olduğu gibi bazı kullanıcıların görmeyeceği kendimize notlar bırakabileceğimiz kısımlar olur. Bunun için cssde /* açıklama*/ kullanılır.
Kod:
/* başlık stili */
h1
{
/*renk kırmızı olacak*/
color: red;
/* ortalanmış olacak*/
text-align: center;
}CSS ID ve Class seçimi
Html dosyamızda belirtiğimiz id ve class etiketlerini belirtiğimiz stilde kullanabiliriz.
Class Kullanımı
Bir html dosyasında bir element özelliği olarak class= stil şeklinde bir özellik ekleyebiliriz. Peki buna neden gerek var örnek ile açıklayalım.
Kod:
<div class=stil>Hoş geldiniz!</div>Yukarıda yazdığımız div etiketi içerisindeki class=stil, o div elementinin CSS özelliklerini belirtmemize yarayan bir yoldur. CSS dosyamızda;
Kod:
.stil {
font: 10pt Tahoma, Verdana;
color: blue;
}Nokta(.) ile başlayan bir stil oluşturduk. Bu demektir ki class=stil ile belirtiğimiz her element 10 punto Tahoma yazı tipinde olacaktır. Eğer tek bir element içerisinde geçerli olmasını istiyorsak;
Kod:
div.stil{
font: 10pt Tahoma, Verdana;
color: blue;
}Bu seçimde CSS kodu sadece div etiketleri için kullanılacaktır.
CLASS özelliğinin bize sağladığı avantajlar;
Kendimiz adlandırdığımız özel stiller yaratmak
Bir stili birden fazla kullanmak
Uzun CSS kodlarından arınmak
ID kullanımı
ID özelliği ilede stiller yaratılabilir, classtan farkları;
Sadece tek bir etikette kullanılır.
Stil dosyamızda Classda .(nokta) kullanırdık, id özelliğinde ise #(diyez) kullanılır.
Şimdi bunları örnek ile görelim.
Kod:
<div id=stil>Hoş geldiniz!</div>Stil dosyasında ise;
Kod:
#stil{
font: 10pt Tahoma, Verdana;
color: blue;
}Görüldüğü gibi bu sefer diyez(#) işareti kullandık arkadaşlar. Sadece bu elemente ait bir stil oluşturduk. Ayrıca hiçbir id etiketi rakamla başlamaz.
Son olarak arkadaşlar CSS nasıl eklenir bundan bahsedelim.
Css kodlarımızı 3 farklı şekilde tanımlayabiliriz. Bunlar;
Inline
Internal
External
Inline css nasıl eklenir?
Tanımdağımız etiketinin içerisinde geçerli olmasını istediğimiz css kodlarımızı inline olarak tanımlarız. Örnek;
<span style=color:blue;> Hoşgeldiniz!</span>
Internal css nasıl eklenir?
Internal css head etiketi arasına style etiketleri ile tanımlanır. Örnek;
Kod:
<head>
<style type=text/css>
h1{
font-size: 30px;
color:blue;
}
</head>Internal olarak yazdığımız css kodlarımız sadece bağlı olduğu sayfada çalışmaktadır, diğer sayfalara yaptığımız değişiklikler uygulanmaz.
External CSS nasıl eklenir?
Eğer yazdığımız css kodları tüm sayfalarda geçerli olmasını istiyorsak bu durum .css uzantılı bir dosya oluşturup bunun içerisinde css kodlarımızı tanımlamalıyız.
Bunu bir örnek ile açıklayalım. Bir syle.css adında bir dosya oluşturalım ve not defteri ile açalım.
Kod:
h1{
font-size: 30px;
color:blue;
}
p{
font-size: 30px;
color:blue;
}Bu şekilde kaydelim, css ve html sayfamız aynı konumda olduğundan emin olalım. Şimdi uygulamak istediğimiz sayfaya gidelim ve bu dosyayı oraya tanıtalım.
Kod:
<head>
<link rel=stylesheet href=style.css>
</head>Bu tanımlamayı yaptıktan sonra kaydedip açtığımızda css kodlarımız sayfaya uygulanmuş olduğunu göreceğiz.
Bu konumda css hakkında en temel bilgileri aktardım arkadaşlar birdaha ki konumuzda csste arkaplan, yazılar, yazı tipleri gibi biçimlendirme etiketlerini göreceğiz.
