4. SEÇİCİLER
Seçiciler(Selectors) bize oluşturduğumuz <h1>,
<h2> ... gibi etiketlerin mevuct özelliklerini aynı bırakarak onlara yeni
özellikler ekleme olanağı verdiği gibi istediğimiz bir kelimeye style
özellikleri atayıp istediğimiz zaman çağırmamızı da sağlarlar. İki çeşit seçici
öğreneceğiz: Id seçicisi ve sınıf
seçicisi.
- Id Selectors(Id Seçicileri)
Sınıf seçicileri head bölümünde
tanımlanırlar. Seçicinin keyfi isminin başına Sharp(#) işareti konur,
ve takip eden köşeli parantezlerin arasına stil özellikleri yazılır.
<html>
<head>
<title>Id
seçicileri</title>
<METAcontent=text/html;CHARSET=iso-8859-9
http-equiv=Content-Type>
<style
type="text/css">
<!--
#idSecici
{
background:teal;
color:white;
font-weight:bold;
font-family:arial;
}
-->
</style>
</head>
<body>
<div
id=idSecici>Deneme</div>
</body>
</html> |
Class Selectors(Sınıf Seçicileri)
Orneğin bir <h1> etikti tanımladınız, fakat sayfanın bazı yerlerinde bu etiketin
'color' parametresinin değeri 'red' olsun, fakat geri kalanlar aynı kalsın istiyorsunuz.
Bunu sınıf seçicileriyle yapabilirsiniz.
<html>
<head>
<title>Sınıf
seçicileri</title>
<METAcontent=text/html;CHARSET=iso-8859-9
http-equiv=Content-Type>
<style
type="text/css">
<!--
h1
{
background:teal;
color:white;
font-weight:bold;
font-family:arial;
}
h1.kirmizi{color:red}
-->
</style>
</head>
<body>
<h1>Deneme</h1>
<h1
class="kirmizi">Deneme</h1>
</body>
</html> |
Sınıf seçicileri genel olarak da tanımlanabilirler
<html>
<head>
<title>Genel
Sınıf seçicileri</title>
<METAcontent=text/html;CHARSET=iso-8859-9
http-equiv=Content-Type>
<style
type="text/css">
<!--
.kirmizi{color:red}
-->
</style>
</head>
<body>
<h1>Deneme</h1>
<h1
class="kirmizi">Deneme</h1>
<h2
class="kirmizi">Deneme</h1>
</body>
</html> |
