Arayüz Geliştiriciler(Html-ci) Tasarımcıdan Ne İster?.
Web Sitesi Hakkında Bilgi ve İçerik Toplama Süreci - Tasarım Süreci - HTML/CSS/JS Süreci - Programlama Süreci - Test ve Yayına Alma Süreci
Genel bir web sitesinin oluşum aşamaları genel hatları ile yukarıdaki gibidir.
Bir web sitesinin evrelerinden birisi; Tasarımı bitmiş web sitesinin Arayüz geliştiriyiciye (HTML-ci) teslim etmesidir. İyi bir web sitesi çıkarmak için çok iyi bir ekibe sahip olmak gerektiğini çeşitli platformlarda değinmiştim. Bu ekipte en çok iletişimde olması gereken iki kişi veya iki bölüm tasarım ve arayüz geliştiricileri arasında olmalıdır. Tasarımcı ve arayüz geliştirici arasındaki iletişimin sağlam olması projenin sağlığı açısından önemlidir. Hadi programcılarıda kızdırmayalım onlarda olmazsa olmaz.
Bir arayüz geliştirici olarak tasarımcıdan beklentilerimiz var tabiki. Aynı şekilde Tasarımcının ve programcının da çeşitli beklentileri olabilir. Ancak ben burada kendi açımdan bakarak bir tasarımcıdan beklentilerimin ne olduğunu yazacağım.
Kaynak Dosyaları
•Tasarımı çıkmış sayfaların eksiksiz kaynak dosyaları(psd veya katmanlı png) bu kaynak dosyalarının temiz ve düzenli olması önemle rica olunur
•Kullanılan yazı tipleri
•Renk paleti
•Favori ikon
•Sitenin yapısına göre sitedeki buton tipleri, kullanılacak ikonlar vb. yapılarda beklenenler listesine girer.
Site Şablonları ve Yerleşim
Web sitelerinin belli sayfalarını tasarlayan tasarımcıdan tüm sitedeki alanların bir özeti olan şablonlar hazırlamalıdır. Genel bir web sitesi şablonunda Metinlerin rengi, boyutları, listeler, form alanları, resimlerin durumu ve konumunu göstermelidir.
Ayrıca site içinde flash olacak kısımları belirlemelidir. Flash olacak kısımları Flash geliştirici ile koordineli olarak Arayüz geliştirici siteye eklemelidir.
Etkileşimli Alanların Farklı Durumları
Sitedeki etkileşimli alanları kullanıcı hareketine göre aldığı farklı durumlar için hazırlanmış ise. Örneğin butonları :hover halleri, forum elemanlarına odaklanma durumları vb. yapıların her durumunu gösteren görseller
•:hover
•:focus
•:active
halleri,
Genel Beklentiler
Arayüz Geliştiricileri olarak bizlerin en büyük sorunları farklı tarayıcılar için kod yazmaktır. Buradaki en büyük sorunumuz tabi ki İnternet Explorer 6 ve sorunlarıdır. İnternet Explorer 6’nın kısıtladığı özellikler düşünülerek tasarımcılardan bazı beklentilerimiz olacaktır. Tasarımcı tasarımını yaparken bazı kısıtlamalar ve zorluklarımız olduğunu bilirse yapılan tasarımın html çevrilmesi aşamasında o kadar az fark olur(HTML-ci sabunlama gereği duymaz) Örneğin yapılan bir tasarımda renk geçişi olan bir alan üzerine konulan gölgeli alanlar arayüz geliştiriciyi zorlayacak eylemlerdir. Ayrıca birbiri üzerine çok fazla binen kısımların olması bizleri zorlar, z-index problemleri ile uğraşmamıza neden olur.
Sonuç
Ekip arasındaki iletişim sağlam olması bir çok sorunu çözecektir ve birlikte çalışma süreleride bu listeyi azaltacak etkenlerden birisidir.
Web Sitesi Hakkında Bilgi ve İçerik Toplama Süreci - Tasarım Süreci - HTML/CSS/JS Süreci - Programlama Süreci - Test ve Yayına Alma Süreci
Genel bir web sitesinin oluşum aşamaları genel hatları ile yukarıdaki gibidir.
Bir web sitesinin evrelerinden birisi; Tasarımı bitmiş web sitesinin Arayüz geliştiriyiciye (HTML-ci) teslim etmesidir. İyi bir web sitesi çıkarmak için çok iyi bir ekibe sahip olmak gerektiğini çeşitli platformlarda değinmiştim. Bu ekipte en çok iletişimde olması gereken iki kişi veya iki bölüm tasarım ve arayüz geliştiricileri arasında olmalıdır. Tasarımcı ve arayüz geliştirici arasındaki iletişimin sağlam olması projenin sağlığı açısından önemlidir. Hadi programcılarıda kızdırmayalım onlarda olmazsa olmaz.
Bir arayüz geliştirici olarak tasarımcıdan beklentilerimiz var tabiki. Aynı şekilde Tasarımcının ve programcının da çeşitli beklentileri olabilir. Ancak ben burada kendi açımdan bakarak bir tasarımcıdan beklentilerimin ne olduğunu yazacağım.
Kaynak Dosyaları
•Tasarımı çıkmış sayfaların eksiksiz kaynak dosyaları(psd veya katmanlı png) bu kaynak dosyalarının temiz ve düzenli olması önemle rica olunur
•Kullanılan yazı tipleri
•Renk paleti
•Favori ikon
•Sitenin yapısına göre sitedeki buton tipleri, kullanılacak ikonlar vb. yapılarda beklenenler listesine girer.
Site Şablonları ve Yerleşim
Web sitelerinin belli sayfalarını tasarlayan tasarımcıdan tüm sitedeki alanların bir özeti olan şablonlar hazırlamalıdır. Genel bir web sitesi şablonunda Metinlerin rengi, boyutları, listeler, form alanları, resimlerin durumu ve konumunu göstermelidir.
Ayrıca site içinde flash olacak kısımları belirlemelidir. Flash olacak kısımları Flash geliştirici ile koordineli olarak Arayüz geliştirici siteye eklemelidir.
Etkileşimli Alanların Farklı Durumları
Sitedeki etkileşimli alanları kullanıcı hareketine göre aldığı farklı durumlar için hazırlanmış ise. Örneğin butonları :hover halleri, forum elemanlarına odaklanma durumları vb. yapıların her durumunu gösteren görseller
•:hover
•:focus
•:active
halleri,
Genel Beklentiler
Arayüz Geliştiricileri olarak bizlerin en büyük sorunları farklı tarayıcılar için kod yazmaktır. Buradaki en büyük sorunumuz tabi ki İnternet Explorer 6 ve sorunlarıdır. İnternet Explorer 6’nın kısıtladığı özellikler düşünülerek tasarımcılardan bazı beklentilerimiz olacaktır. Tasarımcı tasarımını yaparken bazı kısıtlamalar ve zorluklarımız olduğunu bilirse yapılan tasarımın html çevrilmesi aşamasında o kadar az fark olur(HTML-ci sabunlama gereği duymaz) Örneğin yapılan bir tasarımda renk geçişi olan bir alan üzerine konulan gölgeli alanlar arayüz geliştiriciyi zorlayacak eylemlerdir. Ayrıca birbiri üzerine çok fazla binen kısımların olması bizleri zorlar, z-index problemleri ile uğraşmamıza neden olur.
Sonuç
Ekip arasındaki iletişim sağlam olması bir çok sorunu çözecektir ve birlikte çalışma süreleride bu listeyi azaltacak etkenlerden birisidir.
Css'e Başlamak.
Cascading Style Sheets (CSS) HTML 'deki bazı problemleri halletmek için ama asıl neden olarak da; web sayfası içeriği ve web sayfası görünümünü birbirinden ayırmak için oluşturulan bir standarttır. CSS 1996'da W3C tarafından duyuruldu. Son olarak CSS2.1 versiyonu işler durumdadır. CSS3.0'da çalışmaları devam etmektedir. CSS3.0 için ayrıntılı bilgiye http://www.w3c.org/Style/CSS/current-work adresinden ulaşabilirsiniz. CSS kullanımının bir çok bakından avantajları bulunmaktadır. Belli başlı avantajlarını sıralarsak:
Görünüm Avantajları
CSS HTML'e göre bir çok stil özelliğine sahiptir. CSS'in sayfa içeriği öğelerinin sayfa görünümü öğelerinden ayrılması için geliştirildiğini düşünürsek avantajı baştan anlaşılmış olur. :::html
CSS'e Giriş
HTML'de bu elementi(h1) kalın,altı çizili, ardalanı kırmızı olarak atama gibi çeşitli stiller verbiliriz ancak bunlar içinde ayrı HTML elementleri kullanmak zorundayız (örn:strong, gibi), ancak CSS de bunu tek bir elementle yapabiliriz ve ayrıca daha fazla stil özellikleride atayabiliriz.(örn: kenarlık, rollover vs stillerini ekleyebiliriz.)
Kullanım Kolaylığı
HTML'de her elmente artı özellikler eklemek için başka bir element ve özellik eklmemiz gerekiyor ve bu işlemi geniş çaplı bir sitede yaptığımızı düşünürseniz çok büyük zaman kaybı ve uğraş gerektiğini göreceksiniz.
Bunun gibi onlarca veya yüzlerce başlığınız olduğunu düşünün, gerçekten çok zor. CSS'de aynı işlem için
Hatta daha sonra bu elementin özelliklerinde değişiklik yapmamızda kolay olacaktır. Hatta bu işlemi sadece bu etiket için değil diğer etiketlerede uygulayabiliriz.
Ayrıcatek bir CSS dosyası ile sitenin tamamının yönetmekte web kodlamacıları için çok büyük kolaylıktır. Sadece bir dosyada değişlik yaparak tüm sitemizi yönetebiliriz isterse yüzlerce sayfa olsun.
Tasarım Tutarlılığı
Tek CSS dosyası ile tüm sitenizi yönetebilirsiniz bu ayrıca sitenize tutarlılık kazandıracaktır. Tüm sayfalarınıza aynı stil elementlerini ve özelliklerini atayarak sayfa tutarlılığını sağlayabilirsiniz. Web sayfanızdaki ilk sayfadan son sayfaya kadar tutarlılığınızı koruyarak ziyaretçinize düzenli bir içerik sunmuş olacak ve sitenizin kendine has özelliklerini ziyaretçiye benimsetmiş olacaksınız. Sayfalar hızlı yüklenecek ve doğru olarak yüklenecektir, çünkü aynı elementleri diğer sayfalarda tekrar yüklemeyecek ve bu ziyaretçiye zaman kazandıracaktır. CSS+XHTML ile HTML göre %50'ye varan performans ve hız artışları olacaktır.
Gelecek Vaadediyor
HTML giderek işlevselliğini kaybedeceği ve XML ve dolayısı ile XHTML'in işlevselliğini artıracağı düşünülürse, CSS gibi tümleşik bir stadardın önemi daha çok anlaşılıyor. XHTML ile daha temiz kodlar üretilecek, farklı platformlara(pda,cep telefonu vs.) uyum sayesinde bilgi dolaşımı kolaylaşacak, sayfalarımız arama motorları programları tarafından daha anlaşılır olacaktır. CSS, XHTML teknolojisi ile tümleşik olarak çalışarak bizlere gelecek vaadediyor.
Cascading Style Sheets (CSS) HTML 'deki bazı problemleri halletmek için ama asıl neden olarak da; web sayfası içeriği ve web sayfası görünümünü birbirinden ayırmak için oluşturulan bir standarttır. CSS 1996'da W3C tarafından duyuruldu. Son olarak CSS2.1 versiyonu işler durumdadır. CSS3.0'da çalışmaları devam etmektedir. CSS3.0 için ayrıntılı bilgiye http://www.w3c.org/Style/CSS/current-work adresinden ulaşabilirsiniz. CSS kullanımının bir çok bakından avantajları bulunmaktadır. Belli başlı avantajlarını sıralarsak:
Görünüm Avantajları
CSS HTML'e göre bir çok stil özelliğine sahiptir. CSS'in sayfa içeriği öğelerinin sayfa görünümü öğelerinden ayrılması için geliştirildiğini düşünürsek avantajı baştan anlaşılmış olur. :::html
CSS'e Giriş
HTML'de bu elementi(h1) kalın,altı çizili, ardalanı kırmızı olarak atama gibi çeşitli stiller verbiliriz ancak bunlar içinde ayrı HTML elementleri kullanmak zorundayız (örn:strong, gibi), ancak CSS de bunu tek bir elementle yapabiliriz ve ayrıca daha fazla stil özellikleride atayabiliriz.(örn: kenarlık, rollover vs stillerini ekleyebiliriz.)
Kod:
h1 {
color: white;
font:italic 11px Arial, serif;
text-decoration: underline;
background: yellow url(titlebg.gif) repeat-x;
border: 1px solid red;
margin-bottom: 0;
padding: 5px;
}Kullanım Kolaylığı
HTML'de her elmente artı özellikler eklemek için başka bir element ve özellik eklmemiz gerekiyor ve bu işlemi geniş çaplı bir sitede yaptığımızı düşünürseniz çok büyük zaman kaybı ve uğraş gerektiğini göreceksiniz.
Kod:
<h1><font color="blue">Başlık</font></h1>Bunun gibi onlarca veya yüzlerce başlığınız olduğunu düşünün, gerçekten çok zor. CSS'de aynı işlem için
Kod:
h1 {
color: blue;
}Hatta daha sonra bu elementin özelliklerinde değişiklik yapmamızda kolay olacaktır. Hatta bu işlemi sadece bu etiket için değil diğer etiketlerede uygulayabiliriz.
Kod:
h1, h2 {
color: blue;
}Ayrıcatek bir CSS dosyası ile sitenin tamamının yönetmekte web kodlamacıları için çok büyük kolaylıktır. Sadece bir dosyada değişlik yaparak tüm sitemizi yönetebiliriz isterse yüzlerce sayfa olsun.
Tasarım Tutarlılığı
Tek CSS dosyası ile tüm sitenizi yönetebilirsiniz bu ayrıca sitenize tutarlılık kazandıracaktır. Tüm sayfalarınıza aynı stil elementlerini ve özelliklerini atayarak sayfa tutarlılığını sağlayabilirsiniz. Web sayfanızdaki ilk sayfadan son sayfaya kadar tutarlılığınızı koruyarak ziyaretçinize düzenli bir içerik sunmuş olacak ve sitenizin kendine has özelliklerini ziyaretçiye benimsetmiş olacaksınız. Sayfalar hızlı yüklenecek ve doğru olarak yüklenecektir, çünkü aynı elementleri diğer sayfalarda tekrar yüklemeyecek ve bu ziyaretçiye zaman kazandıracaktır. CSS+XHTML ile HTML göre %50'ye varan performans ve hız artışları olacaktır.
Gelecek Vaadediyor
HTML giderek işlevselliğini kaybedeceği ve XML ve dolayısı ile XHTML'in işlevselliğini artıracağı düşünülürse, CSS gibi tümleşik bir stadardın önemi daha çok anlaşılıyor. XHTML ile daha temiz kodlar üretilecek, farklı platformlara(pda,cep telefonu vs.) uyum sayesinde bilgi dolaşımı kolaylaşacak, sayfalarımız arama motorları programları tarafından daha anlaşılır olacaktır. CSS, XHTML teknolojisi ile tümleşik olarak çalışarak bizlere gelecek vaadediyor.
Css'in Yapısı
CSS'in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block). Bildirim Bloğuda iki ye ayrılır. Özellik(Property) ve Değer(Value).
Not : XML de Seçiciler HTML elementleri dışında yeni oluşturulan elementlerde olabilir.
Tüm HTML elementleri potansiyel Seçicilerdir. Seçiciler ismini de buradan alır, HTML seçilen element anlamındadır. Bildirim bloğu süslü parantezle açılır ve kapanır. Bildirimler arasında " ; " noktalı virgül kullanılır. özellik ve değerler birbirinden " : " iki nokta üstüste ile ayrılır.
Kod:
h1 {
font: medium Arial;
}Şeklinde arada boşluk verilerekde bildirm yapılabilir. Burada ilki font'un boyutunu ikincisi ise font ismini gösterir. İleride bu konuya daha ayrıntılı gireceğiz. Ayrıca sadece font etiketine özel " / " kullanımı vardır örnek aşağıda:
Kod:
h1 {
font: medium/120% Arial;
}Burada " / " Seçicinin font boyutunu ve satır yüksekliğini gösterir.(font_boyutu/satir_yuksekliği)
Gruplama
Yukarıda hep bir Seçici'yi sadece bir HTML elementine atamayı gördük, Birden fazla HTML elementine de atama yapabilirz, buna gruplama denir. Gruplama Seçicilerde yapıldığı gibi Bildirmlerde de yapılabilir.
Kod:
p, h3 {
font-family: Arial;
}Not : CSS2 ile birlikte Evrensel Seçici(universal selector) Seçiciler arasına katılmıştır, " * " ile gösterilir. * {color: red;} tüm elementleri kırmızı yapar. Bir anlamda gruplama yapar. Ayrıntılı bilgi için W3 sitesini ziyaret edin.
Burada düküman içindeki paragraflarda(p) ve başlıklarda(h3) fontların Arial olacağını tek bildirim ile belirttik. Gruplama yapılan Seçicileri ayırmak için " , " virgül kullanılır. Sınırsız sayıda Seçici gruplanabilir. Gruplama tasarımcılara büyük kolaylıklar sağlar. Bildirim'lerimizi de gruplayabiliriz, bununla ilgili yukarıda örnekler mevcut. Bir veya daha fazla Seçiciye bir den fazla bildirim ekleye biliriz.
Kod:
p, h3{
font-family: Arial;
font-size:2;
font-weight: bold;
}Seçiciler ikiye ayrılır. Sınıf Seçicisi ve Id Seçicisi. CSS ile işlenmemiş bir dökümanda başlangıçta bir plan yaparak hangi içeriğin Sınıf Seçicisi hangi Seçicicinin Id Seçicisi olacağını planlamalıyız.
Sınıf Seçicisi(Class Selector)
Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız. Bir örnek verecek olursak; hazırlayacağımız dökümanda iki adet paragraf tanımlaması yapacağımızı planlıyoruz. Bunlardan biri sağa dayalı, diğeri ise ortalı olmasını istiyoruz
Kod:
p.sagadaya {
text-align: right
}
p.ortala {
text-align: center
}Bu Seçicileri sayfamızda uygulamak için;
Kod:
<p class="sagadaya">Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız.</p>
<p class="ortala">Yukarıdaki bilgiyi dikkatlice okumalısınız</p>Birde önemli bir tanımlama yapacağınızı düşünün, ancak sadece bir HTML elementine değilde istediğiniz sayıda HTML elementinde bunu kullanmak isterseniz;
Kod:
.ortala {
text-align: center
}Bu tanımlamayı yaptıktan sonra istedğimiz her HTML elementine bu sınıfı uygulayabiliriz.
Kod:
<span class="ortala"> Burada birşeyler yazar </span>
<p class="ortala">Burada da başka bişeyler yazar</p>Çoklu sınıflar, birden fazla sınıfı bir HTML elementine uygulamak için kullanılır.
Kod:
<p class="onemli uyari">Ülkemizde meydana gelen trafik kazalarının yaklaşık % 90'ı insanların hataları sonucu meydana gelmektedir.</p>Yukarıdaki örnekte görüldüğü gibi bir uyari Sınıfımız birde onemli Sınıfımız mevcut. Bazı metinlerin önemli uyarı olacağı düşüncesi ile böyle bir atama yapılabilir. Bunun için kullanıcığımız kod;
Kod:
.onemli {
font-weight: bold;
}
.uyari {
font-style: italic;
}
.onemli.uyari {
background: silver;
}Önemli metinler için kalın, uyari için italiktik atmalar yapıyoruz. Birde her ikisine birden de atama yapabiliyoruz. Dikkat ederseniz class="onemli uyari" olarak atama yaparken CSS Seçicisinde .onemli.uyari şeklinde yazıyoruz.
Id Seçecileri
Id Seçicileri Sınıf Seçicisinden farklıdır. Sınıf Seçicisi sayfada birden fazla elemente atanırken Id Seçicisi sadece bir tane elemente atanır. Seçicisi adının başında # işareti olan Seçiciler Id Seçicisidir.
Kod:
#mavi{
background:blue;
}
#kirmizi{
background:red;
}HTML;
Kod:
<p id="mavi">Bu yazının arkafon rengi mavi</p>
<p id="kirmizi">Bu yazının arkafon rengi kırmızı</p>Sınıf mı? Id mi?
Yukarıda Id Seçicisi için her nekadar da bir sayfada sadece bir defa kullanılır desekte tasarımcının sayfada bir çok yerde kullanmasına tarayıcılar ses çıkarmaz, yani hata mesajı vermez. Ancak Bu elementleri DOM scriptlerinde kullanırken Id atamasını bir kaç yerde yaptığımızda hata alacağızdır. Bu nedenle her nekadar tarayıcılar izin versede Id Seçicisini bir kez kullanmalıyız. Birden fazla kullanacağımız elementler için Sınıf Seçicisini kullanmalıyız. Bu kodumuzu daha kullanışlı ve temiz yapacaktır. Sınıf ve Id Seçicileri küçük-büyük harfe karşı duyarlıdır;
Kod:
p.onemliBilgi {
font-weight: bold;
}Ve kullanımıda;
Kod:
<p class="onemlibilgi">Uygulama olmaz .</p>Yukarıdaki kod uygulanmayacaktır çünkü " B " bir yerde büyük birde küçük kullanılmıştır. Bazı eski tarayıcılar bu kuralın dışında kalabilir.
(X)HTML Sayfa Yapısı ve CSS Kullanımı
CSS güçlüdür, çünkü CSS uygun stilleri ve bu stilleri nasıl uygulanacağını belirlemek için (X)HTML dökümanının yapısını kullanır. (X)HTML Sayfa yapısına stil uygulamanın bir çok yolu vardır. Ancak bu yolları öğrenmeden önce (X)HTML hiyerarşisini öğrenmemiz gerekir.
(X)HTML Döküman Hiyerarşisini Anlamak
Seçici(Selector) ve Döküman arasındaki ilişkiyi anlayabilmemiz için, dökümanların nasıl planlandığını tekrar gözden geçirmemiz gerekir. Aşağıdaki basit (X)HTML dökümanı üzerine biraz düşünelim:
Kod:
<html>
<head>
<title> CSS (X)HTML Hiyerarşisi </title>
</head>
<body>
<h1>CSS<em>(X)HTML Hiyerarşisi </em></h1>
Sitemize hoş geldiniz <em>Merhaba</em>biz <strong>sizler için <a href="konu.html"> bazı <em>önemli</em> konular </a></strong>! hazırladık
<ul>
<li>Konu Başlıkları :
<ul>
<li><strong>Asıl</strong> Giriş</li>
<li>Önsöz</li>
<li><em>ilk</em> bölüm:
<ol>
<li>Elma</li>
<li>Armut</li>
<li>Karpuz</li>
</ol>
</li>
</ul>
</li>
<li>...vd.</li>
</ul>
<p>Ayrıntılılı bilgi için <a href="mailto:destek@10tl.net"> mesaj gönder </a></p>
</body>
</html>CSS'in güçlü olmasının en büyük nedeni (X)HTML elementleri arasındaki ilişkiden yararlanmasıdır. (X)HTML dökümanları gizli bir hiyararşi ile oluşturulur. Bu hiyerarşi içinde tüm (X)HTML elementleri kendilerine uygun bir yer bulur. Bu ilişkiyi biz soy ağacına benzete biliriz.
Yukarıdaki (x)html yapısını bir soy ağacı gibi düşünüp değerlendirirsek: Bir elementin ebeveyn(anne-baba) olduğunu anlamak için o elementin altında başka element olup olmadığına bakmalıyız, eğer varsa o element ebeveyndir. Yukarıdaki şekilde p elementine dikkat edelim. p bir ebveyndir çünkü altında em ve strong elementleri bulunmaktadır. strong da bir ebeveyndir ki onun altında a elementi vardır. Bir elementin çocuk element olduğunu anlamak için de üstünde bir elementin olup olmadığına bakarız. Yani yukarıdaki olayın tersi. Buna göre strong elementi p elementinin bir çocuğudur. Daha karmaşık yapılarda ata(ancestor) ve torun(descendant) ilişkisi vardır. Aradaki fark eğer bir element diğer elementin tam olarak bir seviye üstünde ise o ata diğeride torun durumundadır. Yukarıdaki şekili incelersek ilk ul elementinin iki adet li çocuk elementi bulunmaktadır ve bu iki li elementinin altındaki tüm elementler ilk ul elementinin torun elementleridir.
Torun Seçicileri (Descendant Selectors)
Bu modelin avantajlarından birisi Torun Seçicileridir(diğer bir isimleride içiçe seçicilerdir). Torun Seçicilere yapılan tanımlama sadece belitilen elementlere uygulanır bu kuralların haricinde kalanlara ise uygulanmaz. Bir örnek verecek olursak bir h1 elementinin em torun elementine belirli bir stil uygulamak istesek. Normalde bir sınıf tanımlaması yapılarak her h1 elementi altındaki em elementini tek tek seçerek bu sınıfı uygulamamız gerekir ki bunun font etiketi uygulmasından farkı yoktur. Açıkcası bu işlemi yapmak uzun zaman alacaktır. Ancak Torun Seçicisi kullanarak bu işi kolayca yapabilriz. örnek kod yazarsak:
Kod:
h1 em {
color: gray;
}Bu kod dökümandaki atası h1 olan tüm em elementlerini gri yapacaktır. Diğer em'ler ise bu kuralı uygulamayacaktır. Torun Seçicilerde, seçici kısmı birbirinden bir boşlukla ayrılmış iki veya daha fazla seçiciden oluşur. Aradaki boşluk bağlayıcı özellik taşır. Sadece iki elementle sınırlı değiliz, sınırsız element tanımlayabiliriz.
Kod:
ul ol ul em {
color: gray;
}Torun Seçiciler çok kuvvetli olabilirler. Onlar (X)HTML ile yapılmasının imkanı olmayan işler yaparlar. Örnek bir dökümanda iki adet alan oluşturduğumuzu düşünün birinci alanın ardalanı(background) mavi, ikinci alanın ardaalanının beyaz olduğunu düşünün ve her iki alanın içinde de linkler olduğunu farz edelim. Tüm linkleri mavi olarak atamamız mümkün olmayacaktır çünkü ilk alanın ardaalanı mavi olduğu için linkler görünmeyecektir. Çözüm Torun Seçicilerindedir; ilk alan içindeki linklere farklı renk diğerlerine farklı renk tanımlaması yaparak bu işi halledebiliriz.
Kod:
td.sidebar {
background: blue;
}
td.main {
background: white;
}
td.sidebar a:link {
color: white;
}
td.main a:link {
color: blue;
}Bir örnek daha verelim. blockquote ve p elementleri içindeki b elementi ile blockquote içinde ve normal paragraf içinde geçen b elementlerine özel bir atama yapmak istiyoruz bunun için kod yazarsak:
Kod:
blockquote b, p b {
color: gray;
}Koda dikkat edersek her iki atamayı ayrı ayrı yapmak yerine araya bir virgül koyarak birlikte yaptığımızı görürsünüz.
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
Çocuk Seçicileri
Bazı durumlarda keyfi olarak bir torun seçicisi kullanmaktansa daha ayrıntılı bir ayrım yapmak isteyebiliriz. Örneğin bir h1 elementinin altındakistrong elementlerinden sadece Çocuk Elementi için tanımlamalar yapmak istersek (torun elementleri hariç), Bunun için çocuk bağlayıcısını kullanırız ( > ) büyüktür işareti
Kod:
h1 > strong {
color: red;
}HTML;
Kod:
<h1>Bu <strong>koda</strong> uygulanacaktır.</h1>
<h1>Bu <em>koddaki <strong> bu kısım </strong></em> uygulama dışıdır..</h1>Yukardaki durumda sadece ilk strong elementi için tanımlama gerçekleşecektir ikincisi için herhangi bir stil tanımı uygulanmayacaktır.
Yukarıda ana örneğimizin bir kısmı gösterilemektedir. Ebeveyn-çocuk ilişkisini daha iyi anlamak için hazırlanmıştır. aelementi strong'un ebevenynidir. p elementide a nın ebeveynidir. Ancak p elementi strong'un ebeveyni değildir. Biz burada p > a ve a > strong şeklinde tanımlama yapabilriz ancak p > strong tanımlamasını yapamayız. Birde aynı seçici içinde hem torun birleştiricisini hemde çocuk birleştiricisini kullanabiliriz.
Kod:
table.summary td > pTarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
Bitişik Kardeş Seçiciler
Bitişik Kardeş Seçicileri biribiri ardına gelen aynı seviyedeki elementlerden sonra gelenine stil tanımlamak için kullanılır. Tam olarak "Bir Ufak Kardeş Seçicisi" olmalıdır. Bir örnek verelim bir başlığımız var ve sonrasında ard arda paragraflar geliyor. Biz başlık ile hemen ardından gelen paragrafın arasına mesafe koymak için bu seçiciyi kullanabiliriz.
Kod:
<body>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<p>Buraya <em>önemli</em> ve <strong>iyi</strong>kod gir</p>
<p>Buraya <em>önemli</em> ve <strong>iyi</strong>kod gir</p>
</body>Dökümanın yapısı:
Biz burada h2 ve h3 arasında boşluk vermek için aşağıdaki kodu kullanırız:
Kod:
h2 + h3 {
margin-top: 10px;
}Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
Sonuç olarak konunun başında söylediğimiz gibi CSS, (X)HTML elementlerinin kendi aralarındaki ilişkileri kullanarak bize bir çok avantaj sağlar. Bu sayede bir çok kod yığınından kurtulmuş oluruz ve kodlarımız bir düzene girer. Bu kuralları uyguladıkça önemini daha iyi anlayacağız. Çocuk Seçicileri ve Bitişik Kardeş Seçicileri'ni Internet Explorer 7 versiyonundan itibaren desteklemeye başlamıştır. Bu nedenle kullanımı konusunda dikkat etmeliyiz.
Genel Seçiciler
Genel Seçiciler bir elementi bütüne uygulamak için kullanılır bu işlem için * işareti kullanılır. Aşağıdaki kod tüm elementleri kırmızı yapacaktır.
Kod:
* {
color:red;
}Ayrıca bir katmanın içindeki sınıflara uygulamak istersek
Kod:
div .uyari * {
color:red;
}katman, .uyari sınıfı içindeki tüm elementler kırmızı olacaktır.
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
Özellik Seçicileri(Attribute Selectors)
Bu konuya biraz geç değindik biliyorum. Ancak bu konuyu (X)HTML Sayfa Yapısı ve CSS Kullanımı makalesi içinde yazmayı düşündüğümde IE bu özelliği desteklemiyordu(şimdi IE7 bu özelliği desteklemektedir.) bu nedenle yazımını ertelemiştim, sonrada unuttum gitti açıkçası neyse sonunda yazıyorum işte:)
CSS ile tanımlama yaparken Xhtml nesnelerine erişmede bazen sıkıntı çekeriz. Ne yapsak da bu elemente atama yapsak diye bu genelde programcı - Arayüz Kod Yazarı ayrımının olduğu projelerde çok başımıza gelir. Bu sorunu kökünden çözen bir yöntemdir Özellik Seçicileri.
Not Javascript gibi id'si olan her elemente(hata daha fazlası da var) css özelliği atanması bize bir çok bakımdan avantaj sağlar.
Özellik Seçicileri HTML, XHTML veya XML dokümanlarındaki seçilen etiketin özelliklerine veya özellik değerlerine göre tanımlama yapmamızı sağlar. Bir örnek verecek olursak sayfamızdaki bir resme(örn: grafik.gif) kenarlık ataması yapmak istersek:
Kod:
img[src="grafik.gif"]{
border: 1px solid #000;
}Dört çeşit Özellik Seçicisi vardır.
1- Basit Özellik Seçicisi
Belirli bir etiketin(örn:img) özelligine(örn:alt) göre tanımlama yapmamızı sağlar.
Bir örnek yapalım;
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS'in yapısı</title>
<style type="text/css">
img[alt] {
border: 5px solid lime
}
</style>
</head>
<body>
<img src="logo.gif" alt="Logo" width="32" height="41" />
</body>
</html>Yukarıdaki kodlamada birden fazla <img> tanımı vardır. Ama biz sadece alt tanımı yaptıklarımıza belli özellikler atamak istiyoruz. Bunun için Basit Özellik Seçicisini kullanabiliriz.
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
2- Özellik Değeri Seçicisi
Bir etiketin özellik değerine göre tanımlama yapmamızı sağlar.
Bir örnek yapalım;
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>CSS'in yapısı</title>
<style type="text/css">
input[type="text"] {
border: 1px solid #000;
width: 150px;
}
</style>
</head>
<body>
<p>Adınız : <input type="text" name="ad" /></p>
<p>Cinsiyetiniz: <input type="radio" name="cinsiyet" id="erkek" />
Erkek <input type="radio" name="cinsiyet" id="kadin" /> Kadın
</p>
</body>
</html>Genelde formlarda tanımlama yaparken sadece metin girisi yaptıgımız alanlara atama yapmakta zorlanırız. Bunun sebebi <input> etiketini sadece metin girisi için kullanılmamasıdır, radyo buton ve isaretleme kutuları içinde bu etiketin kullanılmasıdır. Özellik Degeri Seçicisi bu sorunu kökten çözer. Yukarıdaki örnekte görüldügü gibi.
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
3- Kısmi Özellik Değeri Seçicisi
Bir etiketin özellik değerindeki boşluklarla ayrılmış kısımlarına göre tanımlama yapmamızı sağlar.
Bir örnek yapalım;
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>CSS'in yapısı</title>
<style type="text/css">
a[title~="Google"] {
text-decoration:overline;
}
</style>
</head>
<body>
<p><a href="http://www.google.com" title="Google seç">gooogle
</a> </p>
<p><a href="http://www.yahoo.com" title="Yahoo seç">yahoo </a>
</p>
<p><a href="http://www.fatihhayrioglu.com" title="Fatih">fatih </a>
</p>
</body>
</html>Türkçe karakterde sorunsuz çalısıyor. Siz kullanabilecegimiz yerleri hesap edin artık.
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
4- Dikkate Değer Özellik Seçicisi
Bir etiketin özellik değerindeki kesik çizgi(-) ile ayrılmış kısımlarına göre tanımlama yapmamızı sağlar.
Bir örnek yapalım;
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>CSS'in yapısı</title>
<style type="text/css">
*[lang|="en"] {
color: red;
}
</style>
</head>
<body>
<h1 lang="en">Hello!</h1>
<p lang="en-us">Greetings!</p>
<div lang="en-au">G’day!</div>
<p lang="fr">Bonjour!</p>
<h4 lang="cy-en">Jrooana!</h4>
</body>
</html>Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
Bunların dısında CSS3 ile birlikte gelen dört tane daha yeni Özellik Seçicisi vardır. "Belirlenen Sözdizimi ile Baslayan Özellik Deger Seçicisi", "Belirlenen Sözdizimi ile Biten Özellik Deger Seçicisi", "İçinde Belirlenen Sözdizimi Geçen Özellik Deger Seçicisi" ve Aduzayı Özellik Deger Seçicisi diye 4 adet yeni Özellik Seçicisi daha vardır. Amaç CSS ve XHTML arasındaki iletisimi en üst seviyeye çıkararak kolay ve etkilesimli kod yazmamızı saglamak.
Doğru Doctype Kullanımı
DOCTYPE, HTML veya (X)HTML dökümanımızın tipini göstermek için kullandığımız bir koddur.
DOCTYPE bildirimi (X)HTML kodunun başına bir veya iki satır olarak eklenir. Genel kullanımı:
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Burada dökümanımızın XHTML 1.0 verisyonu dikkate alınarak yazıldığı ve kullanılan bu kuralların linki verilmiştir. Linkin kullanılmadığı şeklide vardır.
Bu tanımlamadan sonra web tarayıcıları bu kurallara göre sayfayı yorumlayacak ve buna göre bir görünümü kullanıcıya sunacaktır. Web tarayıcıları kullanılan Döküman tip tanımlamasına(DTD-document type definition)göre sayfayı analiz eder.
Web Sayfalarını Doğrulama "Onaylama"
Güzel bir kodlama, (X)HTML dökümanın onyalanmış halidir. Web sayfalarımız doğrulamak için genelde http://validator.w3.org/ adresi kullanılırız. Ancak bir çok web sayfası hazırlama editörü bu aracı içinde barındırır.Web sayfalarımız doğrulattığımızda sonuç olarak bize sayfamızda bir sorun varsa bunuve niçin olduğunubelirtir.
Doğrulam işlemi önemlidir çünkü bizim kodlarımızı doğru yazdığımızı kontrol eder. Kodlarınızı belirli aralıklarla doğrulmayı unutmayın. şžunu unutmayalım ki web sayfasını doğrulamamız bunu en mükemmel kod olduğu anlamına gelmez.
Web tarayıcı mod'ları
Web tarayıcı üreticileri geriye dönük uyumluluğu sağlamak için standarlara uygun tarayıcılar çıkardıklar. Bunu başardılar, bu işlem için iki mod ürettirler: standart mod(standards mode) ve garip mod(Quirks mode). Standart mod sayfa ayrıntılı olarak ve en iyi şekilde yorumlayacaktır,Garip mod da ise eski moda tarayıcılardaki gibi daha duyarsız davranacaklardır. Örneğin IE4 ve NN4 gibi.
Bu iki mod arasındaki farkı görebilemke için Windows üzerindeki IE'de kutu modeline bakmalıyız. IE6 başlangıçta Standart Mod da Kutu Modeli doğru görünürken Garip Mod da ise sorun çıkarır. IE5 ve aşağısında bu sorun vardır, ayrıca Opera 7 ve üsrü Garip Mod da IE gibi davranır. Bunun dışında ufak tefek sorunlar da vardır. Hekzedesimal renk tanımında # kullanımına ihtiyaç duymama, CSS'de değer kullanılmadığında birimi piksel olarak tanınması vb. sorunlar olarak sıralayabiliriz.
Mozilla ve Safaride bir üçüncü mod vardır, ancak Standart Mod'dan çok önemli bir farkı yoktur.
DOCTYPE Geçişleri
Web tarayıcıları DOCTYPE bildirimi ve kullanılan DTD'ye göre tarama metodunu belirler. Bir dökümanda DOCTYPE tanımı yapılırsa bu sayfa Standart Mod da, yapılmazsa Garip Mod da yorumlanacaktır bu geçişeDOCTYPE Geçişi(DOCTYPE switching) adı verilir.
•XHTML dökümanında tam bir DOCTYPE tanımı yapıldı ise web tarayıcısı taramayı Standart Mod da yapacaktır.
•HTML 4.01 dökümanı için DOCTYPE ve strict DTD tanımı yapıldığında sayfa web tarayıcısı tarafından StandartMod da yorumlanacaktır.
•DOCTYPE ve transtional DTD URI tanımlı halin de Standart Mod da yorumlanacaktır.
•DOCTYPE ve transtional DTD URI'siz ise Garip Mod da yorumlanacaktır.
•Kötü formatlanan veya DOCTYPE kullanımılmayan dökümanlar HTML ve XHTML tarafında Garip Mod da yorumlanacaklardır.
Web tarayıcılarının DOCTYPE tiplerine göre farklılıklarını görmek için http://www.ericmeyeroncss.com/bonus/render-mode.html bir göz atın.
Çok uğraşıp en iyi ve en doğruCSS kodunu yazdıktan sonra yanlış DOCTYPE kullandığınızda sayfanız Garip Mod da yorumlanacaktır ve bu size bir çok sorun oluşturacaktır. Sitenizde tam DOCTYPE bildirimive strict DTD kullanmanız çok önelidir.
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Bu kullanım sayfanın HTML 4.01 kurallarının geçerli olduğu bir HTML dosyası olduğunu gösterir.
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Bu kullanım sayfanın hem HTML hemde XHTML kurallarının geçerli olduğunu bir XHTML dosyası olduğunu gösterir.
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Bu kullanım sayfanın sadece XHTML1.0kurallarının geçerli olduğu bir XHTML sayfası olduğunu gösterir. Bu kodlama yapıldığıında tüm XHTML kurallarına harfiyen uyulmalıdır. Örneğin kodların hepsinin küçük harfle yazılması gibi.
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">Bu kullanım sayfanın bir XHTML çerçeve(frame)sayfası olduğunu gösterir. Kullanımı azaldı.
Biz burada sizlere DOCTYPE tanımlamanın nasıl olduğunu ve önemini anlatmaya çalıştık. Bir çok HTML ediötürü DOCTYPE taınımını otomatik ekleyecektir.
Sözde-sınıflar(Pseudo-class) ve Sözde-elementler(Pseudo-elements)
Pseudo sınıf ve elementleri CSS'i destekleyen web tarayıcıları tarafından otomatik olarak tanınan özel sınıf ve elementlerdir. Bu sınıf ve elementler (x)html hiyerarşisi ile erişemediğimiz element ve sınıflara erişmemizi sağlar. Pseudo sınıfı bir elementi farklı sınıflara böler(örn: link elementini active, visited vd. sınıflarına böler) Pseudo elementi ise bir elementi alt kısımlara böler (örneğin bir paragrafın ilk harfi, bir paragrafın ilk satırı gibi.) Pseudo sınıfına örnek:
Kod:
a:visited {
color: red;
}Pseudo elementine örnek:
Kod:
p:first-line {
font-weight: bold;
}Pseudo sınıf ve elemtleri HTML class özelliği olarak belirtilmemiştir. Normal sınıflar pseudo sınıf ve elementleri ile kullanılabilir.
Kod:
a.disariyalinkller:link,
a.disariyalinkller:visited {
color: maroon;
}Aynı şekilde id seçicileri ile birlikte de kullanılabilirler
Kod:
a#altkisim:link{
font-weight: bold;
}Pseudo sınıflarını da ikiye ayıra biliriz. Link Pseduo Sınıfıları ve Dinamik Pseudo Sınıfları
Link Pseudo sınıfı
Yanlızca linklere uygulanan iki Link Pseduo sınıfı vardır. :link ve :visited :link -Ziyaret edilmemiş sayfanın linkine stil tanımlaması yapmak için kullanılır. Ancak bir çok web tarayıcısı yapılan stil tanımlarını ziyaret edilmiş sayfa linklerine de uygular. :visited - Henüz ziyaret edilmiş sayfa linklerine stil tanımlaması yapmak için kullanılır.
Kod:
a:link {
color: blue;
}
a:visited {
color: red;
}Bunun yerine genelde aşağıdaki gibi bir kod da kullanılır
Kod:
a {
color: blue;
}
a:visited {
color: red;
}Bu kodlama ile kullanıcaya ziyaret ettiği sayfa linkleri farklı renkte gösterilerek içeriksel bir bilgi görsel olarak verilebilir.
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Dinamik Pseudo Sınıfları
Dinamik Pseudo Sınıfları sayfa görünümüne çok büyük katkılar yapabilir. Bu sınıflar genelde linklere uygulanır ancak bir çok kullanım alanları vardır. tanedir :focus, :active ve :hover
Not Pseudo sınıflarında sıralama önemlidir. Genel kullanımda "link-visited-hover-active,"sıralaması yapılmalıdır. Tüm sınıflar içinse "link-visited- focus-hover-active." sıralaması yapılmalıdır.
:focus - Odaklanan elemente stil tanımlası yapmak için kullanılır Örn: input alanına içerik girerken :active - Aktif olan elemente stil atamak için kullanılır. :hover - Bir elementin üzerine Farenin imleci geldiğinde yapılacak tanımlama için Örn: bir linkin üzerine fare ile geldiğimizde renk değiştirmesini sağlamak için Linkler için genel kullanım
Kod:
a:link {
color: navy;
}
a:visited {
color: gray;
}
a:hover {
color: red;
}
a:active {
color: yellow;
}:focus için bir örnek verecek olursak
Kod:
input:focus {
background: silver;
font-weight: bold;
}Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
İlk Çocuk Elementi seçmek
Diğer bir pseudo sınıfımız :first-child'dır. first:child: Belirtilen elementin ilk Çocuk Elementine stil atamak için kullanılır.
Kod:
p:first-child {
font-weight: bold;
}
li:first-child {
color:#f00;
}Html;
Kod:
<div>
<p>Bu paragraf ilk çocuk elementidir ve sonuç olarak kalın olacaktır</p>
<ul>
<li>Bu liste ilk çocuk elementidir ve font rengi kırmızı olacak</li>
<li>Bu <strong>çocuk element </strong>değil</li>
<li>Bu da değil</li>
</ul>
<p>Bu pragraf <em>bir</em> çocuk element değil.</p>
</div>Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
:lang Pseudo Sınıfı
Lang pseudo sınıfı içerikteki bir elemente farklı bir dil de yazmamızı sağlar. Atanabilecek dil listesi ve kullanılacak kısaltmalara ISO 639 and RFC 1776 standards erişebilirsiniz.
Kod:
<html>
<head>
<title>lang test</title>
<style type="text/css">
p:lang(fr) {
color: red;
}
</style>
</head><body>
<p lang="fr">Bonjour le monde!</p>
</body>
</html>Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer 8+
Pseudo Sınıflarını birleştirmek
CSS2.1 ile birlikte aynı seçiciye ait pseudo elemntlerini birleştirme özelliği de gelmiştir. Örneğin ziyaret edilmiş linklerin hover özelliği ile ziyaret edilmemiş linklerin hover özelliğini farklı atamak istesek
Kod:
a:link:hover {
color: red;
}
a:visited:hover{
color: pink;
}Sıralama önemli değildir.
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer 8+
Pseudo Element Seçicileri
Bu elementler hayali elementlerdir. (X)HTML hiyerarşisi içinde bu elemntlere yoktur. CSS2.1 de Dört adet Pseudo Element Seçicisi vardır: first-letter, first-line, before ve after
first-letter (ilk harf)
Bir blok-level elementin ilk harfine stil tanımlması yapmak için kullanılır. Örnek verecek olursak h1 elementinin baş harfinin büyük olması için :
Kod:
h1:first-letter {
font-size:200%;
}
:::html
<h1>Bu büyük bir başlık</h1>Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer 7+
first-line (ilk satır)
Bir metnin ilk elementine stil atamak için kullanılır. Örneğin paragraflarınızın ilk satırlarını renklendirmek isitiyorsunuz.
Kod:
p:first-line {
color: red;
}Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
before ve after elementleri
Bir elementin öncesine ve sonrasına bir içerik veya özellik eklemek için kullanılır. Notlarımızın başına otomatik oalrak Not yazmak için
Kod:
P.not:before {
content: "Not."
}kodu yeterlidir. Aynı şekilde paragraflarımzın sonuna otomatik bitti yazıp nokta koymak istersek
Kod:
body:after {
content: " Bitti.";
}yeterlidir.
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer 8+
Css Birimleri
Bu makalede CSS'de kullanılan tüm birimleri göreceğiz. Birimler genelde mesafe ve renkleri tanımlamak için kullanılır.
Birimleri dört gruba ayıra biliriz. uzunluk birimleri, yüzde birimleri, renk birimleri ve URL birimleri
Uzunluk Birimleri
CSS'de tanımlanan 8 uzunluk birimi vardır. Bunların üç tanesi göreceli(relative) uzunluklar ve kalan beş tanesi kesin(absolute)uzunluklardır.
Göreceli Uzunluklar
Bu birimler diğer uzunluk birimlerine göre görecelidir. Sayfalarımızın ölçeğinin değiştiği ve çıktısının alındığı durumlarda bu uzunluk birimlerini kullanmamız bize avantaj sağlayacaktır.
em: Ana elementin font boyunun (font-size) değerine göre hesaplanarak bulunur. Yani body elemanında varsayılan yazı tipi büyüklüğünüze (font-size) bağlı büyüme-küçülme gösteren ölçülerdir. em varsayılan font büyüklüğünde ve font ailesinde (font-family) yer alan "M" harfinin genişliğini baz almasıdır.
ex: Elementin "x" harfinin yüksekliğidir. Atanmış olan fontun küçük "x" değeri yüksekliğidir.
px: piksel değeri. Eğer monitörünüze yeterince yakından bakarsanız, çok küçük kutulardan oluşmuş bir ızgaraya benzer. Burdaki her kutu bir pikseldir. Bu da her monitöre göre farklı değer demektir.
Kesin Uzunluklar
Bu uzunluklar gerçek hayatta kullanılan birimlerdir.
in: inç. 1 inch=2,54 cm'dir. Örn: line-height:0.5in
cm: Santimetre. Bizim gerçek hayatta kullandığımız santimetere değeridir. Örnek: margin:2cm
mm: Milimetre. Bizim gerçek hayatta kullandığımız milimetere değeridir. Örnek: letter-spacing:1mm
pt: Point. Standart baskı birimidir. (1pt = 1/72in) Örn: font-size:14pt
pc: Pika. Bir inçin altıda birine eşit olan bir baskı ölçü birimi. Bir pika 12 noktaya bölünür. Örnek: font-size:2pc
Yüzde Birimleri
Yüzde değerleri her zaman diğer elementlere göre göreceli değerlerdir.
Kod:
/* elementin font-size değerinin %150 si dir */
h4 {
line-height: 150%
}
/* satır genişliğinin 10% nu */
p {
text-indent: 10%
}Renk Birimleri
CSS'de renk değerleri isim olarak ve RGB değeri olarak tanımlanabilir. RGB tanımlamasıda dört çeşittir.
Renk İsimleri
Renklerin ingilizce isimleri kullanılarak tanımlama yapılabilir.
Kod:
p {
color:black;
} /* renk tanımı siyah olarak yapılıyor*/
h1{
background-color: red;
} /* h1 başlığının ardalanı kırmızı tanımlanıyor */RGB Renk Değerleri
CSS'de renk tanımlamak için kullanılan asıl yöntem budur. RGB tanımlamanında dört çeşidi vardır.
#RRGGBB : Burada, RR, GG, ve BB,sırasıylakırmızı (red), yeşil (green) ve mavi (blue) renklerin toplam renk içindeki yoğunluğunu gösteren hekzadesimal sayılardır. Örnek: color:#ff0000; (kırmızı)
#RGB: Yukardaki yöntemin kısaltmasıdır. Aynı değerleri taşıyan grup değerleri birleştirilir. Örnek: color:f00; (kırmızı)
rgb(R,G,B):Bu RGB renklerinin ondalık sayma düzeninde 0 ile 255 arasında bir tanımı vardır. Buna göre tanımlama yapılabilir. Örnek h1
rgb(R%,G%,B%):Bu RGB renklerinin yüzdesel olarak %0 ile %100 arasında bir tanımı vardır. Buna göre tanımlama yapılır. Örnek: h1
URL Değerleri
URL tanımlaması için aşağıdaki gib bir tanımlama yapılır.
Kod:
url(/images/kucuk.gif)Burada tırnaksız ve tek tırnaklı kullanımları da standarda uygundur.
Not : Birde bunların dışında CSS2.0 ile birlikte gelen ekstra birimlerde mevcuttur. Ancak bunlar kullanımda değildir.
Açı Değerleri :
deg(derece), grad(gradyen) ve rad(radyan) Örnek: -90deg, 100grad ve 1.57rad
Zaman Değerleri:
milisaniye (ms) ve saniye (s) Örnek : 100ms ve 0.1s
Frekans Değerleri:
Herz(Hz) ve MegaHerz(mHz) Örnek: 10mHz
https://instagram.com/alphazzers
