Css xhtml elemanlarının bir kutu içinde düşündüğünden , kutunun border yani kenarlık özelliklerini değiştirme imkanı sağlar.
Bu özellik kenar çizgisinin tipini ayarlamak için kullanılınır.Ayrıca kutu kenar çizgilerini kullanıma açmak için kullanılınır .Bu özelliğe atadığınız değer kutunun 4 kenarı içinde uygulanır.
| değer | açıklama |
| none | Herhangi bir border tanımlaması yok |
| hidden | Border gizle |
| dotted | Noktalı çizgi |
| dashed | Kesik çizgi şeklinde |
| solid | Tek çizgi |
| double | İki çizgi |
| groove | Oluk şeklinde çizgi |
| ridge | Üsten alta eğimli (sırtlı çizgi) |
| inset | İçe doğru derinlik hissi veren |
| outset | Dışa doğru derinlik hissi veren çizgi |
Burada şuna dikkat edelim bir p elemanı için kenarlık stili yani tipi tanımlaması yaptım çünkü p elemanı css tarafından bir kutu içerisindeymiş gibi varsayılır.
Örnek:
Resimin normal hali aşağıdadır ;
7 views
CSS kodlarının media türüne göre yazılması
Media özelliği ile oluşturmuş olduğumuz stil kodlarının hangi ortamda çalışacağını ayarlayabiliyorduk bu durumda CSS kodlarını media özelliğini kullanarak guruplara ayırıp web belgemizin içine yazabiliriz.
@media deyimi ;
İki gurup CSS kodu var @media screen kodları belge tarayıcıda izlenirken kullanılacak . @media print içindeki kod gurupları da sayfa yazıcıdan çıktı alınacağı zaman kullanılacak.
CSS dosyalarının media türüne göre sayfaya dahil edilmesi.
Dışarıdan ithal edilen CSS kodlarını media ile ortama göre gruplandırmak için;
@import url(ana.css) screen;
@import url(yazıcı.css) print ;
Yada <link> elemanı ile
<link rel=”stylesheets” type=”text/css” href=”ana.css” media=”screen” />
<link rel=”stylesheets” type=”text/css” href=”yazıcı.css” media=”print” />
Şeklinde yazmamız mümkün..
18 views
JAVASCRIPT client(istemci)’nin browserın da çalışan bir programlama dilidir.Browser JAVASCRIPT komutlarını yorumlayarak işlevlerini yerine getirir. Web de kullanılan programlama dillerini (server)sunucuda çalışan ve istemcide(client) çalışan olarak ikiye ayırıyoruz.
HTML sadece sayfamızı oluşturmamıza yarayan ve sayfamızdaki nesnelere kısıtlı özellikler katmamıza yarayan text tabanlı bir etiket(markup) dilidir.İçerisinde programlama dili olması için gereken değişkenler , karar yapıları , döngüler ..vb gibi yapıları içermez.HTML ile durağan kullanıcıların hareketlerine duyarlı olmayan web sayfaları oluşturabiliriz.
WEB SAYFASI :………………içerik + sunum + etkileşim
Yukarıya baktığımızda içerik kısmını HTML ile oluşturduğumuzu biliyoruz. Html içerik saklar fakat sakladığı içeriklerin ki bu içerikler ( yazı , resim…..) gibi özelliklerini değiştirmek yada ayarlamak için çok kısıtlı imkanlar sunar . İşte burada devreye var olan içeriğin sunulması gelmektedir. Sunum işlemi CSS yapılmaktadır.Şuanda içerik ve sunum işlemini anladığımıza göre biraz etkileşime bakalım . Evet etkileşim dediğimizde web sayfasının kullanıcı hareketlerine tepki göstermesi , yada durağan olmayan nesneler aklımıza gelmektedir.İşin bu kısmını JAVASCRIPT yardımıyla yapmaktayız.Burada şunu belirtmek isterim JAVASCRIPT bir programlama dilidir dolayısıyla içerisinde karar / döngü / kontrol yapıları bulunmaktadır.
Programlama dillerinde yazılan kodlar tek başlarına çalışırlar. Kodları çalıştırmak istediğinizde hata ayıklama ve COMPİLE ( DERLEME) işlemi gerçekleştirilerek makine diline yada arakod(çalışması için framework’e ihtiyaç duyan) çevrilirler. Fakat JAVASCRIPT HTML içerisine eklenir ve tarayıcı tarafından yorumlanarak yazılan kodların işlevleri yerine getirilir.
JAVASCRIPT ile kullanıcı hareketlerine duyarlı , kullanıcı ile iletişime geçebilen , sayfamızdaki CSS kodlarını çalışma anında değiştirebileceğimiz , çalıştığı browserin yüklü olduğu bilgisayarla ilgili çeşitli bilgilere( işletim sistemi , saat , tarayıcı özellikleri) ulaşabileceğimiz , sayfamıza görsel nitelikli nesneler ekleyebileceğimiz , sayfalar oluşturmamızı sağlar
Son zamanlarda popüler olan AJAX ki sayfanın tamamını yenilemeden sadece belirli bir region(alanı) yenilemek için kullan ılınılır bu uygulamaların yapıtaşı JAVASCRIPTtir.
JAVASCRIPT dediğimizde DOM modelinden bahsetmek gerekir. DOM ( document object model ) bu model dokuman obje modeli , bu model sayesinde JAVASCRIPT ile sayfa üzerindeki tüm sayfa nesnelerine ( elemanlarına ) ulaşmamız mümkündür.DOM yeni versiyon hemen hemen tüm tarayıcılar tarafından desteklenmekle beraber eski tip tarayıcılarda farklılık gösterebilmektedir. Bu durumda java script içerisinde tarayıcı model ve versiyonunu tespit edip alternatif kodlar yazmamız gerekebilir.
Temel bir HTML yapısı aşağıda gözükmektedir.
JAVASCRIPT kodlarımızı HTML içerisine eklemekteyiz bu durumda html sayfasını açıp bir text editöründe ( notepad , notepad ++ ) yada Dreamweaver ve benzeri programlarda JAVASCRIPT kodlarımızı yazabiliriz
- language sayfamızda kullandığımız JAVASCRIPT sürümünü belirtmek için kullandığımız bir parametredir.Eğer belirtilen sürüm tarayıcılar tarafından desteklenmiyorsa script bloğu çalıştırılmaz. Bunu engellemek için bu parametreye sadece “JAVASCRIPT” yazmayı uygun görüyoruz .Eğer yeni çıkan bir sürüm kullanacaksak o sürümle beraber gelen tüm metot , yöntem ve özellikler sayfada kullanılabilir.
- Type parametresi ise içeriğin tipini tanımlarız standart olarak içeriğimiz yani script blokları rasına yazdığımız içerik text ve JAVASCRIPTtir.
29 views
CSS YAPISI VE SYNTAX (SÖZDİZİMİ)
CSS söz dizimi 2 ana kısımda incelenebilir. Seçici , Bildirim Bloğu tabi burada bildirim bloğu içersinde bildirimler vardır.
Seçici : Bir gurup bildirimi(özellikler ve aldıkları değerleri) temsil eden bir addır.Tüm HTML etiketleri yada sınıf seçici yada id seçici olabilir.
Bildirim bloğu: Seçici için tüm CSS özellikleri içinde tutan yapıdır. Süslü parantezle açılır ve Bildirimler bittiğinde süslü parantezle kapanır. ” {} ” ,Bunlara bildirim bloğu kapsayıcıları denir. İçerisinde bildirimleri taşır her bildirimden sonra muhakkak ; konmalıdır.
Bildirimler: Bildirim CSS özelliği(property) ve aldığı değerden (value) oluşur. Property ve value arasında ” : ” karakteri kullanılmalıdır.
Property : value (CSS özelliği : özelliğin aldığı değer )
örneğin ;
Yukarıdaki örnekte seçici ve bildirim bloğu , bildirimler gözükmektedir.
CSS ‘de özellikler ve değerler:
CSS standart olarak size bir çok özellik ve bu özelliklerin alabileceği değerleri sunar.Hangi özelliğe hangi değeri vereceğiniz tamamen tasarımınızla ilgilidir. CSS değerler çift tırnak içine alınmaz.
SEÇİCİLER
Daha öncede söylediğim gibi seçiciler bir gurup özellik ve özelliklerin aldıkları değerlerin adıdır.Özellik gurupları bu adla temsil edilirler.
1.Etiket (xHTML ) Seçiciler:
Seçici olarak XHtml etiketleri kullanılınır.Var olan tüm etiketler Birer seçici olarak kullanılabilir.XHTML etiketlerinin görevlerini yeniden tanımlamak için kullanıldığı gibi XHTML elemanına ek özellikler katmak içinde kullanılabilir.
Bir XHTML etiketini olan <p> ( paragraf etiketi ) seçici olarak tanımlarsak ve özellikler eklersek sayfada kullanılan tüm <p> etiketlerinin içindeki nesnelere bu özellikler uygulanır.
Özet olarak bir XHTML elemanı seçici olarak kullanılırsa tüm belge boyunca ona atadığınız özellikleri barındırdıkları içeriklere(yazı, resim,tablo) uygularlar.
Burada h2 ve p elemanlarına CSS özellikleri atanmış ve sayfada görüldüğü gibi içinde taşıdıkları nesnelere bu özellikler uygulanmış.
2.Sınıf Seçicisi (Class selector)
Sınıf seçicilerini bir XHTML etiketine farklı özellikler eklemek için kullanabiliriz ki bu durumda bu sınıf seçicileri bağımlı sınıf seçicileri olarak adlandırılırlar.
Örnekte dikkat edileceği üzere <p> etiketi sınıf seçici olmadan yapılsaydı yazılan özelliklerden belgedeki tüm <p> tagları etkilenecekti ama şimdi p tagı için iki sınıf oluşturuldu ve ayrı ayrı özellikler atandı artık istenilen <p> etiketlerine istenilen class atanabilir.
Burada tanımlanan iki sınıfta <p> tagına bağımlı sınıflardır. Bu durumda sayfada sadece <p> tagına bu class’lar atanabilir
Eğer bağımlı bir sınıf seçici oluşturmak istiyorsak ;
Eğer bağımsız yani tüm imler tarafından kullanılabilecek bir sınıf seçici oluşturmak istersek bu durumda nokta ile başlayıp sınıf seçici adını yazmamız yeterli olacaktır.
Sınıf seçicinin en önemli özelliği tüm HTML elemanları tarafından kullanılabilmeleridir.Yani bağımsız sınıf seçicilerini farklı XHTML imlerine atayabiliriz.
10 views
