WEB TASARIMI veprogramlama DERSİ CSS DERS NOTLARI

Transkript

1 WEB TASARIMI veprogramlama DERSİ CSS DERS NOTLARI CSS BACKGROUND Ö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.

2 BACKGROUND ÖRNEKLERİ Ör-1: Ör-2: Ör-3: {background :#F0DEE5 ;} { background-repeat : repeat;} {background :#F0DEE5 ; background-repeat : repeat-x;} Ör-4: {background :#F0DEE5 ; background-repeat : repeat-y;} Ör-5: {background :#F0DEE5 ; background-repeat : no-repeat;} {background :#F0DEE5 ; Ör-6: background-repeat : no-repeat; background-position :center;} {background :#F0DEE5 ; Ör-7: background-repeat : no-repeat; background-position :left;} {background :#F0DEE5 ; Ör-8: background-repeat : no-repeat; background-position :bottom;} {background-color :transparent ; Ör-9: background-repeat : no-repeat; background-position :center;} Ör-10: Ör-11: body{ background-attachment:fixed;} body{ background-attachment:scroll;}

3 CSS FONT ÖZELLİKLERİ Font-Family Font-Style Yazı türünü belirler.(arial, Verdana gibi.). 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 Font-Size Yazının kalınlık-inceliğini belirler. Yazının büyüklüğünü belirler. FONT ÖRNEKLERİ

4 CSS 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

5 TEXT ÖRNEKLERİ

6 CSS LIST ÖZELLİKLERİ List-style-type disk circle square decimal lower-roman upper-roman lower-alpha upper-alpha none Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar. Liste biçiminin çember şeklinde olmasını sağlar. Liste biçiminin kare olmasını sağlar. Liste biçiminin rakamlardan oluşmasını sağlar. Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar. Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar. Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar. Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar. Listenin imgesiz olmasını sağlar. list-style-position inside Outside list-style-image Listenin ikinci satırının en soldan başlamasını sağlar. Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar. Liste biçiminin resim olmasını sağlar.

7 CSS LİNK ÖZELLİKLERİ a Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur. a:hover a:active a:visited Linkin imleç üzerine getirildiğindeki durumudur. Linkin tıklandığı andaki durumudur. Linkin tıklandıktan sonraki durumudur. BİÇİMLENDİRME: color background-color background-image text-decoration font-weight border display Linkin rengini belirler. Linkin zemin rengini belirler. Linkin zeminine resim ekler(bu animated-gif de olabilir.) Linkin altının,üstünün vs. çizgili olup olmayacağını belirler. Yazının kalınlık veya inceliğini belirler. Linkin etrafına kenarlık ekler. Linki içeren hücre, satır vb. istenilen alanın seçilmesini sağlar. NOT : Yukarıda kullanılabilecek birkaç parametre örnek verilmiştir.ancak "font", "text", table" vs. için kullanılabilen pek çok parametre "a" için de kullanılabilir.gerisi biraz da insanın yaratıcılığına kalıyor.

8 Ör.1: A {color:black;font-size:10pt;display : block;lineheight:16px; text-align : center;backgroundcolor:#d4aebb; border:outset 3px #DB7093;textdecoration:none;} A:HOVER {color:black;font-size:10pt;zoom : 92%;display : block; line-height:16px;text-align : center;background-color : #F0DEE5; border :inset 3px #CC3366;text-decoration:none;} Ör.2: A {text-decoration:none;border:outset 2px black;width:200px; backgroundimage:url(images/d.jpg);textalign:center;height:22;} A:HOVER {text-decoration:none;width:200px; border : inset 2px black;text-align : center; background-image : url(images/d2.jpg);} Ör.3: A{background-color : #DAA520;border:3px ridge #523208; text-decoration : none;text-align : center;font-size : x-small;fontfamily:tahoma;color:black;width:200px;lineheight:16px;} A:HOVER{background-color:#FFD700;border:3px ridge #523208;text-decoration : none;textalign:center;font-size:x-small;fontfamily:tahoma;color:black;width:200px;lineheight:16px;} Ör.5: A.css-ornek6 {textdecoration:none;border:none;width:200px;color:w hite;font-size:12px; background-image : url(images/m1.jpg);text-align:center;lineheight:24px;} A:HOVER.css-ornek6 {textdecoration:none;width:200px; border : none;textalign : center;color:#606060;font-size:12px; background-image : url(images/m2.jpg);lineheight:20px;} Ör.6: color:#1e90ff; background-color :#1E90FF; text-decoration :none;} Ör.7: background-color : #1E90FF; text-decoration :none;} Ör.8: background-color :#1E90FF; text-decoration :underline;} NOT:Alternatifleri için bkz. :Text/text-decoration Ör.9: background-color :#1E90FF; color:black; border:double black; text-decoration :none;} NOT:Kenarlık türünün alternatifleri için bkz. :Font/border-style Kenarlık kalınlığının alternatifleri için bkz. :Font/border-width Ör.10: background-color : #1E90FF; display : block; color : black; text-decoration :none;} Ör.11: background-image : url(images/a.jpg); color :#800000;} Ör.12: background-color : #DAA520; float : right;} Ör.13: background-color : #D7DFDD; text-transform : uppercase; font-weight : bold;} Ör.14: zoom:150%; font-weight : bold;} Ör.15: a.css-ornek10{ color:black; height :12px;lineheight:14px; border-bottom-style : solid; borderbottom-color : red; border-bottom-width :1px;} a:hover.css-ornek10{background-color : yellow; color:black;height : 12px;line-height:14px;textdecoration :none; border-bottom-style : solid;border-bottom-color : red; border-bottomwidth :1px;}

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

10 KATMAN ÖRNEKLERİ: div {position:static; top:15px; left:115px; width:178px; height:118px; background-color: #D4AEBB;} div {position:absolute; top:360px; left:115px; width:177px; height:102px; background-color: #D4AEBB;} div {position:relative; top:350px; left:106px; width:176px; height:102px; background-color: #D4AEBB;} div {position:absolute; top:798px; left:115px; width:177px; height:102px; background-color: #D4AEBB; overflow:visible;} div {position:absolute; top:922px; left:115px; width:177px;height:102px; background-color: #D4AEBB; overflow:scroll;} div {position:absolute; top:1044px; left:115px; width:177px;height:102px; background-color: #D4AEBB; overflow:hidden;}

11 CSS TABLO ÖZELLİKLERİ margin margin-top margin-right margin-bottom margin-left padding padding-top padding-right padding-bottom padding-left border border-top border-left border-bottom border-right border-width border-top-width border-right-width border-bottom-width border-left-width border-style border-top-style border-right-style border-bottom-style border-left-style border-color border-top-color border-right-color border-bottom-color border-left-color color width height Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler. Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler. Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler. Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler. Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler. Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler. Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler. Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler. Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler. Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler. Tablonun kenarlarının şekillendirilmesini sağlar. Tablonun üst kenarının şekillendirilmesini sağlar. Tablonun sol kenarının şekillendirilmesini sağlar. Tablonun alt kenarının şekillendirilmesini sağlar. Tablonun sağ kenarının şekillendirilmesini sağlar. Tablonun kenarlarının kalınlığını belirler. Tablonun üst kenarının kalınlığını belirler. Tablonun sağ kenarının kalınlığını belirler. Tablonun alt kenarının kalınlığını belirler. Tablonun sol kenarının kalınlığını belirler. Tablonun kenarlık türünü belirler. Tablonun üst kenarlık türünü belirler. Tablonun sağ kenarlık türünü belirler. Tablonun alt kenarlık türünü belirler. Tablonun sol kenarlık türünü belirler. Tablonun kenarlarının rengini belirler. Tablonun üst kenarının rengini belirler. Tablonun sağ kenarının rengini belirler. Tablonun alt kenarının rengini belirler. Tablonun sol kenarının rengini belirler. Tabloda geçen metnin rengini belirler. Tablonon genişliğini belirler. Tablonun yüksekliğini belirler. 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... NOT: Yukarıda görüldüğü gibi kenarlıklar istenirse tek bir paramatre ile veya daha ayrıntılı bir şekillendirme yapmak istiyorsak birden çok parametre ile şekillendirilebilir.örneğin bütün kenarlar için aynı ayarların (Renk, kalınlık, kenarlık türü) kullanılmasını istiyorsak : " border : 1px solid black " şeklinde bir defada biçimlendirme yapabiliriz. Ayrıntılı biçimlendirme içinse üst, sağ, alt ve solun renk, kalınlık ve kenarlık türü için ayrı ayrı parametreler kullanılabilir. TABLO ÖRNEKLERİ:

12