5.00 / 1 oy

CSS'te Class Seçicileri ile HTML Elemanlarını Seçmek

CSS ile Html sayfasındaki elemanlara stil yazarken her bir html elemanı için ayrı ayrı ID seçicileri yazmak çok anlamsız olacağı için sınıf (class) seçicileri adında bir html/css ilişkisi hazırlanmıştır. Örneğin mavi sınıfına sahip birden çok html elemanına tek seferde mavi yazı rengi vermek için aşağıdaki gibi bir html/css ikilisi kullanılabilir.

Css içerisinde bir sınıfa ait kodlamaları belirtmek için sınıf adının başına nokta (.) karakteri konur.

<head>
	<meta charset="utf-8">
	<title>CSS Uygulamaları</title>
	
	<style>
		.mavi {color:blue}
	</style>
</head>

<body>
	<p class="mavi">Mavi renkli yazı</p>
</body>

Bir html elemanı birden fazla sınıfa (class) sahip olabilir. Örneğin font kalınlıkları ve renklerine göre aşağıdaki gibi html/css sınıf kodlamaları yapılabilir.

<head>
	<meta charset="utf-8">
	<title>CSS Uygulamaları</title>
	
	<style>
		.mavi {color:blue}
		.kalin {font-weight:bold}
	</style>
</head>

<body>
	<p class="mavi">Yazı 1</p>
	<p class="kalin">Yazı 2</p>
	<p class="mavi kalin">Yazı 3</p>
</body>

Kodlama sonucu ekran görüntüsü:

html css class selector

Kodlarda "mavi kalin" olarak belirtilen sınıf ile (hem mavi sınıfına sahip hem de kalin sınıfına sahip) yazı 3 yazan p etiketinin hem bold hem de mavi renkli olması sağlanmıştır.

BasParmak

04.06.2020 18:14

Bu soru henüz yanıtlanmamış.

Bu soruya sadece kayıtlı kullanıcılar yanıt yazabilirler. Yanıt yazmak için lütfen giriş yapınız.

Reitix
CSS'te Class Seçicileri ile HTML Elemanlarını Seçmek

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.