CSS Seçicileri ve Özellikleri Kullanım Örnekleri

CSS seçicileri, web tasarımında önemli bir role sahiptir Element, ID ve Class seçicileri temel seçiciler olarak kullanılır ve örneklerle öğrenilebilir Üst düzey seçicileri kullanarak, HTML belgelerindeki daha karmaşık yapıdaki elementleri daha spesifik bir şekilde seçebilirsiniz CSS özelliklerini uygulamak için Pseudo ve Attribute seçicileri kullanışlıdır Renk, yazı tipi boyutu, arka plan rengi ve hizalama gibi özellikleri kullanarak elementleri daha görsel olarak tasarlayabilirsiniz CSS seçicilerini bilinçli bir şekilde kullanarak, web sitelerinizi daha etkili ve ilgi çekici hale getirebilirsiniz HTML belgesindeki elementleri seçmek ve özelliklerini uygulamak için CSS seçicilerinin kullanımını öğrenmek, web tasarımında ilerlemek için önemlidir

CSS, web tasarımında kullanılan önemli bir teknolojidir. CSS yazılırken, elementler ve özellikler seçiciler aracılığıyla seçilir ve özellikler uygulanır. Bu makalede, CSS seçicileri ve özellikleri hakkında bilgi edineceksiniz. Temel seçiciler olan Element, ID ve Class seçicileri kullanılarak, örnekler ve kodlarla öğrenin. HTML belgeleriniz daha kompleks bir yapıya sahipse, üst düzey seçicileri kullanarak elementleri daha spesifik bir şekilde seçin ve özellikleri uygulayın. Ayrıca, kombinatoryonel seçicilerin de kullanımı kolay ve etkilidir.

CSS'de, özellik seçicileri geniş bir yelpazeye sahip olup, belirli özelliklere sahip veya belirli bir CSS durumunda olan elementleri seçmek için kullanılır. Attribut ve Pseudo-Element seçicileri ile elementlerin belirli bir özellik değerine sahip olanları seçebilir veya ek bir öğe oluşturup CSS özellikleri ekleyebilirsiniz. CSS özellikleri ise elementleri görsel olarak tasarlayabileceğiniz özelliklerdir. Örneğin, renk, yazı tipi boyutu, arka plan rengi ve öğenin hizalaması gibi.

CSS kullanırken, seçiciler ve özellikler arasındaki bağlantıyı anlamak önemlidir. CSS seçicileri bilinçli bir şekilde kullanıldığında, belgenize istediğiniz görünümü kazandırmanızı sağlar. Bu sayede web siteleriniz daha etkili ve ilgi çekici hale gelebilir.

CSS kullanım örnekleri hakkında daha fazla bilgi edinmek ve bu seçicileri nasıl kullanacağınızı öğrenmek için, yazılım dilleri ve web tasarımı hakkında daha fazla bilgi edinmenizi öneririz. Bu sayede, web sitelerinizi daha profesyonel ve ilgi çekici hale getirebilirsiniz.

1. Temel CSS Seçicileri

CSS tasarımının olmazsa olmazı olan seçiciler sayesinde, HTML elementlerine kolaylıkla tasarım uygulamaları yapabilirsiniz. Bu seçiciler arasında en temel olanları Element, ID ve Class seçicileridir. Element seçicileri, HTML belgesindeki belirli elementleri seçmek için kullanılır. Örneğin, tüm paragrafları seçmek için p elementi kullanılır. ID seçicileri, HTML elementlerine benzersiz bir kimlik atamak için kullanılır ve her element için yalnızca bir ID atanabilir. Class seçicileri ise bir veya daha fazla elemente aynı sınıf atamak için kullanılır.

Örnek olarak, HTML belgenizdeki tüm başlıkları sarı renge dönüştürmek istediğinizi varsayalım. Bunun için, h1, h2, h3, h4, h5, h6 elementlerini seçmeniz gerekecektir. Bu durumda, Element seçicilerinden faydalanarak aşağıdaki kodu kullanabilirsiniz:

h1, h2, h3, h4, h5, h6 {    color: yellow;}

Benzer şekilde, HTML belgenizdeki bir öğenin kimliği belirtilmişse, ID seçicisini kullanarak özellik uygulayabilirsiniz:

#ornekid {    background-color: blue;    color: white;    font-size: 20px;}

Bir öğeye birden fazla sınıf atamak isterseniz, Class seçicileri kullanabilirsiniz:

<div class="renkli buyuk-ekran">Bu öğenin tasarımı değiştirilecek</div>.renkli {    color: red;}.buyuk-ekran {    font-size: 24px;}

Yukarıdaki örnekte, <div> öğesi iki sınıfa atandı: "renkli" ve "buyuk-ekran". "renkli" sınıfı, yazı rengini kırmızıya, "buyuk-ekran" sınıfı ise font boyutunu 24px'e ayarladı.

2. Üst Düzey Seçiciler

HTML belgelerinizin yapısı daha kompleks olduğunda, örneğin birden fazla section ve div kullanıyorsanız, elementleri daha okunaklı ve doğru bir şekilde seçmeniz gerekebilir. İşte bu noktada üst düzey seçiciler kullanışlı hale gelir.

HTML belgenizde birden fazla section veya div kullanıyorsanız, üst düzey seçicileri kullanarak herhangi bir section veya div'i seçebilirsiniz. Aynı zamanda, CSS özellikleri uygulayabilirsiniz. Örneğin:

Kod	Açıklama
section { background-color: yellow; }	HTML belgenizdeki tüm section elementleri, sarı arka plan rengi ile görüntülenir.
.container div { width: 80%; }	HTML belgenizdeki .container class'ına sahip div elementleri, genişlikleri %80 olarak ayarlanır.

Bu örnekler, HTML belgenizde uygun seçicileri kullanarak elementleri daha belirgin bir şekilde seçebileceğinizi gösterir.

Üst düzey seçicileri kullanarak CSS özellikleri uygulamak, HTML belgenizdeki daha karmaşık elementleri değiştirmek için ideal bir yoldur. Bu, büyük projelerde kolay ve verimli bir şekilde çalışabilmenize yardımcı olur.

2.1. Attribut ve Pseudo Seçicileri

CSS'de iki önemli seçici türü vardır: Attribute (Öznitelik) ve Pseudo (Sahte) seçicileri. Attribute seçicileri, elementlerin belirli özelliklere sahip olanlarını seçmek için kullanılır. Özellik değeri, seçici ile belirtilir ve belirtilen değer, özelliğin değerine sahip olan elementleri seçer. Örnek olarak, belirli bir sınıfa sahip olan elementleri seçmek için bu seçici kullanılabilir;

[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]

Pseudo seçicileri ise elementlerin belirli bir CSS durumunda olanlarını seçmek için kullanılır. Bu seçiciler, elementin bir psödo sınıfının durumunu seçerek Belgelerinizin stillerini önceden belirleyen bir belgelerin yapısında olan bir elementi hedeflemenizi sağlar. Örnek olarak, bir elementin açılış durumunu seçmek için aşağıdaki seçiciler kullanılabilir:

:active
:focus
:hover
:link
:visited
::after
::before
::first-letter
::first-line
::selection

Attribute ve Pseudo seçicileri, CSS ile hedeflenen özelliklere göre elementleri seçmenize yardımcı olur. Bu seçiciler, kodun daha az yazılmasını ve belgenin daha kolay okunmasını sağlar. Bu seçicileri etkin bir şekilde kullanarak, belgeniz için istediğiniz stil özelliklerini kolayca ayarlayabilirsiniz.

2.1.1. Attribut Seçicileri

Attribut Seçicileri, elementlerin belirli bir özelliğe sahip olanlarını seçmek için kullanılır. Bu özellik, elementin HTML kodunda belirtilen özelliklerden biridir. Özellik değeri, özelliğin değeridir. Örneğin, bir elementin bir img özelliği olan src'sinin (kaynak) belirli bir değeri varsa, bu değere göre element seçilebilir.

Attribut Seçicileri kullanımı için, seçilecek elementlerin özelliklerine ve değerlerine göre farklı seçici türleri vardır. Burada, seçicilerden bazılarını açıklayacağız:

[attribute] - Belirtilen özellik değeri olan elementleri seçer.
[attribute=value] - Belirli bir özellik değeri olan elementleri seçer.
[attribute^=value] - Belirli bir özellik değeri ile başlayan elementleri seçer.
[attribute$=value] - Belirli bir özellik değeri ile biten elementleri seçer.
[attribute*=value] - Belirli bir özellik değeri içeren elementleri seçer.

Örnek olarak, bir HTML belgesindeki tüm img elementlerini seçmek istiyorsunuz. Bunun için, [src] seçicisini kullanabilirsiniz. Ancak, belirli bir dosya yoluyla ilgili birçok img elementi varsa, [src$=".png"] gibi bir özellik seçicisi kullanarak sadece png dosyalarını seçebilirsiniz.

Kısacası, Attribut Seçicileri, elementlerin belirli bir özellik değerine sahip olanlarını seçmek için kullanılır. Bu seçiciler, HTML elementlerinin özelliklerine göre seçim yapmanızı sağlar ve CSS kodunuzu daha özelleştirilmiş hale getirir.

Attribut Seçicileri kullanarak elementlerin belirli bir özellik değerine sahip olanlarını seçin.

Attribut Seçicileri, belirli bir özellik değerine sahip olan elementleri seçmek için kullanılır. Attribut seçicileri, belirli bir özellik ve değer kombinasyonuna göre belirli elementleri seçer.

Bir özelliğin belirli bir değere sahip olması için, seçicinin aşağıdaki formatta yazılır:

Seçici	Açıklama	Örnek
[attribute]	Belirli bir özelliğe sahip tüm elementleri seçer	[href] -> href özelliğine sahip tüm elementler
[attribute=value]	Belirli bir özelliğe ve değere sahip elementleri seçer	[href="#"] -> href özelliği "#" olan tüm elementler
[attribute^=value]	Belirli bir özellik değerine sahip olan elementleri seçer	[class^="top"] -> class özelliği "top" ile başlayan tüm elementler
[attribute$=value]	Belirli bir özellik değerine sahip olan elementleri seçer	[href$=".pdf"] -> href özelliği ".pdf" ile biten tüm elementler
[attribute*=value]	Belirli bir değeri içeren özelliklere sahip olan elementleri seçer	[title*="search"] -> title içerisinde "search" geçen tüm elementler

Yukarıdaki örnekler, belirli özellik ve değerlerdeki elementlerin nasıl seçilebileceğini göstermektedir. Attribut seçicileri sayesinde, özelliklerin belirli değerlerine sahip tüm elementleri seçmek mümkündür. Bu seçiciler CSS tasarımında kullanımda oldukça faydalıdır.

2.1.2. Pseudo-Element Seçicileri

Pseudo-Element seçicileri, CSS'de ek bir öğe oluşturarak bu öğeye CSS özellikleri eklemenizi sağlar. Pseudo-element karşılığı olmayan bir HTML öğesi için belirli bir CSS özelliği eklemek için kullanabilirsiniz. Pseudo-element olarak geçerken öğeyi ve belirli bir yerleşimini seçerek, eklenen CSS özellikleri sayesinde HTML belgesinde ekstra bir görsel görüntü elde edebilirsiniz.

Pseudo-Element seçici olarak ::before ve ::after en sık kullanılan çeşitleridir.::before, seçilen öğenin içindeki ilk elementin önüne eklenen bir öğedir. Örneğin, bir halka içinde bazı metinlerin yazdığı bir görsel oluşturmak isteyebilirsiniz. Bu durumda, halkanın içindeki metinlerin __before pseudo-element'ini kullanarak bir çemberin içindeki metinlerin önüne halka oluşturabilirsiniz.

::after, seçilen öğenin içindeki son elementin arkasına eklenen öğedir. Bu seçici sayesinde metnin içinde ve görünür görsel olmadığında çeşitli tasarım yapılandırmaları yapabilirsiniz. Örneğin, bir belge içinde görünen bir indirme düğmesi oluşturmak amacıyla bir metin öğesi olarak "download" yazabilir ve CSS ile bu metnin arkasına bir indirme ikonu ekleyebilirsiniz.

CSS'de Pseudo-Element seçicileri oluşturarak ek bir öğe oluşturun ve bu öğeye CSS özellikleri ekleyin.

CSS'de Pseudo-Element seçicileri, sayfa tasarımınızı daha da özelleştirmenizi sağlar. Bu seçicileri kullanarak, sayfanızda mevcut olmayan, sayfa içeriğiyle etkileşimde bulunabilen öğeler oluşturabilirsiniz.

Örneğin, bir sayfanın belirli bir bölümünde yazıların belirgin şekilde seçilmesi gerekiyorsa, :selection öğesi kullanılabilir. Ayrıca, sayfa içerisindeki bir resmin altına bir açıklama eklemek isterseniz, :after seçicisini kullanarak bu açıklamayı oluşturabilirsiniz.

Bu öğeler oluşturulurken, CSS kod bloklarına yeni özellikler eklenir. CSS özellikleri, oluşturduğunuz öğelerin stilini belirleyen anahtar kelime değerleri içerir. Bu özelliklerden bazıları şunlardır:

content: Pseudo-element seçicisi tarafından oluşturulan öğenin içeriğini belirler.
display: Pseudo-element seçicisi tarafından oluşturulan öğenin görüntülenip görüntülenmeyeceğini belirler.
position: Pseudo-element seçicisi tarafından oluşturulan öğenin konumunu belirler.
width: Pseudo-element seçicisi tarafından oluşturulan öğenin genişliğini belirler.
height: Pseudo-element seçicisi tarafından oluşturulan öğenin yüksekliğini belirler.

Birçok pseudo-element seçici mevcuttur, ancak bunlar en yaygın kullanılanlardır. Pseudo-element seçicileri, web sayfanıza daha da özelleştirme imkanı verir ve sıradan HTML sayfalarına kişisel bir dokunuş eklemenizi sağlar.

2.2. Kombinatoryonel Seçiciler

Kombinatoryonel CSS seçicileri, elementlerin daha spesifik bir şekilde seçilmesi için birden fazla seçiciyi birleştirir. Bu seçiciler, elementlerin daha doğru bir şekilde hedeflenmesini ve stil verilmesini sağlar. Kombinatoryonel seçicilerin kullanım örnekleri şunlardır:

Child Selectors: Bir öğenin hemen altındaki alt öğeleri seçin. Örneğin, ul > li olarak yazılan kod, sadece bir ul öğesinin altındaki li öğelerini seçecektir.
Descendant Selectors: Bir öğenin altındaki tüm alt öğeleri seçin. Örneğin, ul li olarak yazılan kod, bir ul öğesinin tüm altındaki li öğelerini seçecektir.
Adjacent Sibling Selectors: Bir öğeyle aynı düzeyde bulunan ve ona doğrudan yönlenen öğeleri seçmek için kullanılır. Örneğin, h1 + p olarak yazılan kod, her bir h1 öğesi için hemen sonrasındaki ilk p öğesini seçecektir.
General Sibling Selectors: Bir öğeyle aynı düzeyde bulunan ve ona doğrudan yönlenen tüm öğeleri seçmek için kullanılır. Örneğin, h1 ~ p olarak yazılan kod, her bir h1 öğesi için sonrasındaki tüm p öğelerini seçecektir.

Kombinatoryonel seçiciler, HTML belgenizde elementlerin belirli bir alanını hedeflemek için çok kullanışlıdır. Bunlar, kodunuzda daha spesifik seçiciler kullanarak stil uygulamanıza ve daha düzenli kodlar yazmanıza yardımcı olur. Bu nedenle, kombinatoryonel seçicileri etkili bir şekilde kullanarak daha iyi hedeflenmiş bir CSS kodu yazabilirsiniz.

3. CSS Özellikleri

CSS Özellikleri, HTML elementlerine belirli stil ve tasarım özellikleri kazandırmak için kullanılır. Bu özellikler, elementin metin renginden arka plan rengine, boyutundan konumuna kadar farklı değerler alabilir. CSS özelliklerini kullanarak HTML belgenizin tasarımını tamamen özelleştirebilirsiniz.

Örnek bir paragraf

CSS'de renkler, özellikle arka plan veya metin rengi için sıklıkla kullanılır. Renk değeri birkaç farklı şekilde belirtilebilir. Örneğin, renk kodları (#000000), RGB veya RGBA gibi formatlarla belirtilebilir.CSS, elementlerin boyutlarını kontrol etmenize olanak tanır. Genişlik ve yükseklik gibi boyut özellikleri, elementlerin boyutunu belirtmek için kullanılabilir. Ayrıca padding ve margin gibi özellikler de elementlerin boyutunu kontrol etmenize olanak tanır.

Özellik	Açıklama
width	Elementin genişliğini belirtir
height	Elementin yüksekliğini belirtir
padding	Elementin içerisindeki boşlukları belirtir
margin	Elementin etrafındaki boşlukları belirtir

CSS, elementlerdeki metnin stil özelliklerini değiştirmenize olanak tanır. Metin rengi, yazı tipi, boyutu, ağırlığı ve diğer özellikler, metnin görünümünü değiştirir.

color: Metnin rengini belirler
font-family: Yazı tipi seçimi yapar
font-size: Yazı boyutunu belirler
font-weight: Yazı kalınlığını belirler

CSS, elementlerin konumunu, düzenini ve diğer özelliklerini kontrol etmenize olanak tanır. Ayrıca öğelerin float, z-index gibi özelliklerini belirleyerek, öğelerin sıralamasını css kurallarına göre değiştirebilirsiniz.

Özellik	Açıklama
position	Elementin pozisyonunu belirler
top, bottom, left, right	Bir elementin konumunu belirlemek için kullanılır
float	Bir elementi diğer elementlerin yanına hizalamak için kullanılır
z-index	Z ekseninde bir elementin yükseklik düzenini belirler

CSS, HTML belgeleri üzerinde güçlü bir etkiye sahip olan bir teknolojidir. CSS seçicileri ve özelliklerini doğru kullanarak, elementlerinizi özelleştirerek belgenizin tasarımını artırabilirsiniz.