LARAVEL
SASSCSS TABLO ÖZELLİKLERİ
HTML’de <table></table> etiketi ile oluşuturulan tabloları daha estetik bir hale getirmek için css ile müdahle edilmektedir. CSS ile table etiketinin bir çok elementine ulaşabilir ve istediğimiz renkte ve desende tablolar oluşturabilir. Tablo özellikleri aşağıda açılamaları ile verilmiştir. Başarılar.
1 2 3 4 5 6 7 | .tablo{ border-collapse:collapse / separate; /*Bu özellik iki adet özellik almaktadır. Sınır çizgisi durumunu tanımlar.*/ border-spacing:10px;/*Hücreler arası sınır boşluklarını tanımlar.*/ caption-side: top/ bottom/ left/ right;/*Başlık yerini tanımlar.*/ empty-cells:show/ hide;/*İçi boş hüreleri tanımlar.*/ table-layout:auto/ fixed;/*Tablo görünüşünü tanımlar.*/ } |
Border-collapse Bu özellik iki adet özellik almaktadır. Sınır çizgisi durumunu tanımlar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS TABLO ÖZELLİKLERİ</title> <!-- Çağlar BOSTANCI --> <style> table{ border-collapse:collapse; /* border-collapse: separate;*//* Tablo kenarlık sitilini belirler.*/ } </style> </head> <body> <table border="1"> <tr> <td>HÜCRE 1</td> <td>HÜCRE 2</td> <td>HÜCRE 3</td> </tr> <tr> <td>HÜCRE 4</td> <td>HÜCRE 5</td> <td>HÜCRE 6</td> </tr> </table> </body> </html> |
border-spacing Kullanımı IE 7 […]
Devamı...CSS LİSTE ÖZELLİKLERİ
CSS de listelem iki özellikte yer alır. Bunlardan resimli/simgeli liste ve sıralı listedir. Bunlardan resimli/simgeli sıralı liste iconlar olmak üzere circle/disc gibi olanlarıdır. Sıralı listeler ise 1-2, a-b-c, I-II-II şeklinde olan sıralı listelerdir.*/ List-style-type Kullanımı ve Aldığı Değerler
1 2 3 4 5 6 7 8 9 10 11 | .ListStyleType{ list-style-type:none;/*İşaretsiz liste*/ list-style-type: disc;/*Disk işareti koyar*/ list-style-type:circle;/*Çember şeklinde işaret koyar.*/ list-style-type:square;/*Kare şeklinde işaret koyar.*/ list-style-type:decimal;/*Sıralı rakam yapar*/ list-style-type: lower-roman;/*Sıralı küçük roma rakamı.*/ list-style-type: upper-roman;/*Sıralı büyük roma rakamı.*/ list-style-type: lower-alpha;/*Sıralı küçük harf koyar.*/ list-style-type: upper-alpha;/*Sıralı büyük harf koyar.*/ } |
CSS Liste Özellikleri
1 2 3 4 | .ListStyleImage{ list-style-image: url('resim.jpg'); /*Liste başlıklarına istnilen grafik eklenmiş olur.*/ list-style-image:none;/*Liste özelliğine grafik olmayacağı belirtilir.*/ } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>BİLGİ BALONU</title> <link rel="stylesheet" type="text/css" href="font/css/benim.css"> <!--www.caglarbostanci.com.tr--> <style> ul{ list-style-image: url('listeresim.jpg');} </style> </head> <body> <ul> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> </ul> </html> |
1 2 3 4 | .ListeStylePosition{ list-style-position:inside;/*Listitem işaretleri içerden başlar*/ list-style-position:outside;/*list-item işaretleri dışardan başlar*/ } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>BİLGİ BALONU</title> <link rel="stylesheet" type="text/css" href="font/css/benim.css"> <!--www.caglarbostanci.com.tr--> <style> ul{ list-style-position: outside;} </style> </head> <body> <ul> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> </ul> </html> |
1 2 3 4 | .ListeMarginOzelligiVerme{ list-style-type:none; margin:0px 0px 10px 120px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>BİLGİ BALONU</title> <link rel="stylesheet" type="text/css" href="font/css/benim.css"> <!--www.caglarbostanci.com.tr--> <style> ul{ list-style-type:none; margin:0px 0px 10px 120px;} </style> </head> <body> <ul> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> </ul> </html> |
list-style Kullanımı list-style özelliği list-style-type, list-style-position, ve […]
Devamı...CSS2 ve CSS3 PSEUDO SEÇİCİLERİ
CSS2 ve CSS3 PSEUDO SEÇİCİLERİ IE 7 kısman IE 8 ve sonrası tam destekkliyor. SINIF :AÇIKLAMA E:active :E için aktif bir link rengi tanımlar E:focus :E için fare hareketine odaklamayı sağlar. E:hover :E nin fare üzerine gelmesi ayrılması durumu. E:lang() :E için dil kuralları sağlar. E:link :E için açılmamış bir linkin rengini tanımlar. E:visited :E […]
Devamı...