3. Çeşitli özellik değerlerinden biri

Sınıf adları gibi bazı öznitelik değerleri boşluklarla listelenebilir. Nitelik değerleri listesi istenen değeri içerdiğinde bir stil kuralını belirtmek için aşağıdaki seçici kullanılır:

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

Özniteliğin gerekli değere sahip olması veya boşlukla ayrılmış bir değerler listesinde olması durumunda stil uygulanır. Örneğin:

{
kırmızı renk;
yazı tipi boyutu:%150;
}
...

Telefonumuz: 777-77-77

Bizim adresimiz: Moskova st. Sovyet 5

Aşağıdaki sonucu alın:

Kural, nitelik değerlerinden birine sahip bir öğeye uygulanır. sınıf bir anlamı var tel.

4. Özellik değerinde kısa çizgi

Tanımlayıcıların ve sınıfların değerlerinde kısa çizgi kullanılmasına izin verilir. Bir stili, nitelik değerleri kısa çizgi içerebilen öğelere bağlamak için aşağıdaki yapıyı kullanabilirsiniz:

[öznitelik|='değer'] ( stil )
Seçici[öznitelik|='değer'] ( stil )

Stil, nitelik değeri belirtilen değerle başlayan ve ardından kısa çizgi gelen öğelere uygulanır. Örneğin:

{
kırmızı renk;
yazı tipi boyutu:%150;
}
...

• Paragraf 1


• 2. nokta


• 3. nokta


• Madde 4

Sonuç:

Örnekte stil kuralı yalnızca sınıf adı şu değerle başlayan liste öğelerine uygulanır: "Menü".

5. Özellik değeri belirli bir metinle başlar

Bu seçici, etiketin nitelik değeri belirli bir değerle başlıyorsa öğenin stilini ayarlar. İki seçenek olabilir:

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

İlk durumda stil etiketleri belirtilen niteliklere sahip olan tüm öğelere uygulanır isim ve belirtilenle başlayan bir değer alt dizeler. İkinci durumda ise aynı şey, yalnızca yukarıda belirtilen belirli unsurlara yöneliktir. ana seçici. Örnek:

A(
yeşil renk;
yazı tipi ağırlığı: kalın;
}
...

Sonuç:

Örnek, harici bağlantıların ve dahili bağlantıların nasıl farklı şekilde görüntüleneceğini gösterir. Dış bağlantılar her zaman "http://" dizesiyle başlar. Bu nedenle seçicide stilin yalnızca şu özelliğe sahip bağlantılara uygulandığını belirtiyoruz: href değer ile başlar http://.

6. Özellik değeri belirli bir metinle biter

Bir stili, nitelik değeri belirtilen metinle biten öğelere bağlar. Aşağıdaki sözdizimine sahiptir:

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

İlk durumda stil sahip olan tüm unsurlar için geçerlidir. bağlanmak belirtilen ile isim ve belirtilenle biten bir değere sahiptir alt dize. İkinci durumda, aynı şey yalnızca belirtilenlere yöneliktir. seçiciler. Bu şekilde örneğin farklı formattaki grafik görüntüleri farklı şekilde görüntülemek mümkündür. Örneğin:

img(
kenarlık: 5 piksel düz kırmızı;
}
...

gif resmi

png formatındaki resim

Sonuç:

Örnekte gif uzantılı tüm resimler beş piksel kalınlığında kırmızı kenarlıkla görüntülenecektir.

7. Özellik değeri belirtilen dizeyi içerir

Bu seçici, stili, nitelik değeri belirtilen metni içeren etiketlere bağlar. Sözdizimi:

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

Stil sahip olan elementlere bağlanır bağlanmak belirtilen ada sahip ve değeri belirtilenleri içeriyor alt dize. Örneğin:

img(
kenarlık: 5 piksel düz kırmızı;
}
...

Galeri klasöründeki resim

Başka bir klasördeki resim

Sonuç:

Örnekte stil, klasörden yüklenen resimlere uygulanmıştır. "galeri".

Tamamen özellik seçicilerle ilgili. Yukarıdaki yöntemlerin tümü birbiriyle birleştirilebilir:

Seçici[attribute1='value1''][attribute2='value2'] ( stil )

Ayrıca özel CSS seçicileri de hatırlatayım:

• "+" ve "~" sembolleri kullanılarak oluşturulur;
• ">" sembolü css stillerini çocuk etiketler;
• sembol<пробел>bağlam seçicileri oluşturur.

Sonraki makalelerde güçlü bir stil yönetim aracı sağlayan sözde öğelere ve sözde sınıflara da bakacağız.

Tekrar buluşana kadar bu kadar.

İyi akşamlar sevgili meslektaşlarım, bugün sizinle iki ek çalışma yapacağız seçici, adı verilen çocuk ve komşu css seçicileri. Büyük ölçüde onlarsız da yapabilirsiniz, ancak gelişiminiz için bunların öğrenilmesi ve bazen uygulanması gerekir, böylece hafızanızda kalırlar. O halde ne olduğunu tartışalım seçiciler bitişiktir ve hangileri çocuktur ve bunu bir örnekle analiz edeceğiz.
çocuk seçiciler css- ana öğenin içinde bulunan öğeler. Bunun bir örneği aşağıdaki olabilir. Bir paragraf, başka bir blok ve bir resim içeren bir bloğumuz var. Bu üç unsur çocuklardır. Eğer alt blok başka öğeler de içeriyorsa, o zaman bunlar artık ilk bloğun çocukları değil, doğrudan bulundukları bloğun çocuklarıdır. Umarım ana fikri anlarsın.
Bitişik CSS Seçiciler- belge kodunda birbiri ardına bulunan öğeler. Bunun bir örneği şudur. Bir paragrafımız ve ardından bir etiketimiz var açıklık. Her şey oldukça açık ve bunları gerçek örneklerle çözmemiz gerekiyor.

Stillerin yardımıyla etiket için aynı sonucu ekleyeceğiz açıklık

Bölüm >açıklık(
yazı tipi boyutu: %200
}

P + açıklık (
kırmızı renk
}

Her iki durumda da kod yürütmenin sonucu etikete uygulanacaktır. açıklık, çünkü bu etiketin bir çocuğu div ve etiketin ardından P. Bu nedenle yazı tipi iki kat daha büyük ve kırmızı oldu. Artık tamamen hallettik CSS'deki çocuk ve komşu seçiciler ve bilginizi pratikte güçlendirmeniz gerekiyor, yakında görüşürüz!

Merhaba sevgili okuyucular! CSS seçiciler konusuna devam ediyoruz ve bugün ne olduğunu erişilebilir bir şekilde açıklamaya çalışacağım. bitişik CSS seçicileri ve hangi rol evrensel seçici. Her türlü CSS aracını kullanma mekanizmasını bilmek, kaynağınızın başarılı bir şekilde tanıtılmasının bileşenlerinden biri olan öğelerin stillerini açıklayan, belgenin en uygun ve kompakt içeriğini elde etmenize olanak tanır, bu nedenle hiçbir durumda ihmal etmeyin seçici kavramı ve çeşitleri hakkında faydalı bilgiler edinme fırsatı.

Hatırlarsanız ve gönderileri yakından takip ederseniz pek çok çeşit seçiciye zaten değinmiştim; ; . Bir kez daha CSS'in temellerini öğrenmeyi ihmal etmemenizi tavsiye ediyorum, çünkü bu size gelecekte birçok tercih sunacaktır.

Evrensel seçici

Şimdi doğrudan bugünkü yazımızın konusuna geçelim. Evrensel seçiciye gelince, oldukça basit, bu yüzden üzerinde uzun süre durmayacağım. Evrensel seçiciyi kullanan bir CSS kuralı yazma sözdizimi aşağıdaki gibidir:

Burada “*” operatörü evrensel bir seçicimiz olduğu anlamına gelmektedir. Bir web sayfasındaki tüm öğeler için tek bir stil ayarlamak gerektiğinde kullanılır. Bazen evrensel seçici isteğe bağlıdır. Örneğin, .*class ve .class gösterimi bu durumlarda tamamen aynıdır. Şimdi bir örnek verelim. Genellikle en yaygın olanı, tek bir yazı tipini, boyutunu ve rengini ve bir blog veya web sitesi sayfasındaki normal metnin konumunu tanımlamaktır.

* ( font-family: Tahoma, Arial, Helvetica, sans-serif; /* Metin fontu */ color: #646464; /* Metin rengi */ font-size: %75; /* Metin boyutu */ text-align : left; /* Metin konumu */ )

Böylece sayfada yer alan tüm öğeler için metin tasarımını tanımlayabilirsiniz. Bu durumda evrensel seçici yerine tüm öğelerin etiketlerini içeren gövde etiketinin adını kullanırsak sonucun benzer olacağını belirtmek isterim.

Bitişik CSS Seçiciler

Şimdi komşu seçicilere biraz daha zaman ayıralım. Komşular, belgenin kodunda doğrudan yan yana olduklarında web sayfası öğeleridir. CSS stili sözdizimi şuna benzer:

Şimdi p etiketiyle tanımlanan, sırasıyla metin biçimlendirmesini, kalınlaştırmayı, italikleştirmeyi ve kalınlaştırmayı tanımlayan alt öğeler olarak b, i ve büyük etiketleri içerecek bir metin paragrafını ele alalım:

Bu paragraf şunu kullanır: b etiketi, etiketliyorum, büyük etiket.

Ve tüm popüler tarayıcıların ( , ) en son sürümlerinde yerleşik olarak bulunan ve ünlü Firefox tarayıcı eklentisinin () bir benzeri olan CSS ve HTML düzenleme aracının yardımıyla, bu paragrafı kesinlikle herhangi bir yere ekleyeceğiz. herhangi bir web sayfası (bunu önceki makalenin ilk paragrafındaki sayfasında yaptım). Bu araç, örneğin Chrome'da, yalnızca F12 tuşuna basılarak çağrılır. HTML Temelleri ve CSS Derslerindeki materyalin alıştırmasını yapmak için kullanılabilir. Bu yüzden ilk paragraf biçiminde bir metin parçası ekliyorum:

Bu paragraf deneysel olacak ve örneğini kullanarak uygulamayı ele alacağız. bitişik seçiciler. Söylediğim gibi b, i ve big etiketleri p paragraf etiketinin çocuklarıdır çünkü hepsi doğrudan p kabının içindedir. Burada b ve i etiketleri, i ve büyük olduğu gibi bitişiktir. Şimdi bitişik seçiciler için CSS kuralını uygulayın:

B+i (renk: kırmızı;) i+büyük (renk: yeşil;)

Bu stiller uygulandıktan sonra paragraf şöyle görünecektir:

Bu, b, i ve büyük öğeleri içeren tüm web sayfası etiketleri için geçerlidir. Üstelik b ve i, i ve büyük yakınlarda olmalıdır, diğer kombinasyonlarda bu CSS kuralı çalışmaz. Artık bir CSS belgesini yazarken veya düzenlerken bitişik seçicilerin nasıl uygulandığının açık olduğunu düşünüyorum. Bir başka çok önemli not: Eğer fark ettiyseniz, bitişik öğeler söz konusu olduğunda, belirtilen stil yalnızca ikinci öğeye uygulanır.

Tartışılan paragraftaki örnek çok açıklayıcıdır ve CSS'deki bitişik seçicilerin özünü hızlı bir şekilde anlamanıza olanak tanır. Ancak pratikte genellikle komşu seçicilerin diğer uygulama alanları kullanılmaktadır. Diyelim ki, çoğu zaman bir makalenin gövdesine, dipnotlar, notlar vb. gibi özel olarak tasarlanmış bir metin parçasının dahil edilmesi gerekir.

Bu amaçlar için ayrı bir sınıf oluşturup bunu istenen paragrafa uygulamak yaygındır. Ancak çok daha iyi bir yol komşu seçicileri kullanmaktır. Örneğin blogumda normal bir h3 başlığına stil vermek için oluşturulmuş stiller var.

H3 ( yazı tipi boyutu: 1,7em; /* Yazı tipi boyutu */ text-align: center; /* Metin yerleştirme */ yazı tipi ağırlığı: normal; /* Normal metin ağırlığı */ yazı tipi ailesi: Tahoma, Arial, Helvetica, sans-serif; /* Yazı tipi stili */ renk: #646464; /* Metin rengi */ )

Bir notun veya dipnotun başlığını vurgulamak için özel bir sınıf tanımlarız, örneğin şunu yazın:

H3.put ( renk: kırmızı; /* Metin rengi */ kenar boşluğu-sol: 5 piksel; /* Sol dolgu */ kenar boşluğu: 0,5 em; /* Üst dolgu */ dolgu: 10 piksel; /* Metnin etrafına dolgu */ text-align: left; /* Metin konumu */ )

Şimdi özel bir dipnot paragraf stili oluşturmak için bitişik seçicileri kullanalım, bu paragraf doğrudan başlığın altına "h3.put" stiliyle yerleştirilecektir:

H3.put+p ( arka plan: #ffefd5; /* Arka plan rengi */ sol kenar boşluğu: 15 piksel; /* Sol kenar boşluğu */ sağ kenar boşluğu: 120 piksel; /* Sağ kenar boşluğu */ kenar boşluğu üst: 0,5 em; /* Üst dolgu */ dolgu: 5 piksel; /* Metnin etrafındaki kenar boşluğu */ )

Kulaklarınızı çınlattığım (ama buna değer) Google Chrome düzenleme aracını tekrar kullanarak, put sınıfını koymayı unutmadan dipnotun başlığını giriyoruz:

Dikkat!

Sonra dipnotun metnini yazıyoruz:

Bu yayında sunulan materyaller CSS'nin (Cascading Style Sheets) temellerini öğrenmek açısından oldukça önemlidir.

Tüm bu hareketlerden sonra web sayfasında aşağıdaki dipnot paragrafını görüyoruz (bu paragrafı çocuk ve bağlam seçicilerle ilgili önceki makalemin sonuna eklediğimi unutmayın):

Artık bir blogda veya web sitesinde, "put" sınıfını herhangi bir h3 etiketine bağlarken, web sayfasında böyle bir dipnot görünecektir. Üstelik sadece “class=“put” olan h3 etiketinden sonraki ilk paragraf özel bir şekilde tasarlanacaktır. Ama tam olarak istediğimiz buydu, değil mi?

Bu konuda, evrensel seçicilerin yanı sıra bitişik seçicilerin uygulanması için bir algoritmanın verildiği bugünkü kılavuzu bitirmeme izin verin. Bu makalenin siz değerli okuyucuları abone olmaya teşvik edeceğini umuyorum.