CSS Hakkında Kısaca Bilgi
Html etiketlerinin görünümünü değiştirirler.
Kendine özel gramer yapısı vardır.
Tarayıcılara göre farklılık gösteren durumlarda css kodları ile her tarayıcıda görünümğn aynı siteler yapılmasını sağlar.
Tarayıcı odaklı çalışmaktadır.
Gramer Yapısı Ve Selektörler
HTML:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Gramer Yapısı Ve Selektörler</title>
<style>
p {
color:#ffd800;
}
#pEtiketi {
font-size:20px;
}
.fontFamily {
font-family:'Segoe UI';
}
.arkaPlan {
background-color:#4cff00;
}
</style>
</head>
<body>
<p id="pEtiketi" class="fontFamily arkaPlan" style="color:#ff0000;">CSS Eğitim</p>
<h1 class="arkaPlan">h1 etketi</h1>
</body>
</html>Css kodlarımızı <style> ve <head> etiketleri içerisine yazabiliriz.
<style> etiketlerimizi yazdık ve birde <p> etiketi oluşturduk.
Şimdi ise <style> etiketleri arasına
p{
}
kodunu ekliyoruz bu kod bizim selektörümüz.
Selektör, HTML sayfasında bulunan herhangi bir elementi seçerek özelliklerini değiştirmemize olanak sunar. Örnek olarak bir yazı metninin büyüklüğünü, rengini ve fontunu değiştirmek olarak söylebiliriz.
<style> arasına yazdığımız etiketler selektör olarak ifade edilir.
p {
colour:#2A8B55;
}
Şimdi de id etiketinin kullanımına bakalım.
Örnek olarak bir p etiketi kullandığımızda HTML sayfası içerisindeki tüm p etiketlerine ulaşmış oluruz.
Bu durum ne anlama gelmekte 20px olarak kullanmak için bir p etiketi oluşturduğumuzda bu büyüklük tüm p etiketleri için geçerli olmuş olur ve sayfa yapısını bozabilir. Burada devreye id etiketimiz girmekte, yukarıda da yazdığımız gibi
<p id="pEtiketi"CSS Eğitim</p>
Şimdide <style> etiketi içerisinde kullanımına bakalım.
#pEtiketi {
font-size:20px;
}
Bu şekilde birden fazla p etiketimiz var ise id kullanarak etiketimize özel değerler arayabiliriz.
Arka Plan Görünümleri
HTML:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Arka Plan Görünümleri</title>
<style>
body {
/*background-image:url(https://img.freepik.com/free-vector/green-curve-frame-template-vector_53876-144370.jpg?t=st=1658671472~exp=1658672072~hmac=86c272d167ba8de68590e2618e37859f75c92595e830e7db4c69fb8873b4c6dc&w=740);*/
/*background-repeat:no-repeat;*/
background-color:#808080;
}
</style>
</head>
<body>
<div style="background-position:center; background-image:url(https://img.freepik.com/free-vector/green-curve-frame-template-vector_53876-144370.jpg?t=st=1658671472~exp=1658672072~hmac=86c272d167ba8de68590e2618e37859f75c92595e830e7db4c69fb8873b4c6dc&w=740);height:200px; width:200px;"></div>
<!--background-color
background-image
background-repeat
background-position-->
</body>
</html>Websiteme bir arka plan atamak istiyorum bunun için <style> etiketlerimiz arasına
body{
background-image:url(https://img.freepik.com/free-vector...7859f75c92595e830e7db4c69fb8873b4c6dc&w=740);
}
Burada background-image:url ile kullanacağımız resmin yolunu belirtiyoruz.
background-repeat:no-repeat; Bu kodu arka plan görselimizin tekrarlanmasını engellemek için kullanacağız.
background-color:#808080; İle arka planın rengini değiştiriyoruz.
Birde arka planın konumu ayarlayalım,
background-position:center;
Yukarıdaki kodumuz ile de arka planı merkezde kullanabiliriz. Görselinizin şekline göre lef,right gibi pozisyonlarda kullanabilirsiniz.
Bu komutumuzu kullanabilmek için,
background-repeat:no-repeat;
satırımızı /*, */ işaretleri ile kapatmamız gerekmektedir.
/*background-repeat:no-repeat;*/
Arka planda belirli kısımları kullanmak için <div> etiketini kullanıyoruz.
<body>
<div style="background-position:center; background-image:url(https://img.freepik.com/free-vector...e830e7db4c69fb8873b4c6dc&w=740);height:200px; width:200px;"></div>
Bu şekilde height ve with ile resmin ne kadar kırpılacağını belirliyoruz.
Metin Görünümleri Ve Fontlar
HTML:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Metin Görünümleri ve Fontlar</title>
<style>
p{
color:red;
text-align:right;
text-decoration:underline;
text-transform:lowercase;
font-family:'Segoe UI';
font-style:italic;
font-size:22px;
}
</style>
</head>
<body>
<p>P etiketi</p>
<!--Color
Alignment
Decoration
Transformation
Font Family
Font Style-->
</body>
</html>Bir <p> etiketi oluşturalım,
<p>P etiketi</p>
Etiketimizi oluşturduk şimdi de <style> kodlarımızı hazırlayalım.
p{
color:green;
text-align:right;
text-decoration:underline;
text-transform:lowercase;
font-family:'Segoe UI';
font-style:italic;
font-size:22px;
}
Kullandığımız kodların açılımını yapalım,
color:green; İle yazının rengini ayarlayabiliriz.
text-align:right; İle yazının pozisyonu belirleyebiliriz left, center gibi komutlarda kullanılabilir.
text-decoration:underline; İle yazının dekorasyonunu belirleyebiliriz bu kodumuzda underline (altı çizgili) özelliğini kullandık.
text-transform:lowercase; İle yazının tamamının büyük veya küçük olmasını sağlarız uppercase:büyük biz burada lowercase ile yazımızı küçülttük.
font-family:'Segoe UI'; İle yazımızın fontunu değiştirebiliriz Google üzerinden de aratarak birden fazla font çeşidine ulaşabilirsiniz.
font-style:italic; İle yazının sitilini belirledik, biz burada italic özelliğini kullandık sizler bold gibi sitilleride kullanabilirsiniz.
font-size:22px; İle yazının boyutunu ayarlayabiliriz.
Listeler
HTML:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Listeler</title>
<style>
li{
list-style:none;
}
ul{
background-color:#ccc;
}
li{
background-color:#eee;
}
</style>
</head>
<body>
<ul>
<li>
Yazılım
<ul>
<li>Css</li>
<li>Html</li>
</ul>
</li>
<li>Yazılım</li>
</ul>
</body>
</html>
Eline sağlık isabet olmuş
