CSS NEDİR
CSS’i kullanarak sayfalarınızı daha estetik hale getirebilirsiniz CSS’i kullanarak sayfalarınızı daha estetik hale getirebilirsiniz. Bununla birlikte sayfa tasarımında kullandığınız renklerden sıkıldığınızda tek bir noktadan bütün sayfalardaki renkleri hızlı bir şekilde değiştirebilirsiniz. Bunun için CSS’i etkili bir şekilde kullanabilmek önemlidir.
CSS’İN HTML İLE İLİŞKİSİ YEREL CSS KULLANIMI GENEL CSS KULLANIMI HARİCİ CSS KULLANIMI NOT: CSS KULLANIM ŞEKİLLLERİNDEN 3 Ü DE KULLANILMIŞSA BROWSER TARAFINDAN ÖNCELİK TERCİH SIRASI ŞÖYLEDİR: YEREL-GENEL-HARİCİ
YEREL CSS(INLINE) <html> <head> <title>Yerel CSS</title> </head> <body> <h1>Deneme</h1> <h1 style="color:teal ;font-size:15">Deneme</h1> <h1>Deneme</h1> </body> </html> <p style="color:sienna;margin-left:20px">This is a paragraph. </p>
GENEL CSS(INTERNAL) <html> <head> <title>Genel CSS</title> <style type="text/css"> <!-- h1 {color:teal; font-size:15} --> </style> </head> <body> <h1>Deneme</h1> <h1>Deneme</h1> <h1>Deneme</h1> </body> </html>
HARİCİ(EXTERNAL) CSS h1 {font-size:15; color:teal} h2 {font-size:25; color:silver} h3 {font-size:35; color:red} YUKARIDAKİ KODA HARİCİ OLARAK stilim1.css olarak kaydedilir. <head> <link rel="stylesheet" type="text/css" href="stilim1.css" /> </head>
CSS YAZIM KURALI(SYNTAX)
CSS YORUM SATIR(/*……..*/) /*BURASI YORUM SATIRI*/ p { text-align:center; /*BURASI DA BAŞKA BİR YORUM SATIRI*/ color:black; font-family:arial; }
SEÇİCİLER(SELECTORS) CSS DE SEÇİCİLER ID VE CLASS SEÇİCİLERDİR. ID VE CLASS seçiciler ile html etiketlerinin stilleri değiştirilebilir.
İd ve class kullanım örneği İd örneği(# ile baslar) Class örneği(. İle başlar) <head> <style type="text/css"> #deneme1 {text-align:center;color:red;} </style> </head> <body><p id=“deneme1"> Merhaba dünyalı yine karşımızda</p> <p> burası etkilenmedi </p> </body></html> <head> <style type="text/css"> .center {text-align:center;} </style> </head> <body> <h1 class="center">Center-aligned heading </h1> <p class="center">Center-aligned paragraph.</p> </body></html>
CSS-background background-color background-image background-repeat background-attachment background-position
Background örn 1 <head> <style type="text/css"> body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; margin-right:200px; } </style> </head <head> <style type="text/css"> body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; } </style> </head
background div { background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:right center; } div { background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:50% 50%; } div { background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:10px 200px; } left top left center left bottom right top right center right bottom center top center center center bottom İnherit(kalıtımla alır bir üst element neyse onun özelliğini alır)
Background örnekleri <html> <head> <html> <style type="text/css"> body { background-image: url('smiley.gif'); background-repeat: no-repeat; background-attachment:fixed; background-position: 30% 20%; } </style> </head> <body> <p><b>Note:</b> opera ve firefox için "fixed“ yazılmalı</p> </body> </html> <html> <head> <style type="text/css"> body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } </style> </head> <body> <p><b>Note:</b> opera ve firefox için "fixed“ yazılmalı.</p> </body> </html>
TEXT(METİN) ÖZELLİKLERİ <html> <head> <style type="text/css"> body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);} </style> </head> <body> <h1>BAŞLIK ÖRNEĞİ1</h1> <p>PARAGRAFIN NORMAL RENGİ KIRMIZI BELİRLENDİ</p> <p class="ex">PARAGRAFIN AYARI SINIF OLARAK class="ex“ İSMİNİ KULLANIYOR BURASI İSE MAVİ RENK OLACAK> </body> </html> <html> <head> <style type="text/css"> h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} </style> </head> <body> <h1>CSS text-align Example</h1> <p class="date">May, 2009</p> <p class="main“>BUARSI MAİN ALANININ RENGİNİ KULLANIYOR</p> <p><b>Not:</b> PENCEREYİ BÜYÜT KÜÇÜLT JUSTİFY DURUMUNU GÖREBİLİRSİN</p> </body> </html>
TEXT ÖZELLİKLERİ ALDIĞI DEĞERLER 1
TEXT ÖZELLİKLERİ ALDIĞI DEĞERLER 2
TEXT(METİN) ÖZELLİKLERİ <html> <body> <head> <title>Text özellikleri</title> <style type="text/css"> <!-- p { text-transform: uppercase; line-height: 30; text-indent: 20; text-align: center; text-decoration: line-through; } --> </style> <body> <p>deneme</p> </body> </html> text-align: Yatay hizalama left: Sola hizalama right: Sağa hizalama center: Ortaya hizalama line-height: Satır yüksekliğinin pixel değeri line-indent: Sol kenardan uzaklığın piksel değeri text-transform: Metni büyük veya küçük harflerle görüntüleme uppercase: Metni büyük harflerle yazar lowercase: Metni küçük harflerle yazar. text-decoration: underline: Alt çizgili yazar overline: Üst çizgili yazar line-trough: Yazının üstünü çizer. none: Herhangi bir çizgi olmaksızın yazar.
FONT ÖZELLİKLERİ font-size: Yazı büyüklüğünün piksel cinsinen değerini bildirir. color: Yazının rengini bildirir. font-family: Yazının tipini belirler(Times New Roman,vedana vs.) font-style: Yazının italik olup olmamasını belirler. italic: Yazıyı eğik yapar normal: Yazıyı bir değişiklik yapmadan yazar. font-weight: Yazının bold olup olmamasını belirler. bold: Yazıyı koyu yazar. normal: Yazıyı bir değişiklik yapmaksızın yazar. <html> <body> <head> <title>Css ve Fontlar</title> <style type="text/css"> <!-- p { font-size: 30; color: teal; font-weight: bold; font-style: italic; font-family: Times New Roman; } --> </style> <body> <p>Deneme </body> </html>