CSS TABLO ÖZELLİKLERİ

Tarhi : 15-05-2017 06:44:33 | Yazar : ÇAĞLAR BOSTANCI

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.

.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.*/	
	}

.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.

<!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>

<!DOCTYPE html>

<html>

<head>

<title>CSS TABLO ÖZELLİKLERİ</title>

<style>

table{

border-collapse:collapse; /* border-collapse: separate;*//* Tablo kenarlık sitilini belirler.*/

}

</style>

</head>

<body>

<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İ

Tarhi : 15-05-2017 06:30:20 | Yazar : ÇAĞLAR BOSTANCI

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

.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.*/
	}

.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

.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.*/
	}

.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.*/

}

<!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>

<!DOCTYPE html>

<head>

<title>BİLGİ BALONU</title>

<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>

.ListeStylePosition{
		list-style-position:inside;/*Listitem işaretleri içerden başlar*/
		list-style-position:outside;/*list-item işaretleri dışardan başlar*/	
		}

.ListeStylePosition{

list-style-position:inside;/*Listitem işaretleri içerden başlar*/

list-style-position:outside;/*list-item işaretleri dışardan başlar*/

}

<!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>

<!DOCTYPE html>

<head>

<title>BİLGİ BALONU</title>

<style>

ul{ list-style-position: outside;}

</style>

</head>

<body>

<ul>

<li>Element 1</li>

<li>Element 2</li>

<li>Element 3</li>

</ul>

</html>

.ListeMarginOzelligiVerme{
			list-style-type:none;
			margin:0px 0px 10px 120px;	
			}

.ListeMarginOzelligiVerme{

list-style-type:none;

margin:0px 0px 10px 120px;

}

<!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>

<!DOCTYPE html>

<head>

<title>BİLGİ BALONU</title>

<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ı...

CSS ARKA PLAN ÖZELLİKLERİ

Tarhi : 15-05-2017 02:53:52 | Yazar : ÇAĞLAR BOSTANCI

CSS arkaplan özelliği div’lerin veya elementlerin arkaplanlarına renk, desen, resim gibi görseller atamak için kullanılır. Bir çok tasarımda arkaplanın önemli bir yer tuttuğu görülmektedir. Bu yazıda arkaplan rengi nasıl eklenir, konumlandırması nasıl yapırlır ve buna benzer background özelliklerini göreceğiz. Başarılar.

.arakaplanozellikleri{
	background-image: none;
	background-image:url('');
	background-attachment:scroll;/*Arkaplan hareketli*/
	background-attachment:fixed;/*Arkaplan sabit*/
	background-color:red; /*Arka planarenk verir.*/
	background-color:rgba(0,51,102,1)/*rgba(20%,50%,100%,1)*/;/*Arka plan renk belirleme*/
	background-position: top center, -50% -100%,200px 100px;/*Üst ortaya hizalar örn. çoğaltılabilir.*/
	background-repeat:;/*Arka plan terar edip etmeyeceğini belirler*/
	background-repeat: repeat;/*Arka plan tekrar eder*/
	background-repeat: repeat-x;/*Arka plan x düzleminde tekrar eder.*/
	background-repeat: repeat-y;/*Arka plan y düzleminde tekrar eder.*/
	background-repeat: no-repeat;/*Arka plan tekrar etmez.*/
	background:#09F url(picoffeeresim1.jpg) no-repeat fixed right top;/*Örnek bir kullanım*/
	background-clip:;/*Kutu modellerin arkaplanların nasıl gösterileceğni tanımlar. Üç değer alır*/
	background-clip: border-box;/*Arka plan kenarları da kapsar*/
	background-clip: padding-box;/*Sadece iç bolukları kapsar, kenarları kapsamaz*/
	background-clip: content-box;/*Arka plan sadece içeriği kapsar, iç boşluklarda (padding) ile kenarlarda gösterilmez*/
	background: url(1.jpg), url(y.jpg);
	background-position:top left, top right;
	background-size:;/*Arka plan resimlerinin istenilen boyuta göre ayarlanmasını ve yerleştirilmesini sağlar*/
	background-size:cover;/*Resmi arka plan boyutuna göre oranlar ve tamamen kaplayacak şekilde yerleştirir.*/
	background-size:contain;/*Resmi en boyuna göre arka plana tam olarak yerleştirir.*/
	background-size:100% 100%;/*Resmi arka plan olarak ayarlarken sayı ya da yüzde değeri olarak kullanılabilir.*/

.arakaplanozellikleri{

background-image: none;

background-image:url('');

background-attachment:scroll;/*Arkaplan hareketli*/

background-attachment:fixed;/*Arkaplan sabit*/

background-color:red; /*Arka planarenk verir.*/

background-color:rgba(0,51,102,1)/*rgba(20%,50%,100%,1)*/;/*Arka plan renk belirleme*/

background-position: top center, -50% -100%,200px 100px;/*Üst ortaya hizalar örn. çoğaltılabilir.*/

background-repeat:;/*Arka plan terar edip etmeyeceğini belirler*/

background-repeat: repeat;/*Arka plan tekrar eder*/

background-repeat: repeat-x;/*Arka plan x düzleminde tekrar eder.*/

background-repeat: repeat-y;/*Arka plan y düzleminde tekrar eder.*/

background-repeat: no-repeat;/*Arka plan tekrar etmez.*/

background:#09F url(picoffeeresim1.jpg) no-repeat fixed right top;/*Örnek bir kullanım*/

background-clip:;/*Kutu modellerin arkaplanların nasıl gösterileceğni tanımlar. Üç değer alır*/

background-clip: border-box;/*Arka plan kenarları da kapsar*/

background-clip: padding-box;/*Sadece iç bolukları kapsar, kenarları kapsamaz*/

background-clip: content-box;/*Arka plan sadece içeriği kapsar, iç boşluklarda (padding) ile kenarlarda gösterilmez*/

background: url(1.jpg), url(y.jpg);

background-position:top left, top right;

background-size:;/*Arka plan resimlerinin istenilen boyuta göre ayarlanmasını ve yerleştirilmesini sağlar*/

background-size:cover;/*Resmi arka plan boyutuna göre oranlar ve tamamen kaplayacak şekilde yerleştirir.*/

background-size:contain;/*Resmi en boyuna göre arka plana tam olarak yerleştirir.*/

background-size:100% 100%;/*Resmi arka plan olarak ayarlarken sayı ya da yüzde değeri olarak kullanılabilir.*/

CLİP ÖZELLİĞİ Grafilerde istenilen bölgenin gösterimesini sağlar. Absolute özelliği ile sabitlenmiş görseller üzerinde uygulanır. […]

Devamı...

Çağlar Bostancı

CSS TABLO ÖZELLİKLERİ

CSS LİSTE ÖZELLİKLERİ

CSS ARKA PLAN ÖZELLİKLERİ