CSS nedir?
Css : a��l�m�yla Cascading Style Sheets yani T�rk�e anlam� ile Basamakl� Stil �ablonu demektir. E�er yaz�ya ba�lamadan �nce ki ara�t�rmamda d�zg�n bir �eviri yapabildiysem css hayat�m�za HTML 4.0 ile dahil olmu�tur. G�revi HTML etiketleri kullan�larak olu�turulmu� web site g�r�nt�lerini �ekillendirmektir. HTML demi�ken hat�rlatmak isterim CSS�i kullanabilmek i�in HTML bilmemiz gerekiyor zaten css den �ncebilmemiz gereken tek kodlama html kodlamas�d�r.
CSS ne i�e yarar, neler yap�labilir?
Yukar�da ki Css nedir? ba�l�kl� paragraf�mda da bahsetti�im gibi css, web sitelerinin kullan�c�lar taraf�ndan ekranda g�r�nen aray�z�n� �ekillendirmemize, renklendirmemize, boyutland�rmam�za ve konumland�rmam�za yarar. Asl�nda bunun i�in bir listeye gerek yok ��nk� css ile hemen hemen b�t�n g�r�nt� �ekillendirmesini yapabiliriz fakat gene de bir �rnek listesi vermem gerekir ise css ile;
- Arkaplanlar renklendirebilir veya resim ekleyebilir.
- Nesnelere kenarl�klar eklenebilir.
- Kenarl�klar renklendirilebilir.
- Yaz�lar boyutland�r�l�p, farkl� renklere boyanabilir.
- Yatay men�ler yap�labilir.
- Css ile dikey men�lerde yap�labilir.
- Hatta css ile a��l�r men� bile yap�l�yo
- Resimler en ve boy olarak k���lt�lebilir.
- Buton yap�labiliyor.
- Nesnelerin ve yaz�lar�n �zerine gelinince de�i�ikler yap�labiliyor.
- Yaz�y� se�ince se�ili arkaplan� mavi yerine k�rm�z�ya boyayabilir
- Yaz� ba�l�klar�n�n alt�n� �izebilir
- Resimlerin k��elerini ovalle�tirebilir
- Yaz�lara g�lge ekleyebilir
- Css ile butonlara, resimlere ve i�erik kutular�na bile g�lge ekleyebiliriz.
- �nanmayacaks�n�z ama yaz�lar hatta sitenin tamam�n� ortalayabilirsiniz bile
Liste bitiminde nefesimi rahat�a almaya ba�lad�ktan sonra bir not css ile yapabilecekleriniz listesi yukardaki listeyi 3 e ve 4 e katlayabilir (:
CSS kodu nas�l olmal�?
se�ilen_nesne { �zellik:de�er; �zellik:de�er; �zellik:de�er; }
Bir css kodu a�a��daki css nas�l kullan�l�r? ba�l�kl� yaz�mda ki 3 y�ntemden ���nde de ayn� yaz�l�r. Fakat 1. y�ntemde k���k bir istisna vard�r ki bu istisna da 1. y�ntemde css direk nesneye uyguland��� i�in bir se�iciye ihtiya� duyulmaz bu y�zden yukar�da g�sterdi�im css kullan�m �eklindeki se�ilen_nesne ve { }s�sl� parantezler 1. y�ntemde yer almaz.
CSS nas�l kullan�l�r?
CSS kullanabilmenin 3 farkl� yolu var. G�sterece�im 3 farkl� css kullan�m �eklinden en �ok kullanman�z gereken 3. a�amadaki css kullan�m �eklidir. Fakat yeri geldi�inde di�erlerini de kullanacaks�n�z.
1- Inline Styles (Html etiket i�i)
Inline Styles y�nteminin yan�ndaki parantez de bulunan Html etiket i�i css kullan�m� tamamen benim �evirimdir yani asl� �yle de�il As�l ad� Inline Styles ama ho� ve mant�kl� bir �evirisi olmad���ndan ben html etiket i�i css kullan�m� ad�n� verdim. Bu y�ntem basit olarak yazd���m�z html taglar�n�n i�erisinde style=�� �zelli�ine atanan de�erler ile kullan�l�r ve di�er iki y�ntemin en farkl� olan� budur. ��nk� hangi html nesnesine css uygulanaca��n� se�meyip direk o nesnenin �zerine kodlar� yaz�yoruz. Bu y�ntemi kullanmak i�in
1-) Hangi nesneye �zellik atanaca��n� bul
2-) Nesneye style=�� etiketini ekle
3-) Style=�� etiketi i�erisine css �zelliklerini gir.
As�l ad� Inline Styles ama ho� ve mant�kl� bir �evirisi olmad���ndan ben html etiket i�i css kullan�m� ad�n� verdim. Bu y�ntem basit olarak yazd���m�z html taglar�n�n i�erisinde style=�� �zelli�ine atanan de�erler ile kullan�l�r ve di�er iki y�ntemin en farkl� olan� budur. ��nk� hangi html nesnesine css uygulanaca��n� se�meyip direk o nesnenin �zerine kodlar� yaz�yoruz. Bu y�ntemi kullanmak i�in1-) Hangi nesneye �zellik atanaca��n� bul
2-) Nesneye style=�� etiketini ekle
3-) Style=�� etiketi i�erisine css �zelliklerini gir.
�rnek:
Yorum Gönder