Bu CSS stillerinizin organize edilmesiyle doğrudan ilgili olan tüm yöntemler, sizin stil yönetimine ne kadar dikkat ettiğiniz ile direkt orantılı olarak farklı sonuçlar doğurur; düzenli ve planlı CSS kodlaması ise projenin kalitesi ve sürdürülebilirliğini belirleyen kritik bir unsurdur.
İyi yapılandırılmış bir CSS'in sağladığı temel avantajlar şunlardır:
- Kolay Bakım ve Güncelleme: Kodunuzun bakımını ve gelecekteki güncellemelerini önemli ölçüde kolaylaştırır.
- Esneklik: Bir web sayfasının farklı bölümlerine veya tüm siteye tutarlı stiller uygulama konusunda size büyük esneklik sağlar.
- Okunabilirlik ve Yeniden Kullanılabilirlik: Tasarımınızın kod okunabilirliğini artırır. Aynı stil bloklarını tekrar tekrar yazmak yerine, mevcut sınıfları yeniden kullanarak zamandan kazandırır.
1. Satır içi CSS
Satır içi CSS, stil özniteliğini kullanarak stilleri doğrudan HTML etiketlerinin içine uygulamanıza olanak tanır. Bu yöntem, küçük ölçekli stil oluşturma veya tek bir öğeye benzersiz bir stil uygulamanız gerektiğinde kullanışlıdır.
Kod:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<h2>
Welcome to
<i>
GeeksforGeeks
</i>
</h2>
</body>
</html>2. Dahili CSS
Dahili CSS, CSS stillerini <style> etiketlerinin içine ekleyerek doğrudan HTML dosyasına eklemeyi içerir. Bu yöntem, stilleri tek bir HTML belgesine uygulamak için daha verimlidir ve CSS kodunuzu satır içi stillere kıyasla daha düzenli tutar.
Not: Stillerin gövde içeriği yüklenmeden önce okunmasını sağlamak için <head> bölümüne <style> etiketlerini eklemek en iyisidir.Kod:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
h2 {
color: green;
}
</style>
</head>
<body>
<h2>Welcome to GeeksforGeeks</h2>
</body>
</html>3. Harici CSS
Harici CSS, .css uzantılı ayrı bir CSS dosyası oluşturmayı ve bunu <link> etiketini kullanarak HTML dosyasına bağlamayı içerir. Bu yöntem, tasarımı içerikten ayırarak daha iyi kod sürdürülebilirliği ve yeniden kullanılabilirliği sağladığı için büyük projeler için en verimli yöntemdir.
Bu HTM dosyasını CSS'ye bağlayın
htm:
<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Welcome to GeeksforGeeks</h2>
</body>
</html>css:
/* Create a file named styles.css */
h2 {
color: green;
font-size: 20px;
}HTML'de CSS Kullanımına İlişkin En İyi Uygulamalar
1. Satır İçi
Tek tek öğelere uygulanan küçük, benzersiz stiller için idealdir.
Hızlı stil değişiklikleri veya yeni stillerin test edilmesi için kullanışlıdır.
Tek bir öğeyi doğrudan etkiler ve bu nedenle birden fazla öğe için yeniden kullanılamaz.
İçerikte düzen ve kollanabilme açısından HTML kodlarına CSS kuralları eklerken dikkatli olmak, projenin tutarlılığı ve yönetimini kolaylaştıracaktır.
2. Dahili
Sayfadaki birden fazla öğeyi biçimlendirmek için tek bir HTML belgesi içinde tanımlanır.
Yönetimi satır içi CSS'den daha kolaydır ve sayfa için tutarlı stiller sağlar.
Tek sayfalık web siteleri veya benzersiz biçimlendirme ihtiyaçları olan sayfalar için idealdir.
Birden fazla sayfada yeniden kullanılamaz, bu nedenle daha büyük projeler için önerilmez.
3. Harici
Stiller ayrı dosyalarda saklanır ve birden fazla sayfaya uygulanır.
Daha büyük projeler ve çok sayfalı web siteleri için idealdir.
Düzenlenebilirliği, sürdürülebilirliği ve yeniden kullanılabilirliği artırır.
Web sitesi genelinde tutarlı tasarım sağlar ve tarayıcı önbelleği aracılığıyla performansı artırır.
