CSS Yazma Yolları ve Örnek Dersi
Selam Web'ciler :)
Bugünkü makalemizde sitemizi tasarlarken nasıl CSS stillerinin uygulanacağını göreceğiz,aslında
CSS nasıl yazılır desek daha doğru olur bence :)
HTML ya da türevleri (XHTML,HTML5 gibi) web sayfalarına CSS stilleri uygulamanın 3 yolu vardır.
Birinci yol her HTML tagı içersinde "style" attribute'ü (özniteliği) içerisinde belirleyerek,ikinci
yol sayfamızın head tagları arasında yine "style" tagı arasında yazarak ve son olarak CSS stillerimizi
harici bir dosya içerisinde yazdıktan sonra sayfaya link vererek gerçekleştiriyoruz.
Teoriyi bir kenara bırakırsak örnek bir uygulama gerçekleştirelim:
Boş bir HTML sayfası oluşturuyoruz:
ve iki tane div atıyoruz:
oluşturduğumuz divlere ID değerleri verelim:
HTML Div'lerimiz hazır olduktan sonra gelelim konuya;yapmak istediğimiz divleri yan yana eşit ölçülerde hizalamak ve iki farklı renkte göstermek olsun,bunu yapmak için CSS stilleri vermemiz gerekiyor.
Yukarıda CSS yazım şekillerinden ilkini uygulayalım yani div elementleri içerisinde style özniteliği kullanarak yazalım:
Sonuç olarak görüntü şu şekilde oluyor:
Gördüğünüz gibi sonuç tam istediğimiz şekilde oldu,ancak bu şekilde CSS yazılması mümkün olduğu halde böyle kodlama
yapmaya devam edersek büyük bir web sayfası için işin içinden çıkılması zor bir proje oluştururuz,ayrıca HTML elementi içerisinde CSS kodlaması yapmak arama motorları açısından uygun görülmediği için sitenin SEO uygulamasında zorluklar ortaya çıkarabiliyor.
Neyse konuyu dağıtmadan kodlarımızı silelim ve aynı CSS bilgilerini sayfamızın Head tagları arasında yazalım,ancak burada öğreneceğimiz bir konu daha var,head içerisinde yazılan CSS stillerinin hangi div elementine ait olduğunu nasıl anlayacağız?
Bunun için HTML geliştiriciler en güzel iki yolu yapmışlar,birincisi HTML tag içerisinde class (sınıf) özniteliğine yazdığımız
CSS sınıfını yazmak ya da div gibi nesnelerin ID sini Head içerisindeki CSS kodlamasında göstermek.
Gelin bu iki yolu iki divimize aynı şekilde uygulayalım,birinci div nesnemize sınıf yoluyla diğerine de ID yöntemiyle CSS
stilleri uygulayalım:
Gördüğünüz gibi öncelikle sayfamızın içerisindeki Head tagına style tagları açtık ve nokta işaretiyle başlayıp "sinif" adında bir CSS sınıfı yazdık,ardından yazdığımız sınıfın adını birinci div elementine class özniteliği ile referans verdik.
Yine yazdığımız CSS stilinde bu defa "#" (diyez) işaretiyle sadece ikinci divimizin ID değerini yazdık.
Şimdi ise 3.yol olan CSS ile harici dosya kullanarak web sayfasına biçim vereceğiz,bunun için en kolay yoldan bildiğiniz windows notepad uygulaması ile belge açıp uzantısını .txt yerine .css olarak değiştirmek ve oluşturduğumuz dosyaya stillerimizi aynen yazıp sayfaya referans etmek:
CSS dosyamızın içeriği aynen şu şekilde:
Şimdi gelelim oluşturduğumuz CSS dosyasını sayfaya referans etmeye:
Dosyamızı yine head içerisinde link tagı ile kolayca referans ettik ve tagın içerisine bunun bir stil sayfası olduğunu
gösterdik.
Bu üç teknikten istediğinizi kullanmak size kalmış ancak güzel bir web tasarımı çalışması için mutlaka bu 3.yolda gösterdiğim gibi harici dosya kullanarak CSS kodlaması yazmanızı öneririm.
Eğer harici dosya yöntemiyle CSS kodlama yaparsanız daha temiz ve düzenli proje gerçekleştirir ve projenin kusurlu yollarını daha rahat giderirsiniz.
Son olarak ise şu tavsiyede bulunmak istiyorum:Eğer CSS stilini "#" işareti ile HTML elementine uygulamak istiyorsanız bu yöntemi mutlaka çok nadir kullanmaya özen gösterin çünkü aynı CSS stilini bir başka div gibi elemente uygulamak isterseniz aynısını defalarca yazmak zorunda kalabilirsiniz ve dolayısıyla gereksiz yere fazladan CSS kodları yazarak hem projeyi şişirmiş olur hem de web sayfasınızın açılma hızını yavaşlatmış olursunuz.
Ayrıca div gibi üst seviye HTML nesneleri altında kullanmak isteyeceğiniz alt HTML nesnelerine daha rahat kod yazmaktan mahrum kalırsınız,bu sebepten ötürü mutlaka CSS stillerinizi sınıflama yöntemiyle kullanmaya özen gösterin.
Bir başka makalede görüşmek üzere projelerinizde başarılar dilerim :)
Hoşçakalın.
Bugünkü makalemizde sitemizi tasarlarken nasıl CSS stillerinin uygulanacağını göreceğiz,aslında
CSS nasıl yazılır desek daha doğru olur bence :)
HTML ya da türevleri (XHTML,HTML5 gibi) web sayfalarına CSS stilleri uygulamanın 3 yolu vardır.
Birinci yol her HTML tagı içersinde "style" attribute'ü (özniteliği) içerisinde belirleyerek,ikinci
yol sayfamızın head tagları arasında yine "style" tagı arasında yazarak ve son olarak CSS stillerimizi
harici bir dosya içerisinde yazdıktan sonra sayfaya link vererek gerçekleştiriyoruz.
Teoriyi bir kenara bırakırsak örnek bir uygulama gerçekleştirelim:
Boş bir HTML sayfası oluşturuyoruz:
ve iki tane div atıyoruz:
oluşturduğumuz divlere ID değerleri verelim:
HTML Div'lerimiz hazır olduktan sonra gelelim konuya;yapmak istediğimiz divleri yan yana eşit ölçülerde hizalamak ve iki farklı renkte göstermek olsun,bunu yapmak için CSS stilleri vermemiz gerekiyor.
Yukarıda CSS yazım şekillerinden ilkini uygulayalım yani div elementleri içerisinde style özniteliği kullanarak yazalım:
Sonuç olarak görüntü şu şekilde oluyor:
Gördüğünüz gibi sonuç tam istediğimiz şekilde oldu,ancak bu şekilde CSS yazılması mümkün olduğu halde böyle kodlama
yapmaya devam edersek büyük bir web sayfası için işin içinden çıkılması zor bir proje oluştururuz,ayrıca HTML elementi içerisinde CSS kodlaması yapmak arama motorları açısından uygun görülmediği için sitenin SEO uygulamasında zorluklar ortaya çıkarabiliyor.
Neyse konuyu dağıtmadan kodlarımızı silelim ve aynı CSS bilgilerini sayfamızın Head tagları arasında yazalım,ancak burada öğreneceğimiz bir konu daha var,head içerisinde yazılan CSS stillerinin hangi div elementine ait olduğunu nasıl anlayacağız?
Bunun için HTML geliştiriciler en güzel iki yolu yapmışlar,birincisi HTML tag içerisinde class (sınıf) özniteliğine yazdığımız
CSS sınıfını yazmak ya da div gibi nesnelerin ID sini Head içerisindeki CSS kodlamasında göstermek.
Gelin bu iki yolu iki divimize aynı şekilde uygulayalım,birinci div nesnemize sınıf yoluyla diğerine de ID yöntemiyle CSS
stilleri uygulayalım:
Gördüğünüz gibi öncelikle sayfamızın içerisindeki Head tagına style tagları açtık ve nokta işaretiyle başlayıp "sinif" adında bir CSS sınıfı yazdık,ardından yazdığımız sınıfın adını birinci div elementine class özniteliği ile referans verdik.
Yine yazdığımız CSS stilinde bu defa "#" (diyez) işaretiyle sadece ikinci divimizin ID değerini yazdık.
Şimdi ise 3.yol olan CSS ile harici dosya kullanarak web sayfasına biçim vereceğiz,bunun için en kolay yoldan bildiğiniz windows notepad uygulaması ile belge açıp uzantısını .txt yerine .css olarak değiştirmek ve oluşturduğumuz dosyaya stillerimizi aynen yazıp sayfaya referans etmek:
CSS dosyamızın içeriği aynen şu şekilde:
Şimdi gelelim oluşturduğumuz CSS dosyasını sayfaya referans etmeye:
Dosyamızı yine head içerisinde link tagı ile kolayca referans ettik ve tagın içerisine bunun bir stil sayfası olduğunu
gösterdik.
Bu üç teknikten istediğinizi kullanmak size kalmış ancak güzel bir web tasarımı çalışması için mutlaka bu 3.yolda gösterdiğim gibi harici dosya kullanarak CSS kodlaması yazmanızı öneririm.
Eğer harici dosya yöntemiyle CSS kodlama yaparsanız daha temiz ve düzenli proje gerçekleştirir ve projenin kusurlu yollarını daha rahat giderirsiniz.
Son olarak ise şu tavsiyede bulunmak istiyorum:Eğer CSS stilini "#" işareti ile HTML elementine uygulamak istiyorsanız bu yöntemi mutlaka çok nadir kullanmaya özen gösterin çünkü aynı CSS stilini bir başka div gibi elemente uygulamak isterseniz aynısını defalarca yazmak zorunda kalabilirsiniz ve dolayısıyla gereksiz yere fazladan CSS kodları yazarak hem projeyi şişirmiş olur hem de web sayfasınızın açılma hızını yavaşlatmış olursunuz.
Ayrıca div gibi üst seviye HTML nesneleri altında kullanmak isteyeceğiniz alt HTML nesnelerine daha rahat kod yazmaktan mahrum kalırsınız,bu sebepten ötürü mutlaka CSS stillerinizi sınıflama yöntemiyle kullanmaya özen gösterin.
Bir başka makalede görüşmek üzere projelerinizde başarılar dilerim :)
Hoşçakalın.
hiç beğenmedim kaka olmuş benim yaşım 5. adım berkay. sizi seviyorum