Gözden Kaçmış Olabileceğiniz 15 Faydalı CSS Püf Noktası

Bir süredir bir web sitesi geliştiricisi olduysanız, bir şeyleri kodlamanın nasıl yapıldığını ve biraz googling yaptıktan sonra nasıl fark edildiğini anlamaya çalışırken bir anınız olma ihtimali yüksektir. “bunun için CSS var”. Yapmasaydın, yapmak üzeresin..

Bu gönderi, bir öğeyi yapışkan hale getirme, kesikli çizgi altı çizili özellikler verme, sayfanızın metnini özel bir biçimde akıtma veya paralaks efekti elde etme gibi özellikler kazandırabilen CSS kodlarının bir koleksiyonudur. Bazıları yaygın olarak desteklenirken, diğerleri tüm tarayıcılar tarafından tam destek almak için yolda.

1. Numaralandırma başlıkları ve alt başlıklar

   Belgenizde bir dizi başlık ve alt başlık bulunduğunu ve bunları manuel olarak veya bir komut dosyasıyla numaralandırdığınızı varsayalım. Bunun yerine, bunu yapmak için CSS sayaçlarını kullanabilirsiniz. Burada zaten derinlemesine bir yazı var. Ve bir CSS2 spesifikasyonundan olduğu için, belki IE 6 hariç tüm tarayıcılar tarafından desteklendiğine bahse girebilirsiniz..

2. Spice Up Düz Altı Çizili

   Bazen sağlam bir nokta yerine güzel bir noktalı veya kesikli çizgi ile altını çizmek istiyoruz. Bunun için bir seçenek olmadığından razıyız border-bottom. Fakat border-bottom altını çizdiğiniz metnin kaydırılması iyi bir çözüm değildir..

   CSS3, metin süslemesi için bir değil, üç yeni özellik belirtti. text-decoration renkli, text-decoration satırı, ve text-decoration tarzı hangi iyi eski içine shorthanded olabilir text-decoration.

   Bunların altını çizmek, altını çizmek, hatta metnin yanıp sönmesini sağlamak ve daha pek çok şeyi yapmak için kullanabilirsiniz. Nisan 2015 itibariyle, yalnızca Firefox bu özelliği desteklemektedir, ancak “deneysel web platformu özellikleri” Chrome'da kullanmak için.

3. Bir Teklif Vermek

   Her şeyden önce, kısa alıntılar için doğru kıvrık tırnakları yazmakla uğraşmanıza gerek yok çünkü bunun için HTML var: satır içi alıntıları gösteren etiket.

   etiketi ayrıca, iç tırnakları tek tırnak işaretleri ile tırnak içine alır. Peki nerede “bunun için 'CSS' var” bu an?

   Diyelim ki varsayılan çift tırnak işaretini istemediğinizi veya birden fazla iç içe tırnak düzeyine sahip olmadığınızı varsayalım, teklif öğesi için teklif tercihlerinizi CSS ile CSS2'yi kullanarak tanımlayabilirsiniz. tırnak işareti özellik.

4. Kural Dışı Tabloları Yönetme

   Ne denerseniz deneyin, belirlediğiniz genişlikte kalmayı reddeden, hücre başına değişen içerik boyutuna sahip büyük bir masaya rastlamış olabilirsiniz. O masayı table-layout özellik (eşit sütun yüksekliği için bu bağlantıyı takip edin).

   Belirli olmak için, düzeltme masa düzeni: sabit; değer. Tablo için sabit bir düzen atadığınızda, tablo ve hücre genişliği, içerik tarafından değil, tablo veya ilk hücre sırasının (kullanıcı tarafından tanımlanabilir) genişliği tarafından belirlenir. Bu, tüm tarayıcılar tarafından desteklenir.

5. Yapışkan Yap

   Yapışkan öğeler, sayfadaki görünüm dışına kaydırılmayacak öğelerdir. Başka bir deyişle, görünür bir alana yapışır (görünüm alanı veya kaydırma kutusu). Bunu kullanarak CSS ile oluşturabilirsiniz. pozisyon: yapışkan;.

   Herhangi bir kaydırmadan önce nispeten belirtilen elemanlar gibi hareket ederler ve daha sonra bir kaydırma eşiğine ulaşıldığında sabit elemanlar gibi davranırlar. Şimdilik, sadece Firefox onu destekliyor.

6. Metninizi Şeklinde Alın

   Sayfanızdaki metnin yanında görüntülemiş olduğunuz resmin üzerine güzel bir şekilde eğilmesini mi istiyorsunuz? Deneyebilirsin CSS Şekilleri. CSS şekillerini uygulamak için üç özellikten faydalanabiliriz. şekil-dışarıda, şekil marjı ve şekil görüntü eşiği. Nisan 2015 itibariyle, CSS Şekilleri tarafından desteklenmektedir. webkit tarayıcıları.

7. Zorunlu alanlar

   Bir forma sahipseniz, bazıları zorunlu değilken, bazı alanların doldurulması zorunludur. Hangisinin hangisi olduğunu kullanıcılara bildirmeniz gerekir. Bunun için CSS :gereklidir :isteğe bağlı sözde sınıflar. Tüm modern tarayıcılar onları destekliyor.

8. Renklerle Seçici

   Belirli bir rengi sevmiyorsanız, mavi gibi, seçili alanı başka bir renkle ve :: seçim sözde eleman bunun için CSS'dir. Bu, tüm modern tarayıcılar tarafından desteklenir.

9. Kontrol ettim mi?

   Bir onay kutusunun işaretlendiği bir durumda, öğenin kontrol edildiğini belirtmek için varsayılan onay kutusunun içindeki küçük onay işaretinden ayrı bir işaret daha koymak iyi olur..

   İki kardeş yan yana olan kardeşler arasındaki bağı kullananlar için CSS var. CSS, artı ile gösterilen bitişik kardeş seçiciye sahiptir. + işaretini kaldırın ve etiketi onay kutusunun yanındaki hedefi hedeflemek için kullanabiliriz. Ama önce işaretli onay kutusunu hedeflemeye ne dersiniz? Orada :kontrol bunun için sahte sınıf.

10. Bir Hikaye Kitabı Gibi

    O zaman, ilk olsaydı iyi olmaz mıydı “O” içinde “Bir Zamanlar” güzel görünüyor? Güzel görünmesini sağlayabiliriz, sonuçta bunun için CSS var. İşte nerede ::ilk harf sözde eleman kurtarmaya gelir. Hedeflenen elemanın ilk satırının ilk harfini hedefler. Burada daha fazla bilgi edinin.

11. Daha Fazla Bilgi Almak İstermisiniz?

    Bir eleman, X sınıfına veya veri Y'ye veya bir özniteliğin diğer bir değerine sahip olabilir. Yakında bir elemanın böyle bir nitelik değerini göstermemiz gerekirse, İçerik: attr (X). Elemanın X niteliğinin değerini alır, sonra elementin yanında gösterebiliriz.

12. Sola Biraz Daha Fazla

    CSS yeni başlayanlar için öğeleri merkezlemek oldukça zor. Farklı öğeler, onları ortalamak için farklı CSS özellikleri kümesi gerektirir. Dünya çapındaki ağda mevcut olan pek çok örneğe bakacağız, böylece şeyleri merkezlemek için CSS olduğunu tekrar hatırlayabilirsiniz..

13. Linklerin Dosya Formatını Açıkla

    Bu bağlantının ne olduğunu gösteren bir bağlantının yakınında küçük bir resim gördünüz mü? PDF mi? ya da bir DOC? Evet, bunu başarmak için CSS var. İçerik: url () görüntüyü bağlantıların arkasında görüntülemek için kullanacağımız şey.

14. Tetikleyici Paralaks Etkisi

    Paralaks etkisi, ön plana göre arka planın görünüşte yavaş hareketini tanımlamak için kullanılan bir etkidir. Bu etki, paralaks kaydırmayı uygulayan web sitelerinde popülerdir. Uygulamanın farklı yolları vardır, aşağıdaki örnek Firefox’ta arka plan eki: sabit;.

15. CSS Animasyonlarının Gücü

    Muhtemelen büyük değil “bunun için CSS var” Çünkü, şimdiye kadar hepiniz muhtemelen CSS animasyonlarının farkındasınız. Ancak küçük bir hatırlatma zararsızdır. CSS animasyonları için pek çok kullanım alanı var ama işte basit bir renklendirme alıştırması..

Şimdi Oku: 50 Faydalı CSS Parçacığı Her Tasarımcının Sahip Olması Gerekenler