CSS Nasıl Öğrenilir? Temel CSS Seçicileri Nelerdir?

CSS Nasıl Öğrenilir? Temel CSS Seçicileri Nelerdir?

CSS HTML ile el ele çalışır ; HTML sayfa yapısını sıralar, CSS güzel görünmesini sağlar ve ince düzeyde etkileşim ekler. Bir web tasarımcısı olarak gerçekten bu iki dili de ele almalısınız. Kodlamayı kendiniz yapmasanız bile, nasıl çalıştıklarını anlamak web için tasarım yapmanıza yardımcı olacaktır.

 

Temel Kavramları Kavrama: CSS Nedir?

 

CSS; HTML'ye uygulamak için stil kuralları içeren belgeler (veya birkaç yapısal biçim ile birlikte XML). Birden fazla stil kuralı bir HTML öğesini işaret edebilir, bu durumda hangi kuralın etkili olması gerektiğini belirlemenin bir yolu olmalıdır. Basamaklı terimi , en özel kurala rastlanana kadar genel kurallardan filtreleme sürecini tanımlar. Bu kural daha sonra işini yapmak için seçilir.

 

CSS web tarayıcıları tarafından okunur. Kod belgesini alırlar, ardından stil kurallarını o belgedeki öğelere uygularlar.

 

Tarayıcılar, stil kurallarını her zaman birbirleriyle aynı şekilde yorumlamazlar ve tarayıcılar geliştikçe yeni stil önerilerini destekliyorlar. Önerilerinin kullanıcılar tarafından benimseneceği umuduyla, genellikle tarayıcı üreticilerinin kendileri CSS özellikleri ile denemeler yaparlar.

 

css3-html5

 

Nihayetinde, CSS özelliklerinin standartlaştırılmış olup olmadığı World Wide Web Consorsium'na (W3C) bağlıdır.

 

W3C Standantları Nedir? makalemize gitmek için tıklayın.

 

Temel Kavramları Kavrama: Sözdizimini Öğrenin

 

CSS sözdizimi birkaç temel parçadan oluşur; kurallar, seçiciler, bildiriler, özellikler ve değerler.

 

Seçiciler HTML işaretlemesi içindeki öğelere işaret eder, ardından süslü parantez içindeki bildirimler bu öğelerin nasıl stilize edilmesi gerektiğini tanımlar. Tek bir kural içinde birden çok bildirim olabilir; her beyan ilişkili bir değere sahip bir özellik içerir.

 

CSS Seçici nedir?

 

Zaten seçicilerle tanıştınız. CSS seçici, CSS Kuralının ilk kısmıdır. Kuralın içindeki CSS özellik değerlerinin kendilerine uygulanması için hangi HTML öğelerinin seçilmesi gerektiğini tarayıcıya bildiren öğeler ve diğer terimlerdir. Seçici tarafından seçilen bir eleman veya elemanlar olarak adlandırılır seçicinin konusu .

 

CSS'de seçiciler, CSS Seçiciler spesifikasyonunda tanımlanır; CSS'nin diğer bölümleri gibi tarayıcıların da çalışması için desteğe ihtiyaçları vardır. Karşılaşacağınız seçicilerin çoğu, olgun bir özellik olan Seviye 3 Seçiciler spesifikasyonunda tanımlanmıştır , bu nedenle bu seçiciler için mükemmel tarayıcı desteği bulacaksınız.

 

CSS Seçici Örnekleri

 

Aynı CSS'yi kullanan birden fazla şey varsa, bağımsız seçiciler bir seçici listesinde birleştirilebilir, böylece kural tüm seçicilere uygulanır. Örneğin, bir h1ve aynı sınıf için aynı CSS'ye sahipsem .special, bunu iki ayrı kural olarak yazabilirim.

 

h1 { 
  color: blue; 

.special { 
  color: blue; 

 

Bunları, aralarına virgül ekleyerek bir seçici listesinde de birleştirebilirsiniz.

 

h1, .special { 
  color: blue; 

Boşluk, virgülden önce veya sonra geçerlidir. Ayrıca, her biri yeni bir satırdaysa seçicileri daha okunabilir bulabilirsiniz.

h1, 
.special {
  color: blue; 

 

Aşağıdaki canlı örnekte, aynı bildirimleri olan iki seçiciyi birleştirmeyi deneyin. Görsel ekran birleştirildikten sonra aynı olmalıdır.

 

Seçici türleri

 

Birkaç farklı seçici grubu vardır ve hangi tür seçiciye ihtiyacınız olabileceğini bilmek, iş için doğru aracı bulmanıza yardımcı olacaktır. Bu makalenin alt parçacıklarında farklı seçici gruplarına daha ayrıntılı olarak bakacağız.

 

Bu grup, gibi bir HTML öğesini hedefleyen seçiciler içerir <h1>.

 

h1 { }

 

Ayrıca bir sınıfı ( class ) hedefleyen seçiciler içerir:

 

.box { }

 

veya bir kimlik ( id ):

 

#unique { }

 

Özellik seçicileri

 

Bu seçici grubu, bir öğedeki belirli bir özelliğin varlığına bağlı olarak öğeleri seçmenin farklı yollarını sunar:

 

a[title] { }

 

Veya belirli bir değere sahip bir özelliğin varlığına bağlı olarak bir seçim yapın:

 

a[href="https://example.com"] { }

 

Sözde sınıflar ve sözde elemanlar

 

Bu seçici grubu, bir öğenin belirli durumlarını biçimlendiren sözde sınıfları içerir. :hoverÖrneğin sözde sınıfı fare işaretçisi ile süpürdü olan tek bir eleman seçer:

 

a:hover { }


Ayrıca, öğenin kendisinden ziyade bir öğenin belirli bir bölümünü seçen sözde öğeleri de içerir. Örneğin,::first-lineher zaman bir öğenin içindeki ilk metin satırını ( <p>aşağıdaki durumda a) seçer <span>, ilk biçimlendirilmiş satırın etrafına sarılmış ve sonra seçilmiş gibi davranır .


Son grup seçici, belgelerimizdeki öğeleri hedeflemek için diğer seçicileri birleştirir. Aşağıdaki örnek <article>, alt birleştiriciyi ( > ) kullanarak öğelerin doğrudan alt öğesi olan paragrafları seçer :

 

article > p { }

Sosyal Medya & Dijital Pazarlama Hizmetlerimizi İncelediniz mi?

Pazarlama her zaman kitlenizle doğru yerde ve doğru zamanda bağlantı kurmakla ilgilidir. Bugün, bu, onlarla zaten zaman harcadıkları yerde buluşmanız gerektiği anlamına geliyor: internette.

İlginizi çekebilir...
Dijital Pazarlama Instagram Reels Nedir? Nasıl Kullanılır?
Instagram, kısa biçim video özelliği olan Reels'ı İngiltere'de kısa süre önce piyasaya sürdü.   Bu özellik, 50'den fazla ülkede uluslara...
Web Yazılım SMTP 554 Hata Kodları ve Açıklamaları
SMTP E-mail gönderimleri sırasında oluşan 554 hata kodları ve açıklamaları aşağıda yer almaktadır. Gönderim sırasında yaşadığınız sorunları buradaki h...
Madame Coco firmasına yapmış olduğumuz projeyi incelemek istemez misiniz ?