CSS, bir HTML belgesinin stilini tanımlayan bir dildir. CSS, HTML öğelerinin nasıl gösterilmesi gerektiğini açıklar. Bu örnekler, temelden ileri seviyeye kadar size CSS öğretecektir.
Seçiciler
Element / Etiket Seçici
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <head> <style> p { text-align: center; color: #ff4757; font-size: 3em; } </style> </head> <body> <p>Her paragraf (p) stilden etkilenecektir.</p> <p id="para1">Bu etiket de etiklenecek!</p> <p>Bu etiket de tabi!</p> </body> </html> |
id seçici (# seçici)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <head> <style> #para1 { text-align: center; color: #ff4757; font-size: 3em; } </style> </head> <body> <p>Bu bir pragraf</p> <p id="para1">Bu etiket etiklenecek!</p> <p>Bu başka bir paragraf</p> </body> </html> |
class seçici (. seçici)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <style> .ortala { text-align: center; color: red; } </style> </head> <body> <h1 class="ortala">Kırmızı ve merkez hizalı başlık</h1> <p class="ortala">Kırmızı ve merkez hizalı paragraf</p> </body> </html> |
Sınıf seçici (sadece <p> elemanları için)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <style> p.ortala { text-align: center; color: red; } </style> </head> <body> <h1 class="ortala">Bu başlık etkilenmeyecek</h1> <p class="ortala">Bu paragraf kırmızı ve merkez hizalı olacaktır.</p> </body> </html> |
İki sınıfa başvuran bir HTML öğesi
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <style> p.ortala { text-align: center; color: red; } p.buyut { font-size: 300%; } </style> </head> <body> <h1 class="ortala">Bu başlık etkilenmeyecek</h1> <p class="ortala">Bu paragraf kırmızı ve merkez hizalı olacaktır.</p> <p class="ortala buyut">Bu paragraf kırmızı, merkez hizalı ve büyük bir font boyutunda olacaktır.</p> </body> </html> |
Evrensel seçici
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <style> * { text-align: center; color: blue; } </style> </head> <body> <h1>Merhaba Dünya!</h1> <p>Sayfadaki her öğe stille etkilenecek.</p> <p id="para1">Ben de!</p> <p>ve ben de!</p> </body> </html> |
Gruplama seçicileri
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <style> h1, h2, p { text-align: center; color: red; } </style> </head> <body> <h1>Merhaba dünya!</h1> <h2>İkinci seviye başlık!</h2> <p>Bu bir paragraftır.</p> </body> </html> |
CSS Renkler(Colors)
Bir öğenin arka plan rengini ayarlama
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <body> <h1 style="background-color:DodgerBlue;">Merhaba dünya</h1> <p style="background-color:Tomato;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </body> </html> |
Metin rengini ayarla
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <body> <h3 style="color:Tomato;">Merhaba dünya</h3> <p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html> |
Kenarlık rengini ayarla
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <body> <h1 style="border: 2px solid Tomato;">Merhaba Dünya</h1> <h1 style="border: 2px solid DodgerBlue;">Merhaba Dünya</h1> <h1 style="border: 2px solid Violet;">Merhaba Dünya</h1> </body> </html> |
Farklı renk değerlerini ayarla
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <body> <p>"Domates" rengi:</p> <h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1> <h1 style="background-color:#ff6347;">#ff6347</h1> <h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1> <p>"Domates" renk adıyla aynı, ancak% 50 saydam:</p> <h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1> <p>Önceden tanımlanmış renk adlarına ek olarak, renkler RGB, HEX, HSL veya hatta RGBA veya HSLA renk değerleri kullanılarak saydam renkler kullanılarak belirlenebilir.</p> </body> </html> |
RGB değerlerini ayarla
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <body> <h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1> <h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1> <h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1> <h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1> <h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1> <h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1> <p>HTML’de, RGB değerlerini kullanarak renkleri belirleyebilirsiniz.</p> </body> </html> |
HEX değerlerini ayarla
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <body> <h1 style="background-color:#000000;">#000000</h1> <h1 style="background-color:#3c3c3c;">#3c3c3c</h1> <h1 style="background-color:#787878;">#787878</h1> <h1 style="background-color:#b4b4b4;">#b4b4b4</h1> <h1 style="background-color:#f0f0f0;">#f0f0f0</h1> <h1 style="background-color:#ffffff;">#ffffff</h1> <p>Kırmızı, yeşil ve mavi için eşit değerleri kullanarak, farklı gri tonları elde edersiniz.</p> </body> </html> |
HSL değerlerini ayarla
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <body> <h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1> <h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1> <h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1> <h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1> <h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1> <h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1> <p>HTML'de, HSL değerlerini kullanarak renkleri belirleyebilirsiniz.</p> </body> </html> |
CSS Arkaplan
Sayfanın arka plan rengini ayarlama
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <style> body { background-color: lightblue; } </style> </head> <body> <h1>Merhaba Dünya!</h1> <p>Bu sayfa açık mavi renklidir!</p> </body> </html> |
Farklı öğelerin arka plan rengini ayarlama
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html> <html> <head> <style> h1 { background-color: green; } div { background-color: lightblue; } p { background-color: yellow; } </style> </head> <body> <h1>CSS arka plan rengi örneği!</h1> <div> Bu, bir div öğesinin içindeki bir metindir. <p>Bu paragrafın kendi arka plan rengi vardır.</p> Hala div elementindeyiz. </div> </body> </html> |
Resmi sayfanın arka planı olarak ayarla
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <style> body { background-image: url("bg.gif"); } </style> </head> <body> <h1>Selam Dünya!</h1> <p>Bu sayfa arka planı olarak bir resim var!</p> </body> </html> |
Arka plan görüntüsünü sadece yatay olarak nasıl yinelerim
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <style> body { background-image: url("doku.png"); background-repeat: repeat-x; } </style> </head> <body> <h1>Merhaba Dünya!</h1> <p>Burada, bir arka plan görüntüsü sadece yatay olarak tekrar edilir!</p> </body> </html> |
Arka plan resmi nasıl konumlandırılır
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <style> body { background-image: url("resim.png"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; } </style> </head> <body> <h1>Merhaba Dünya!</h1> <p>Konum örneğini ayarlayın.</p> <p>Artık arka plan görüntüsü yalnızca bir kez gösteriliyor ve metinden uzağa yerleştirilmiş.</p> <p>Bu örnekte, sağ tarafa da bir kenar boşluğu ekledik, böylece arka plan görüntüsü metni asla rahatsız etmeyecek.</p> </body> </html> |
Sabit bir arka plan resmi (bu resim sayfanın geri kalanıyla birlikte görünmez)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE html> <html> <head> <style> body { background-image: url("resim.png"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; background-attachment: fixed; } </style> </head> <body> <h1>Arka plan ek özelliği</h1> <p>Arka plan eki özelliği, arka plan görüntüsünün kaydırılıp kaydırılmayacağını veya sayfanın geri kalanıyla kaydırılmayacağını belirtir.</p> <p>Herhangi bir kaydırma çubuğu görmüyorsanız, tarayıcı penceresini yeniden boyutlandırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> <p>Arka plan resmi sabittir. Sayfayı aşağı kaydırmayı deneyin.</p> </body> </html> |
Bir bildirimde tüm arka plan özellikleri
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <style> body { background: #ffffff url("resim.png") no-repeat right top; margin-right: 200px; } </style> </head> <body> <h1>Arka plan özelliği</h1> <p>Background özelliği, bir deklarasyonda tüm background özelliklerini belirlemek için kullanılan bir shorthand özelliğidir.</p> <p>Burada, arka plan görüntüsü sadece bir kez gösterilir ve sağ üst köşeye de yerleştirilir.</p> <p>Ayrıca, metnin arka plan görüntüsü üzerine yazmaması için bir sağ kenar boşluğu ekledik.</p> </body> </html> |
Gelişmiş arka plan örneği
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html> <head> <style> body { margin-left: 200px; background: #5d9ab2 url("resim.png") no-repeat top left; } .orta-div { border: 1px solid gray; margin-left: auto; margin-right: auto; width: 90%; background-color: #d0f0f6; text-align: left; padding: 8px; } </style> </head> <body> <div class="orta-div"> <h1>merhaba dünya!</h1> <p>Bu örnekte henüz öğrenmemiş olabileceğiniz bazı gelişmiş CSS yöntemleri bulunmaktadır. Ancak, bu yöntemleri eğitimin sonraki bölümlerinde açıklayacağız.</p> </div> </body> </html> |
Kaynak:
https://www.w3schools.com/css/css_examples.asp
1 Yorum