CSS Stili Öncelik Seviyesini Gözden Geçirme
Basamaklı Stil Sayfası (CSS) diyelim ki, web ile ilgili diğer dillerle karşılaştırıldığında en basit dillerdir, bu yüzden bir web sitesi oluşturmayı öğrenmeye yeni başlayan ve çoğunlukla bu dili ve HTML'yi öğrenecek olan birçok insanı bulmak şaşırtıcı değildir..
Bu yazıda, CSS temellerine geri döneceğiz. CSS stillerinin başlangıçta nasıl uygulandığını, hangi stillerin uygulanacağını, bazı stillerin bildiriminin diğerlerinin üzerine nasıl yazdığını inceleyeceğiz..
Bu nedenle, bu yazı özellikle zorlukların üstesinden gelmeye yeni başlayanlar için, özellikle ilk stil sayfalarını derlerken hala hatalar ve hatalar yapan kişiler için hazırlanmıştır. Öyleyse, daha yeni başlayalım..
Varsayılan Tarayıcı Stilleri
Firefox, Chrome, Safari, Opera ve Internet Explorer şu anda pazardaki en iyi beş masaüstü tarayıcıdır. Bu tarayıcılar ve diğer tüm tarayıcılar, HTML öğelerini oluşturmak için yerleşik varsayılan stilleri dahil etmek için standart bir kural izler..
Böylece, herhangi bir stil eklenmeden rastgele HTML öğeleri koyduğumuzda, tarayıcıda hala düzgün şekilde oluşturulduğunu göreceksiniz..
Ancak, bu öğeyi dikkatlice incelersek, tarayıcının her birinin kendi değerleri için (biraz) farklı değerleri vardır. “varsayılan” tarayıcılar arasında, özellikle IE6, 7 ve Firefox 3.0 gibi eskilerde tutarsızlığa neden olan bildirim.
Örneğin, yukarıdaki ekran görüntüsünden görebileceğiniz gibi, en yeni Firefox blockquote varsayılan olarak marj: 16 piksel 40 piksel 16 piksel 40 piksel, diğer tarafta ise Internet Explorer 7 yapacak blockquote ile marj: 0 piksel 40 piksel.
Yukarıda gösterilen tutarsızlıkların üstesinden gelmek için, birçok web tasarımcısı ve geliştiricisi tüm bu stillerin üzerine yazmayı tercih eder. CSS Sıfırla. Bu CSS dosyası genellikle hemen hemen tüm HTML’yi içerir tip seçiciler, eşit kurallarla onları tanımlama.
Kullanılabilir birçok CSS sıfırlaması var, ancak işte ilk üç favorim:
- Normalize.css
- CSS Sıfırla
- HTML5 Stil Sayfasını Sıfırla
Seçiciler
Muhtemelen bu terimi ziyaret ettiğiniz web tasarımı / geliştirme bloglarında okudunuz; Seçiciler.
CSS'deki Selector, uygulanacak stiller için HTML belgesindeki herhangi bir parçayı hedeflemek için kullanılan sözdizimidir. Burada tartışacağımız üç temel seçici var, çünkü muhtemelen ilk web sitenizde kullanılan ortak seçiciler olacak. Gelecekteki yayınlarda başkalarını ele alacağız.
Tip Seçici
Yukarıda bir kez belirttiğimiz gibi, Tip seçici belgedeki herhangi bir HTML öğesini hedefleyecektir. Örneğin:
p / ** beyannamesi ** /
tüm maç olacak p ya da paragraf elemanları ve onu kullanarak sonunda tarayıcılardan verilen varsayılan stillerin üzerine yazacaktır..
Sınıf Seçici
Bir elemana bir sınıf veya hatta birçok sınıf eklediğinizde, bu sınıfları da hedefleyebilirsiniz. Sınıf Seçici ile başlar nokta parametre.
.kutu / ** bildirimi ** /
Yukarıdaki kod parçası, kutu sınıfına sahip tüm öğelerle eşleşir veya daha özel olarak da seçebiliriz.
p.box / ** beyannamesi ** /
Sadece hedefler p sahip olan eleman Kutu sınıf.
Ne zaman kullanıyoruz Sınıf seçici, aynı stilleri her ikisi de beyan tip seçici ve Varsayılan Tarayıcı üzerine yazılacak.
Kimlik Seçici
İD çok kısıtlayıcı bir özelliktir, yalnızca bir taneye sahip olabiliriz. İD bir elemanda ve aynı zamanda benzersiz olması gerekir.
içerik
Durumunda biz İD bir elementte kullanabiliriz kimlik seçici bu elemanı hedeflemek; id seçici bir karma ile tanımlanır # parametre.
#uniqueID / ** bildirimi ** /
Beri İD benzersiz, seçici türünün en güçlü öncelik seviyesine sahiptir. Yani, biz stilleri ilan ettiğimizde İD Seçici sonuçta aynı beyannamenin üzerine yazacaktır. Sınıf, tip seçiciler ve Varsayılan Tarayıcı stilleri.
Stilleri Gömme
Tüm temel temel seçicileri seçtik ve şimdi bu stillerin bir HTML belgesine nasıl yerleştirildiğine bakacağız..
Dış Stiller
Dış stiller, genellikle bir dosyaya ayrı bir dosyaya eklenen stillerdir. .css o zaman kullanarak HTML belgesine bağlanan dosya Bu stilleri uygulamak için etiket.
Ve dosyalarda bildirilen tüm stiller, bahsettiğimiz gibi davranır. Seçiciler Yukarıdaki bölüm, yani çoğunlukla üzerine yazacak varsayılan tarayıcı stil ve seçicilerin öncelik düzeyine bağlı olarak başka bir stil bildiriminin üzerine yazın.
Bu uygulama, stilleri eklemenin en iyi yoludur, özellikle ekleyebileceğiniz birçok sayfa içeren binlerce satır CSS kodunuz varsa.
Bunu yaparak, stiller de kolayca yönetilebilir olacak, örneğin, Tipografiyle ilgili tüm stilleri kontrol etmek için tipografi.css gibi kendi özel rolüne bağlı olarak CSS dosyalarını çeşitli dosyalara ayırabilirsiniz..
İç Stiller
İç stiller, genellikle içinde bir HTML belgesine doğrudan yerleştirilen stillerdir. etiket.
Ancak, HTML sayfanız çok uzun olacağından ve stil yalnızca stillerin nereye gömüldüğünü etkileyeceğinden, yüzlerce stil satırınız olduğunda bu uygulama önerilmez. On sayfa söylemeye izin verdiğinizde, bu stilleri kopyalamanız ve bunları tüm sayfalara yerleştirmeniz gerekir ve stilleri değiştirmeniz gerektiğinde, bunları sıkıcı bir görev olan on farklı sayfaya dönüştürmeniz gerekir..
Öncelik seviyesine göre, iç stil daha yüksektir, bu yüzden dış stillerin üzerine yazacaktır..
Satır İçi Stilleri
Satır içi stiller, HTML öğesine doğrudan gömülü olan stillerdir.
Bu bir paragraf
Yukarıdaki bu örnek eklenecek 5px paragraf öğesinin kenar boşluğuna ve aynı zamanda hem iç hem de dış stillerde bu öğe için bildirilen kenar boşluklarının üzerine yazacaktır..
Ancak bunu yapmaktan kaçının, çünkü işaretlemeniz tüm bu stil beyannameleriyle darmadağın olur; Gömülü stillerin bir demet varsa, tüm html ve stilleri görmek ve korumak için bir kabus bile olacak.
daha fazla okuma: CSS eklemenin üç yolu - W3CSchools.
! Önemli Kural
Bir öğe için belirli bir stil uygulamak zorunda olduğumuzda bazı durumlar vardır, ancak o öğe için aynı stil, stil sayfasında veya belgede başka bir yerde de bildirilmiştir. Örneğin:
Katıştırılmış stillere sahip aşağıdaki bağlantı etiketimiz var
Bu bir link
Ayrıca stil sayfasındaki bu bağlantı etiketi için ayrı bir stile sahibiz.
bir sınır: 1 piksel katı # 333; arkaplan rengi: # 555;
Bu örnekte, !önemli tarayıcıyı, stil öğesinde stil öğesi yerine öğe stilini kullanmaya zorlama.
a border: 1px katı # 333! önemli; arkaplan rengi: # 555! önemli;
!önemli Kural, bu tarzın en fazla olduğunu gösterir. önemli ve doğrudan elemana gömülmüş olsa bile diğer stile uygulanmalıdır (Satır İçi Stilleri).
daha fazla okuma:! Önemli CSS Beyanları: Nasıl ve Ne Zaman Kullanılacağı - Smashing Magazine.
Sonuç
Bu makalede tüm konuyu ele aldık. Artık her seçicinin ve stilleri yerleştirme yöntemimizin tarayıcı mekanizmasında farklı öncelik seviyelerine sahip olduğunu görüyoruz. Daha önce de bahsettiğim gibi, bu konu acemi seviyelere yöneliktir, bu yüzden kesinlikle deneyimli web tasarımcıları için yeni bir şey değildir..
Ancak, genel olarak her web tasarımcısının, temel konulara geri dönmenin bazen bir konu hakkındaki temel bilgimizi gözden geçirmenin gerekli olduğunu kabul edeceğini düşünüyorum. Aslında, bu gibi harika (ve çılgın) şeylerden daha fazla etkilenme eğiliminde olduğumuz için bazı temel şeyleri özlüyoruz..
Son olarak, bu makaledeki tartışmamızı daha ayrıntılı olarak incelemeniz için bir demo ve kaynak dosya sağladım..
- gösteri
- Kaynak İndir
Umarım bu yazıdan hoşlanıyorsunuzdur ve içinde bazı yanlışlıklar olduğunu düşünüyorsanız veya bazı önemli noktaları kaçırmışsam, aşağıdaki yorum bölümünde bana bildirmekten çekinmeyin.
