.png)
Css
Hakkında Konuşalım.
Cascading
style sheet (Css) nedir? Css aslında html ile yazdığımız sayfalara şekil vermek
için kullanılan bir işaretleme dilidir.
Merhabalar
ben super_bil css hakkında tüm bildiklerimi yazıya dökmek isterim tabi okurmak isterseniz,
aslında bakarsanız tasarım açısından iyi olan sitelerin tamamında css
kullanılmıştır. Css’i size şöyle açıklayabilirim bir ev yaptığınızı düşünün
html ile beton demir vs şeyleri yaparken css ile evin boyasını içini dışındaki
tasarımları yapabilirsiniz.
Evet
css ucu bucağı yok denilebilir yapılabileceklerin sınırı yok bu yüzden önemli
bir işaretleme dili öğrenilmesi kolaydır ama öğrenmek için bir yol izlemeniz
önemli olabilir. Html5 öğrendikten sonra css3 başlayın css aslında bir
başlangıç noktası olabilir, php asp gibi yollara kapı açar neyse biz bu
yazımızda başlangıç kısmını geçtikten sonra ufak örneklerle nasıl
başlayabileceğinizdn bahsedeciğiz.
Şimdi
dediğimiz gibi css için html bilgisine gerek vardır. Çünkü css’i html’in
içinden veya dışından kontrol etmek için kullanırız.
| Html’le alakalı detaylı konumuz
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Basit Html kodlarımız bu
şekildeydi şimdi bizim css’i bu sayfaya tanımlamamız için gereken bazı taglere
ihtiyacımız var tanımlamanın 3 şekli var.
- Dışdan tanımlama
- Sayfadan tanımlama
- Koda özel tanımlama
Evet gördüğünüz gibi 3
şekilde tanımlayabiliyoruz bunları teker teker anlatalım hepsinin bir kullanım
amacı olabiliyor.
1.Dıştan Tanımlama
Genellikle En çok
kullanılan bu yöntem kod yazarken farklı bir sayfadan kodlarınızı yazmanızı
sağlar. Şimdi örnekle daha iyi anlamanızı sağlıyalım öncelikle başta
gösterdiğimiz html kodları yazalım sonra head tag’inin altına link vermemiz
gerekiyor.
<head>
<link rel=”Stylesheet”
type=”text/css” href=”Gidilecek yer” />
</head>
Evet kodumuz budur bu
şekilde yazmamız gerekiyor tabi bu şekilde bitmiyor. Html sayfamızın olduğu
dosyanın içine bir css dosyası açmanız gerekiyor. Ben adına style.css dedim
<link rel=”Stylesheet” type=”text/css”
href=”Style.css”
/>
Dosya yerlerine html aşina
olmamız gerekmekte J Bu şekilde dosyamızın içine kodlarımızı yazıp deneme
yapabiliriz.
2. Sayfadan Tanımlama
Bu sefer işimiz biraz daha
kolaylaşıyor gine head taginin içine <styles></styles> kodlarını
ekliyoruz ve içine kodlarımızı rahat bir şekilde yazıp sayfamızı tasarlıyoruz
ama şöyle bir sıkıntı çıkıyor farklı bir sayfada açılan css doyasını
istediğiniz gibi başka html dosyalarına uyarlayabilirsiniz, velain bu şekilde
tag’larla yapılan stil ve işlemi sadece bu sayfa için uygulanır.
<head>
<style>
P{
Font-size:20px;
Color:skyblue;
}
</style>
</head>
3.Koddan tanımlama
ve geldik sonuncu
tanımlama yöntemine bu yöntem herhangi bir tag’e uygulanabilir aynı html nasıl
tag’e özellik veriyorsak aynı yöntemle bu sefer style tanımlıyoruz.
<p style=”color:red;
font-size:20px;”>bilisimcidersim</p>
Sonuç
Evet tanımlamaları
öğrendiğimize göre artık css ile ilk başlangıcımızı yapabiliriz.
Dipnot: Css yazmak için
bilmeniz gereken bir diğer önemli husus şudur ki “p{font-size:20px;}” buradaki “p
tag’imiz” “süslü parantez kalıp” “içindeki ise kodumuz” “iki noktadan sonrası
ise vereceğimiz değer.”
Evet html sayfamızı
oluşturduk ve bir id tanımladık (id ve class ayrı makale yayınlayacağım
yakında) diyelim ve id’imizin adı tablo olsun.
/* css başlangıç */
#tablo {
Width: 200px;
Height:200px;
Border: solid 1px blue;
Background-color:red;
}
Benden bu kadar daha sonra
yeniden görüşelim olurmu :D şimdilik hoşcakal.