CSS Nasıl Kullanılır?
CSS Tanımlama Yöntemleri:
CSS, web sayfalarına eklenen HTML dosyaları içinde veya ayrı bir CSS dosyası aracılığıyla tanımlanabilir.
İç CSS (Internal CSS): Bir HTML belgesinin <head> bölümünde <style> etiketi kullanılarak tanımlanır.
Harici CSS (External CSS): CSS kuralları ayrı bir .css dosyasında tanımlanır ve HTML belgesine <link> elementiyle bağlanır.
styles.css:
index.html:
html
Kodu kopyala
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Kullanımı</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Merhaba, CSS!</h1>
<p>Bu bir paragraf örneğidir.</p>
</body>
</html>
css
Kodu kopyala
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
text-align: center;
}
html
Kodu kopyala
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Kullanımı</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>Merhaba, CSS!</h1>
<p>Bu bir paragraf örneğidir.</p>
</body>
</html>
CSS Kuralları ve Seçiciler:
Seçiciler (Selectors): CSS kuralları, HTML elementlerini hedeflemek için seçiciler kullanır. Örneğin, body, h1, .class-adı, #id-adı gibi seçiciler kullanılabilir.
Özellikler (Properties): Her seçici için belirli özellikler tanımlanır. Örneğin, color, font-size, background-color gibi özellikler.
Değerler (Values): Her özelliğe bir veya daha fazla değer atanabilir. Örneğin, renk için isim (blue, red gibi) veya RGB değeri (#RRGGBB gibi) kullanılabilir.
CSS Örnekleri:
css
Kodu kopyala
/* Seçici ve kurallar */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
}
Temel İlkeler ve İpucular:
Cascading (Üstünlük): CSS kuralları, belirli öncelik kurallarına göre uygulanır. Örneğin, harici CSS içeriği, iç CSS'den önceliklidir.
Inheritance (Miras): Bazı CSS özellikleri, bir elementin içerdiği diğer elementlere otomatik olarak miras olarak geçer. Örneğin, bir <div> elementinin içindeki <p> elementleri genellikle <div>'in özelliklerini miras alır.
CSS Öğrenme ve Geliştirme: CSS öğrenirken deneme yanılma yöntemini kullanarak pratik yapmak önemlidir. Ayrıca, CSS kılavuzları ve çevrimiçi kaynaklar, özellikle temel seçiciler, özellikler ve değerler hakkında bilgi edinmek için faydalıdır.
CSS, web tasarımında esneklik ve görsel çekicilik sağlar. Doğru bir şekilde kullanıldığında, web sayfalarınızın estetik ve kullanılabilirliğini artırabilir.