Css Ugulama Örnekleri / Pseudo - Classes Kullanımları

Konular

Videolar

Testler

EBooklar

Css Ugulama Örnekleri

Pseudo - Classes Kullanımları ~ 14,942

Konu hakkında üç farklı örnek

Örnek1 : Html Kodu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <link rel="stylesheet" type="text/css" href="stilim6.css" />

</head>

<body>



<div id="kutu1">Bu birinci kutu</div>



<div class="kutu2">Bu ikinci kutu</div>



<div class="kutu3">Bu ikinci kutu</div>



</body>

</html>

Yukardaki uygulamaya ait CSS kodu: stilim6.css

#kutu1 { color:#ffff00; background-color:#FF3366; margin:10px; width:100px; height:50px; padding:20px; }

#kutu1:hover { color:#ffff00; background-color:#00CCCC; margin:10px; width:100px; height:50px; padding:20px; }

div.kutu2 { color:#ffff00; background-color:#00CC66; margin:10px; width:100px; height:50px; padding:20px; }

div.kutu2:hover { color:#ffff00; background-color:#00CCCC; margin:10px; width:100px; height:50px; padding:20px; }

.kutu3 { color:#ffff00; background-color:#00CC66; margin:10px; width:100px; height:50px; padding:20px; }

.kutu3:hover { color:#ffff00; background-color:#00CCCC; margin:10px; width:100px; height:50px; padding:20px; }

www.dijitalders.com Örnek 2: HTML Kodu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link rel="stylesheet" type="text/css" href="stilim2.css" />

</head>

<body>

<div class="kutu">Süper CSS</div>

<div class="kutu">Harika CC</div>

<div class="kutu">Hayret CSS</div>

</body>

</html>

Yukardaki uygulamaya ait CSS kodu sitilim2.css

*{ cursor:default }

.kutu { width:300px; height:60px; color:#ffffff; font-family:Impact; font-size:24pt; border:10px solid #CCCC00; margin:10px; text-align:center; padding-top:20px; background-color:#CC9900 }

.kutu:hover { width:300px; height:60px; color:#ffffff; font-family:Impact; font-size:24pt; border:10px solid #CCCC00; margin:10px; text-align:center; padding-top:20px; background-color:#00CC99; cursor:pointer; }

Örnek3: HTML Kodu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link rel="stylesheet" type="text/css" href="stilim.css" />

</head>

<body>

<form class="benimform">

<input type="text" name="ad" /><br />

<input type="text" name="soyad" /> <br />

<textarea name="adres" style="width:150px; height:50px" /></textarea><br />

<input type="button" value="Yolla" />

</form>

</body>

</html>

Yukardaki uygulamaya ait CSS kodu sitilim.css

.benimform input, .benimform textarea { border:5px solid #FF3366 }

.benimform input:hover, .benimform textarea:hover { border:5px solid #FFCC33; background-color:#CCFF33 }

.benimformum input[type="button"] { border:2px solid #8AB800 }

.benimformum input[type="button"]:hover { border:2px solid #6633FF }

~14,942 gösterim

Yorumunuzu Ekleyin

Resminiz

Css Ugulama Örnekleri ~ 25

Div ile Bölümler Oluşturmak ~ 62,294
Div tagı yardımı ile sayfalı %40 ve %60 şeklinde ikiye bölüp içerisine iki farklı içerik yerleştirme ile ilgili bir çalışma

CSS ile Menü Yapımı ~ 44,333
CSS'in menü yapımına etkileri

List Tagları ve Css ile Yatay Menü Yapımı ~ 35,503
İngilizce bir makaledir.

CSS ile Dikey Menü Yapımı ~ 23,131
Web sitelerinin vazgeçilmez öğelerinde biridir menüler. Menüler kullanıcının oluşturduğumuz sayfalara hızlı erişimini sağlar. Bir çok site de Ürünler, İletişim, Hakkımızda vb. bölümlerini menü öğesi olarak görürüz. Bu makalede sırasız listeler...