Dreamweaver'da Advanced Css'lerle çalışmak

Şimdiye kadar css'in iki türünden bahsettim ancak sayfamızdaki tüm stilleri class ve tag türlerindeki csslerden oluşturmamız yeterli olmayacaktır.

Örneğin;

Menu alınınaki linklerimizin rengi ve içerik bölümündeki linklerin renginin birbirinden farklı olması gerekir. Class türündeki cssler linklerin rengini değiştirmekte yeterli olmaz, tagleri kullanırsakta sayfamızdaki tüm linkler aynı renk olurlar.

Örnek Tasarım

Menu alanımızdaki link rengimiz eğer içerik bölümümüzdeki link rengi ile aynı olursa menu alanının arka planı nedeniyle linklerin üzerinde yazan yazılar okunamaz olurlar. Bu nedenle sayfamızdaki tüm linklerin renginin aynı olmasını söyleyemeyiz. Linklere class türünde css uygulasak bile linklerin rengi default olarak mavi olur ve linklerin altında çizgi olur ancak menu alanımızdaki linklerimizin altında çizgide istemiyorsak ne yapmamız gerekiyor?

 Bu durumda sadece class veya sadece tag türünde css uygulamamız yeterli olmayacaktır. Yapmamız gereken şey menu alanında bulunan linklere özel bir css uygulamaktır.

Uygulayacağımız css advanced yani gelişmiş türde bir css olmalı. Söylememiz gereken menu isminde class türünde css uygulanmış css uygulanmış alanlarda linklerin nasıl gözükeceği

Bunu da ".menu a" diyerek söyleyebiliriz.
"." koyarak menunun css türünün class olduğunu belirtmiş oluruz. a diyerek bu alanda bulunan linkleri belirtmiş oluruz.

Unutmayın linkin HTML etiketi a'dır. 


Advanced türünde olan başka bir css uygulamsı örneğini ise  yine örnek tasarımızın alt bölümünde görmekteyiz. Sayfanın alt yani footer bölümünde yine içerikle aynı renkte yazı yazamıyoruz. Çünkü yine arkaplan rengi yazıyı okunamaz kılıyor. Ancak burada bulunan yazılarımız link de değiller. Bu durumda burada uygulamamız gereken css'in ismi, eğer alt bölüme footer isminde bir css uyguldıysak ve burada bulunan yazı bir paragrafsa Css'imizin ismi .footer p olur yani footer isminde class türünde bir css uygulanmış alandaki paragrafların nasıl görüntülendiğini belirtmiş oluruz.

Burada css türünün en güzel örneği .footer p css'inin sadece footer bölümünde bulunan paragrafları etkileyecek olması yani bu alanda bir link, bir başlık yada bir liste varsa bu etiketler içinde bulunan yazılar bu css kuralından kesinlikle etkilenmezler. Aynı şekilde footer bölümü dışındaki paragraflarda ".footer p" ismindeki css'den kesinlikle etkilenmezler.

Yani bu css kuralının uygulanabilmesi için iki ayrı şartı araması sadece footer yada sadece paragraf olması değil footer'ın içinde bir paragraf olması şartı aranıyor. Bu iki şartıda sağlayan tüm sayfa elemanlarında uygulanıyor.