Middle East Technical University



body {

background-color:yellow;

}

p {

margin-left: 80px;

font-size: 16px;

font-family: arial;

color: blue;

}

Burasi CSS ile degiştirilmiştir..

LİNK ÖRNEĞİ

a:link {

color: red;

text-decoration: none;

font-family: arial;

font-size:18px;

}

a:visited {

color: red;

text-decoration: none;

font-family: arial;

font-size: 20px;

}

a:active {

color: yellow;

text-decoration: none;

font-family: arial;

font-size: 20px;

}

a:hover {

color: blue;

text-decoration: none;

font-family: arial;

font-size: 22px;

background-color: #ccc;

}

ODTU-SEM

ODTU

IDEA

DIV / Class Örneği

.deneme {

width: 200px;

height: 400 px;

background-color: yellow;

}

Burası DIV alanı

deneme CSS

burda text dokuman..

BORDER /SPAN Örneği

.menu {

background-color: yellow;

border: 3px solid #ccc;

padding:25x;

}

ODTU-SEM sem.metu.edu.tr

// spanla yaptık, border-bottom: 34px solid #ccc;

Margin –Dış Boşluk ve FLOAT- Örneği

.deneme1 {

width: 300px;

height: 300px;

background-color:#ccc;

float:left;

}

.deneme2 {

width: 300px;

height: 300px;

background-color:red;

margin: 5px;

}

// margin-left: veya margin-right

Padding- iç boşluk

.deneme1 {

width: 300px;

height: 300px;

background-color:#ccc;

padding: 5px;

}

.deneme2 {

height: 300px;

background-color:red;

padding: 25px;

}

ODTU-SEM

IMLEC-Cursor

.deneme1 {

width: 150px;

height: 150px;

background-color:orange;

padding: 5px;

cursor: help

}

ODTU-SEM- Yardım Menüsü

DIV/ Link Örneği

a:link {

color: red;

text-decoration: none;

font-family: arial;

font-size:18px;

}

a:visited {

color: red;

text-decoration: none;

font-family: arial;

font-size: 20px;

}

a:active {

color: yellow;

text-decoration: none;

font-family: arial;

font-size: 20px;

}

a:hover {

color: blue;

text-decoration: none;

font-family: arial;

font-size: 22px;

background-color: #ccc;

}

.menu {

width: 150px;

height: 200 px;

background-color: yellow;

border: 1px solid #000;

}

ODTU-SEM

ODTU

IDEA

Resimlerde Saydamlık / Browserlarda farklılıklar var..

.menu {

border: 3px solid #ccc;

}

img {

opacity:0.2;

}

img: hover {

opacity:0.8;

}

Resim Ustu Yazı / Position: relative, photoshopda en ust layer, absolute ise digerinden bagimsiz

#dis {

position: relative;

float: left;

}

#ic {

position: absolute;

top:30px;

left:30px;

color: black;

background:yellow;

opacity: 0.6;

}

ODTU

Arka Plan Background Ornegi

.ornek {

width: 600px;

height: 800px;

background-image: url();

background-repeat:repeat-y;

}

deneme

background-repeat: repeat-x; / yatay olarak tekrar eder...

background-repeat: no-repeat; / tekrar etmez..

background-attachment: fixed; / sayfada kayma olmaz yapistirir..

background-position: center; / resmi ortadan baslatir

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download