Belirli bir elementin sayfa içersindeki stilini tanımlamak için elementin adını kullanıyoruz.
<style>
p {
text-align: center;
color: red;
}
</style>
ID Selektörü:
Element selektörü ile tüm sayfa yerine belirli bir elemente özellik atamak istediğimizde “id” seçici kullanabiliriz. ID’ tanımlaması sayfada bir kez benzersiz olarak kullanılmalıdır. İd ismi benzersiz olmalı ve başında harfler kullanılarak oluşturulmalıdır. Benzersiz kullanımlar için "id" ve çoklu kullanım için “class” kullanılmaktadır.
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Merhaba Dünya!</p>
<p>para1 stili bu paragrafı etkileyemez.</p>
</body>
</html>
Class
Selektörü:
CSS
Class selektörü aslında HTML5 class özelliğini kullanılır. Aynı element
içersinde aynı anda birden fazla class kullanılabilir. Bunun için isimlerin
arasına boşluk konulmalıdır.
<!DOCTYPE html>
<html>
<head>
<style>
.ortala{
text-align: center;
}
.kirmizi{
color: red;
}
</style>
</head>
<body>
<h1 class="ortala kirmizi">Kırmızı ve ortalanmış başlık!</h1>
<p class="ortala">Ortalanmış paragraf.</p>
<p>normal paragraf...</p>
<p class="kirmizi">kırmızı paragraf...</p>
</body>
</html>
Grup Selektörü:
h1, h2, p {
text-align: center;
color: red;
}
Kaynakça:
CSS Selectors
<html>
<head>
<style>
.ortala{
text-align: center;
}
.kirmizi{
color: red;
}
</style>
</head>
<body>
<h1 class="ortala kirmizi">Kırmızı ve ortalanmış başlık!</h1>
<p class="ortala">Ortalanmış paragraf.</p>
<p>normal paragraf...</p>
<p class="kirmizi">kırmızı paragraf...</p>
</body>
</html>
Grup Selektörü:
h1, h2, p {
text-align: center;
color: red;
}
Kaynakça:
CSS Selectors
Hiç yorum yok:
Yorum Gönder