CSS seçiciler ve kullanımları

7 Mart 2012 Çarşamba, 20:37 sularında İzni Burak Demirtaş tarafından #web konularında yazılmış.
Yazıldığından bu yana, 7580 kez okunmuş ve 0 yorum almış.

Merhabalar. Bugün CSS seçicileri ile ilgileneceğiz. Bildiğiniz gibi CSS, HTML sayfalar için metin, format ve nesne biçimlendirmek için bizlere fazlaca olanak sağlayan bir web teknolojisidir. CSS hakkında bilgi için burayı ziyaret edebilirsiniz.

CSS için temel olarak üç seçici vardır. Bunlar id seçici, sınıf seçici ve tag seçicidir. Ek olarak hiyerarşik yapılarda (iç içe kullanılan HTML kodları için yazılan CSS kodları) değişik seçici metodları kullanılıyor. Şimdi bunları inceleyelim:


ID Seçiciler

Oluşturduğumuz web sayfalarında kullandığımız nesneler (DOM Elemanları) id değerlerine sahiptirler ve bu değer sadece o nesneye aittir. ID değerlerini kullanarak HTML sayfalarda kullandığımız elemanları birbirinden ayırabiliriz. ID özelliği sadece kullanıldığı nesneye ait olduğu için yapılan değişiklikler ve etkileşimler bir tek o nesneyi etkiliyor. (Burdaki etkişelimlerin CSS veya Javascript ile olduğu düşünülebilir.) CSS kodlarında istediğimiz ID değerine sahip elemanı seçebilmek için # (diyez) işaretini kullanacağız. Örnek verecek olursak:

<style type="text/css">
#element { font-size: 14px; font-family: Tahoma; color: #FF0000; }
</style>

Bu CSS kodlarına göre HTML kodumuzu oluşturalım:

<div id="alan">Font büyüklüğü:14px - Font Türü: Tahoma - Renk: Kırmızı</div>


SINIF Seçiciler

Sınıf seçiciler, oluşturulan stilin HTML sayfasında bir veya birden fazla elemana etki etmesi ve birden fazla stilin uygulanabilmesi durumunda kullanılan bir türdür. ID seçicinin aksine, Sınıf seçiciler birden fazla elemanı etkileyebilir. Bir örnek verecek olursak:

<style type="text/css">
.alan { background-color:#FF0000; }
.renk { background-color:#0000FF; }
</style>

CSS kodlarımıza göre HTML kodlarımızı oluşturalım:

<div class="alan">
<span class="renk">Burak</span>
</div>
<p class="alan">
<span class="renk">Burak</span>
</p>

Burada göreceğimiz üzere, div ve p taglarımıza alan stil sınıfı verdik. Böylece bu elemanlarımız alan sınıfının özelliklerini taşımaya başladı. Alan sınıfındaki nitelikleri değiştirdiğimizde, bu değişiklikler iki elemanıda etkileyecek.


TAG Seçiciler

Tag seçiciler, HTML sayfamızda kullandığımız aynı türden tüm elemanları seçmek için kullanılır. CSS tanımlaması yaparken, TAG ismi ile nitelik belirttiğimiz için, yapılan değişiklikler aynı TAG a sahip tüm elemanları etkiler. Örnek verecek olursak:

<style type="text/css">
div { background-color: #FF0000; }
p { background-color: #00FF00; }
span { background-color: #0000FF; }
</style>

CSS kodlarımıza göre, HTML kodlarımızı oluşturalım:

<div>
<p>
 <span>Birinci Yazı</span><br />
 <span>İkinci Yazı</span><br />
 <span>Üçüncü Yazı</span>
</p>
</div>
<p>
<div>Örnek Yazı</div>
</p>

Aynı türden elemanlar stilde belirtilen özellikleri bize yansıtacaklar. TAG ismine göre stil belirlediğimizde, sayfamızda kullandığımız TAG'ların hepsi, belirttiğimiz özellikleri alacak.

Bir sonraki yazımda, Üst Düzey CSS Seçicilerini inceleyeceğiz. (Kardeş, Çocuk, Torun, Özellik ve Evrensel Seçiciler) Tekrar görüşmek dileğiyle..


Yorumunu Gönder     Sende görüşünü yaz!

Hiç yorum yapılmamış.   İlk yorumu sen yap!

laravel: concurrent request

In Laravel, you can make concurrent request by using pool method of the HTTP Client of the Laravel....

23 Nisan 2022 — #php #hap bilgi Yorum yok. Devamı »

laravel: extend any service from container

Laravel has a very powerful and useful Service Container and you can extend any service from the Laravel Container any time. For that, you can use the extend() method to decorate or configure the resolve services from the container. ...

17 Nisan 2022 — #php #hap bilgi Yorum yok. Devamı »

laravel: using eager loading with models

We use models a lot when developing projects with Laravel. By defining the relationships between the tables within the models, we ensure that the relevant data is brought over the database in a practical way. We can take advantage of the Eager Loading feature to increase performance and get faster results when performing operations with related models. For this, we can use the with() method when creating a query from the related models:
...

14 Nisan 2022 — #php #hap bilgi Yorum yok. Devamı »

laravel: faker ile resim oluşturmak

Bildiğiniz gibi Laravel ile geliştirme yaparken modellerimize uygun şekilde fake veriler oluşturmak için Faker kütüphanesi ile fazlaca haşır neşir oluyoruz. Genellikle text veriler oluştursak da, Faker kütüphanesinin resim oluşturmak gibi yetenekleri de var:...

13 Nisan 2022 — #php #hap bilgi Yorum yok. Devamı »

Laravel'de zamanlanmış görev (scheduled task) tanımlarken, çalışan komutun tamamlanıp tamamlanmadığını anlamak ve buna göre başka işlemler yapmak istiyorsanız şu şekilde bir yapı kullanabilirsiniz:

12 Nisan 2022 — #php #hap bilgi Yorum yok. Devamı »

PHP 8.1 - yeniliklere hızlı bakış

PHP 8.1, 25 Kasım 2021 tarihinde yayınlandı. Bu sürümde hayatımıza neler girdi, ne gibi değişiklikler yapıldı birlikte inceleyelim mi?...

13 Aralık 2021 — #php Yorum yok. Devamı »

PHP 8'e Hızlı Bakış

Merhabalar. PHP 8 ile birlikte hayatımıza neler gelecek, neler değişecek birlikte göz atmaya var mısınız? Haydi başlayalım o zaman…
...

15 Haziran 2020 — #php Yorum yok. Devamı »

Selamlar. Ramazan ayının ve sahuru beklemek bahanesiyle gece geç saatlere kadar takılmanın vermiş olduğu yetkiye dayanarak yine bazı projeler üzerine çalışıyor, bazı araştırmalar yapıyor ve müzik dinliyordum. Ve birden "uzun zamandır bir şeyler karalamıyorum ben ya" diye bir düşünce geçti beynimin derinliklerinden. Hemen buraya geldim....

11 Mayıs 2020 — #genel Yorum yok. Devamı »

React Hooks: useState - useLayoutState

React’in 16.8 versiyonu ile birlikte hayatımıza Hook kavramı girdi. Artık çok daha az kod ile daha efektif React Componentleri yazabiliyoruz. Hooks konusu ile ilgili detaylı bilgiyi React’in kendi dokümantasyonundan okuyabilir, bilgi sahibi olabilirsiniz....

18 Şubat 2020 — #web 1 yorum var. Devamı »

PHP 7.4'e Hızlı Bakış

PHP 7.4 ile birlikte hayatımıza girecek olan özelliklere şöyle hızlıca bir bakış atmaya ne dersiniz?
...

5 Eylül 2019 — #php Yorum yok. Devamı »

React ile High Order Component (HOC) kullanımı

React ile High Order Component kavramını sizlere anlatmaya çalışacağım....

17 Ağustos 2019 — #web Yorum yok. Devamı »

Selamlar, oldukça uzun bir zaman sonra tekrar buralardayım. Dolu dolu geldim ama; biraz oturun, konuşalım....

16 Şubat 2019 — #genel Yorum yok. Devamı »

Yine aylar olmuş ve buralarda gözükmüyorum. Ne zaman "buralara daha çok vakit ayıracağım, bol bol yazacağım" desem, kesin başka bir şeyler çıkıyor; işler, güçler, yoğunluklar vs, odaklanamıyorum. Öyle ya da böyle bunu bir düzene oturtacağım. inatçıyım bu konuda....

8 Temmuz 2018 — #genel Yorum yok. Devamı »

Buraları yine oldukça aksatmış olmanın verdiği iç rahatsızlığı ile, geçen haftadan beri bir şeyler karalamaya olan isteğim ancak şu an vuku buluyor. Geçen hafta oldukça yoğun ve hareketli geçtiği için yazmaya vakit bulamadım aslında. Ya da ne bileyim, belki de bahane buluyorum......

27 Şubat 2018 — #genel 2 yorum var. Devamı »

Gidelim buradan...

"Gidelim buradan... Göğsünü sıkan, içini daraltan o laneti geride bırakıp gidelim. Burada yağmur bile güzel yağmıyor artık. Yağmuru güzel yağan bir yerlere gidelim....

5 Ocak 2018 — #karalamaca Yorum yok. Devamı »

$_2018 = new HappyYear();

Zamanın ne denli hızlı aktığını bilmiyorum ama, gerçekten "su gibi" akıp geçiyor deyimi doğru galiba. Ne ara 2018 geldi, kapımıza dayandı; hiç bir fikrim yok. Oysa ben daha tarih yazmak zorunda olduğum kağıtlara "2017" yazmaya bile alışmamıştım. Şimdi bir de 2018 çıktı başımıza. ...

31 Aralık 2017 — #genel Yorum yok. Devamı »
daha fazla göster