Yeni Başlayanlar İçin 20 Yararlı CSS İpuçları

Eski günlerde, sadece küçük bir site olsa bile, web sitesinin güncellenmesine yardımcı olacak birçok geliştiriciye ve programcıya güveniyoruz. CSS ve esnekliği sayesinde, stiller kodlardan bağımsız olarak çıkartılabilir. Şimdi, temel CSS anlayışına göre, bir acemi bile bir web sitesinin tarzını kolayca değiştirebilir.

Kendi web sitenizi oluşturmak için CSS’yi almak veya yalnızca blogunuzun görünümünü değiştirmek ve biraz hissetmekle ilgileniyorsanız, daha güçlü bir temel oluşturmak için her zaman temel ilkelerle başlamak iyidir. Bazılarına bir göz atalım CSS İpuçları için yararlı olabileceğini düşündük Yeni başlayanlar. Atlamadan sonra tam liste.

1. kullanım reset.css

   CSS stillerini oluşturmaya gelince, Firefox ve Internet Explorer gibi tarayıcıların bunları kullanmanın farklı yolları var. reset.css tüm temel stilleri sıfırlar, böylece gerçek bir boş yeni stil sayfasıyla başlarsınız.

   İşte çok az kullanılan reset.css çerçeveler - Yahoo CSS'yi Sıfırla, Eric Meyer’in CSS Sıfırla, Trablus

2. Shorthand CSS kullan

   Shorthand CSS, CSS kodlarınızı yazmanız için daha kısa bir yol sunar ve hepsinden önemlisi - kodu daha açık ve anlaşılması daha kolay hale getirir.

   Bunun gibi CSS oluşturmak yerine

   .başlık background-color: #fff; background-image: url (image.gif); arka plan tekrarı: no-tekrarı; arka plan konumu: üst sol; 

   Aşağıdakilere kısa yoldan teslim edilebilir:

   .başlık background: #fff url (image.gif) tekrarlama yapmaz üst sol

   Daha - CSS Shorthand'e Giriş, Faydalı CSS kestirme özellikleri

3. anlayış Sınıf ve İD

   Bu iki seçici genellikle yeni başlayanları şaşırtıyor. CSS’de, sınıf nokta "ile temsil edilir." süre İD bir "#" hash. kısaca İD Özgün ve kendini tekrar etmeyen stile sahip, sınıf diğer tarafta, yeniden kullanım olabilir.

   Daha - Sınıf - Kimlik | Ne zaman Class, ID kullanılır? | Sınıf ve kimliğin birlikte uygulanması

4. Gücü

5. a.k.a link listesi, doğru kullanıldıklarında çok kullanışlıdır.
   veya
   , özellikle navigasyon menüsüne stil vermek için.

   • Unutmak , Deneyin

     CSS’nin en büyük avantajlarından biri,

     stil açısından tam esneklik sağlamak.

     benzemez

     , içeriğin bir içeride 'kilitli' olduğu yerde

     'nin hücresi. En çok şey söylemek güvenli düzenleri kullanımı ile elde edilebilir ve düzgün şekillendirme, belki de masif tablo içeriği hariç. Daha - Tablolar öldü, Tablolar Vs. CSS, CSS vs tabloları CSS Hata Ayıklama Araçları CSS ayarını yaparken mizanpajın anında önizlemesini almak her zaman iyidir, CSS stillerini daha iyi anlamanıza ve hata ayıklamanıza yardımcı olur. Tarayıcınıza yükleyebileceğiniz bazı ücretsiz CSS hata ayıklama araçları: FireFox Web Geliştiricisi, DOM Denetçisi, Internet Explorer Geliştirici Araç Çubuğu ve Firebug. Gereksiz Selektörlerden Kaçının Bazen CSS bildiriminiz daha basit olabilir; bunun anlamı, kendinize aşağıdakileri kodladığınızda: ul li … ol li … tablo tr td … Sadece kısaltılabilir li … td … Açıklama: sadece içinde var olacak veya ve ve sadece içeride olacak bu yüzden onları tekrar yerleştirmek için gerçekten gerekli değil. bilme !önemli İle işaretlenmiş herhangi bir stil !önemli altında bir üzerine yazma kuralı varsa, ne olursa olsun kullanılmayacak. .sayfa background-color: mavi! önemli; background-color: red; Yukarıdaki örnekte, background-color: blue ile işaretleneceği için uyarlanacak !önemli, bile olsa background-color: red; altında. !önemli Üzerine bir şey yazmadan bir stili zorlamak istediğiniz durumlarda kullanılır, ancak Internet Explorer'da çalışmayabilir. Görüntüyü Metinle Değiştir Bu genellikle değiştirmek için pratiktir Başlık metne dayalı bir başlıktan bir resme İşte nasıl yapıyorsun?. h1 metin girintisi: -9999px; background: url ("title.jpg") tekrar yok; en: 100 piksel; yüksekliği: 50 piksel; Açıklama: text-indent: -9999px; metin başlığınızı ekrandan kaldırır, onun tarafından bildirilen bir resimle değiştirilir arka fon: … sabit Genişlik ve yükseklik. CSS Konumlandırmayı Anlayın Aşağıdaki makale, CSS konumlandırmasını kullanmanız konusunda net bir anlayış sunar. - konum: … Daha - On Adımda CSS Konumlandırmayı Öğrenin CSS @ithalat vs Harici bir CSS dosyasını çağırmanın 2 yolu vardır - sırasıyla @ithalat ve . Hangi yöntemi kullanacağınızdan emin değilseniz, karar vermenize yardımcı olacak birkaç makale. Daha - @İmport ve link Arasındaki Fark CSS'de Form Tasarlama Web formları CSS ile kolayca tasarlanabilir ve özelleştirilebilir. Bu aşağıdaki makaleler size nasıl yapılacağını gösterir: Daha - Tablo içermeyen form, Form Bahçesi, Daha da fazla form kontrolünü biçimlendirme İlham almak İlham almak için güzel tasarlanmış CSS tabanlı bir web sitesi arıyorsanız veya sadece iyi bir kullanıcı arayüzü bulmak için göz atıyorsanız, işte size önerdiğimiz CSS vitrin sitesi: CSS Remix CSS Güzellik CSS Elite CSS Mania CSS Kaçak CSS Kodlarını Temiz Tut Eğer CSS kodlarınız dağınıksa, karışıklığa neden olacaksınız ve önceki kodu tekrar değerlendirmekte zorlanacaksınız. Yeni başlayanlar için doğru girintiler oluşturabilir, bunları doğru şekilde yorumlayabilirsiniz.. Daha - Kodunuzu Temiz Tutmanın 12 Prensibi, Çevrimiçi CSS Kodlarını Biçimlendirme Tipografi Ölçümü: px vs em Ölçü birimini ne zaman kullanacağınızı seçmede sorun yaşıyorsanız px veya em? Aşağıdaki makaleler size tipografi birimleri hakkında daha iyi bir anlayış verebilir.. CSS Tarayıcılar Uyumluluk Tablosu Her bir tarayıcının CSS stillerini oluşturmanın farklı yolları olduğunu biliyoruz. Her tarayıcı için tüm CSS uyumluluğunu gösteren bir referans, grafik veya listeye sahip olmak güzel. CSS destek tablosu: 1., 2., 3., 4.. CSS'de çoklu sütunlar tasarlama Doğru hizalamak için sol, orta ve sağ sütunu alma konusunda sorun mu yaşıyorsunuz? İşte yardımcı olabilecek bazı makaleler: Kutsal Kase arayışı içinde Sahte Sütunlar CSS sütunlarınızın dağılmasının en önemli nedenleri Litte Kutuları (örnekler) Çok Sütunlu Düzenler Kutudan Çıkıyor Mutlak Sütunlar Ücretsiz CSS Editörleri Alın Özel düzenleyiciler her zaman bir not defterinden daha iyidir. İşte size önerdiğimiz bazı şeyler: Daha - Basit CSS, Not Defteri ++, Stil CSS Düzenleyicisi Medya Türlerini Anlamak İle CSS’yi ilan ettiğinizde birkaç medya türü vardır. . baskı, projeksiyon ve ekran sık kullanılan türlerden birkaçıdır. Bunları doğru şekilde anlamak ve kullanmak daha iyi kullanıcı erişilebilirliği sağlar. Aşağıdaki makalede, CSS Media türleriyle nasıl başa çıkılacağı açıklanmaktadır. Daha - CSS ve Medya Türleri, W3 Medya Türleri, CSS Medya Türleri, CSS2 Medya Türleri Geliştiriciler ve Tasarımcılar için 20 Faydalı iPhone Uygulamaları Daha İyi Grafikler için 20 Faydalı SVG Araçları Web Tasarımcıları için 20 Ultra Hafif ve Şık Yazı Tipleri Bir sonraki makale 20 Faydalı Firefox Kenar Çubuğu Eklentileri Önceki makale Instagram'dan En Çok Çıkanlar için 20 Yararlı Uygulama