Renk ve arka plan
Renk ve arka plan
Renk ve arka plan, CoddyKit'te ücretsiz bir HTML for Kids dersidir. Bu, 1 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML for Kids öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML for Kids kursu toplamda 1 dersten oluşur.
Giriş
Merhaba,
Color özelliğiyle metnin renklerini değiştirebiliriz.
Bu özelliğe değerleri RGB, HEX, HSL, RGBA veya HSLA türünde atayabiliriz.
Şimdiye kadar birçok örnekte color özelliğini kullandık. Şimdi farklı değer türleriyle kullanımını gösterelim.
<style>
#txt1{
color: red;
}
#txt2{
color: #ff0000;
}
#txt3{
color: rgb(255,0,0);
}
/*
0.4 is the alpha value.
We can define decimal values
between 1 and 0.
*/
#txt4{
color: rgba(255,0,0, 0.4);
}
</style>
<div class="box">
<h1 id="txt1">
This is red color
</h1>
<h1 id="txt2">
This is red color that defined with HEX type
</h1>
<h1 id="txt3">
This is red color that defined with RGB type
</h1>
<h1 id="txt4">
This is red color that defined with RGBA type
</h1>
</div>Arka plan
Background özelliklerini kullanarak öğelerin arka planlarına stiller tanımlayabiliriz.
Şimdi aşağıda listelenen background özelliklerini öğrenelim.
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-color
Bir öğenin arka plan rengini değiştirmek için kullanılan özelliktir.
Bir örnek verelim.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec ante purus,
eleifend egestas tempus non, consequat ac ex..
</div>
</body>
</html>Opaklık
Bir öğenin arka plan opaklığını değiştirmek için kullanılan özelliktir.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
opacity: 0.5;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">
Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
</div>
</body>
</html>Opaklık - 2
CSS Opacity değişimi yukarıdaki görselde gösterilmiştir.
Arka plan görseli
background-image özelliği, bir öğenin arka planına görsel eklemek için kullanılır.
Görselimiz https://coddy.s3.amazonaws.com/cms/Profile_Pictures_dc459075ee.png adresinde bulunuyor.
Şimdi bir div öğesi tanımlayalım ve arka planına bir görsel ekleyelim.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-position
background-size
Yukarıdaki örneğimizde fark ettiyseniz, görselin standart boyutu ekleyeceğimiz alandan daha büyük olduğu için onu düzgün şekilde yerleştiremedik.
Bunu çözmek için background-size özelliğini kullanacağız.
Background-size özelliği cover, contain ve auto gibi değerler alabilir; ayrıca genişlik ve yükseklik için belirli bir değer de atayabiliriz.
Örneğimizi tekrar güncelleyelim.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* the element's background would fill the
div's background without
the image's ratio being distorted*/
background-size: contain;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-position 2
Şimdi background-position özelliğinin değerini yüzde olarak ayarlayalım.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height values
are set to 50%. */
background-size: 50% 50%;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-repeat
Ancak burada bir sorun var. Görsel boyutu öğenin arka plan boyutundan küçük olduğu için alanı doldurmak üzere birden fazla kez kullanıldı.
Bunu önlemek için background-repeat özelliğini kullanın (repeat, repeat-x, repeat-y, initial, inherit veya no-repeat değerleriyle).
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>arka plan ekleme
Bir diğer arka plan özelliği background-attachment özelliğidir. Bu özellikle arka plan görselinin sayfada kaydırılıp kaydırılmayacağını belirleyebiliriz.
Bu özellik fixed veya scroll değerlerini alır.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-attachment:scroll;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Arka Plan Kısa Yazımı
Yukarıdaki örneklerde öğrendiğimiz arka plan özelliklerini uygulamak istediğimizde 4-5 satırlık ifade tanımlamamız gerekebilir.
Tanımlamayı tek satırda yapmak için background kısa yazım özelliğini kullanırız.
Haydi, örneğimize bakalım.
background özelliğinde no-repeat, size, sayfa içindeki konum ve kaynak görselin URL'si tanımlanır.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background: no-repeat center/50%
url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Tebrikler
Tebrikler 🎉
Bu bölümde Renk ve Arka Planı öğrendik.
Bir sonraki bölümde Kutu, Blok ve Satır İçi kavramlarını öğreneceğiz
Sıkça Sorulan Sorular
“Renk ve arka plan” dersi ücretsiz mi?
Evet — “Renk ve arka plan” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML for Kids kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML for Kids kursu toplamda 1 dersten oluşur.
“Renk ve arka plan” dersinde ne öğreneceğim?
Renk ve arka plan HTML for Kids ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML for Kids öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML for Kids, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 1 dersinin 1. dersidir.
“Renk ve arka plan” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML for Kids dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML for Kids dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.