|
Perşembe, 16 Temmuz 2009 18:07 |
Tema editleme gibi çalışmalarımızda hangi css kodun ne işe yaradığını deneyerek görebilirsiniz. Kolay gelsin.
- background >> artalan özellikleri
backgrond-color >> artalan renk
Kod:
background-color:color-rgb;
background-color:color-hex;
background-color:color-name;
background-color:color-transparent;
background-attachment >> artalan resmin diğer elemanlara göre sabitlenmesinisi veya kaymasını belirler
Kod:
background-attachment:scroll;
backgrond-attachment:fixed;
background-image >> Artalan resmi tanımlar
Kod:
background-image:url();
background-image:none;
background-position >> artalan resmin başlangıc yerleşim noktasını belirtir.
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;
background-repeat >> Artalan resmin tekrarlanmasını belirtir
Kod:
background-repeat:repeat;
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
- border >> Kenar çizgisi özellikleri (renk, kalınlık, style)
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:
- Tasnif özellikleri
clear >> float uygulanmayan elemanın köşe tanımını yapar.
Kod:
clear:left;
clear:right;
clear:none;
clear:both;
cursor >> maus imlecin görünümünü belirler.
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;
display >> Elamanın nasıl görüneceğini belirler.
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;
float >> Elemanın diğer elemanlara göre konumunu belirler.
Kod:
float:left;
float:right;
float:none;
position >> Elemanın konumunu belirler.
Kod:
position:static;
position:relative;
position:absolute;
position:fixed;
visibility >> Elemanın görünür veya gizli olacağını belirler.
Kod:
visibility:visible;
visibility:hidden;
visibility:collapse;
- Boyut özellikleri ( genişlik, yükseklik)
height >> Eleman yüksekliğini belirler.
Kod:
height:auto;
height:length;
height:%
line-height >> satırlar arası mesafeyi belirler.
Kod:
line-height:normal;
line-height:number;
line-height:length;
line-height:%
max-height >> Eleman azami yüksekliğini belirler.
Kod:
max-height:none;
max-height:length;
max-height:%
max-width >> Eleman azami genişliğini belirler.
Kod:
max-width :none;
max-width :length;
max-width :%;
min-heght >>elaman minimum genişliğini belirler.
Kod:
min-heght :length;
min-heght :%;
min-width >> Eleman minimum genişliğini belirtir.
Kod:
min-width :length;
min-width :%;
width >> Eleman genişliğini belirler.
Kod:
width:auto;
width:%;
width:length;
- Font Yazı Özellikleri
font >> Yazıtipi ö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 :%;
Kod:
font-style :normal;
font-style :italic;
font-style :oblique;
Kod:
font-variant :normal;
font-variant :small-caps;
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;
- İçerik yönetim özellikleri
content >> :before ve :after sözde sınıfları ile kullanılan içerik kısmını yönetir.
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;
Kod:
counter-increment :none;
counter-increment :identifier number;
Kod:
counter-reset :none;
counter-reset :identifier number;
Kod:
quotes :none;
quotes :string string;
- list-style >> liste özelliklerinin kısa yolu.
Kod:
list-style-image :none;
list-style-image :url;
Kod:
list-style-position :inside;
list-style-position :outside;
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;
Kod:
marker-offset :auto;
marker-offset :length;
- margin >> kenar dış boşluğu ö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 :%;
- outlines >> dış hat çizgisi özellikleri.
Kod:
outline-color :color;
outline-color :invert;
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;
Kod:
outline-width :thin;
outline-width :medium;
outline-width :thick;
outline-width :length;
- 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 :%;
- positioning konumlandırma özellikleri.
Kod:
bottom :auto;
bottom :length;
bottom :%;
==Elemanın sınırlarını belirlemek için kullanılır==
dip :shabe;
dip :auto;
left :auto;
left :%;
left :length;
==Elaman içeriğinin taşma durumunda nasıl davranacağını belirler==
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 :%;
==Elamanın dikey hizalanmasını ayarlar==
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 :%;
==Elamanın z eksenindeki yerini tanımlar
z-index :auto;
z-index :number;
- Tablo özellikleri
Kod:
==Tablo hücrelerinin etrafındaki kenarlık ile olan mesafeyi ayarlar==
border-collapse :collapse;
border-collapse :separate;
==Tablo hücrelerinin Kenar çizgileri ile arasındaki mesafeyi ayarlar==
border-spacing :lenth;
==Tablo başlığının tarafını belirler==
caption-side :top;
caption-side :bottom;
caption-side :left;
caption-side :right;
==Tablodaki boş hücrelerin gösterilip gizlenmesini ayarlar==
empty-cells :hide;
empty-cells :show;
==Hücrelerin satır ve colonlarının gösterimini ayarlar==
table-layout :auto;
table-layout :fixed;
- Metin özellikleri.
Kod:
==Metnin rengini tanımlar==
color :color;
==Metnin yönünü tanımlar
direction :ltr;
direction :rtl;
==Satırlar arası mesafeyi tanımlar==
line-height :normal;
line-height :number;
line-height :length;
line-height :%;
==Karekterler arası boşluğu arttırmak veya azaltmamızı sağlar==
letter-spacing :normal;
letter-spacing :length;
==Eleman içindeki metinleri hizalamamızı sağlar==
text-aling :left;
text-aling :right;
text-aling :center;
text-aling :justify;
==Metinleri süslememizi sağlar==
text-decoration :none;
text-decoration :underline;
text-decoration :overline;
text-decoration :line-through;
text-decoration :blink;
==Eleman içindeki metnin ilk satırının girintisini tanımlar==
text-indent :length;
text-indent :%;
==Metinlere gölge verir==
text-shadow :none;
text-shadow :color;
text-shadow :length;
==Metni büyük-küçük harfe çevirmek için kullanılır==
text-transfrom :none;
text-transfrom :capitalize;
text-transfrom :uppercase;
text-transfrom :lowercase;
==Çok yönlülük algoritmasını ayarlamamızı sağlar==
unicode-bidi :normal;
unicode-bidi :emped;
unicode-bidi :bidi-override;
==Elemanların boşluklarının nasıl işlem göreceğini belirler==
white-space :normal;
white-space :pre;
white-space :nowrap;
==Sözcükler arasındaki boşluk değeri==
word-spacing :normal;
word-spacing :length;
- Sözde sınıflar (Pseudo-classes )
Kod:
:active >> aktif elemana stil tanır
:focus >> odaklandığımız elemane stil tanır.
:hover >> maus üzerine gelince elemanlara stil tanım
:link >> ziyaret etmediğimiz bağlantılara still tanır.
:visited >> ziyaret ettiğimiz bağlantılara stil tanır
:first-child >> belirtilen elemanın ilk çocuk elemanına stil atamak için
:lang >> içerikteki bir elemanı farklı bir dilde yazmamızı sağlar.
- Sözde elemanlar (Pseudo-elements)
Kod:
:first-letter >> metnin ilk harfine stil tanımlamamızı sağlar.
:first-line >> metnin ilk satırına stil tanımlamamızı sağlar.
:before >> eleman öncesine bazı metinleri eklememizi sağlar.
:after >> eleman sonrasına bazı metinleri eklememizi sağlar.
|
SSS 