Yazar: suat 1 Mayıs 2024
CSS (Cascading Style Sheets), web sitelerinin görünümünü ve düzenini belirlemek için kullanılan bir stildir. HTML’in yapısını ve içeriğini görsel olarak nasıl sunulacağını tanımlar. CSS, web sitelerinin renkleri, yazı tipleri, boyutları, düzenleri ve diğer görsel özellikleri gibi birçok görsel özelliğini kontrol etmek için kullanılır. İşte CSS’nin nasıl kullanıldığına dair genel bir bakış:
<style> etiketleri arasında veya harici bir CSS dosyasında tanımlanır. Web sitesinin HTML kodunda, <head> bölümünde veya harici bir CSS dosyası içinde <link> etiketi kullanılarak CSS dosyası tanımlanır.Örnek bir iç CSS tanımı:
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
</style>
</head>Örnek bir harici CSS dosyası tanımı:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>Örnek bir CSS kuralı:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}Bu kural, <body> etiketi içindeki metnin Arial veya benzer bir sans-serif yazı tipiyle ve açık gri bir arka plan rengiyle görüntülenmesini sağlar.
Örnek bir CSS kuralı:
h1 {
color: blue;
font-size: 24px;
margin-bottom: 20px;
}Bu kural, <h1> başlıklarının mavi renkte, 24 piksel boyutunda ve alt kısmında 20 piksellik bir boşlukla görüntülenmesini sağlar.
Örnek bir seçici:
p.intro {
font-style: italic;
}Bu seçici, class="intro" özniteliğine sahip <p> öğelerini hedefler ve bunların içeriğini italik yapar.
CSS’nin bu temel kullanımı, web sitelerinin görünümünü ve düzenini belirlemek için kullanılır. CSS kullanarak web sitelerini daha estetik, düzenli ve kullanıcı dostu hale getirebilirsiniz.CSS (Cascading Style Sheets), web sitelerinin görünümünü ve düzenini belirlemek için kullanılan bir stildir. HTML’in yapısını ve içeriğini görsel olarak nasıl sunulacağını tanımlar. CSS, web sitelerinin renkleri, yazı tipleri, boyutları, düzenleri ve diğer görsel özellikleri gibi birçok görsel özelliğini kontrol etmek için kullanılır. İşte CSS’nin nasıl kullanıldığına dair genel bir bakış: 1. **CSS Kodunu Tanımlama**: CSS kodu, `<style>` etiketleri arasında veya harici bir CSS dosyasında tanımlanır. Web sitesinin HTML kodunda, `<head>` bölümünde veya harici bir CSS dosyası içinde `<link>` etiketi kullanılarak CSS dosyası tanımlanır. Örnek bir iç CSS tanımı: “`html <head> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; } h1 { color: blue; } </style> </head> “` Örnek bir harici CSS dosyası tanımı: “`html <head> <link rel=”stylesheet” type=”text/css” href=”styles.css”> </head> “` 2. **CSS Kurallarını Tanımlama**: CSS, belirli HTML öğelerine veya sınıflara uygulanan kuralları içerir. Her bir CSS kuralı, bir özellik ve değer çiftinden oluşur. Örnek bir CSS kuralı: “`css body { font-family: Arial, sans-serif; background-color: #f0f0f0; } “` Bu kural, `<body>` etiketi içindeki metnin Arial veya benzer bir sans-serif yazı tipiyle ve açık gri bir arka plan rengiyle görüntülenmesini sağlar. 3. **Stil Özelliklerini Belirleme**: CSS ile belirli HTML öğeleri veya sınıflar için bir dizi stil özelliği belirlenebilir. Örneğin, yazı tipi, renk, arka plan, kenarlık, boyut ve hizalama gibi birçok stil özelliği tanımlanabilir. Örnek bir CSS kuralı: “`css h1 { color: blue; font-size: 24px; margin-bottom: 20px; } “` Bu kural, `<h1>` başlıklarının mavi renkte, 24 piksel boyutunda ve alt kısmında 20 piksellik bir boşlukla görüntülenmesini sağlar. 4. **Seçicileri Kullanma**: CSS’de, belirli HTML öğelerini veya sınıfları hedeflemek için seçiciler kullanılır. Seçiciler, stil özelliklerini belirlemek için belirli HTML öğelerine veya sınıflara uygulanır. Örnek bir seçici: “`css p.intro { font-style: italic; } “` Bu seçici, `class=”intro”` özniteliğine sahip `<p>` öğelerini hedefler ve bunların içeriğini italik yapar. 5. **CSS Kaskadı**: CSS, kaskad (cascade) adı verilen bir özelliğe sahiptir, bu da bir HTML öğesi için birden çok stil kuralı tanımlanırsa, bu kuralın öncelik sırasını belirler. Öncelikle en son tanımlanan stil kuralı uygulanır. CSS’nin bu temel kullanımı, web sitelerinin görünümünü ve düzenini belirlemek için kullanılır. CSS kullanarak web sitelerini daha estetik, düzenli ve kullanıcı dostu hale getirebilirsiniz.