Dosya Türünü Hedefleyen CSS3 Özellik Seçici

Bu makale bizim bölümümüzün bir parçası. "HTML5 / CSS3 Dersleri serisi" - sizi daha iyi bir tasarımcı ve / veya geliştirici yapmanıza yardımcı olmak için. Buraya TIKLAYIN Aynı serideki daha fazla makale görmek için.

özellik seçicileri gereksiz eklemeden bir eleman seçmek için gerçekten yararlı bir özelliktir. İD veya sınıflar. Hedeflenen elemanın bir niteliği olduğu sürece href, src ve tip bunu yapmak zorunda değiliz.

Özellik seçicileri aslında buralardaydı CSS 2.1’den beri, ve şimdi CSS3 spesifikasyonlarına eklenen birkaç özellik seçiciyle, elementin niteliğini daha spesifik olarak hedefleyebiliyoruz.

Ve, bu yazıda, sözdizimini birini seçmek için kullanacağız. dosya tipi bu, özniteliğin değerinin bir parçası olarak eklenir.

Sözdizimi ve Tarayıcı Desteği

dosya tipi her zaman dosya adının sonundadır. Yani, bunu seçmek için dosya tipi aşağıdaki sözdizimini kullanabiliriz [Attr $ = "değeri,"]. Bu sözdizimi $ = özellik değerinin sonunu hedefleyen operatör, örneğin:

 a [href $ = ". pdf"]: önce background: url ('… /images/document-pdf-text.png') no-tekrar;  

Yukarıdaki kod parçası, özellik değerinin biteceği her bağlantıyı seçecektir .pdf ve bir sözcük-belge-simgesi :önce sözde eleman.

PDF Simge Kaynağı: Fugue Simgeleri

Bu, bu seçicinin ortak kullanımı olsa da, kesinlikle bunun ötesine geçebiliriz..

Tarayıcı uyumluluğu ile ilgili olarak; Her ne kadar bu sözdizimi resmen CSS3 şartnamesi olarak tanıtılmış olsa da, aslında Internet Explorer 7, Böylece tüm tasarımlarınızda güvenle uygulayabilirsiniz..

Örnek

Hiç denemezsen asla bilemezsin. Henüz anlamadığımız bir şeyi daha iyi anlamak için yeni bir şeyler denememiz yeterli. Burada, bu sözdiziminin sadece düz CSS kullanarak uygulanması biraz zor olan belirli bir HTML yapısındaki bir öğeyi hedeflemede nasıl çok yararlı ve kullanışlı olabileceğini göstereceğiz..

Aşağıda, biz bir HTML5 yapısı resim yazısı ile üç resmi listelemek için. Bu sadece tanıtım amaçlıdır, işaretlemenizin tam olarak aşağıdaki kod parçasına benzemesi gerekmez (örneğin, yalnızca bir resme veya hatta üç resme daha sahip olabilirsiniz), ancak önemli olan bu sözdiziminin nasıl uygulanabileceğini bilmenizdir. belirli bir HTML yapısı.

Yukarıda listelenen görüntülerin her biri aşağıdaki biçimlere veya uzantılara sahiptir., jpg, png, ve gif. Ayrıca görüntü uzantısını temsil eden bir başlığa sahiptirler; bu başlık daha sonra resim etiketi olarak işlev görür.

Yani, işte plan, her farklı resim uzantısı için resim yazısı için farklı arka plan renkleri vereceğiz. JPG görüntü bir yeşil resim yazısı rengi, PNG alacak mavi, ve son olarak gif alacak mor.

İlk önce, rakam etiketinin pozisyonunu göreceli olarak ayarlayalım, çünkü başvuracağız kesin resim yazısı için konum.

 şekil position: göreceli;  

Kenarlık ve gölgeli görüntüler için küçük bir dekorasyon ekleyin.

 img border: 5px katı #ccc; -webkit-box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, 5); kutu-gölge: 1px 1px 3px 0px rgba (0, 0, 0, 5);  

Ve sonra, resim yazısı için varsayılan stili ve konumlamayı belirleriz. Resim yazısı veya etiket 50 piksel kare olacaktır.

 img + figcaption renk: #fff; pozisyon: mutlak; üst: 0; sağ: 0; genişlik: 50px; yükseklik: 50px; hat yüksekliği: 50px; metin hizalama: orta;  

Şimdi arka plan rengini ekleme zamanı. Bunu yapmak için, özellik seçiciyi bitişik kardeş seçiciyle birleştirebiliriz, +.

 img [src $ = ". jpg"] + figcaption background-color: # a8b700;  

Yukarıdaki snippet, kaynak özniteliği ile biten her resmi hedefler .jpg, daha sonra bitişik seçici yandaki elemanı bulacaktır. Bu durumda figcaption ile eklenecek # a8b700 arka plan rengi.

Ve işte tüm görüntü formatlarının kodları .png ve .gif..

 img [src $ = ". png"] + figcaption background-color: # 389abe;  img [src $ = ". gif"] + figcaption background-color: # 8960a7;  

Şimdi, aşağıdaki demo bağlantısından canlı göründüğünü görelim, yoksa çevrimdışı incelemek için kaynağı indirebilirsiniz.

• gösteri
• Kaynak İndir

Resim kaynakları aşağıdaki gibidir: MacPro 1, MacPro 2 ve MacPro 3

Sonuç

Öznitelik seçicisini kullanarak yukarıda göstermeye çalıştığımız gibi, özel bir seçiciyi kullanarak stilin zarif tarafını görebileceğinizi umuyoruz. Bu nedenle, HTML’nizi bir sonraki yeniden düzenleyişinizde, düzgün bir şekilde yapılandırılmış işaretlemenizi fazladan bir şeyle mahvetmek yerine, stilinizi özel bir seçici kullanarak uygulayıp uygulayamayacağınıza dair biraz araştırma yapmanızı öneririz sınıflar veya İD.

Aslında sonraki yazılarda ele alacağımız bu tip iki yeni seçici var, bizi izlemeye devam edin.