ADOBE DREAMWEAVER CS5 CSS PANEL

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "ADOBE DREAMWEAVER CS5 CSS PANEL"

Oz Kayyali
9 yıl önce
İzleme sayısı:

1 CSS Cascading Style Sheets ADOBE DREAMWEAVER CS5 CSS PANEL ve CSS3 ÖZELLİKLER

2 TYPE Font-Family : Yaz lar n alaca yaz tipini belirler Font adlar al r, Tahoma, Verdana Arial gibi. font-family: Arial, Helvetica, veya { font: 11pt bold Tahoma, Verdana; } Font-Size : Yaz lar n büyüklüklerini belirler px, pt, in, cm, mm, pc, em, ex ve % de erlerini al r,pt font-size: 12pt; ve px kullan r. Font-weight : Yaz lar n kal nl k ve incelik de erlerini belirler. Normal, bold, bolder, lighter ve 100 den 900 kadar font-weight: bold; rakam al r. Font-style : Yaz lar n normal veya sa a e ik olmas Yaz lar n normal yada yana yat k görünmesini sa lar font-style: italic; Yaz lar n normal veya tümünün büyük harflerden Yaz n normal veya tümünün büyük harflerden Font-variant :.font-variant: small-caps; olu mu olmas olu mu olmas com Line-Height : Yaz lar sat r yüksekli ini belirler. Px eri al r, yüksek er sat rlar aras ndaki bo lu u line-height: 25px; artt r. Text-transform : Kelimelerin büyük harf veya küçük harflerden none, capitalize, uppercase, lowercase erlerini al r. text-transform: uppercase; olu mas Text-decoration : Kelimenin alt, üstünün vs. çizili olup olmayaca none, underline, overline, line-through, blink text-decoration: none; belirler. erlerini al r. Color : stenilen yerdeki renkleri tirmek için kullan r. Renk kodlar ve temel renk adlar red, blue, yellow vs. color: #336699; gibi BACKGROUND Background-color : Zeminin rengini belirler. Renk Kodlar ve transparent background-color: #333; Background-image : Zemine imaj konulmas maj URL (imaj local veya web adresi) background-image: url(images.jpg); repeat : maj tüm zemine yay lmas repeat-x : maj sol-üstten sa -üste do ru yay lmas : Zemine yerle tirilen imaj tekrar edip etmeyece ini Background-repeat belirler. repeat- : maj sol-üstten sol-alta do ru yay lmas background-repeat: no-repeat; no-repeat: maj yay lmadan orjinal boyutuyla görünmesini Background-attachment : Zemindeki resmin, sayfa kayd rma çubu uyla hareket scroll : Sayfa hareket ettirildi inde zeminin background-attachment: fixed; ettirildi indeki durumunu belirler. kaymas top : Resmi yukar yerle tirir. center : Resmi ortalar. bottom : Resmi ayerle tirir. Background-position : Zemindeki resmin istenilen ekilde yerle tirilmesini left : Resmi sola yerle tirir. background-position: top center; right: Resmi sa a yerle tirir....px : Resmin soldan istenilen ölçüde içerde olmas X ve Y ile koordinatlarda belirtilebilir.

kullan r. Font-weight : Yaz lar n kal nl k ve incelik de erlerini belirler. Normal, bold, bolder, lighter ve 100 den 900 kadar font-weight: bold; rakam al r.

3 padding-left BLOCK Word-spacing : Kelimeler aras ndaki bo luk de erini belirler. Eksi normal ve uzunlu un px de eri word-spacing: 20px; de er alabilir. Letter-spacing : alabilir.harfler aras ndaki bo luk de erini belirler. Eksi de er normal ve uzunlu un px de eri letter-spacing: 20px; baseline : Orta(metin içeri ine göre) sub : Altsimge super : Üstsimge Vertical-align : Bir elementin içeri inin dikey hizalamas için kullan r. top : Yukar (elemente göre) vertical-align: middle; text-top: Yukar (Metin içeri ine göre). middle : Orta (Elemente göre) bottom : Alt (Elemente göre) text-bottom : Alt(Metin içeri ine göre) com Bir elementin di erlerine göre hizas berlilemek için Text-align : kullan r. Sadece metinler için kullan lmaz, di er Uzunlukeri px olarak, yüzde, inherit (kal tsal) text-align: center; Text-indent : Paragraflar ilk cümlelerin soldan içeriye kayd lmas Uzunluk erive yüzde er al r text-indent: 10px; için kullan lan bir özelliktir. White-space : belirlerelemanlar bo luklarnas lem görece ini normal, pre, nowrap white-space: normal; inline: ayn çizgi üzerine soldan sa Display : Elaman nas görünece ini belirler. block: alt alta dizilim gerçekle tirir. display: block; None: görünmez yapar. Genelde JS kodlar nda kullan yor. BOX Width : Konteyn rlar geni li ini belirler. Px, % ve auto erleri al rlar width:300px; Height : Konteyn rlar yüksekli ini belirler. Px, % ve auto erleri al rlar height:300px; Float : Div konteyn rlar istenilen yerde durmas left, right, none, inherit float: left Float elementinin etkisinden kurtulmak için clear özelli ini Clear : kullan r. left, right, none, both clear: both padding-top Hücre ile yaz yada resim aras ndaki bo luklar n padding-right Padding : belirlenmesinde kullan r. Hücre içindeki bo luk padding: 10px 0 0 3px; denilebilir. padding-bottom margin margin-top Margin : Elementlerin etraf ndaki bo luk vermek için kullan r. margin-right margin: 10px 0 0 3px; margin-bottom margin-left

Eksi de er normal ve uzunlu un px de eri letter-spacing: 20px; baseline : Orta(metin içeri ine göre) sub : Altsimge super : Üstsimge Vertical-align : Bir elementin içeri inin dikey hizalamas için

BORDER Border : Kenarl k yapmak için kullan r Border px, top, bottom, left, right, style ve renk kodlar border: 3 px solid #ff0000 border-style : Kenarl k stilini de tirmek için kullan r.

4 BORDER Border : Kenarl k yapmak için kullan r Border px, top, bottom, left, right, style ve renk kodlar border: 3 px solid #ff0000 border-style : Kenarl k stilini de tirmek için kullan r. none, dotted, dashed, solid, double, groove, ridge, inset, border-style: double; outset border-width : Kenarl k geni li idir thin, medium, thick, veya Xpx, X%, Xem (X'ler say de eri border-width: 30px; olmal r) border-color : Kenarl k rengi için kullan r Renk kodlar ve temel renk adlar red, blue, yellow vs Gibi border-color: #333;. border-bottom-color : Alt kenarl k rengini belirler Renk kodlar ve temel renk adlar red, blue, yellow vs. Gibi border-bottom-color: #333; com border-left-color : Sol kenarl k rengini belirler Renk kodlar ve temel renk adlar red, blue, yellow vs. Gibi border-left-color: #333; border-right-color : Sa kenarl k rengini belirler Renk kodlar ve temel renk adlar red, blue, yellow vs. Gibi border-right-color: #333; border-top-color : Üst kenarl k rengini belirler Renk kodlar ve temel renk adlar red, blue, yellow vs. Gibi border-top-color: #333; LIST List-style-type : Listelerin yan nda ç kacak olan rakam, harf ve ekilleri b disc, circle, square, decimal, lower-roman, upper- list-style-type: disc; roman, lower-alpha, upper-alpha, none List-style-image : Listelerin yan nda ç kacak olan imajlar belirler url (file: ); list-style-image: url(images/list.png); List-style-position : Listelerin içerdemi ar dam ralanacabelirler Inside, Outside list-style-position: outside;

30px; olmal r) border-color : Kenarl k rengi için kullan r Renk kodlar ve temel renk adlar red, blue, yellow vs Gibi border-color: #333;.

Benzer belgeler

CSS. Cascading Style Sheets. ADOBE DREAMWEAVER CS5 CSS PANEL ve CSS3 YEN ÖZELL KLER

CSS. Cascading Style Sheets. ADOBE DREAMWEAVER CS5 CSS PANEL ve CSS3 YEN ÖZELL KLER Metin Y lmaz Design 2011 Tüm Haklar Sakl r. CSS Cascading Style Sheets ADOBE DREAMWEAVER CS5 CSS PANEL ve CSS3 YEN ÖZELL KLER Herkese merhaba, Metin Y lmaz Blog sayfamdan ba lad m CSS derslerine bu döküman