Hizmetlerimiz hakkında bilgi almak için tıklayın.
Merhabalar! 8. HTML Dersine Hoşgeldiniz!
Günümüzde web siteleri, birçok kişi için önemli bir gelir kaynağı olmaktadır. Web siteleri, kullanıcıların ihtiyaçlarına göre tasarlanır ve bu tasarımın en önemli öğelerinden biri de CSS'dir. CSS (Cascading Style Sheets), HTML sayfalarının görüntüsünü ve düzenini kontrol etmek için kullanılan bir web teknolojisidir. Bu makalede, HTML'de CSS kullanımı ve örnekleri incelenecektir.
HTML'de CSS Kullanımı:
HTML, web sayfalarının yapısal bölümlerini tanımlamak için kullanılırken CSS, aynı web sayfasındaki HTML öğelerinin görüntüsünü ve stiline uygun olarak düzenlemek ve tasarlamak için kullanılır. CSS, HTML'den ayrı bir dosyada yazılır ve HTML sayfalarına dahil edilir.
İpucu: CSS çok fazla iş tasarrufu sağlar. Aynı anda birden fazla web sayfasının düzenini kontrol edebilir.
HTML Dersleri
CSS Nedir?
Cascading Style Sheets (CSS), bir web sayfasının düzenini biçimlendirmek için kullanılır.
CSS ile rengi, yazı tipini, metnin boyutunu, öğeler arasındaki boşluğu, öğelerin nasıl konumlandırıldığını ve düzenlendiğini, hangi arka plan resimlerinin veya arka plan renklerinin kullanılacağını, farklı cihazlar ve ekran boyutları için farklı görüntüleri ve daha fazla!
CSS İle ilgili daha fazla bilgi için tıklayın.
İpucu: Cascading kelimesi, bir üst öğeye uygulanan bir stilin, üst öğe içindeki tüm alt öğelere de uygulanacağı anlamına gelir. Bu nedenle, gövde metninin rengini "mavi" olarak ayarlarsanız, gövde içindeki tüm başlıklar, paragraflar ve diğer metin öğeleri de aynı rengi alır (başka bir şey belirtmediğiniz sürece)!
CSS Kullanımı
->Satır içi - HTML öğelerinin içindeki style niteliğini kullanarak
->Dahili - <head> bölümünde bir <style> öğesi kullanarak
->Harici - harici bir CSS dosyasına bağlanmak için bir <link> öğesi kullanılarak
CSS eklemenin en yaygın yolu, stilleri harici CSS dosyalarında tutmaktır. Bununla birlikte, bu eğitimde satır içi ve dahili stilleri kullanacağız çünkü bunu göstermek daha kolay ve sizin için denemeniz daha kolay.
Satır içi CSS
HTML kodu içinde stil özelliklerinin tanımlandığı bir yöntemdir. Bu tür CSS, sadece HTML etiketleriyle birlikte kullanılır ve sayfanın belirli bir bölümünde kullanılabilir. Satır içi CSS kullanımı, küçük düzeltmeler yapmak için idealdir ama büyük ölçekli web siteleri için uygun değildir.
Tek bir HTML öğesine benzersiz bir stil uygulamak için satır içi bir CSS kullanılır.
Satır içi CSS, bir HTML öğesinin style özelliğini kullanır.
Aşağıdaki örnek, <h1> öğesinin metin rengini kırmızı ve <p> öğesinin metin rengini yeşil olarak ayarlar:
Örnek:
<h1 style="color:red;">Bir kırmızı başlık.</h1>
<p style="color:green;">Yeşil bir paragraf.</p>
Görünüm:
Bir kırmızı başlık.
Yeşil bir paragraf.
Dahili CSS
HTML kodları arasında kullanılan bir stil levhasıdır. Bu tür CSS, sayfanın herhangi bir yerinde kullanılabilir ve birkaç farklı stil öğesini kapsayabilir. Dahili CSS kullanımı, küçük ölçekli web siteleri için idealdir.
Tek bir HTML sayfası için bir stil tanımlamak üzere dahili bir CSS kullanılır.
Dahili bir CSS, bir HTML sayfasının <head> bölümünde, bir <style> öğesi içinde tanımlanır.
Aşağıdaki örnek, (o sayfadaki) TÜM <h1> öğelerinin metin rengini yeşil olarak ve TÜM <p> öğelerinin metin rengini kırmızı olarak ayarlar. Ek olarak, sayfa "pembe" arka plan rengiyle görüntülenecektir:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: pink;}
h1 {color: green;}
p {color: red;}
</style>
</head>
<body>
<h1>Bu bir başlık</h1>
<p>Bu bir paragraf.</p>
</body>
</html>
Görünüm:
Bu bir başlık
Bu bir paragraf.
Harici CSS
Harici CSS, bir stil levhası dosyası olarak kaydedilir ve HTML kodu içinde çağrılır. Bu tür CSS, sayfaların tamamında veya birden fazla sayfada kullanılabilir. Harici CSS kullanımı, büyük ölçekli web siteleri için idealdir, çünkü web sitesinin tüm görünümünü değiştirmesi kolaydır.
Harici bir stil sayfası kullanmak için her HTML sayfasının <head> bölümüne bir bağlantı ekleyin:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Bu bir başlık</h1>
<p>Bu bir paragraf.</p>
</body>
</html>
İpucu: styles.css dosyasının bulunduğu konumu ayarlamayı unutmayın. Yukarıda bulunan örnekte bulunan styles.css dosyası index.html dosyasıyla aynı yerdedir.
Eğer bir css klasörünün içerisinde almak istersek css/styles.css olarak değiştirmeliyiz.
Harici stil sayfası herhangi bir metin düzenleyicide yazılabilir. Dosya herhangi bir HTML kodu içermemeli ve .css uzantısıyla kaydedilmelidir. "styles.css" dosyası şöyle görünür:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
