İNTERNET PROGRAMCILIĞI 1 Öğr. Gör. Canan ASLANYÜREK
background-position Arka plan resmini sayfanızın belirli bir konumuna veya merkezine yerleştirebilirsiniz. Bunun için background-position özelliğine konumlandırmak istediğiniz yeri belirtmeniz yeterli olacaktır.
Uygulama <html> <head> <style> body { background-image: url(yazilimbilisim.png); Background-repeat: no- repeat; background-position: right top; } </style> </head> <body> <h1>CSS Arka Plan Resmi</h1> <p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p> <div> </div> </body> </html>
background-size CSS3 ile birlikte gelen background-size özelliği arka plan görüntülerinin boyutunu belirlemenizi sağlar. CSS3’ten önce, bir arka plan resminin boyutu, resmin gerçek boyutuydu Bir arka plan resmini tam ekran yapabilmek için farklı tekniklerden faydalanıyorduk. Ancak CSS3, arka plan görüntülerini farklı bağlamlarda yeniden kullanmamızı sağlıyor.
Uygulama <html> <head> <title>CSS ile dikey ortalama</title> <style> .arkaplan1{ border: 1px solid black; background- image:url(kus.png); background-repeat: no- repeat; padding:35px; } .arkaplan2 { background-size: 80px 80px; padding:15px; </style> </head> <body> <h1>Arka Plan Resim Kullanımı</h1> <div class="arkaplan1"> <h2>Orjinal Arkaplan Resmi</h2> <p>Bu div öğesinin arkasında kullanılan arkaplan resmi orjinal boyutundadır.</p> </div> <br> <div class="arkaplan2"> <h2>Boyutlandırılmış Arkaplan Resmi</h2> <p>Bu div öğesinin arkasında kullanılan arkaplan resmi daha orjinalinden da küçük boyuttadır.</p> </div> </body> </html>
CSS Kenarlıklar CSS Border özelliği, bir HTML öğesinin kenarlık stilini, genişliğini ve rengini belirtmenizi sağlar.
border-style Özelliği border-style özelliği kenar çizgisinin dolgu stilini belirlemenizi sağlar dotted – Noktalı çizgiye sahip kenarlığı tanımlar dashed – Kesik çizgili kenarlığı tanımlar solid – Düz bir sınır tanımlar double – Çift çizgili kenarlığı tanımlar none – Herhangi bir kenar tanımlamaz
Uygulama html> <head></head> <style> p.p1 {border-style: dotted;} p.p2 {border-style: dashed;} p.p3 {border-style: solid;} p.p4 {border-style: double;} p.p5 {border-style: groove;} p.p6 {border-style: ridge;} p.p7 {border-style: inset;} p.p9 {border-style: none;} p.p10 {border-style: hidden;} </style> <body> <h1>border-Style Özelliği</h1> <p class="p1">dotted stilinde kenar.</p> <p class="p2">dashed stilinde kenar.</p> <p class="p3">solid stilinde kenar.</p> <p class="p4">double stilinde kenar.</p> <p class="p5">groove stilinde kenar.</p> <p class="p6">ridge stilinde kenar.</p> <p class="p7">inset stilinde kenar.</p> <p class="p9">kenar yok.</p> <p class="p10">gizli border.</p> </body> </html>
Border-style Ayrı ayrı kenarlara farklı stillerde uygulayabilirsiniz. <html> <head> <style> p { border-top-style: dotted; border-right-style: solid; border-bottom-style: double; border-left-style: dashed; } </style> </head> <body> <p>Kernarları farklı stilde olan bir paragraf</p> </body> </html>
border Özelliği border özelliği sırayla ; border-width border-style border-color özelikleri için bir kestirme niteliktir. <html> <head> <style> p { border: 5px solid red; } </style> </head> <body> <h2>border Özeliği</h2> <p>5 piksel düz çizgili kırmızı renkli kenarları olan bir paragraf.</p> </body> </html>
CSS Margin Özellikleri CSS margin özellikleri ile HTML öğesine ait kenarların (border) dışından başlayarak elemanın çevresinde boşluk oluşturmak için kullanılır. Bu sayede margin kullanımı ile HTML öğelerinizin birbirleri ile aralarında oluşacak olan dış boşlukları ve aralarındaki mesafeleri tayin edebilirsiniz.
CSS Margin Özellikleri
Uygulama <html> <head> <style> div { margin: 90px; border: 1px solid #4CAF50; } </style> </head> <body> <div>div öğesinin kenar boşluğu 90 pikseldir.</div> </body> </html>
CSS Margin Özellikleri CSS, aynı zamanda bir öğenin her bir kenarına ait özel margin değeri belirlemek için alt özelliklere sahiptir; margin-top margin-right margin-bottom margin-left Tüm margin özelliklerinde aşağıdaki türden değerler verilebilir; bir değer – px, pt, cm vb. cinsinden bir kenar boşluğu belirtir. % – içeren öğenin genişliğinin yüzdesi cinsinden bir kenar boşluğu belirtir auto – tarayıcı marjı hesaplar
Uygulama <html> <head> <style> div { border: 1px solid black; margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; background-color: lightblue; } </style> </head> <body> <h2>margin Özelliği</h2> <div>Bu div öğesi üstten 100px, sağdan 150px, alttan 100px, soldan 80px dış boşluğa sahiptir.</div> </body> </html>
CSS Margin Özellikleri Kodu kısaltmak için bir margin özelliğinde tüm kenar boşluklarını belirlemek mümkündür. margin: 35px 50px 75px 100px; üst kenar boşluğu 35 piksel, sağ 50 piksel, alt kenar boşluğu 75 piksel,sol kenar boşluğu 100 pikseldir. Eğer margin özelliğine üç değer verilirse; margin: 25px 50px 75px; üst kenar boşluğu 25 piksel, sağ ve sol 50 piksel, alt kenar boşluğu 75 pikseldir Eğer margin özelliğinde iki değer varsa; margin: 25px 50px; üst ve alt kenar boşlukları 25 piksel, sağ ve sol kenar boşlukları 50 pikseldir Eğer margin özelliği tek bir değer ise; margin: 25px; (Dört kenar boşluğu 25piksel)
CSS Padding Özellikleri CSS padding özellikleri, herhangi bir HTML öğesinin kenarları ile içeriği arasında kalan boşluğu oluşturmak için kullanılır. Bir öğenin her bir yanına ait(üst, sağ, alt ve sol) dolgusunu (padding) ayarlama özellikleri vardır.
Uygulama <html> <head> <style> div { display: inline-block; padding: 70px; border: 1px solid green; } </style> </head> <body> <div>Bu div elementinin içeriği ile kenarları arasında 70px iç boşluk vardır.</div> </body> </html>
CSS Padding Özellikleri Tüm padding özellikleri aşağıdaki değerlere sahip olabilir: uzunluk – px, pt, cm vb. cinsinden bir dolgu belirtir. % – içeren elemanın genişliğinin yüzdesi olarak dolgu belirtir
Uygulama <body> <html> <head> <style> div { border: 1px solid black; background-color: lightblue; padding-top: 50px; padding-right: 30px; padding-bottom: 60px; padding-left: 80px; } </style> </head> <body> <div>Bu div öğesinin üstten 50px, sağdan 30px, alttan 60px, soldan 80px iç boşluğu bulunmaktadır.</div> </body> </html>
CSS Padding Özelliği Kodu kısaltmak için bir padding özelliğinde tüm kenar iç boşluklarını belirlemek mümkündür. padding: 35px 50px 75px 100px; üst iç boşluğu 35 pikseldir sağ iç boşluğu 50 pikseldir alt iç boşluğu 75 pikseldir sol iç boşluğu 100 pikseldir. padding: 25px 50px 75px; üst iç boşluğu 25 pikseldir sağ ve sol iç boşlukları 50 pikseldir
CSS Padding Özellikleri padding: 25px 50px; üst ve alt iç boşlukları 25 pikseldir sağ ve sol iç boşlukları 50 pikseldir padding: 25px; her yönden iç boşluğu da 25 pikseldir
CSS Yükseklik ve Genişlik CSS ile bir HTML öğesinin genişliğini ayarlamak için width, yüksekliğiniayarlamak için heigth özellikleri kullanılır. Bu özelliğe bir değeri vermek istediğinizde bunu auto (otomatik) , piksel cinsinden (px), yüzdelik olarak (%) veya metrik (cm) olarak belirtebilirsiniz. width ve heigth özellikleri kenar çizgilerini (border) ve marjları (margin) içermez; dolgu (padding), içerik (content) boşluğunun içindeki alanın yüksekliğini / genişliğini ayarlarlar!
Uygulama <html> <head> <style> div { height: 200px; width: 50%; background-color: green; } </style> </head> <body> <div>Bu div öğesinin yüksekliği 200px genişliği ise %50 'dir</div> </body> </html>
CSS Metin İşlemleri color : Metne Renk Ekleme color Özelliği metne rengini vermek için kullanılır. Bu özellik bir renk değeri kabul eder
Uygulama <html> <head> <style> h1 { color: red; } } </style> </head> <body> <h1>CSS Dersleri Metin İşlemleri</h1> </body> </html>
Uygulama Bir sayfanın varsayılan metin rengi <body> seçicisinde tanımlanır. <html> <head> <style> body{ color : cornflowerblue; } h1 { color: red; </style> </head> <body> <h1>CSS Dersleri Metin İşlemleri</h1> <p>Pınarhisar Meslek Yüksekokulu Bilgi yönetimi Bölümü İnternet Programcılığı Dersi.</p> </body> </html>
text-align : Metin Hizalama <head> <style> h1 { text-align: center; } h2 { text-align: left; h3 { text-align: right; p{ text-align: justify; </style> </head> <body> <h1>Ortalanmış Başlık</h1> <h2>Sola Hizalı Başlık</h2> <h3>Sağa Hizalı Başlık</h3> <p>Eski zamanlardan beri varlığını koruyan hat sanatını bilirsiniz belki. Hat yazı ve çizgi anlamına gelmektedir. Kökleri oldukça eski zamanlara dayanır</p> </body> </html>
text-decoration : Metin Dekorasyonu overline : Metnin üstünü çiz. line-through : Metnin ortasını çiz underline : Metnin altını çiz none : Hiç bir dekorasyon uygulanmaz <html> <head> <style> h1 { text-decoration: overline; } h2 { text-decoration: line- through; } h3 { text-decoration: underline; } </style> </head> <body> <h1>Başlık 1</h1> <h2>Başlık 2</h2> <h3>Başlık 3</h3> </body> </html>
text-transform : Metin Dönüşümü uppercase : Metni büyük harlere dönüştürür. lowercase : Metni küçük harflere dönüştürür. capitalize : Metnin ilk harflerini büyük karakterine dönüştürür <html> <head> <style> p.up { text-transform: uppercase; } p.low { text-transform: lowercase; } p.cap { text-transform: capitalize; } </style> <body> <p class="up">Bu bir paragraftır</p> <p class="low">Bu bir paragraftır</p> <p class="cap">Bu bir paragraftır</p> </body> </html>
CSS Metin İşlemleri text-indent : Metin Girintisi text-indent Özelliği bir elemanın içindeki metnin ilk satırına girinti için kullanılabilir. Bu özellik için, piksel, nokta, yüzdeler ve benzeri dahil tüm ortak uzunluk değerleri kullanılabilir. letter-spacing : Harf Boşluğu letter-spacing Özelliği kullanarak, bir sayfada harfler arasındaki boşluğu ayarlayabiliriz. Pozitif bir uzunluk değeri harfleri birbirinden uzaklaştıracak, negatif uzunluk değeri ise harfleri birbirine daha yakın çekecektir. line-heigth : Satır Yüksekliği word-spacing : Kelime Boşluğu text-direction : Metin Yönü rtl : Sağdan sola ltr : Soldan sağa
KAYNAK Ebubekir Yaşar, Turgut Özseven, İnternet Programcılığı 1