22.10.2015 ,
2 yorum ,
3.105 kez okundu.
CSS3 selectors yani seçiciler ve css3 ile ilgili diğer konuları zamanım oldukca paylaşmaya karar verdim. Hem kendim için bir tekrar olur hem de burada dursun lazım olanlar olur faydalansınlar diye düşündüm. Basit konular belki ama yeni başlayanların ihtiyacı olduğu kesin. Bu yazımda temel olarak css3`te hangi seçiciler var ve nasıl kullanılır bundan bahsetmeye çalışacağım. Temel olarak seçiciler HTML elemanına ya da elemanlarına özelliklerin uygulanması için kullanılır. Bu zaman seçici HTML elemanının adını veya anahtar sözcük barındırır. Daha detaylı aşağıdaki örneklerde anlayacaksınız.
Seçicileri türlerine göre başlıklar halinde anlatacağım.
Type selectors
Type selectors seçiciler seçici ismi olarak HTML etiketlerinin isimleri kullanılarak oluşturulur.
Örneğin:
<style type="text/css">
body
{
font-size:16px;
padding:0px;
margin:10px;
background-color:#FF0000;
}
div
{
float:left;
padding:15px;
margin:5px;
border:1px solid #CCCCCC;
}
</style>Yukarıdaki örnekte kullanılan seçici isimleri (body, div) HTML etiketleridir. Yani burada div, span, footer, header, strong, aside, section ve s. gibi HTML etiketleri yazılabilir.
Universal selector (*)
Evrensel seçici sayfa içerisindeki tüm elemanlara veya bir eleman içerisindeki diğer tüm elemanlara css tanımlamaları yapmak için kullanılır. Evrensel seçici yıldız (*) karakteri kullanılarak oluşturulur.
Örneğin:
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
</style>Burada sayfa içerisindeki tüm elemanlara uygulanacak css tanımlamaları kullanılmıştır. Evrensel seçicinin bir diğer kullanım şekli aşağıdaki gibidir:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style type="text/css">
div *
{
color:#DF282B;
}
</style>
<body>
<div>
<h1>Evrensel <em>seçici</em> nasıl kullanılır?</h1>
<p>Evrensel <em>seçici</em> nasıl kullanılır?</p>
<ul>
<li>Evrensel <em>seçici</em> nasıl kullanılır?</li>
<li>Evrensel <em>seçici</em> nasıl kullanılır?</li>
</ul>
<em>Evrensel</em> seçici nasıl kullanılır?
</div>
</body>
</html>Yukarıdaki gibi kullandığımızda ise div içerisindeki tüm elemanlara css tanımlamaları etki eder.
Diğer seçici türlerine bir sonrakı yazımda devam edeceğim.
kaynak: w3 selectors
