En çok kullanılan CSS özellikleri
En çok kullanılan CSS özellikleri
En çok kullanılan CSS özellikleri, 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,
Bu bölümde en yaygın CSS özelliklerini öğreneceğiz.
Şimdiye kadar genellikle color ve font-size gibi basit özelliklerle örnekler yaptık.
Genişlik Yükseklik
Yükseklik - Genişlik
Öğelerimizin genişlik ve yükseklik değerlerini ayarlamak için width ve height özelliklerini kullanacağız.
Burada dikkat edilmesi gereken iki konu vardır.
- Genişlik ve yüksekliği satır içi türdeki öğelere atayamayız.
- Atadığımız width-height özellikleri varsayılan olarak margin, padding ve border gibi diğer özelliklerden bağımsızdır. Ayrıca yalnızca öğenin içindeki alan için kullanılır.
Yukarıdaki istisnalarla ilgili ek bilgileri daha sonra vereceğiz.
<!DOCTYPE html>
<html>
<head>
<style>
.my-box {
width: 100px;
height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="my-box">My Box</div>
</body>
</html>
Genişlik ve Yükseklik 2
Önceki örneğimizde width ve height değerlerini sabit olarak atadık. Ancak atanabilecek değerler sabit sayılarla sınırlı değildir.
Şimdi örneğimizde genişliğin yüzde değeriyle nasıl atanacağını görelim.
<style>
.box1 {
height: 200px;
width: 200px;
background-color: #1cac84;
}
.box2 {
height: 200px;
width: 70%;
background-color: powderblue;
}
.box3 {
background-color: #c974af;
}
</style>
<div class="box1">First Box</div>
<div class="box2">Second Box</div>
<div class="box3">This box takes
the auto value for the width and height
properties by default.</div>
Content-box ve Border-box
box-sizing özelliği varsayılan olarak content-box değerini alır.
Varsayılan olarak Width ve height değerleri içeriğe referans olur.
Border ve padding değerleri width ve height değerlerinin üzerine eklenir.
Bir kutunun genişliğinin 100px olduğunu varsayalım.
Bu kutuya padding olarak 10px ve border özelliği olarak 20px eklediğimizde, öğenin toplam genişliği 100px + 10px + 20px = 130px olur.
Maksimum Genişlik
max-width özelliğiyle bir öğenin alabileceği maksimum genişliği atayabiliriz.
Aşağıdaki örnekte max-width değeri 100px olarak verildiğinden, width özelliğinin varsayılan değeri auto olsa da (öğe üst öğesinin %100'ünü kaplamalıdır), 100px yer kapladı ve içerik kutunun dışına taştı.
<style>
.box {
height: 200px;
max-width: 100px;
background-color: #1cac84;
}
</style>
<div class="box">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi lacinia ut felis
et sagittis
</div>
Metin Süslemesi
text-decoration özelliğiyle metinler için süsleme tanımlayabiliriz.
Bu özelliği örnek üzerinde incelemenin daha anlaşılır olacağını düşünüyorum. Örnek kodumuzun önizlemedeki çıktısına bakın.
<style>
.head1 {
text-decoration: overline;
}
.head2 {
text-decoration: line-through;
}
.head3 {
text-decoration: underline;
}
.head4 {
text-decoration: underline overline;
}
</style>
<h1 class="head1">
Text-decoration is overline
</h1>
<h1 class="head2">
Text-decoration is line-through
</h1>
<h1 class="head3">
Text-decoration is underline
</h1>
<h1 class="head4">
Text-decoration is both underline
and overline
</h1>text-indent
Bir metnin başlangıcına boşluk eklemek isteyebiliriz. Bunun için text-indent özelliğini kullanırız.
<style>
.indent-txt{
text-indent: 20px;
}
</style>
<p class="indent-txt">Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat
</p>text-align
Bir metnin yatay konumlandırmasını text-align özelliğiyle belirleriz.
Bir HTML örneği tanımlayalım.
<style>
.h1-center {
text-align: center;
}
.h1-left {
text-align: left;
}
.h1-right {
text-align: right;
}
</style>
<h1 class="h1-center">
Lorem ipsum (center)
</h1>
<h1 class="h1-left">
Lorem ipsum (left)
</h1>
<h1 class="h1-right">
Lorem ipsum (right)
</h1>font-family
Metinlerde istediğimiz yazı tipi türlerini kullanmak için font-family stilini tanımlarız.
Burada bilmemiz gereken birkaç önemli nokta vardır.
- Tanımladığım yazı tipinin kullanıcımızın sisteminde kayıtlı olması gerekir. Bunun için web güvenli yazı tipi olarak ifade edilen yazı tiplerinden birini kullanmamız gerekir.
- Özel bir yazı tipi kullanacaksak, kullanacağımız yazı tipini head etiketleri arasına üçüncü taraf bağımlılığı olarak eklememiz gerekir. font-family eklerken birincil ve ikincil yazı tipi tercihlerimizi belirlemeliyiz.
- Tarayıcı sisteminde birincil tercihimizi bulamazsa ikincil tercihimizi kullanıcımıza gösterir.
font-family 2
Aşağıdaki örnekte, birincil sınıf için Times New Roman yazı tipi atanmıştır.
İkincil ve üçüncül yazı tipleri olarak sırasıyla Times ve serif atanmıştır.
Tarayıcı önce Times New Roman yazı tipini kullanmayı dener; bu yazı tipi sistemde bulunamazsa diğer tercihlerimiz kullanılır.
Atadığımız yazı tipleri kullanılabilir değilse tarayıcı varsayılan yazı tipini kullanır.
<style>
.header {
font-family: "Times New Roman", Times, serif;
}
</style>
<h1 class="header">
Hello Font Family
</h1>font-style
Adından da anlaşılacağı üzere, kullandığımız bir metnin yazı tipi stilini belirtir.
Şimdi font-style özelliğini bir örnekle inceleyelim.
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
<p class="normal">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="italic">Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="oblique">Lorem ipsum
dolor sit amet. consectetur
adipiscing elit
</p>Tebrikler
Tebrikler 🎉
Bu bölümde en sık kullanılan CSS özelliklerini öğrendik.
Bir sonraki bölümde CSS Margin konusunu öğreneceğiz.
Sıkça Sorulan Sorular
“En çok kullanılan CSS özellikleri” dersi ücretsiz mi?
Evet — “En çok kullanılan CSS özellikleri” 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.
“En çok kullanılan CSS özellikleri” dersinde ne öğreneceğim?
En çok kullanılan CSS özellikleri 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.
“En çok kullanılan CSS özellikleri” 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.