Lists, Tables, Forms

Kategori: CSS , 29 Ekim 2019 , JanFranco


Bu yazımda listelerin, tabloların ve formların stillerini değiştireceğiz. Listeler ile başlayalım. list-style-type özelliği ile listelerin markerlarını değiştirebiliriz:


ol {
	list-style-type: lower-roman;
}
Unordered lists yani sırasız listeler için disc (içi dolu yuvaarlak), circle (içi boş yuvarlak), square (içi dolu kare) değerlerini verebiliriz. Ordered lists yani sıralı listeler için decimal (1 2 3), decimal-leading-zero (01 02 03), lower-alpga (a b c), upper-alpha (A B C), lower-roman (i. ii. iii.), upper-roman (I II III) değerlerini verebiliriz.

lists-tables-forms

list-style-image özelliği ile markerlara resim atayabiliriz:


ul {
	list-style-image: url("images/star.png");
}
list-style-position özelliği ile liste içindeki elemanların konumlarını değiştrebiliriz. inside değerini verirsek bir alt satır marker hizasında, outside değerini veriersek alt satır, üst satır hizasında başlar:


<!DOCTYPE html>
<html>
	<head>
		<title>Boxes</title>
		<style type="text/css">
			ul {
				width: 150px;
			}
			ul.illuminations {
				list-style-position: outside;
			}
			ul.season {
				list-style-position: inside;
			}
		</style>
	</head>
	<body>
		<ul class="illuminations">
			<li>That idol, black eyes and ...</li>
			<li>Gracious son of Pan! ...</li>
			<li>When the world is reduced ...</li>
		</ul>
		<ul class="season">
			<li>Once, if my memory serves ...</li>
			<li>Hadn't I once a youth ...</li>
			<li>Autumn already! ...</li>
		</ul>
	</body>
</html>
lists-tables-forms

emty-cells özelliği özelliği ile tabloda boş verileri gizleyebiliriz:


td {
	border: 1px solid #0088dd;
	padding: 15px;
}
table.one {
	empty-cells: show;
}
table.two {
	empty-cells: hide;
}
border-spacing özelliği ile veriler arasındaki mesafeyi değiştirebiliriz. Mesafeyi piksel olarak verebiliriz. Veya bunun yerine border-collapse özelliği ile seperate ve collapse değerleri ile veriler birbirine yapıştırıp ayrı tutabiliriz:


td {
	background-color: #0088dd;
	padding: 15px;
	border: 2px solid #000000;
}
table.one {
	border-spacing: 5px 15px;
}
table.two {
	border-collapse: collapse;
}
CSS'te formlara da stil katabiliriz:


input {
	font-size: 120%;
	color: #5a5854;
	background-color: #f2f2f2;
	border: 1px solid #bdbdbd;
	border-radius: 5px;
	padding: 5px 5px 5px 30px;
	background-repeat: no-repeat;
	background-position: 8px 9px;
	display: block;
	margin-bottom: 10px;
}
input:focus {
	background-color: #ffffff;
	border: 1px solid #b1e1e4;
}
input#email {
	background-image: url("images/email.png");
}
input#twitter {
	background-image: url("images/twitter.png");
}
input#web {
	background-image: url("images/web.png");
}
Kullanıcıdan girdi aldığımız kutulara arkaplan resmi ekleyebilir, arkaplan rengini bu şekilde değiştirebiliriz.

lists-tables-forms

Kullanıcıdan girdi aldığımız textboxlar haricinde submit butonlarına da stil katabiliriz:


input#submit {
	color: #444444;
	text-shadow: 0px 1px 1px #ffffff;
	border-bottom: 2px solid #b2b2b2;
	background-color: #b9e4e3;
	background: -webkit-gradient(linear, left top, left bottom, from(#beeae9), to(#a8cfce));
	background: -moz-linear-gradient(top, #beeae9, #a8cfce);
	background: -o-linear-gradient(top, #beeae9, #a8cfce);
	background: -ms-linear-gradient(top, #beeae9, #a8cfce);}
input#submit:hover {
	color: #333333;
	border: 1px solid #a4a4a4;
	border-top: 2px solid #b2b2b2;
	background-color: #a0dbc4;
	background: -webkit-gradient(linear, left top, left bottom, from(#a8cfce), to(#beeae9));
	background: -moz-linear-gradient(top, #a8cfce, #beeae9);
	background: -o-linear-gradient(top, #a8cfce, #beeae9);
	background: -ms-linear-gradient(top, #a8cfce, #beeae9);
}
Bu şekilde arkaplan rengini değiştirebilir, sınıra yuvarlak geçişler ekleyebiliriz vs.

lists-tables-forms

Formlarda ayrıca fieldset'lere de stil katabiliriz:


fieldset {
	width: 350px;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	padding: 20px;
	text-align: right;
}
legend {
	background-color: #efefef;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	padding: 10px 20px;
	text-align: left;
	text-transform: uppercase;
}
lists-tables-forms

Form tanımladığımızda, kullanıcılardan girdi aldığımız textbox'ların boyutları aynı olmayabilir. CSS kullanmadığımızda aşağıdaki gibi kayma problemleri ile karşı karşıya kalırız:


<form action="example.php" method="post">
	<div>
		<label for="name" class="title">Name:</label>
		<input type="text" id="name" name="name" />
	</div>
	<div>
		<label for="email" class="title">Email:</label>
		<input type="email" id="email" name="email" />
	</div>
	<div>
		<span class="title">Gender:</span>
		<input type="radio" name="gender" id="male" value="M" />
		<label for="male">Male</label>
		<input type="radio" name="gender" id="female" value="F" />
		<label for="female">Female</label><br />
	</div>
	<div>
		<input type="submit" value="Register" id="submit" />
	</div>
</form>
lists-tables-forms

Bu sorunu CSS ile çözebiliriz:


div {
	border-bottom: 1px solid #efefef;
	margin: 10px;
	padding-bottom: 10px;
	width: 260px;
}
.title {
	float: left;
	width: 100px;
	text-align: right;
	padding-right: 10px;
}
.radio-buttons label {
	float: none;
}
.submit {
	text-align: right;
}
lists-tables-forms

Son olarak cursor özelliği ile mouse imlecini değiştirebiliriz:


a {
	cursor: move;
}
Burada değer olarak auto, crosshair, default, pointer, move, text, wait, help değerlerini verebiliriz. Kendi imlecimizi atamak için url("cursor.gif") şeklinde değer verebiliriz.


Sonraki Yazı: Layouts
Yorumlar

Henüz bir yorum bulunmuyor.
Yorum bırakın