NTERNET PROGRAMCILII 1 r Gr Canan ASLANYREK CSS
- Slides: 29
İ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> <style> /* seçilmiş link */ a: active { color: blue; /* ziyaret edilmemiş */ a: link { </style> </head> <body> color: red; } } /* ziyaret edilmiş */ a: visited { target="_blank">Yahoo</a></b></p> color: green; } /* mouse üzerinde */ a: hover { color: darkcyan; } <p><b><a href=" https: //www. yahoo. com " </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: active { text-decoration: underline; } </style> </head> } <body> a: visited { <p><b><a href="https: //www. google. com. tr " target="_blank">Google</a></b></p> text-decoration: none; } </body> a: hover { </html> text-decoration: underline; }
Link için Buton Görünümü <html> <head> <style> a: link, a: visited { background-color: green; color: white; padding: 14 px 25 px; 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> <h 1>CSS font-family Özelliği</h 1> <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> <body> <head> <style> <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> 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>
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> <body> <head> <style> <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> p. normal { font-style: normal; } p. italic { font-style: italic; } p. oblique { font-style: oblique; } </style> </head>
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, medium, larger, x-large, xx-large em Ölçü Birimi : em birimi, üst öğenin yazı tipi boyutunun hesaplanan değerine dayalı göreceli 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 = 1 em).
Uygulama <html> <head> </head> <style> <body> <p>Bu paragrafa herhangi bir boyut verilmemiştir. Standart ölçü olarak büyüklüğü 16 px değerinde olacaktır. </p> <p class="bir">Bu paragrafa 16 px piksel cinsinden boyut verilmiştir. </p> <p class="iki">Bu paragrafa 30 px 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 1 em değeri verilmiştir. </p> <p class="sekiz">Bu paragrafa 3 em değeri verilmiştir. </p> </body> </html> p. bir { font-size: 16 px; } p. iki { font-size: 30 px; } 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: 1 em; } p. sekiz { font-size: 3 em; } </style>
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 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> <body> <head> <style> <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="w 200">Bu 200 değerinde ağırlıklı bir paragraftır. </p> <p class="w 500">Bu 500 değerinde ağırlıklı bir paragraftır. </p> p. normal { font-weight: normal; } p. light { font-weight: lighter; } p. bold { font-weight: bold; } p. w 200 { font-weight: 200; } p. w 500 { font-weight: 500; } </style> </head>
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
Uygulama <html> <head> <ul class="iki"> <style> <li>Çay</li> <li>Kahve</li> <li>Soda</li> 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; } </ul> <p>Sıralı Listeler</p> <ol class="uc"> <li>Çay</li> <li>Kahve</li> <li>Soda</li> </style> </ol> </head> <ol class="dort"> <body> <li>Çay</li> <p>Sırasız Listeler</p> <li>Kahve</li> <ul class="bir"> <li>Soda</li> <li>Çay</li> </ol> <li>Kahve</li> </body> <li>Soda</li> </html> </ul>
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 <html> <head> <style> li{ list-style-type: none; list-style-image: url(konum. png); padding: 10 px; } </style> </head> <body> <p>Sırasız Listeler</p> <ul> <li>İstanbul</li> <li>Ankara</li> <li>İzmir</li> </ul> </body> </html> ikonunu kullanacağız.
list-style-position : İçerik akışını belirtir. <body> <html> <head> <p>İçerden Başlayan Liste</p> <style> <ul class=bir> <li>Çay</li> <li>Kahve</li> <li>Soda</li> ul. bir { list-style-position: inside; } </ul> ul. iki { <p>Dışından Başlayan Liste</p> <ul class="iki"> <li>Çay</li> <li>Kahve</li> <li>Soda</li> list-style-position: outside; } </style> </head> </ul> </body> </html>
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> <body> <head> <p>Özel Görünümlü Bir Liste</p> <style> ul { <ul> <li>Çay</li> border-left: 5 px solid red; <li>Kahve</li> background-color: #FFFB 07; <li>Soda</li> list-style-type: none; </ul> padding: 10 px; </body> </html> } ul li{ margin : 15 px; border-bottom : 2 px solid green; } </style> </head>
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> <td>Hakan</td> <style> <td>KİRACI</td> table, th, td { border: 1 px solid black; } <tr> </tr> <td>Tuncay</td> <td>TUNCER</td> </style> </head> </tr> <body> </table> </body> <tr> </html> <th>Ad</th> <th>Soyad</th> </tr>
KAYNAK Ebubekir Yaşar, Turgut Özseven, İnternet Programcılığı 1
Nternet
Canan togay ışıkay
Luteoma kimlerde görülür
Canan citil
Canan asal ulus
Canan asal ulus
Canan asal ulus
Canan vk
Canan kabaca
Canan asal ulus
Dr canan yılmaz
Kalsiferol
Asal bebek
Sefa karacan
Canan asal ulus
Table styling css
Pengenalan css
Singkatan css html
Css 101
Web development and design foundations with xhtml
Create css file
Css meaning in computer
скрипт css
Practice css
Lexique html css
Css dasar
Css div sağa yaslama
Css in js
Css profile tutorial
Noise texture css
