Site Mühendisi - Daha İyi Siteler İçin: Css Dersleri

Css Dersleri etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Css Giriş - Etiketler

<div style="border: 0px; color: #000033; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; line-height: 24px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSPs24hJSejxFno9FKBpif8ivIJzIJ1dW2cLWnRTb9EaF7dKtQWJfZ8gjDqRKPJisOUXgMY7KHmnxtJIrKC8f5EUd6lprx3GL_JOAvzMcLSM8HhQg6TX4l3PPKqV6Rc_aNyhiRROQKZnRI/s1600/css.png" imageanchor="1" style="clear: left; float: left; font-size: 15px; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSPs24hJSejxFno9FKBpif8ivIJzIJ1dW2cLWnRTb9EaF7dKtQWJfZ8gjDqRKPJisOUXgMY7KHmnxtJIrKC8f5EUd6lprx3GL_JOAvzMcLSM8HhQg6TX4l3PPKqV6Rc_aNyhiRROQKZnRI/s1600/css.png" /></a>CSS NEDİR?Cascading Style Sheets (Türkçede Stil Şablonları) yani bilinen kısa adıyla CSS, HTML’e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir web teknolojisidir 
 CSS kodları HTML kodlarının içine yazılırlar. Türüne göre body veya head bölümlerinde yer alabilirler. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilirler. Hemen hemen her konuda olduğu gibi CSS konusunda da Microsoft Internet Explorer ve Netscape farklı yorumlar ortaya koyarlar. Bu noktada her iki browser’ın da aynı/benzer yorumlayacağı kodlar yazmak en uygunudur.</div>
 
 
<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
LİNK ÖZELLİKLERİ 
a :Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur. 
a:hover :Linkin imleç üzerine getirildiğindeki durumudur. 
a:active :Linkin tıklandığı andaki durumudur. 
a:visited :Linkin tıklandıktan sonraki durumudur.</div>


 
<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
 BİÇİMLENDİRME: 
color:Linkin rengini belirler. 
background-color:Linkin zemin rengini belirler. 
background-image:Linkin zeminine resim ekler(Bu animated-gif de olabilir.) 
text-decoration:Linkin altının,üstünün vs. çizgili olup olmayacağını belirler. 
font-weight:Yazının kalınlık veya inceliğini belirler. 
border:Linkin etrafına kenarlık ekler. 
display:Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.</div>


 
<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
LİSTE ÖZELLİKLERİ: 
disk:Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar. 
circle : Liste biçiminin çember şeklinde olmasını sağlar. 
square : Liste biçiminin kare olmasını sağlar. 
decimal : Liste biçiminin rakamlardan oluşmasını sağlar. 
lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar. 
upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar. 
lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar. 
upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar. 
none : Listenin simgesiz olmasını sağlar. 
inside : Listenin ikinci satırının en soldan başlamasını sağlar. 
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar. 
list-style-image : Liste biçiminin resim olmasını sağlar.</div>


 
<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
KATMAN ÖZELLİKLERİ: 
position:Katmanın yerinin belirlenmesini sağlar. 
absolute:Katmanın yerinin pencere esas alınarak belirlenmesini sağlar. 
relative: Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar. 
static:Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar. 
top:Katmanın üstten ne kadar aşağıda olması gerektiğini belirler. 
left:Katmanın soldan ne kadar içeride olması gerektiğini belirler. 
width:Katmanın genişliğinin ne kadar olacağını belirler. 
height:Katmanın yüksekliğinin ne kadar olacağını belirler. 
overflow:Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler. 
auto:Otomatik olarak belirlenir. 
scroll:Kaydırma çubuğu ekleyerek görünmesini sağlar. 
visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar. 
hidden:Sığmayan yerleri gizler. 
visibility:Katmanın görünebilirlik ayarını yapar. 
visible : Katmanın görünür olmasını sağlar. 
hidden:Katmanı gizler. 
z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.</div>


 
<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
FONT ÖZELLİKLERİ: 
font-family:Yazı türünü belirler.(Arial , Verdana gibi.) 
font-style:Yazının normal veya sağa eğik olmasını sağlar. 
font-variant:Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar. 
font-weight:Yazının kalınlık-inceliğini belirler. 
font-size:Yazının büyüklüğünü belirler.</div>


<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
TEXT ÖZELLİKLERİ: 
word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler. 
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler. 
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler. 
underline : Kelimenin altının (Satır altından) çizili olmasını sağlar. 
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar. 
line-through : Kelimenin ortasından çizili olmasını sağlar. 
blink : Kelimenin yanıp sönmesini sağlar.(Netscape için) 
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler. 
text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar. 
capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar. 
uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar. 
lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar. 
none : Kelimelerin orjinal metindeki gibi olmasını sağlar. 
text-align: Metnin dikey olarak nasıl hizalanacağını belirler. 
left : Metni sola yaslar. 
right : Metni sağa yaslar. 
center : Metni ortalar. 
justify : Metni iki yana yaslar. 
text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler. 
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.) 
first-line : Metnin ilk satırının biçimlendirilmesini sağlar. 
first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.</div>

 
<div style="border: 0px; color: #000033; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; line-height: 24px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
İMLEÇ ÖZELLİKLERİ:crosshair:İmlecin artı işareti şeklinde olmasını sağlar. auto:İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar. default:İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar. hand:İmlecin linkte olduğu gibi el şeklinde olmasını sağlar. move:İmlecin taşıma işareti şeklinde olmasını sağlar. ne-resize:İmlecin sağa yatık normal ok olmasını sağlar. nw-resize:İmlecin sola yatık normal ok olmasını sağlar. se-resize:İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar. sw-resize:İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar. n-resize:İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar. s-resize:İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar. w-resize:İmlecin sola doğru ince ok şeklinde olmasını sağlar. e-resize:İmlecin sağa doğru ince ok şeklinde olmasını sağlar. text:İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar. wait:İmlecin meşgul animasyonuna dönüşmesini sağlar. help:İmlecin yardım-soru işaretine dönüşmesini sağlar</div>
 
 
<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
 ZEMİN ÖZELLİKLERİ: 
background-color: Zeminin rengini belirler. 
#color : Renk adı. 
transparent: Zeminin saydam olmasını sağlar. 
background-image: Zemine resim yerleştirilmesini sağlar. 
url : Zemine yerleştirilen resmin adresi. 
background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler. 
repeat : Resmin bütün zemine yayılmasını sağlar. 
repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar. 
repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar. 
no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar. 
background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler. 
scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar. 
fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar 
background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar. 
top : Resmi yukarı yerleştirir. 
center : Resmi ortalar. 
bottom : Resmi aşağı yerleştirir. 
left : Resmi sola yerleştirir. 
right: Resmi sağa yerleştirir. 
…px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.</div>


 
<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
 TABLO ÖZELLİKLERİ 
margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler. 
margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler. 
margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler. 
margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler. 
margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.</div>


 
<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler. 
padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler. 
padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler. 
padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler. 
padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.</div>


 
<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
border : Tablonun kenarlarının şekillendirilmesini sağlar.</div>


 
<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
border-top : Tablonun üst kenarının şekillendirilmesini sağlar. 
border-left : Tablonun sol kenarının şekillendirilmesini sağlar. 
border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar. 
border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.</div>


<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
border-width : Tablonun kenarlarının kalınlığını belirler. 
border-top-width : Tablonun üst kenarının kalınlığını belirler. 
border-right-width : Tablonun sağ kenarının kalınlığını belirler. 
border-bottom-width : Tablonun alt kenarının kalınlığını belirler. 
border-left-width : Tablonun sol kenarının kalınlığını belirler.</div>

<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
border-style : Tablonun kenarlık türünü belirler. 
border-top-style : Tablonun üst kenarlık türünü belirler. 
border-right-style : Tablonun sağ kenarlık türünü belirler. 
border-bottom-style : Tablonun alt kenarlık türünü belirler. 
border-left-style : Tablonun sol kenarlık türünü belirler.</div>
<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
border-color : Tablonun kenarlarının rengini belirler. 
border-top-color : Tablonun üst kenarının rengini belirler. 
border-right-color : Tablonun sağ kenarının rengini belirler. 
border-bottom-color : Tablonun alt kenarının rengini belirler. 
border-left-color : Tablonun sol kenarının rengini belirler.</div>
<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
color : Tabloda geçen metnin rengini belirler.</div>
<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
width : Tablonon genişliğini belirler.</div>
<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
height : Tablonun yüksekliğini belirler.</div>
<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
NOT : Başlık "TABLO" olarak verildi Ancak bu nitelikler başta TD , TR , TH vs. olmak üzere hemen her etiket için kullanılabilir.CSS’ yi özel kılan da zaten bu…</div>
<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
KAYDIRMA ÇUBUĞU ÖZELLİKLERİ: 
scrollbar-face-color :Kaydırma çubuğunun yüzey rengi , aynı zamanda zemini de etkiliyor. 
scrollbar-base-color :Kaydırma çubuğununun sol ve üst kenarlıklarını çizgi halinde kaplıyor. 
scrollbar-shadow-color :Sağ ve alt kenarlıkların gölge rengi. 
scrollbar-highlight-color :Sol ve üst kenarlıkların gölge rengi,aynı zamanda zemini de etkiliyor. 
scrollbar-arrow-color :Yön oklarının rengi</div>
<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
Kaydırma çubuğu, sadece Internet Explorer’da geçerlidir.</div>
<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
-Derlenmiştir.</div>
<div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
istersen özellik isimlerini eğik yapabilirsin, mesela:</div>
 
<div style="border: 0px; color: #000033; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; line-height: 24px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">
scrollbar-shadow-color :Sağ ve alt kenarlıkların gölge rengi. scrollbar-highlight-color :Sol ve üst kenarlıkların gölge rengi,aynı zamanda zemini de etkiliyor. scrollbar-arrow-color :Yön oklarının rengi</div>

Css Giriş - Etiketler

CSS NEDİR? C ascading S tyle S heets (Türkçede Stil Şablonları) yani bilinen kısa adıyla CSS, HTML’e ek olarak metin ve format biçimlen...

+ Devamı »

Css - Border Özelliği Kullanımı

<h2 style="border: 0px; font-family: Tahoma, Geneva, sans-serif; font-size: 18pt; letter-spacing: -1px; line-height: 1.3em; margin: 0px; outline: 0px; padding: 0px; text-align: center; text-shadow: rgb(226, 238, 241) 1px 1px 1px; vertical-align: baseline;">CSS 2.1 de Kullanılan Css Sitilleri ve CSS3 te Yeni Gelen Border Sitilleri</h2><div style="border: 0px; color: #000033; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><div class="separator" style="clear: both; font-size: 15px; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFPnvJ0f794ShWz3fSyRHqYuVUzilDj_PBc9x-nB6TBb4pFqZXG13LwJdbcRrdQjJcTyTCI-_kqFVtLfnSTuPCJxdVhAOL9dcbfIj_yK00SasYSxE2xyvL0Kh-9VwzFuX216fNJwZt7Spq/s1600/1206885173_borderstyles.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFPnvJ0f794ShWz3fSyRHqYuVUzilDj_PBc9x-nB6TBb4pFqZXG13LwJdbcRrdQjJcTyTCI-_kqFVtLfnSTuPCJxdVhAOL9dcbfIj_yK00SasYSxE2xyvL0Kh-9VwzFuX216fNJwZt7Spq/s1600/1206885173_borderstyles.png" width="320" /></a></div> </div><div style="border: 0px; color: #000033; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; line-height: 24px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">Css 2.1 De Kullandığımız Borderlerin Toplam 8 sitili var ama Tasarımcılar Olarak Kullanabileceğimiz günü 4 gözle Beklediğimiz CSS3 ile birlikte Bu Rakkam 11 e çıkıyor mevcut sitillerin yanı sora olmayan bir sitil var wave dalgalı çizgi ve diğer yeni gelen diğer ikisi bize tanıdık noktalı çizgi ve kesik çizgi bu ikisinin birleşiminden olan olan bir sitil geliyor tabi CSS3 border konusunda bununlada sınırlı olmayacak artık borderlere background resmi verebileceğiz bu daha sonraki bir konuda detaylı olarak yer vermeyi düşünüyorum şimdi mevcut kullanabildiğimiz 8 sitili örnekle gösterelim Kullanımı ve Örnekler:</div><div style="border: 0px dotted; color: #000033; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; line-height: 24px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 5px; vertical-align: baseline;">#etiket {border-style: dotted;}dotted border Stili – Noktalı Çizgi</div><div style="border: 0px dashed; color: #000033; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; line-height: 24px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 5px; vertical-align: baseline;">#etiket {border-style: dashed;}dashed border Stili – Kesik Çizgi</div><div style="border: 0px solid; color: #000033; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; line-height: 24px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 5px; vertical-align: baseline;">#etiket {border-style: solid;}solid border Stili – Düz Çizgi</div><div style="border: 0px double; color: #000033; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; line-height: 24px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 5px; vertical-align: baseline;">#etiket {border-style: double;}double border Stili – Çift Düz Çizgi</div><div style="border: 0px groove; color: #000033; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; line-height: 24px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 5px; vertical-align: baseline;">#etiket {border-style: groove;}groove border Stili – İçe Kabarık Çizgi</div><div style="border: 0px ridge; color: #000033; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; line-height: 24px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 5px; vertical-align: baseline;">#etiket {border-style: ridge;}ridge border Stili – Dışa Kabarık Çizgi</div><div style="border: 0px inset; color: #000033; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; line-height: 24px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 5px; vertical-align: baseline;">#etiket {border-style: inset;}inset border Stili – İçe Gömülü Çizgi</div><div style="border: 0px outset; color: #000033; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; line-height: 24px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 5px; vertical-align: baseline;">#etiket {border-style: outset;}outset border Stili – Dışa Gömülü Çizgi</div><div style="border: 0px; color: #000033; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; line-height: 24px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">Yukardaki gibi bu stiller kullanmak istediğiniz her alanda kullanılabilir css3 ü sabırsızlıkla bekliyoruz tabiki bu sitilleri bir arada kullanmakta mümkün örnek vermek gerekirse</div><div style="border: 0px; color: #000033; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; line-height: 24px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;"></div><div style="border-style: dotted solid; border-width: 0px; color: #000033; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; line-height: 24px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 5px; vertical-align: baseline;">#etiket {border-style: dotted solid dotted solid;}Hem Noktalı Hem Düz çizgi Stili</div><div style="border: 0px; color: #000033; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; line-height: 24px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">Yukarıdaki gibi hem noktalı hemde düz çizgi kullandım tabi dört yön içinde ayrı ayrı çizgi, ayrı ayrı renk, ayrı ayrı genişlik, kullanılabilir bu sizin yaptığınız tasarıma ve hayal gücünüze kalmış bir şey kolay gelsin</div>

Css - Border Özelliği Kullanımı

CSS 2.1 de Kullanılan Css Sitilleri ve CSS3 te Yeni Gelen Border Sitilleri Css 2.1 De Kullandığımız Borderlerin Toplam 8 sitili var ama Tasa...

+ Devamı »

Css Giriş - Etiketler

<div style="border: 0px; color: #000033; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; line-height: 24px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSPs24hJSejxFno9FKBpif8ivIJzIJ1dW2cLWnRTb9EaF7dKtQWJfZ8gjDqRKPJisOUXgMY7KHmnxtJIrKC8f5EUd6lprx3GL_JOAvzMcLSM8HhQg6TX4l3PPKqV6Rc_aNyhiRROQKZnRI/s1600/css.png" imageanchor="1" style="clear: left; float: left; font-size: 15px; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSPs24hJSejxFno9FKBpif8ivIJzIJ1dW2cLWnRTb9EaF7dKtQWJfZ8gjDqRKPJisOUXgMY7KHmnxtJIrKC8f5EUd6lprx3GL_JOAvzMcLSM8HhQg6TX4l3PPKqV6Rc_aNyhiRROQKZnRI/s1600/css.png" /></a>CSS NEDİR?Cascading Style Sheets (Türkçede Stil Şablonları) yani bilinen kısa adıyla CSS, HTML’e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir web teknolojisidir CSS kodları HTML kodlarının içine yazılırlar. Türüne göre body veya head bölümlerinde yer alabilirler. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilirler. Hemen hemen her konuda olduğu gibi CSS konusunda da Microsoft Internet Explorer ve Netscape farklı yorumlar ortaya koyarlar. Bu noktada her iki browser’ın da aynı/benzer yorumlayacağı kodlar yazmak en uygunudur.</div> <div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">LİNK ÖZELLİKLERİ a :Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur. a:hover :Linkin imleç üzerine getirildiğindeki durumudur. a:active :Linkin tıklandığı andaki durumudur. a:visited :Linkin tıklandıktan sonraki durumudur.</div> <div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;"> BİÇİMLENDİRME: color:Linkin rengini belirler. background-color:Linkin zemin rengini belirler. background-image:Linkin zeminine resim ekler(Bu animated-gif de olabilir.) text-decoration:Linkin altının,üstünün vs. çizgili olup olmayacağını belirler. font-weight:Yazının kalınlık veya inceliğini belirler. border:Linkin etrafına kenarlık ekler. display:Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.</div> <div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">LİSTE ÖZELLİKLERİ: disk:Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar. circle : Liste biçiminin çember şeklinde olmasını sağlar. square : Liste biçiminin kare olmasını sağlar. decimal : Liste biçiminin rakamlardan oluşmasını sağlar. lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar. upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar. lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar. upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar. none : Listenin simgesiz olmasını sağlar. inside : Listenin ikinci satırının en soldan başlamasını sağlar. Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar. list-style-image : Liste biçiminin resim olmasını sağlar.</div> <div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">KATMAN ÖZELLİKLERİ: position:Katmanın yerinin belirlenmesini sağlar. absolute:Katmanın yerinin pencere esas alınarak belirlenmesini sağlar. relative: Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar. static:Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar. top:Katmanın üstten ne kadar aşağıda olması gerektiğini belirler. left:Katmanın soldan ne kadar içeride olması gerektiğini belirler. width:Katmanın genişliğinin ne kadar olacağını belirler. height:Katmanın yüksekliğinin ne kadar olacağını belirler. overflow:Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler. auto:Otomatik olarak belirlenir. scroll:Kaydırma çubuğu ekleyerek görünmesini sağlar. visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar. hidden:Sığmayan yerleri gizler. visibility:Katmanın görünebilirlik ayarını yapar. visible : Katmanın görünür olmasını sağlar. hidden:Katmanı gizler. z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.</div> <div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">FONT ÖZELLİKLERİ: font-family:Yazı türünü belirler.(Arial , Verdana gibi.) font-style:Yazının normal veya sağa eğik olmasını sağlar. font-variant:Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar. font-weight:Yazının kalınlık-inceliğini belirler. font-size:Yazının büyüklüğünü belirler.</div><div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">TEXT ÖZELLİKLERİ: word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler. letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler. text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler. underline : Kelimenin altının (Satır altından) çizili olmasını sağlar. overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar. line-through : Kelimenin ortasından çizili olmasını sağlar. blink : Kelimenin yanıp sönmesini sağlar.(Netscape için) vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler. text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar. capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar. uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar. lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar. none : Kelimelerin orjinal metindeki gibi olmasını sağlar. text-align: Metnin dikey olarak nasıl hizalanacağını belirler. left : Metni sola yaslar. right : Metni sağa yaslar. center : Metni ortalar. justify : Metni iki yana yaslar. text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler. line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.) first-line : Metnin ilk satırının biçimlendirilmesini sağlar. first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.</div> <div style="border: 0px; color: #000033; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; line-height: 24px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">İMLEÇ ÖZELLİKLERİ:crosshair:İmlecin artı işareti şeklinde olmasını sağlar. auto:İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar. default:İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar. hand:İmlecin linkte olduğu gibi el şeklinde olmasını sağlar. move:İmlecin taşıma işareti şeklinde olmasını sağlar. ne-resize:İmlecin sağa yatık normal ok olmasını sağlar. nw-resize:İmlecin sola yatık normal ok olmasını sağlar. se-resize:İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar. sw-resize:İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar. n-resize:İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar. s-resize:İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar. w-resize:İmlecin sola doğru ince ok şeklinde olmasını sağlar. e-resize:İmlecin sağa doğru ince ok şeklinde olmasını sağlar. text:İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar. wait:İmlecin meşgul animasyonuna dönüşmesini sağlar. help:İmlecin yardım-soru işaretine dönüşmesini sağlar</div> <div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;"> ZEMİN ÖZELLİKLERİ: background-color: Zeminin rengini belirler. #color : Renk adı. transparent: Zeminin saydam olmasını sağlar. background-image: Zemine resim yerleştirilmesini sağlar. url : Zemine yerleştirilen resmin adresi. background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler. repeat : Resmin bütün zemine yayılmasını sağlar. repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar. repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar. no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar. background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler. scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar. fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar. top : Resmi yukarı yerleştirir. center : Resmi ortalar. bottom : Resmi aşağı yerleştirir. left : Resmi sola yerleştirir. right: Resmi sağa yerleştirir. …px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.</div> <div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;"> TABLO ÖZELLİKLERİ margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler. margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler. margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler. margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler. margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.</div> <div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler. padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler. padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler. padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler. padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.</div> <div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">border : Tablonun kenarlarının şekillendirilmesini sağlar.</div> <div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">border-top : Tablonun üst kenarının şekillendirilmesini sağlar. border-left : Tablonun sol kenarının şekillendirilmesini sağlar. border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar. border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.</div><div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">border-width : Tablonun kenarlarının kalınlığını belirler. border-top-width : Tablonun üst kenarının kalınlığını belirler. border-right-width : Tablonun sağ kenarının kalınlığını belirler. border-bottom-width : Tablonun alt kenarının kalınlığını belirler. border-left-width : Tablonun sol kenarının kalınlığını belirler.</div><div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">border-style : Tablonun kenarlık türünü belirler. border-top-style : Tablonun üst kenarlık türünü belirler. border-right-style : Tablonun sağ kenarlık türünü belirler. border-bottom-style : Tablonun alt kenarlık türünü belirler. border-left-style : Tablonun sol kenarlık türünü belirler.</div><div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">border-color : Tablonun kenarlarının rengini belirler. border-top-color : Tablonun üst kenarının rengini belirler. border-right-color : Tablonun sağ kenarının rengini belirler. border-bottom-color : Tablonun alt kenarının rengini belirler. border-left-color : Tablonun sol kenarının rengini belirler.</div><div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">color : Tabloda geçen metnin rengini belirler.</div><div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">width : Tablonon genişliğini belirler.</div><div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">height : Tablonun yüksekliğini belirler.</div><div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">NOT : Başlık "TABLO" olarak verildi Ancak bu nitelikler başta TD , TR , TH vs. olmak üzere hemen her etiket için kullanılabilir.CSS’ yi özel kılan da zaten bu…</div><div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">KAYDIRMA ÇUBUĞU ÖZELLİKLERİ: scrollbar-face-color :Kaydırma çubuğunun yüzey rengi , aynı zamanda zemini de etkiliyor. scrollbar-base-color :Kaydırma çubuğununun sol ve üst kenarlıklarını çizgi halinde kaplıyor. scrollbar-shadow-color :Sağ ve alt kenarlıkların gölge rengi. scrollbar-highlight-color :Sol ve üst kenarlıkların gölge rengi,aynı zamanda zemini de etkiliyor. scrollbar-arrow-color :Yön oklarının rengi</div><div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">Kaydırma çubuğu, sadece Internet Explorer’da geçerlidir.</div><div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">-Derlenmiştir.</div><div style="border: 0px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">istersen özellik isimlerini eğik yapabilirsin, mesela:</div> <div style="border: 0px; color: #000033; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; line-height: 24px; margin-bottom: 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline;">scrollbar-shadow-color :Sağ ve alt kenarlıkların gölge rengi. scrollbar-highlight-color :Sol ve üst kenarlıkların gölge rengi,aynı zamanda zemini de etkiliyor. scrollbar-arrow-color :Yön oklarının rengi</div>

Css Giriş - Etiketler

CSS NEDİR? C ascading S tyle S heets (Türkçede Stil Şablonları) yani bilinen kısa adıyla CSS, HTML’e ek olarak metin ve format biçimlendir...

+ Devamı »