İNTERNET PROGRAMCILIĞI 1 Öğr. Gör. Canan ASLANYÜREK
CSS Link Düzenleme Link <a> öğesi olarak HTML’de kullandığımız bir bağlantı elemanıdır. Başka bir web sayfasına veya başka bir yere köprü oluşturmak için kullanılır. CSS ile bir link düzenlemek isteseniz yapmanız gereken CSS seçicisi ile <a> öğesini seçmektir.
Uygulama <html> <head> <style> a { color: hotpink; } } </style> </head> <body> <p><b><a href="https://www.google.com.tr" target="_blank">Google</a></b></p> </body> </html>
CSS Link Düzenleme Linkler dört farklı duruma sahiptir. Bunlar; a:link – normal, ziyaret edilmemiş bir bağlantı görünümü a:visited – kullanıcının ziyaret ettiği bir bağlantı görünümü a:hover – kullanıcı mouse imlecini üzerine getirdiğinde oluşan bağlantı görünümü a:active – tıklandığı anda oluşan bağlantı görünümü
Uygulama <html> <head> /* seçilmiş link */ a:active { <style> /* ziyaret edilmemiş */ a:link { color: red; } /* ziyaret edilmiş */ a:visited { color: green; } /* mouse üzerinde */ a:hover { color: darkcyan; /* seçilmiş link */ a:active { color: blue; } </style> </head> <body> <p><b><a href=" https://www.yahoo.com " target="_blank">Yahoo</a></b></p> </body> </html>
Link Dekorasyonu <a> Öğesini biçimlemeden kullanıldığında altı çizgili olduğu görülür. Bu onun bir link olduğunu ve diğer metinlerden ayrı görünmesinin gereği olarak sunulmuştur. Bu iyi bir görüş olsa da bu türden bir görünüm yerine daha farklı biçime elbette CSS ile getirmek mümkündür. text-deocoration Özelliğinin none değerini kullanılarak <a> etiketinin standart altı çizgisini yok edebilirsiniz.
Uygulama <html> <head> <style> a:link { text-decoration: none; } a:visited { a:hover { text-decoration: underline; a:active { text-decoration: underline; } </style> </head> <body> <p><b><a href="https://www.google.com.tr " target="_blank">Google</a></b></p> </body> </html>
Link için Buton Görünümü <html> <head> <style> a:link, a:visited { background-color: green; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; </style> </head> <body> <p><b><a href=" https://www.google.com.tr " target="_blank">Google</a></b></p> </body> </html>
CSS Font Kullanımı Renkten sonra, yazı tipi muhtemelen bir sayfanın en temel özelliğidir. Yazı tipi, belirli bir stilde ve boyutta yazdırılabilir veya görüntülenebilir metin karakteri setidir. CSS font özelliklerinin kullanımında çoğunun başında font-ifadesi bulunur.
font-family : Font Ailesi font-family görüntülenecek olan metnin yazı tipini seçmenize olanak verir. <html> <head> <style> p.bir { font-family:sans-serif; } p.iki { font-family:monospace; </style> </head> <body> <h1>CSS font-family Özelliği</h1> <p class="bir">Bu yazıda Sans-Serif fontu kullanılmıştır.</p> <p class="iki">Bu yazıda Monospace fontu kullanılmıştır.</p> </body> </html>
font-family özelliğinin kullanımında dikkat edilmesi gereken bazı hususlar vardır; Bir font ailesi adı birden fazla sözcükten meydana geliyorsa, tırnak(” “) işareti içine alınmalıdır, örneğin: “Times New Roman”.
Uygulama <html> <head> <style> p.bir { font-family: "Times New Roman", Times, serif; } p.iki { font-family: Arial, Helvetica, sans-serif; p.uc{ font-family: Papyrus,"Sagoe UI",monospace; </style> </head> <body> <p class="bir">Bu paragraf yazısı Times New Roman fontu ile yazılmıştır.</p> <p class="iki">Bu paragraf yazısı Arial fontu kullanılarak yazılmıştır.</p> <p class="uc">Bu paragraf yazısı Papyrus fontu kullanılarak yazılmıştır.</p> </body> </html>
font-style: Yazı Stili font-style Özelliği ile metni eğimli (italic) yapabilirsiniz. Alabileceği üç farklı değer vardır; normal : Metin normal olarak gösterilir italic : Metin italik olarak gösterilir oblique : Metin “eğik” (eğik italikle çok benzer, ancak daha az desteklenmektedir).
Uygulama <html> <head> <style> p.normal { font-style: normal; } p.italic { font-style: italic; p.oblique { font-style: oblique; </style> </head> <body> <p class="normal">Bu paragraf normal stilde yazılmışır.</p> <p class="italic">Bu paragraf italic stilde yazılmışır.</p> <p class="oblique">Bu paragraf oblique stilde yazılmışır.</p> </body> </html>
font-size: Yazı Boyutu Piksel Ölçü birimi : Yazı tipi boyutunu piksel cinsinden verebilirsiniz. Mutlak boyut : Bu mutlak değerler, tarayıcı tarafından hesaplanan belirli font boyutlarına eşlenir. xx-small, x-small, small, medium, larger, x-large, xx-large em Ölçü Birimi : em birimi, üst öğenin yazı tipi boyutunun hesaplanan değerine dayalı göreceli bir birimdir. Bu, alt öğelerin yazı tipi boyutlarını ayarlamak için her zaman üst öğelerine bağımlı olduğu anlamına gelir. Not: Bir yazı tipi boyutu belirtmezseniz, paragraflar gibi normal metin için varsayılan boyut 16 pikseldir(16 piksellik = 1em).
Uygulama <html> <head> <style> p.bir { font-size: 16 px; } p.iki { font-size: 30px; } p.uc { font-size: xx-small; } p.dort { font-size: medium; } p.bes { font-size: larger; } p.alti { font-size: smaller; } p.yedi { font-size: 1em; } p.sekiz { font-size: 3em; } </style> </head> <body> <p>Bu paragrafa herhangi bir boyut verilmemiştir. Standart ölçü olarak büyüklüğü 16px değerinde olacaktır.</p> <p class="bir">Bu paragrafa 16px piksel cinsinden boyut verilmiştir.</p> <p class="iki">Bu paragrafa 30px piksel cinsinden boyut verilmiştir.</p> <p class="uc">Bu paragrafa xx-small değeri verilmiştir.</p> <p class="dort">Bu paragrafa medium değeri verilmiştir.</p> <p class="bes">Bu paragrafa larger değeri verilmiştir.</p> <p class="altı">Bu paragrafa smaller değeri verilmiştir.</p> <p class="yedi">Bu paragrafa 1em değeri verilmiştir.</p> <p class="sekiz">Bu paragrafa 3em değeri verilmiştir.</p> </body> </html>
font-weigth: Yazı Kalınlığı Bu özellik, bir anahtar kelime değerini veya önceden tanımlanmış sayısal bir değeri kabul eder. Mevcut anahtar kelimeler; normal bold bolder lighter Mevcut sayısal değerler ise 100, 200, 300, 400, 500, 600, 700, 800, 900 olabilir. Bu değerlerden (“400”) normal, (“700”) ve sonrası kalın görünümüne eş değer olacaktır.
Uygulama <html> <head> <body> <style> p.normal { font-weight: normal; } p.light { font-weight: lighter; } p.bold { font-weight: bold; p.w200 { font-weight: 200; p.w500 { font-weight: 500; </style> </head> <body> <p class="normal">Bu normal ağırlıklı bir paragraftır</p> <p class="light">Bu lighter ağırlıklı bir paragraftır.</p> <p class="bold">Bu bold ağırlıkiı bir paragraftır.</p> <p class="w200">Bu 200 değerinde ağırlıklı bir paragraftır.</p> <p class="w500">Bu 500 değerinde ağırlıklı bir paragraftır.</p>
CSS Liste Düzenleme HTML’de bulunan üç farklı türde listeyi, CSS ile stillemek için birçok yol bulunmaktadır. Örneğin, bir listede kullanılacak madde imi türünü seçebiliriz İşaretçi, kare, yuvarlak, sayısal, alfabetik veya belki de görünmez olabilir Ayrıca, bir listenin dikey veya yatay olarak görüntülenip görüntülenmeyeceğine karar verebiliriz
list-style-type none Liste öğesi yok disc Dolu bir daire circle Içi boş bir daire square Dolu bir kare decimal Sayılar decimal-leading-zero İlk hanesi sıfırla başlatılan sayı lower-roman Küçük harfli romen rakamları upper-roman Büyük harfli romen rakamları lower-greek Küçük klasik Yunanca lower-alpha / lower-latin Küçük harfli ASCII karakterler upper-alpha / upper-latin Büyük harfli ASCII karakterler armenian Geleneksel Ermeni numaralandırması georgian Geleneksel Gürcüce numaralandırması
Uygulama <html> <head> <style> ul.bir { list-style-type: circle; } ul.iki { list-style-type: square;} ol.uc { list-style-type: upper-roman; } ol.dort { list-style-type: lower-alpha; } </style> </head> <body> <p>Sırasız Listeler</p> <ul class="bir"> <li>Çay</li> <li>Kahve</li> <li>Soda</li> </ul> <ul class="iki"> <li>Çay</li> <li>Kahve</li> <li>Soda</li> </ul> <p>Sıralı Listeler</p> <ol class="uc"> </ol> <ol class="dort"> </body> </html>
list-style-image: list-style-image: <li> öğelerinin işaretçilerine arka plan resmi eklemeyi mümkün kılar. Aşağıdaki örneğimizde her bir liste elemanımızın işaretçisi olarak ikonunu kullanacağız. <html> <head> <style> li{ list-style-type: none; list-style-image: url(konum.png); padding: 10px; } </style> </head> <body> <p>Sırasız Listeler</p> <ul> <li>İstanbul</li> <li>Ankara</li> <li>İzmir</li> </ul> </body> </html>
list-style-position : İçerik akışını belirtir. <body> <p>İçerden Başlayan Liste</p> <ul class=bir> <li>Çay</li> <li>Kahve</li> <li>Soda</li> </ul> <p>Dışından Başlayan Liste</p> <ul class="iki"> </ul> </body> </html> <html> <head> <style> ul.bir { list-style-position: inside; } ul.iki { list-style-position: outside; </style> </head>
list-style list-sytle Özelliği bir liste bildiriminde tüm liste özelliklerini ayarlamak için kullanılır. Bu tip kısaltma kullanırken özellik değerlerinin sırası şöyledir: list-style-type list-style-position list-style-image ul { list-style:circle inside url(konum.png); }
Özel Görünümlü Liste Örnek <html> <head> <style> ul { border-left: 5px solid red; background-color: #FFFB07; list-style-type: none; padding: 10px; } ul li{ margin : 15px; border-bottom :2px solid green; </style> </head> <body> <p>Özel Görünümlü Bir Liste</p> <ul> <li>Çay</li> <li>Kahve</li> <li>Soda</li> </ul> </body> </html>
CSS Tablo Düzenleme Bir tablonun HTML’de nasıl oluşturulacağı büyük ölçüde verilere ve nasıl görüntüleneceğine bağlıdır Tablolar buna göre HTML’de dizayn edildikten sonra, bilgilerin kullanıcılara daha okunaklı ve anlaşılır gösterilmesini sağlamak için CSS ile şekillendirilmesi gerekir.
Tablo Kenarları Tablo kenarlarında veya hücre duvarlarında border özelliği kullanarak kenar çizgileri oluşturulabilir. <table>,<td> ve <th> öğelerine uygulanır.
Uygulama <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table> <tr> <th>Ad</th> <th>Soyad</th> </tr> <tr> <td>Hakan</td> <td>KİRACI</td> </tr> <td>Tuncay</td> <td>TUNCER</td> </table> </body> </html>
KAYNAK Ebubekir Yaşar, Turgut Özseven, İnternet Programcılığı 1