AccessTr.neT

Tarih: 12.03.2011
Konu : CSS Kod Kataloğu.
İçerik : CSS Nesnesi, CSS Kodu, CSS Özelliği.

1.CSS Nesnesi :

Kod:
background

>> Artalan özellikleri
a) CSS Kodu :

Kod:
backgrond-color

>> Artalan renk
.CSS Özellikleri :

Kod:
background-color:color-rgb;

background-color:color-hex;

background-color:color-name;

background-color:color-transparent;

.CSS Kodu :

Kod:
background-attachment

>> Artalan resmin diğer elemanlara göre sabitlenmesinisi veya kaymasını belirler
.CSS Özellikleri :

Kod:
background-attachment:scroll;

backgrond-attachment:fixed;

.CSS Kodu :

Kod:
background-image

>> Artalan resim tanımlar
.CSS Özellikleri :

Kod:
background-image:url();

background-image:none;

.CSS Özellikleri :

Kod:
background-position

>> Artalan resmin başlangıc yerleşim noktasını belirtir.

.CSS Özellikleri :

Kod:
background-position:top left;

background-position:top center;

background-position:top right;

background-position:center left;

background-position:center center;

background-position:center right;

background-position:bottom left;

background-position:botton center;

background-position:bottom right;

background-position:x% y%;

background-position:xpos ypos;

.CSS Özellikleri :

Kod:
background-repeat

>> Artalan resmin tekrarlanmasını belirtir

.CSS Özellikleri :

Kod:
background-repeat:repeat;

background-repeat:no-repeat;

background-repeat:repeat-x;

background-repeat:repeat-y;

2.CSS Nesnesi :

Kod:
border

>> Kenar çizgisi özellikleri (renk, kalınlık, style)
.CSS Özellikleri :

Kod:
border-width:

border-style:

border-color:

border-bottom:

border-bottom-color:

border-bottom-style:

border-bottom-width:

border-left:

border-left-color:

border-left-style:

border-left-width:

border-right:

border-right-color:

border-right-style:

border-right-width:

border-top:

border-top-color:

border-top-style:

border-top-width:

b) CSS Kodu :

Kod:
clear

>> float uygulanmayan elemanın köşe tanımını yapar.
.CSS Özellikleri :

Kod:
clear:left;

clear:right;

clear:none;

clear:both;

c) CSS Kodu :

Kod:
cursor

>> maus imlecin görünümünü belirler.
.CSS Özellikleri :

Kod:
cursor:url;

cursor:auto;

cursor:crosshair;

cursor:default;

cursor:pointer;

cursor:move;

cursor:e-resize;

cursor:ne-resize;

cursor:nw-resize;

cursor:n-resize;

cursor:se-resize;

cursor:sw-resize;

cursor:s-resize;

cursor:w-resize;

cursor:text;

cursor:wait;

cursor:help;

d) CSS Kodu :

Kod:
display

>> Elamanın nasıl görüneceğini belirler.
.CSS Özellikleri :

Kod:
display:none;

display:inline;

display:block;

display:list-item;

display:run-in;

display:compact;

display:marker;

display:table;

display:inline-table;

display:table-row-group;

display:table-header-group;

display:table-footer-group;

display:table-row;

display:table-column-group;

display:table-column;

display:table-cell;

display:table-caption;

e) CSS Kodu :

Kod:
float

>> Elemanın diğer elemanlara göre konumunu belirler.
.CSS Özellikleri :

Kod:
float:left;

float:right;

float:none;

f) CSS Kodu :

Kod:
position

>> Elemanın konumunu belirler.
.CSS Özellikleri :

Kod:
position:static;

position:relative;

position:absolute;

position:fixed;

g) CSS Kodu :

Kod:
visibility

>> Elemanın görünür veya gizli olacağını belirler.
.CSS Özellikleri :

Kod:
visibility:visible;

visibility:hidden;

visibility:collapse;

h) CSS Kodu :

Kod:
height, width

>> Boyut özellikleri ( genişlik, yükseklik)
.CSS Özellikleri :

Kod:
height

>> Eleman yüksekliğini belirler.

Kod:
height:auto;

height:length;

height:%

ı) CSS Kodu :

Kod:
line-height

>> satırlar arası mesafeyi belirler.
.CSS Özellikleri :

Kod:
line-height:normal;

line-height:number;

line-height:length;

line-height:%

b]i) CSS Kodu :

Kod:
max-height

>> Eleman azami yüksekliğini belirler.

.CSS Özellikleri :

Kod:
max-height:none;

max-height:length;

max-height:%

j) CSS Kodu :

Kod:
max-width

>> Eleman azami genişliğini belirler.
.CSS Özellikleri :

Kod:
max-width :none;

max-width :length;

max-width :%;

k) CSS Kodu :

Kod:
min-heght

>> elaman minimum genişliğini belirler.
.CSS Özellikleri :

Kod:
min-heght :length;

min-heght :%;

l) CSS Kodu :

Kod:
min-width

>> Eleman minimum genişliğini belirtir.

.CSS Özellikleri :

Kod:
min-width :length;

min-width :%;

m) CSS Kodu :

Kod:
width

>> Eleman genişliğini belirler.

.CSS Özellikleri :

Kod:
width:auto;

width:%;

width:length;

n) CSS Kodu :

Kod:
font

>> Yazıtipi özellikleri

.CSS Özellikleri :

Kod:
font-family

>> (yazıtipi ailesi);

Kod:
font-size :xx-small;

font-size :x-small;

font-size :small;

font-size :medium;

font-size :large;

font-size :x-large;

font-size :xx-large;

font-size :smaller;

font-size :larger;

font-size :length;

font-size :%;

.CSS Özellikleri :

Kod:
font-style :normal;

font-style :italic;

font-style :oblique;

.CSS Özellikleri :

Kod:
font-variant :normal;

font-variant :small-caps;

]CSS Özellikleri :

Kod:
font-weight :normal;

font-weight :bold;

font-weight :border;

font-weight :lighter;

font-weight :100;

font-weight :200;

font-weight :300;

font-weight :400;

font-weight :500;

font-weight :600;

font-weight :700;

font-weight :800;

font-weight :900;

o) CSS Kodu :

Kod:
content

İçerik yönetim özellikleri

.CSS Özellikleri : >>

Kod:
before

Kod:
after

sözde sınıfları ile kullanılan

Kod:
content :string;

content :url;

content :counter(name)

content :counter(name,list-style-type)

content :counters(name,string, list-style-type)

content :attr(x);

content :open-quote;

content :dose-quote;

content :no-open-quote;

content :no-close-quote;

.CSS Özellikleri :

Kod:
counter-increment :none;

counter-increment :identifier number;

.CSS Özellikleri :

Kod:
counter-reset :none;

counter-reset :identifier number;

.CSS Özellikleri :

Kod:
quotes :string string;

ö) CSS Kodu :

Kod:
list-style

>> liste özelliklerinin kısa yolu.

.CSS Özellikleri :

Kod:
list-style-image :none;

list-style-image :url;

.CSS Özellikleri :

Kod:
list-style-position :inside;

list-style-position :outside;

.CSS Özellikleri :

Kod:
list-style-type:none;

list-style-type:disc;

list-style-type:circle;

list-style-type:square;

list-style-type:decimal;

list-style-type:decimal-leading-zero;

list-style-type:lower-roman;

list-style-type:upper-roman;

list-style-type:lower-alpha;

list-style-type:upper-alpha;

list-style-type:lower-greek;

list-style-type:lower-latin;

list-style-type:upper-latin;

list-style-type:hebrew;

list-style-type:armenian;

list-style-type:georgian;

list-style-type:cjk-ideographic;

list-style-type:hiragana;

list-style-type:katakana;

list-style-type:hiragana-iroha;

list-style-type:katakana-iroha;

.CSS Özellikleri :

Kod:
marker-offset :auto;

marker-offset :length;

p) CSS Kodu :

Kod:
margin

>> kenar dış boşluğu özellikleri.

.CSS Özellikleri :

Kod:
margin-bottom :auto;

margin-bottom :length;

margin-bottom :%;

margin-left :auto;

margin-left :length;

margin-left :%;

margin-right :auto;

margin-right :length;

margin-right :%;

margin-top :auto;

margin-top :length;

margin-top :%;

r) CSS Kodu :

Kod:
outlines

>> dış hat çizgisi özellikleri.
.CSS Özellikleri :

Kod:
outline-color :color;

outline-color :invert;

.CSS Özellikleri :

Kod:
outline-style :none;

outline-style :dotted;

outline-style :dashed;

outline-style :solid;

outline-style :double;

outline-style :groove;

outline-style :ridge;

outline-style :inset;

outline-style :outset;

.CSS Özellikleri :

Kod:
outline-width :thin;

outline-width :medium;

outline-width :thick;

outline-width :length;

t) CSS Kodu :

Kod:
cursor

>> maus imlecin görünümünü belirler.

.CSS Özellikleri :>>

Kod:
padding

>> kenar iç boşluğu özellikleri.

Kod:
padding-bottom :length;

padding-bottom :%;

padding-left :length;

padding-left :%;

padding-right :length;

padding-right :%;

padding-top :length;

padding-top :%;

u) CSS Kodu :

Kod:
bottom :auto;

>> positioning konumlandırma özellikleri.

Kod:
bottom :auto;

bottom :length;

bottom :%;

.CSS Özellikleri :>>Elemanın sınırlarını belirlemek için kullanılır.

Kod:
dip :shabe;

dip :auto;

left :auto;

left :%;

left :length;

.CSS Özellikleri :>>Elaman içeriğinin taşma durumunda nasıl davranacağını belirler.

Kod:
overflow :visible;

overflow :hidden;

overflow :scroll;

overflow :auto;

position :static;

position :relative;

position :absolute;

position :fixed;

right :auto;

right :length;

right :%;

top :auto;

top :length;

top :%;

.CSS Özellikleri :>>Elamanın dikey hizalanmasını ayarlar.

Kod:
vertical-aling :baseline;

vertical-aling :sub;

vertical-aling :super;

vertical-aling :top;

vertical-aling :middle;

vertical-aling :text-top;

vertical-aling :bottom;

vertical-aling :length;

vertical-aling :%;

.CSS Özellikleri :>>Elamanın z eksenindeki yerini tanımlar.

Kod:
z-index :auto;

z-index :number;

ü) CSS Kodu :

Kod:
table

>> Tablo özellikleri

.CSS Özellikleri :>>Tablo hücrelerinin etrafındaki kenarlık ile olan mesafeyi ayarlar.

Kod:
border-collapse :collapse;

border-collapse :separate;

.CSS Özellikleri :>>Tablo hücrelerinin Kenar çizgileri ile arasındaki mesafeyi ayarlar.

Kod:
border-spacing :lenth;

.CSS Özellikleri :>>Tablo başlığının tarafını belirler.

Kod:
caption-side :top;

caption-side :bottom;

caption-side :left;

caption-side :right;

.CSS Özellikleri :>>Tablodaki boş hücrelerin gösterilip gizlenmesini ayarlar.

Kod:
empty-cells :hide;

empty-cells :show;

.CSS Özellikleri :>>Hücrelerin satır ve colonlarının gösterimini ayarlar.

Kod:
table-layout :auto;

table-layout :fixed;

v) CSS Kodu :

Kod:
text ;

>> Metin özellikleri.

.CSS Özellikleri :>>Metnin rengini tanımlar.

Kod:
color :color;

.CSS Özellikleri :>>Metnin yönünü tanımlar.

Kod:
direction :ltr;

direction :rtl;

.CSS Özellikleri :>>Satırlar arası mesafeyi tanımlar.

Kod:
line-height :normal;

line-height :number;

line-height :length;

line-height :%;

.CSS Özellikleri :>>Karekterler arası boşluğu arttırmak veya azaltmamızı sağlar.

Kod:
letter-spacing :normal;

letter-spacing :length;

.CSS Özellikleri :>>Eleman içindeki metinleri hizalamamızı sağlar.
[/code]
text-aling :left;
text-aling :right;
text-aling :center;
text-aling :justify;
[/code]

.CSS Özellikleri :>>Metinleri süslememizi sağlar.

Kod:
text-decoration :none;

text-decoration :underline;

text-decoration :overline;

text-decoration :line-through;

text-decoration :blink;

.CSS Özellikleri :>>Eleman içindeki metnin ilk satırının girintisini tanımlar.

Kod:
text-indent :length;

text-indent :%;

.CSS Özellikleri :>>Metinlere gölge verir.

Kod:
text-shadow :none;

text-shadow :color;

text-shadow :length;

.CSS Özellikleri :>> Metni büyük-küçük harfe çevirmek için kullanılır.

Kod:
text-transfrom :none;

text-transfrom :capitalize;

text-transfrom :uppercase;

text-transfrom :lowercase;

.CSS Özellikleri :>> Çok yönlülük algoritmasını ayarlamamızı sağlar.

Kod:
unicode-bidi :normal;

unicode-bidi :emped;

unicode-bidi :bidi-override;

.CSS Özellikleri :>>Elemanların boşluklarının nasıl işlem göreceğini belirle.

Kod:
white-space :normal;

white-space :pre;

white-space :nowrap;

.CSS Özellikleri :>> Sözcükler arasındaki boşluk değeri.

Kod:
word-spacing :normal;

word-spacing :length;

y) CSS Kodu :

Kod:
Pseudo-classes

>> Sözde sınıflar (Pseudo-classes )
.CSS Özellikleri :>>

Kod:
active

>> aktif elemana stil tanır
.CSS Özellikleri :>>

Kod:
focus

>> odaklandığımız elemane stil tanır.
.CSS Özellikleri :>>

Kod:
hover

>> maus üzerine gelince elemanlara stil tanım
.CSS Özellikleri :>>

Kod:
link

>> ziyaret etmediğimiz bağlantılara still tanır.
.CSS Özellikleri :>>

Kod:
visited

>> ziyaret ettiğimiz bağlantılara stil tanır
.CSS Özellikleri :>>

Kod:
first-child

>> belirtilen elemanın ilk çocuk elemanına stil atamak için
z) CSS Kodu :

Kod:
Pseudo-elements

>> Sözde elemanlar (Pseudo-elements)
.CSS Özellikleri :>>

Kod:
first-letter

>> metnin ilk harfine stil tanımlamamızı sağlar.
.CSS Özellikleri :>>

Kod:
first-line

>> metnin ilk satırına stil tanımlamamızı sağlar.
.CSS Özellikleri :>>

Kod:
before

>> eleman öncesine bazı metinleri eklememizi sağlar.
.CSS Özellikleri :>>

Kod:
after

>> eleman sonrasına bazı metinleri eklememizi sağlar.
Bu konuyuda fazla uzatmak istemiyorum ne anlatmak istediğimi anlamışsınızdır umarım.

Sizlerin affına sığınarak konuyu kapatıyorum. AccessTR Eğitim Günlüğü.

Sn Schworse
Bu güzel emek ve paylaşım için teşekkürler. Eline sağlık.
Saygılar...

schworse

benremix