- #Önkoşul : HTML Bilmek
Merhaba,Banadersanlat Takipçileri bu gün css derslerimize başlayacağız.
Öncelikle Kısaca CSS’i tanıyalım CSS (Cascading Style Sheets) Css internet sayfalarının görünümünü
değiştiren bir tanım dosyasıdır. CSS kendine has kuralları olan bir tanım dilidir denilebilir.Sayfa
içersindeki her bir elemana ait farklı özellik atamayı sağlar
Css Başlıca Özellikleri:
- Html sayfasındaki nesnelerin görüntüsünü belirler
- Html 4.0 sürümü ile stil dosyaları geliştirilmiştir
- CSS ayrı bir dosyada *.css uzantısı ile saklanabilir. Bu işlem sayfanın daha hızlı açılmasını sağlar
- Elemanlar üzerinde style=”” parametresi ile özel kısa tanımlar yapılabilir
İlk olarak bir html dosyası oluşturuyoruz içerisine html tag larımızı ekliyoruz
<html>
<head>
</head>
<body>
</body>
</html>
ve kayıt ediyoruz boş bir sayfa ile karşılaşıyoruz.Daha sonra body taglarımız arasına bir heading
ekliyoruz.
<html>
<head>
</head>
<body>
<h1>CSS Başlangıç Dersi www.banadersanlat.com</h1>
</body>
</html>
ve dosyamızı kayıt edince karşımıza siyah büyük yazdığımız metinimiz gözükecektir
şimdide bir paragraf ekleyelim.
<html>
<head>
</head>
<body>
<h1>CSS Başlangıç Dersi www.banadersanlat.com</h1>
<p>CSS Paragrafımız</p>
</body>
</html>
html dosyamızı kaydettikten sonra böyle bir ekran ile karşılaşacağız
şimdi ise asıl işlemimize geldik css kullanarak bu paragraf ve başlığımızı biçimlendireceğiz.
öncelikle css’i html’e tanıtmak için head tagları arasına kodlarımızı yazıyoruz
<style type=”text/css”>
</style>
yapacağımız tüm css kodlarını style tag ları arasında kullanacağız
ilk olarak body ile başlayalım bir tanımlama yapıyoruz body diyoruz ve artık sayfamızdaki
yazdıgımız yazıları biçimlendireceğiz body yazdıktan sonra köşeli parantez açıyoruz ve tekrar
kuyruklu parantezi kapatıyoruz kuyruklu parantez arasına body ile alakalı kodlarımızı yazacağız.
<style type=”text/css”>
body
{
background-color:#FF1111; //ilk olarak arkaplanı degiştirmesini istiyorum beyaz bir sayfa idi
//background-color: komutu ile istedigimiz rengi tanımlıyoruz ben herhangibi bir renk yazacağım siz
//istediginiz renk kodunu internetten temin edebilirsiniz ileride özel editörler kullanacağınız
//için internete gerek duymayacaksınız renk kodumuzu yazınca renk ; ile renk kodumuzu kapatıyoruz
}
</style>
görsel4
html dosyamızı kayıt edince böyle bir görüntü ile karşılaşağız önceden arkaplan rengimiz beyazdı
şimdi arkaplan rengimiz degişti.
şimdi ise body den sonra heading bölümümüzü biçimlendirelim bildiginiz üzre heading sola dayalı
büyük bir yazı idi bunun üzerinde bazı biçimlendirmeler yapalım
<html>
<head>
<style type=”text/css”>
body
{
background-color:#FF1111;
}
//h1 kodu ile biçimlendirmek istediğimiz şeyi tanımlıyoruz ve kuyruklu parantez açıp kapatıyoruz ve
//iki parantez arasına kodlarımızı yazmaya başlıyoruz yazcağımız kodlar tüm h1 ler için geçerlidir
//başka bir h1 oluşturursak oda burdaki yazdığımız kodların özelliklerini taşıyacaktır
h1
{
color:orange; //color komutu ile başlığımızın rengini belirliyoruz ingilizce olarak istedigimiz
//rengin kodunu veya ismini yazıyoruz ve başlığımız renklendirmiş oluyoruz şimdi ortalayalım
//ve yine heading’e ait olan iki parantez arasına kodlarınızı yazıyoruz
text-align:center; //right dersek en sagda left dersek en solda center dersek merkezde yani
//ortada olacaktık ben center’i seçip ; ile komutumu kapatıyorum ve şimdi başlıgımız ortaya geldi
p //şimdi ise paragrafımızı biçimlendirelim ilk olarak paragrafı tanımlıyoruz
{
font-family:”Comic Sans Ms”; //paragrafımızın yazı fontunu degiştirmek için font-family komutunu
//kullanacağız font-family:”” yapıyoruz ve çift tırnak arasına istedigimiz font ismini yazıyoruz
//ve ; komutu ile komutumuzu kapatıyoruz font-family:”İstediginiz Font İsmi”; fontumuz degişti
//şimdi ise paragrafımızın boyutunu degiştirelim font-size komutu ile boyutu degiştireceğiz
font-size:20px; //bu komut ile yazımızın boyutunu belirledik
}
}
</style>
</head>
<body>
<h1>CSS Başlangıç Dersi www.banadersanlat.com</h1>
<p>CSS Paragrafımız</p>
</body>
</html>
html dosyamızı kaydedip açtığımızda bu görüntü ile karşılaşacağız.
kısaca özet geçersek bugünkü dersimizde css ile bir başlığımızı ve paragrafımızı biçimlendirdik
uygulamamıza bakarsak css uygulanmadan önceki hali.
css uygulandıktan sonraki hali
Ders 1 Sonu
Bahadır TEMİZER