CSS (Cascading Style Sheets) kullanarak web sayfalarını biçimlendirmek, HTML belgelerinin görünümünü ve düzenini kontrol etmenin en yaygın yollarından biridir. CSS ile, bir web sayfasındaki belirli öğelerin nasıl görüneceğini, nerede konumlanacağını ve hatta görünür olup olmayacağını belirleyebilirsiniz. Bu yazıda, .page .entry-title { display: none; } kodunun ne yaptığına ve nasıl kullanıldığına detaylı bir şekilde bakacağız.
display ÖzelliğiCSS’de seçiciler, hangi HTML öğelerinin stil kurallarından etkileneceğini belirler. Örneğin:
.page sınıfı, class="page" özniteliğine sahip herhangi bir HTML öğesini hedef alır..entry-title sınıfı, class="entry-title" özniteliğine sahip herhangi bir HTML öğesini hedef alır.Birlikte kullanıldıklarında, .page .entry-title seçici, .page sınıfına sahip bir öğe içindeki .entry-title sınıfına sahip öğeleri hedefler.
display ÖzelliğiCSS’nin display özelliği, bir HTML öğesinin nasıl görüntüleneceğini kontrol eder. Bu özellik için birçok değer vardır, ancak bu yazıda odaklanacağımız değer none:
display: none; değeri, hedeflenen öğeyi tamamen gizler. Bu, öğenin DOM (Document Object Model) içinde var olmaya devam ettiği, ancak kullanıcı tarafından görülemediği anlamına gelir..page .entry-title { display: none; }Bu kod parçası, .page sınıfına sahip bir öğe içindeki tüm .entry-title sınıfına sahip öğeleri gizler. İşte bu kodun işleyişi ve ne işe yaradığı hakkında detaylı açıklama:
.page .entry-title seçici, .page sınıfına sahip bir öğe içindeki .entry-title sınıfına sahip öğeleri hedefler. Bu, sadece .entry-title sınıfına sahip öğelerin hepsini değil, yalnızca .page sınıfı içinde bulunanları etkiler.display: none; özelliği, bu seçiciyle hedeflenen öğelerin tamamen gizlenmesini sağlar. Bu öğeler, DOM içinde var olmaya devam eder, ancak tarayıcı bu öğeleri render etmez, yani kullanıcı bu öğeleri görmez.Bu tür bir stil kuralı, özellikle aşağıdaki durumlarda kullanışlı olabilir:
Bir örnekle açıklayalım:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display None Example</title>
<style>
.page .entry-title {
display: none;
}
</style>
</head>
<body class="page">
<header>
<h1 class="entry-title">Welcome to My Blog</h1>
</header>
<article class="post">
<h2 class="entry-title">First Blog Post</h2>
<p>This is the content of the first blog post.</p>
</article>
<article class="post">
<h2 class="entry-title">Second Blog Post</h2>
<p>This is the content of the second blog post.</p>
</article>
</body>
</html>
Bu örnekte, .page sınıfına sahip body öğesi içindeki tüm .entry-title başlıkları gizlenecektir. Sonuç olarak, tarayıcıda hiçbir başlık görüntülenmeyecektir.
.page .entry-title { display: none; } kodu, CSS kullanarak belirli öğeleri hedef alıp gizlemenin basit ve etkili bir yoludur. Bu, web sayfalarınızı daha düzenli ve kullanıcı dostu hale getirmek için güçlü bir araçtır. Özellikle karmaşık web projelerinde, gereksiz veya tekrarlayan bilgileri gizlemek ve kullanıcı deneyimini optimize etmek için bu tür CSS kurallarını kullanabilirsiniz.