'css' kategorisindeki yazılar ↓

Bugün (karşımıza en sık Techcrunch‘da çıkan) sitenin dışına verilen linkleri CSS ile  nasıl şekillendireceğimizi göreceğiz. Bunu yaparken de CSS’de ki attribute özelliğinden yararlanacağız. Öncelikle dış(harici) linklerin yanına ekleyeceğimiz görseli buluyoruz. Ben bu örnekte aşağıda gördüğünüz görseli kullanacağım. Görseli sunucumuzda “images” klasörü altına atıyoruz.

Bu görseli  http: ile başlayan bütün linklerin yanına eklemek için aşağıdaki kodu css dosyamıza ekliyoruz.


a[href^="http:"] {
background: url(images/externalLink.gif) no-repeat right top;
padding-right: 15px;
}

Bundan sonra http ile başlayan ama kendi sitemize giden linklerin normal gözükmesi için aşağıdaki kodu ekliyoruz.

a[href^="http://www.siteadiniz.com"], a[href^="http://www.siteadiniz.com"] {
background-image: none;
padding-right: 0;
}

Artık dış (harici) linklerimiz yanında yukarıdaki görsel ile gözükecek.

Dış bağlantı:

Google

İç bağlantı:

Google Earth artık tarayıcıda

Özenle takip ettiğimiz blogcu Fatih Hayrioğlu bugüne kadar blogunda yazdıklarını toparlayıp bir e-kitap haline getirmiş. CSS öğrenmek veya geliştirmek isteyenler bu kitabı buradan, kaynak kodlarını da buradan indirebilirler. Kendisi ikinci kitabı çıkarmayı da planlamaktaymış.

Buradaki yazıda pdf word ve excel dosyalarının nasıl şekillendirebileceğimizi yazmıştım. Buradan indireceğiniz .zip dosyası ile aşağıdaki gibi linklere sahip olabilirsiniz. .zip dosyasının içinden çıkan css dosyasını sayfanıza aşağıdaki gibi ekleyip

<link rel="stylesheet" href="iconize.css" type="text/css" media="screen" />

icons klasörünüde server’a yüklemeniz yeterli olacaktır.

.doc - .rtf

.txt

.pdf

.xls

.xpi (Firefox Extension)

.rss - .atom

.opml

.vcard

.exe

.dmg - .app

.pps

.ical

.jpg - .gif - .png - .bmp

.svg - .eps

.swf - .fla

.css

.mp3 - .wav - .ogg - .wma - .m4a

.zip - .rar - .gzip - .bzip - .ace

.ttf

.mov - .wmv - .mp4 - .avi - .mpg

.phps

.torrent

Açıklamaları eksik olduğu için bizim ekonomi sayfalarına boş boş bakmamıza neden olan kısaltmaları, web sayfalarında <acronym> etiketi ile gayet anlaşılır bir şekilde kullnabiliriz. Örnek olarak:

<acronym title=”Extensible HyperText Markup Language ” >XHTML</acronym>

XHTML

Stil dosyasına aşağıdaki kodu ekleyerek kısaltma üzerine gelindiğinde mouse’da bir soru işareti çıkmasını da sağlayabiliriz.

acronym { cursor: help; }

Kısaltma demişken açılımını bilmediğiniz kısaltmalar için buraya bakabilirsiniz.

Sayfamızda indirilebilir dökümanlara (pdf,doc veya xls uzantılı) verdiğimiz linkleri CSS ile şekillendirerek daha belirgin hale getirebiliriz. CSS’nin bize tanıdığı [att$=val] özelliği ile a[href$=".pdf"] kodunu yazarak içinde href özniteliği “.pdf” ile biten her linkin stilini belirleyebiliriz. Aşağıdaki örnekte bu linklerin yanına küçük resimler ekliyoruz.

a[href$=".pdf"] {
background: url(’images/pdf.gif’) no-repeat right top;
padding-right: 30px;
}
a[href$=".doc"] {
background: url(’images/doc.gif’) no-repeat right top;
padding-right: 30px;
}
a[href$=".xls"] {
background: url(’images/xls.gif’) no-repeat right top;
padding-right: 30px;
}

Bu kodu stil sayfamıza ekledikten sonra pdf dökümanlarına verdiğimiz link şu şekilde olur:

Mehmet Doğan’ınTeknoloji Kimin Umrunda kitabının e-book versiyonu

Bu sayfadaki sihirbaz yardımıyla istediğiniz şekilde tablo oluşturup Css kodlarını alabilirsiniz. Aynı sihirbazın diğer versiyonlarıda aşağıda:
Listeler
Font ve Metin Stilleri

HTML ve CSS öğrenmek için aşağıdaki derslerden yararlanabilirsiniz.

Basit HTML
Gelişmiş HTML
Basamaklı Stil Sayfaları (CSS)
Web Renkleri