Çeşitli Css Örnekleri


 

1. Sayfa arkaplanına resim yerleştirme

<html ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
    background: url(cssimages/img04.jpg);
}
</style>
</head>

<body>
</body>
</html>

 

2. Büyük-Küçük Harf Değişimi

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

<title>Büyük-Küçük Harf Değişimi</title>

<style>
<!–

h4 {text-transform:lowercase; }

h3 {text-transform:uppercase; }

h2 {text-transform:capitalize;}

</style></head>
<body>
<h2> css uygulamaları </h2>
<h3> css uygulamaları </h3>
<h4> css uygulamaları </h4>
</body></html>
 

3. Listeleme öğelerinde istediğimiz resmi kullanma

<html><head>
<style type=text/css>

li{list-style-image:url(deneme.jpg);}

</style></head>
 
<body>

<marquee behavior="alternate">WEB PROGRAMCILIGI ALANI DERSLERİ</marquee>

<p><u>MESLEK DERSLERİ</u></p>

<ul>

<li >Ag Temelleri</li>

<li >Web Tasarımı ve Programlama</li>

<li >Açık Kaynak Kodlu İşletim Sistemleri</li>

<li >Grafik ve Animasyon</li>
 
</ul></body></html>
 

4. ID seçici kullanımına bir örnek


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

<title>deneme</title>
<style type=text/css>

#meslek{list-style-image:url(deneme.jpg);}

#kultur{list-style-image:url(deneme1.jpg);}

</style></head>
 
<body>

<marquee behavior="alternate">WEB PROGRAMCILIĞI ALANI DERSLERİ</marquee>

<p><u>MESLEK DERSLERİ</u></p>

<ul>
<li  id=kultur >Ağ Temelleri</li>
<li  id=kultur>Web Tasarımı</li>
<li  id=kultur >Açık Kaynak Kodlu İşletim Sistemleri</li>
<li  id=kultur >Grafik ve Animasyon</li>
  
</ul>

<p><u>KÜLTÜR DERSLERİ</u></p>

<ul>

<li id=meslek>İngilizce</li>
<li id=meslek>Dil ve Anlatım</li></ul>…</body></html>