AccessTr.neT
CSS Kod Kataloğu. - Baskı Önizleme

+- AccessTr.neT (https://accesstr.net)
+-- Forum: Web (https://accesstr.net/forum-web.html)
+--- Forum: Css (https://accesstr.net/forum-css.html)
+--- Konu Başlığı: CSS Kod Kataloğu. (/konu-css-kod-katalogu.html)

CSS Kod Kataloğu. - schworse - 12/03/2011

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
ve
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üğü.


Cvp: CSS Kod Kataloğu. - benremix - 12/03/2011

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