İç içe kurallar. HTML belgeleri oluşturma kuralları Kurallar html genel aile kuralları 2
Merhaba, blog sitesinin sevgili okuyucuları. Bugün yukarıdaki makalede başlattığımız konuşmaya devam etmeyi öneriyorum. Daha önce basamaklı stil sayfalarının ne olduğunu öğrendik, ne anlama geldiklerini ve çok daha fazlasını öğrendik.
Bu blogda daha önce yayınlanmış olan basamaklı stil sayfalarındaki tüm materyalleri burada bulabilirsiniz. Bugün öncelikle seçicileri nasıl birleştirebileceğinizi ve gruplandırabileceğinizi konuşacağız, ardından Html kodunda aynı öğe için geçerli olan kurallara (Önemli, seçicileri sayma ve style özelliğinde yazma kuralları) detaylı olarak bakacağız.
CSS'de Seçicilerin Birleşimleri ve Gruplandırılması
Yani önceki makalelerde 7 türü dikkate almayı başardık:
Bu yedi olası görünümden CSS'de kombinasyonlar oluşturabilirsiniz. Yapacağımız tüm kombinasyonlar (atalar - torunlar, ebeveynler - çocuklar, erkek kardeşler - kız kardeşler) ile doğrudan ilişkilidir.
İlk kombinasyon türüne denir bağlam seçici. HTML kodu öğelerinin “Ata - Torun” ilkesine göre ilişkisini dikkate alır:
Ayırmak kombinasyonlardaki seçiciler bir boşlukla ayrılarak yazılır ve sağdan sola okumalısınız. O. CSS kuralları bu kombinasyonun yalnızca sonuncusu (en sağdaki) için geçerli olacaktır ve ondan önce gelen her şey, kurallarımız (vurgu) için yalnızca daha kesin bir uygulama (hedefleme) belirtmemize olanak tanır.
İlk örnekte, ata olarak Div öğelerine sahip olan tüm B öğelerinin (koyu harflerle) yeşil renkte olacağı belirtilmektedir.
Yukarıdaki kodda yalnızca altı çizili kısım yeşil renkte olacaktır çünkü Ataları arasında bir Div vardır ve B etiketleriyle vurgulanan ikinci kod parçası, Div kapsayıcısı artık ataları arasında olmadığından (yalnızca P ve Gövde) varsayılan olarak kendisi için seçilen renk olarak kalacaktır:
Bu tür kombinasyonlar herhangi bir tarayıcıda çalışır.
Bir sonraki kombinasyon türü şöyle olacaktır: çocuk seçici“Ebeveyn - Çocuk” türündeki kod öğeleri arasındaki ilişkilerin ilkeleri üzerine kuruludur:
Ayırıcı ile yazılırlar daha tanıdık (>):
Bu giriş tarayıcı tarafından şu şekilde yorumlanacaktır: Div konteyneri olan “ana” (en yakın ata) için kırmızı renkle vurgulanacaktır.
Yukarıdaki örnekte, yalnızca ana hatları çizilen paragraflar kırmızı renkle renklendirilecektir çünkü bunlar doğrudan üst öğeleri (en yakın ataları) olan Div kapsayıcısının içine yerleştirilmiştir. Yukarıdaki çocuk seçici örneğini şu şekilde görünecek şekilde değiştirirseniz:
Gövde > p (renk:kırmızı)
O zaman yalnızca son paragraf kırmızıyla vurgulanacaktır çünkü... ebeveyni Body etiketidir ve ilk iki paragraf varsayılan renklerinde kalacaktır (Gövde onların ebeveynidir, ancak Div olan ebeveyni değildir). Çocuk seçiciler Ie 6 tarayıcısında çalışmıyor.
Seçiciler CSS kodunda nasıl ve neden gruplandırılır?
Son kombinasyonun adı bitişik seçiciler ve “Kız Kardeşler - Kardeşler” türündeki HTML kodu öğeleri arasındaki ilişkilerin ilkelerini karşılar. Ayırıcı olarak “+” veya “~” kullanabilirler:
Bu giriş, I öğesinin içeriğinin (italik) yalnızca soldaki en yakın komşusunun (kodda üstte) B öğesi (kalın) olması durumunda kırmızı renkte olacağı anlamına gelir. Örneğin, bu örnekte bu koşul karşılanacaktır:
Bitişik seçiciyi Css koduna şu şekilde yazarsanız:
H1 ~ p (renk:kırmızı)
Bu, kodun daha yukarısında yer alan bitişik H1 öğesine (başlığa) sahip olan tüm paragrafların (P) kırmızı renkte olacağı anlamına gelecektir. Bu özellikle komşu unsurlara (“Kızkardeşler - Kardeşler” tipi ilişkiler) atıfta bulunur. Aşağıdaki örnekte, verilen seçici daire içine alınmış paragraflarla eşleştirilecektir:
Ie 6 tarayıcısındaki bitişik seçicilerin kombinasyonları da ne yazık ki desteklenmemektedir. Ie 6'da yalnızca ilk kombinasyon türü desteklenir, ancak Ie 7 ve üzeri sürümlerde tüm diğerleri desteklenir. Diğer tarayıcılarda herhangi bir sorun olmamalıdır.
Css'deki seçiciler ayrıca gruplayabilirsiniz. Örneğin, bazıları bir veya daha fazla aynı kural kullanıyorsa, Css kodu miktarını azaltmak için bunlar bir grupta birleştirilebilir.
Ekran görüntüsünde gösterilen örnekte her başlık seçici (h1-3) için tekrarlanmakta olup, bu özelliğin değerini değiştirmek isterseniz karmaşıklığa (çoklu çalışma) neden olabilir. Bu nedenle gruplandırılmış bir girişin ikinci seçeneği biraz daha tercih edilebilir görünüyor.
Gruplandırma yaparken lütfen unutmayın seçiciler virgülle ayrılmış olarak yazılır. Daha fazla aynı kural varsa, kod tasarrufları daha belirgin olacaktır. Ve benzersiz olan bu kuralların yine de ayrı ayrı yazılması gerekiyor.
CSS özelliklerinin öncelikleri (önemli ve önemsiz)
Şimdi bu Html kod öğesi için herhangi bir stil belirtilmemişse tarayıcının hangi stili kullanacağını düşünelim. Ve bunun için tüm bunların açıklandığı ilgili bir spesifikasyon var.
Gördüğünüz gibi artık Html ve Css'in son ayrımı gerçekleşti. Onlar. saf HTML kodu için bile tarayıcı stil sayfalarının varsayılan özelliklerini kullanmaya devam edecektir. İşte varsayılan özellikler: en düşük önceliğe sahip.
Kullanıcının tarayıcı ayarlarında atadığı özellikler daha yüksek önceliğe sahiptir. Bu stiller, bu tarayıcıda görüntülediği tüm belgelere uygulanacaktır.
Doğru, tüm tarayıcılarda bu özellik yoktur, ancak en azından Ie ve Opera'da bu özellik vardır. Onlar. İstenirse kullanıcı, stil işaretleme kaynağı olarak kendi CSS dosyasını ekleyebilecektir.
Örneğin, Ie'de bunu yapmak için sağ üst menüden "Araçlar" - "İnternet Seçenekleri" seçeneğini seçmeniz ve ardından ilk "Genel" sekmesinde alttaki "Görünüm" düğmesine tıklamanız gerekir. Açılan pencerede, “Özel stil kullanarak tasarla” kutusunu işaretlemeniz ve bilgisayarınızda ihtiyacınız olan CSS stili işaretleme dosyasını bulmak için “Gözat” düğmesini kullanmanız gerekir:
Onlar. Kullanıcı, tarayıcıda açılan herhangi bir siteyi, CSS dosyasında açıklanan gereksinimlerine uygun olarak gösterme olanağına sahiptir. denir "özel stiller" ve varsayılan belirtimde tanımlanan stillere göre önceliklidirler. Ancak sözde yazarın üslupları daha da büyük bir önceliğe sahip olacak.
Yani, eğer ben (site geliştiricisi) herhangi bir Html kod öğesinin tasarımında varsayılan stillerden farklı stiller kullanmak istersem (bunların spesifikasyonda açıklandığını unutmayın), o zaman kullanıcı tasarımımı geçersiz kılamayacaktır. kendi Css dosyası.
Kullanıcı bunu kabul etmek zorunda kalacak mı? HAYIR. Fırsatı var Önemli'yi ekleyerek CSS özelliklerinizin önceliğini artırın her birinin sonunda. Bu sözcük bir boşluk karakteriyle ayrılmış olarak ve önüne bir ünlem işareti konularak yazılır:
P (renk:kırmızı !önemli;)
Kullanıcı, tarayıcıya bağladığı kendi stil dosyasında Önemli ile aynı özelliğe sahipse tüm paragrafları kırmızı renkte görecektir. Ancak sitenin yazarı (geliştiricisi) bu özellik için Önemli ifadesini de kullanabilir. O zaman kim kazanacak ve kimin önceliği daha yüksek olacak?
buna karar verdik Önemli ile özel stillerÖnemli olsun ya da olmasın, her durumda yazarın stillerinden daha yüksek önceliğe sahip olacaktır.
Stil özelliklerinin önceliklerine ilişkin sunulan tüm bilgileri bir liste halinde özetleyelim. Öncelik yukarıdan aşağıya doğru azalacaktır:
- Önemli ile Özel
- Önemli ile Telif Hakkı
- Telif hakkı
- Gelenek
- Belirtimdeki Html öğeleri için varsayılan olarak kabul edilen stiller (yazar veya kullanıcı başka bir şey belirtmediğinde)
Onlar. Önemli olmadan yazarın stilleri daha önemlidir ve bunlarla birlikte kullanıcı stilleri en önemli ve önceliklidir. Peki şimdi yazarın tablolarıyla ilgilenelim çünkü kullanıcının ne yaptığı bizim için bilinmiyor ve karanlıkta kalıyor.
Yazar stillerinde CSS özelliklerinin öncelikleri nasıl artırılır?
Şimdi soruya geçiyoruz basamaklı CSS stil sayfaları. Bunu daha açık hale getirmek için bir örnekle inceleyelim. Diyelim ki aşağıdaki Html öğelerini içeren bir kod parçamız var (Div kabının içindeki bir paragraf):
Konteyner İçeriği
Önce aşağıdaki özellikleri yazalım:
P (renk:kırmızı) .sbox (arka plan:#f0f0f0)
Sonuç olarak, hem birincisi paragrafa (P etiketi tarafından oluşturulduğu için) hem de bu paragrafın yine sahip olduğu "sbox" sınıfına sahip öğenin gri arka planını ayarlayan özellik uygulanacaktır:
Şimdi ikinci seçiciye (sınıfın) ilk satırla çakışacak bir özellik daha ekleyelim (her ikisi de set , ancak farklı değerler kullanıyor):
P (renk:kırmızı) .sbox (arka plan:#f0f0f0;renk:mavi)
Bu, paragraf metin renginin kırmızı yerine maviye dönüşmesine neden olur.
Neden? Çünkü aynı Html kod öğesinin aynı anda birden fazla aynı kuralı, ancak farklı değerlerle ve Css kodunun farklı yerlerinden alması durumunda, çatışmayı çözmenin yolu tam olarak budur. Hangi kuralın daha yüksek önceliğe sahip olduğunu belirlemek için seçicilerini saymanız gerekir.
Bunun dışında kendin seçicilerin önceliklere göre derecelendirilmesi vardır. Kimlik en yüksek önceliğe sahiptir. Bu örnekte, kimliğin (#out) önceliği etiket seçicinin (p)kinden daha yüksek olacağından metin rengi tam olarak mavi olacaktır:
P (renk:kırmızı) #out (renk:mavi)
Öncelik merdiveninin daha aşağısında sınıflar, sözde sınıflar ve nitelikler için seçiciler bulunur. Aşağıdaki örnekte, (p) etiketi tekrar oynatılacak ve paragraf metninin rengi mavi olacaktır çünkü daha yüksek önceliğe (sınıf) sahip seçiciyle rekabet etmektedir:
P (renk:kırmızı) .sbox (renk:mavi)
En düşük öncelik (en düşük ağırlığa sahip olan ve bu tür bir uçta herhangi bir değişiklik yapmayan evrensel * sayılmaz), etiketlerin ve sözde öğelerin seçicileridir.
Böl p (renk:kırmızı) p (renk:mavi)
Ortaya çıkan paragraf metni ne renk olacak? Doğru, kırmızı, çünkü... Bu özellikte daha fazla etiket seçici bulunur (ikiye karşı bir). Oh nasıl. Onlar. İlk önce kimlikler dikkate alınır. Kazanan belirlenmezse sınıflar, sözde sınıflar ve nitelikler dikkate alınır. Orada hiçbir şey çözülmediyse veya böyle bir şey bulunamazsa, etiket seçiciler ve sözde öğeler dikkate alınır.
Ancak bir kazananın ortaya çıkmaması ve yarışan sınıfların seçicilerinin toplamda eşit önceliğe sahip olması oldukça muhtemeldir. Örneğin, bir Div kapsayıcısının içine alınmış uzun süredir acı çeken paragrafımız için:
Konteyner İçeriği
Bunun gibi bir CSS kodu parçası yazmak oldukça mümkün olurdu:
Div.kutusu #çıkış(renk:kırmızı) #p.sbox'ta(renk:mavi)
Peki paragraf metni ne renk olmalı? Her iki kombinasyon da paragrafımızı tam olarak tanımlamaktadır. İlki, her zamanki gibi, sağdan sola okunmalıdır: bu özellikleri (renk: kırmızı), Div kabının içinde bir yerde bulunan ("ataları" arasında bulundurun) #out kimliğine sahip bir öğeye uygulayın. class.box (div.box ). Paragrafımızla tamamen eşleşiyor.
İkinci kombinasyon: bu özellikleri (renk:mavi), #in kimliğine sahip herhangi bir öğenin içindeki sbox sınıfına (p.sbox) sahip bir paragraf öğesine uygulayın. Yine paragrafımızı tamamen anlatıyor. Seçicileri sayalım.
Kimlikler her iki kombinasyonda da bir kez ortaya çıkar ve aynı şey sınıflar için de söylenebilir. Geriye kalan tek şey etiket seçicileri saymaktır, ancak bunlar aynı zamanda her iki kombinasyonda da aynı sayıda kullanılır (bir). Pusu.
Anladık eşit öncelikler aynı özelliğin farklı değerlere sahip olması (metin rengi kırmızı veya mavi). Tarayıcı bu ikilemi nasıl çözecek?
Kural burada geçerli olacaktır - sonuncu kim, o haklı. Dolayısıyla benim örneğimde paragraf metninin rengi mavi olacaktır çünkü bu özellik (renk:mavi) kodun alt kısmında yer almaktadır. Bu kuralların tersine çevrilmesi durumunda:
#p.sbox'ta(renk:mavi) div.box #out(renk:kırmızı)
Sonuç olarak paragraf metninin rengi kırmızıya dönüşecektir. Q.E.D. Örneğin herhangi bir kombinasyona başka bir etiket seçici ekleyebilirsiniz; kodda daha düşük olmasa bile teraziyi onun lehine çevireceğiz:
Gövde #in p.sbox(renk:mavi) div.box #out(renk:kırmızı)
Bu durumda paragrafın rengi maviye dönüşecektir. Evrensel seçicinin “*” önceliklerin hesaplanması üzerinde hiçbir etkisi yoktur. Bu arada, hemen yukarıda Önemli'yi ekleyerek CSS kurallarının önceliğini artırmanın bir yoluna baktık. Örneğimizde şöyle görünebilir:
P (renk:yeşil !önemli) #p.sbox'ta(renk:mavi) div.box #out(renk:kırmızı)
Bu durumda paragraf metni ne renk olacaktır? Yeşil elbette. Ve hiçbir şeyi saymanıza bile gerek yok çünkü Önemli ekleme stil özelliğine geçiş, kodun neresinde olursa olsun ve kaç tane seçiciye sahip olursa olsun, bu tartışmalı konuyu açık bir şekilde çözer.
Ancak Önemli, bir mülkün önceliğini koşulsuz olarak artırmanın tek yolu değildir. Arttırmanın ikinci yolu stil kullanmak olabilir Stil özelliğindeki özellikler ihtiyacınız olan HTML öğesini seçin.
Onlar. aynı uzun süredir acı çeken P etiketinin içine herhangi bir rengi belirten bir Stil niteliği ekleyin:
Konteyner İçeriği
Bu kadar. Artık, harici bir stil sayfası dosyasında veya Stil Html kod etiketlerinin içinde bu öğe için hangi özelliklerin belirtildiğine bakılmaksızın, paragraf metni rengi sarı olacaktır.
Ancak Önemli olan özellikleri yenemez. Onlar. "p (renk:yeşil !önemli)" kuralını eklediğimiz son örnekte, style="renk:sarı" olsa bile metin rengi hala yeşil olacaktır.
Aslında, iki kuralın önceliği (harici stil sayfası dosyasındaki ve stil özelliğindeki Önemli ile) eşittir, bu da seçicileri saymaya devam etmemiz gerektiği anlamına gelir. Gerçekten stil özelliğinin içinde olabilirler mi?
Evet, böyle bir şey olamaz, bu da stil özelliğinde yazılan kuralın, yalnızca seçici sayısının daha az olması nedeniyle (sıfır herhangi bir sayıdan küçük olacaktır) Önemli olan kurala karşı her zaman kaybedeceği anlamına gelir.
Peki o zaman ne olacak? Css özelliğine en yüksek önceliği verecektir? Bu doğru, style özelliğinde ve hatta Önemli ile yazılacaktır:
Konteyner İçeriği
Bu durumda paragraf metninin rengi sarı olacak ve bunu yazarın üslubundaki herhangi bir şeyle kesintiye uğratmak mümkün olmayacaktır. Stilleri ayarlamanın kesin bir yolunu bulduk. Yalnızca kendi stil dosyasına ve bunun için belirlenen Önemli özelliğine sahip bir kullanıcı tarafından kesilebilir.
O halde hadi oluşturmaya çalışalım önceliği etkileyen faktörlerin listesi yazarın stillerindeki özellikler azalan sırayla:
- İstenilen etiketin stil özelliğinde Önemli ile birlikte özelliğin belirtilmesi
- Harici bir stil sayfası dosyasındaki veya doğrudan Html kodundaki stil etiketindeki bir özelliğe Önemli ekleme
- Bu özelliğin stil özelliğinde ayarlanması yeterlidir.
- Belirli bir mülk için daha fazla sayıda kimlik kullanma
- Daha fazla sınıf seçici, sözde sınıf veya nitelik kullanma
- Daha fazla etiket seçici ve sözde öğe kullanma
- CSS kodunda daha düşük özellik yerleşimi, diğer her şey eşit
Aslında stil özelliğindeki kurallar çok nadiren kullanılır (bu durumda ayrı bir CSS dosyası yerine site kodunun tamamında değişiklik yapmanın ne kadar zor olacağını bir düşünün).
Bu özellik esas olarak bir şeyi hızlı bir şekilde test etmeniz gerektiğinde kullanılır. Kodunuzu, kendi stilleri olan ve eklenen öğeleriniz için devralınabilen () diğer kişilerin Html sayfalarına eklemeniz de kullanışlıdır.
Kodunuzu diğer kişilerin sayfalarına neden ve nasıl eklemelisiniz? Bizim buna ihtiyacımız olmayabilir ama Yandex ve Google bunu başkalarının sitelerinde (bizim sitelerimizde) yapıyor.
Stil özelliğini reklam blok kodunun tüm öğelerine, içinde belirtilen özellikler ve eklenen Önemli ile birlikte ekleyerek, artık reklam kodunun herhangi bir şekilde değişmesi konusunda endişelenmenize gerek kalmaz (her ne kadar Yandex reklamları CSS kullanılarak değiştirilebilir olsa da) ve Önemli, görünüşe göre bu yöntemi kullanmamışlar).
Sana iyi şanslar! Yakında blog sitesinin sayfalarında görüşmek üzere
İlgini çekebilir
Modern CSS'deki etiket, sınıf, kimlik ve evrensel seçicilerin yanı sıra özellik seçicileri 
CSS'deki sözde sınıfların ve sözde öğelerin seçicileri (havada kalma, ilk çocuk, ilk satır ve diğerleri), Html kod etiketleri arasındaki ilişkiler 
Liste stili (tür, resim, konum) - Html kodundaki listelerin görünümünü özelleştirmek için Css kuralları 
CSS ne işe yarar, basamaklı stil sayfalarının bir Html belgesine nasıl bağlanacağı ve bu dilin temel sözdizimi 
CSS - nedir, basamaklı stil sayfaları Stil ve Bağlantı kullanılarak Html koduna nasıl bağlanır? 
CSS'de boyut birimleri (piksel, Em ve Ex) ve miras kuralları 
CSS'de arka plan (renk, konum, resim, tekrar, eklenti) - Html öğelerinin arka plan rengini veya arka plan resmini ayarlamak için her şey 
Sitenizin CSS dosyasında kullanılmayan stil satırlarını (ekstra seçiciler) bulma ve kaldırma CSS aracılığıyla iç ve dış bağlantılar için farklı stil
Kurallar dünyamızın bir parçasıdır ve günlük eylemlerimize sürekli olarak rehberlik eder. Hayatımızın hemen her alanında kurallar vardır - davranış kuralları, görgü kuralları, karşıdan karşıya geçme kuralları - liste sonsuz olabilir.
Kurallar neler? Takip edilmesi veya uyulması gereken bir dizi talimattır. Kuralları ima eden veya kurallara atıfta bulunan birçok İngilizce kelime vardır:
- Dikkat - uyarı
- Emirler – emir, direktif
- Yol tarifleri - talimatlar
- Ön uyarılar - uyarı
- Kılavuzlar
- Yönergeler
- Talimatlar - talimatlar
- Kanunlar - kanunlar
- Politikalar - ayarlar
- Prosedürler
- Düzenlemeler - kurallar
- Uyarılar - uyarılar
Google kısa kodu
Kurallar bizi her gün etkiler ve en basit yerlerde bile kaçınılması zordur; sokakta yürürken bile etrafımıza asılan ve uyulması gereken kurallara ilişkin uyarı ve talimatlar veren tüm tabelaları gözden kaçırmak imkansızdır. Bir kuralı açıklamanın en kolay yolu, onu bir kitaba yazmak veya herkesin görebileceği işaretler asmaktır. İşte sokaklarda ve halka açık yerlerde sıklıkla görebileceğimiz, uyarı levhaları olarak bilinen işaretler şeklinde asılan bazı kurallar.
- bisiklete binmek yok – bisiklete binemezsiniz
- giriş yok - giriş yasaktır
- paten yapılmasına izin verilmiyor - paten yapamazsınız
- Yaklaşan bisikletlere dikkat edin - Yaklaşan bisikletlere dikkat edin
- Açık tutun = bu alanı kapatmayın – bu alanı işgal etmeyin
- burada benzin bidonlarınızı dolduramazsınız - gaz tüplerini dolduramazsınız
- zehir = yemeyin – zehir = yiyemezsiniz
- sigara içmek yasaktır - sigara içmek yasaktır
- yoldan geçen insanlara dikkat edin - dikkatli olun, yayalar
- park etmek yasaktır - park etmek yasaktır
- çöp atmayın - çöp atmayın
- çocuklara izin verilmez – çocuklara izin verilmez
- fotoğraf çekmeye izin verilmiyor – fotoğraf çekmek yasaktır
- lütfen köpeğinizden sonra temizleyin – köpeğinizden sonra temizleyin
- Ölüm tehlikesi – tehlike, yakınlarda yüksek voltajlı elektrik – tehlikeli! – tehlikeli, yüksek voltaj
- tükürmeye izin yok - tüküremezsin
Gördüğünüz gibi etrafımızda pek çok kural var (kurallar etrafımızdadır) ve biz de onlara uymalıyız, ancak bazen insanların kurallara uymadığı, kuralları çiğnediği veya kurallara aykırı davrandığı da söylenmelidir. kurallar (kurallara aykırı hareket etmek), bazen “yakalanırlar” ve cezalandırılırlar (cezalandırılırlar). Bir kuralı ihlal ederseniz para ödemek zorunda kalabilirsiniz; Para cezası/ceza veya daha kötüsü sizi polis karakoluna gitmek zorunda bırakabilir.
Hiç kuralları çiğnedin mi? Her zaman kurallara uyan kişilere “kanunlara uyan”, kuralları çiğneyenlere ise “kanunları çiğneyen” denir.
Son olarak size “iyi olmanızı” diliyoruz! , “kurallara uyun!”, “Beladan uzak durun!”
Doğru CSS kodu nasıl yazılır?
Temelleri bilmeden ilerlemek imkansızdır. Üstelik bu temel bilgilerin bilinçaltı seviyeye kadar eğitilmesi gerekiyor. Temiz, anlaşılır kod yazmanın tüm kurallarını ezbere bilmeli ve bunları her yerde uygulamalısınız. Mevcut projenizle veya en fazla bir sonraki projenizle başlayın. Bu sizin CSS İnciliniz olacak
Aşağıda kullanıcı dostu ve profesyonel CSS kodu yazmak için 15 altın kurala bakın
1) CSS-Reset'i kullanın
CSS sıfırlama- bu, stil dosyamızın başında yazılan, tüm değerlerin sıfırlandığı ve tüm temel parametrelerin tüm stiller için ayarlandığı, büyük olasılıkla her belirli kimlik için yazmamız gereken belirli bir kod parçasıdır. /sınıf. Bu, kodu daha sonra kısaltmanıza ve tarayıcılar arasındaki görüntü farklılıklarını önlemenize olanak tanır.
İşte http://meyerweb.com/eric/tools/css/reset/index.html adresinden alınan bir CSS Sıfırlama örneği
/* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blok alıntı, ön, a, kısaltma, kısaltma, adres, büyük, alıntı, kod, del , dfn, em, font, img, ins, kbd, q, s, samp, küçük, vuruş, güçlü, alt, sup, tt, var, b, u, ben, merkez, dl, dt, dd, ol, ul , li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td ( kenar boşluğu: 0; dolgu: 0; kenarlık: 0; taslak: 0; yazı tipi boyutu: %100; dikey hizalama: taban çizgisi; arka plan: şeffaf; ) gövde ( satır yüksekliği: 1; ) ol, ul ( liste stili: yok; ) blok alıntı, q ( tırnak işaretleri: yok; ) blok alıntı: önce, blok alıntı: sonra, q: before, q:after ( content: ""; content: none; ) /* odak stillerini tanımlamayı unutmayın! */:focus (outline: 0; ) /* eklemeleri bir şekilde vurgulamayı unutmayın! */ ins ( text-decoration: none; ) del ( text-decoration: line-through; ) /* tabloların işaretlemede hâlâ "cellspacing="0"" olması gerekiyor */ table ( border-collapse: daralt; border-spacing : 0;)
2) Kısaltmalar kullanın
Örneğin uzun bir yazı yazmak için
Kenarlık üstü: 5 piksel; sağ kenarlık: 10px; kenarlık alt: 15px; sol kenarlık: 20px;
kısaca şunu yazabiliriz:
Kenarlık: 5 piksel 10 piksel 15 piksel 20 piksel;
yani yukarıdan başlayarak saat yönünde.
Temel olarak kısaltılmış kenarlık, kenar boşluğu, dolgu, yazı tipi ve arka plan.
Bu konuda daha fazlasını görebilirsiniz
Ancak renkler şu şekilde azaltılabilir:
Renk kodu tekrar eden 3 rakamdan oluşuyorsa bu üç rakamı kolayca yazabilirsiniz.
Örneğin: #FFFFFF #FFF olarak yazılabilir veya #990055 #905 olarak yazılabilir ancak #F091A4 kısaltılamaz.
3) Yorumları kullanın
Yorumları istediğiniz yerde kullanın; bunlar kodu düzenlemenize gerçekten yardımcı olur, kendiniz ve onunla çalışacak kişiler için kodu daha anlaşılır hale getirir
Şunun gibi bir şeye benziyor:
/* Yorumunuz buraya */
Yorum:
a) Stil sayfasının başlığı - kodun yazarının kim olduğunu ve ne zaman yazıldığını yazın
b) Stil bölümlerini işaretle - bu, tüm kodu bölümler halinde düzenleyecektir.
Örneğin:
c) Sorunlu alanlar hakkında yorum yapın. Örneğin, sayfanın farklı tarayıcılarda farklılıklar gösterebileceği durumlar. Örneğin:
Giriş /* IE6 Sorunu */
d) Birlikte çalıştığınız kişilere, örneğin bir şeyin iyileştirilmesi gerektiğinde küçük yorumlar yazın.
4) Bir Çiçek Efsanesi Ekleyin
Küçük CSS dosyalarıyla sitenin tüm renklerini takip etmek zor değildir.
Peki ya 5000 satırlık kodumuz varsa? - Yanlış renklerin kullanılmasına izin veremezsiniz.
Bu amaçla bir renk efsanesi, yani dosyamızda kullandığımız renklerin bir listesi bulunmaktadır. Örneğin:
/* /* açık mavi: #4595be /* koyu mavi: #367595 /* bağlantılar için kırmızı: #9F1212 ************************** ******/
5) Konum:gerçek ve Konum:mutlak'ın ne olduğunu hatırlayın
Başlangıç düzeyindeki tasarım tasarımcılarının çoğunun bu kavramlarla kafası karışır, ancak karışıklığı önlemenize izin veren bir kural vardır.
Pozisyon:mutlak nesneyi sayfaya göre konumlandırır ve HTML akışında nerede bulunduğu önemli değildir. Varsayılan değer solda 0 ve üstte 0'dır.
Genellikle bu seçenek zahmetli olduğu ve sınırlı seçeneklere sahip olduğu için kullanılmaz. Ancak sizin için yararlı olacak şey, eğer öğemizin ebeveynini (“sarmalayıcı”) Position: realtive olarak ayarlarsanız, Position: mutlak zaten hizalanacaktır. Ebeveynin sol üst köşesine göre. Böylece bu özelliği gerektiği gibi ekleyebilirsiniz. Resimde açıkça görülüyor:
6) Hack'leri kullanmaktan kaçının
Bazen IE6 ve IE7 gibi tarayıcılar bizi hack kullanmaya zorlar. Haki, doğrulayıcı için ani bir hatadır. Bu yüzden her tarayıcı için özel css dosyalarına koyun.
Her tarayıcı için özel hack girişlerini ve bunların ayrı dosyalara nasıl yerleştirileceğini görebilirsiniz.
7) Konum açıklamalarınızda Kenar Boşluklarını kullanın
Bu çok sık fark edilen bir şey değildir ancak farklı tarayıcılarda sorunların önlenmesine yardımcı olur.
Fikir şu: ebeveyn öğesinde dolgu kullanmak yerine, çocuk öğelerde kenar boşluğunu kullanıyoruz. Yani bunun yerine
#ana-içerik (sol dolgu: 10 piksel)
#ana-içerik ( ) #ana-içerik #sol-sütun (sol kenar boşluğu: 10px)
Dolgu kullanmanın yanlış bir yanı yok, ancak deneyimler marjın daha iyi olduğunu gösteriyor
8) Şamandıraları kullanın
Bir öğeye kayan nokta atamak istiyorsanız ebeveynine yazın taşma:gizli
Ul ( taşma: gizli; ) ul li ( kayan nokta: sol; )
Bu özellik olmadan öğe çekici olmayan bir şekilde akabilir; kenar boşlukları veya kenarlıklar ayarlanırken de sorunlar ortaya çıkabilir.
Öğenin etrafta akmamasını istiyorsanız - belirtin ikisini de temizle aerodinamik öğenin altında. Bu genellikle taşma yerine kullanılır: gizli;
9) Float elemanları için display:inline ekleyin
IE6'da kayan öğelerdeki kenar boşluklarının iki katına çıkmasıyla ilgili oldukça iyi bilinen bir sorun. Yani 20 piksele ihtiyacımız varsa 10 piksel yazmamız gerekiyor çünkü bu girinti iki katına çıkıyor. Her ne kadar IE6 zaten ölüyor olsa ve birçok tasarımcı siteyi bunun için optimize etmek için zaman harcamasa da, yine de küçük bir kod parçası, içindeki ekranı daha keyifli hale getirecek. Öyleyse koyalım
Görüntüle: satır içi /* IE6 Sorunu */
kendisine uygulanan bir kayan nokta olan bir öğe için
10) Spritelarla hayatı daha konforlu hale getirmek
Sprite resimleri çok kullanışlı bir şeydir. Tüm sayfanın grafiklerine genel bir bakış sağlarlar ve yükleme sürelerini azaltırlar.
İngilizce biliyorsanız, o zaman burada
11) Site dosyalarının yapısı net olmalıdır
Site yapısını netleştirmek için zaman ayırın. Her şeyi raflara koyun.
Örneğin:
Burada "Web Sitesi Adı"- birlikte çalıştığımız sitenin adı. Bu klasör sitenin HTML dosyalarını ve ayrıca klasörleri içerir varlıklar Ve stiller.
Klasörde varlıklar arşivler veya PDF dosyaları gibi siteden indirilebilecek dosyalar içerir. Klasörde stiller sırayla css, resimler ve javascript klasörlerini içerir.
- css- reset.css, order.css ve main.css gibi tüm css dosyalarını içerir
- Görüntüler- sitenin tüm resimleri. Bu klasör ayrıca bölümlere ayrılabilir.
- javascript- tüm javascript dosyaları.
Bu diyagram yaklaşıktır ve farklı şekillerde görüntülenebilir. Buradaki fikir, daha hızlı çalışmanıza yardımcı olması ve siteyi daha net ve düzenli hale getirmesidir.
12) Stilleri genişletin
İsteğe bağlı tavsiye - Her şeyin net ve görsel olması için sınıfların adlarını ve stil kimliklerini ağaç benzeri bir şekilde yazmak daha iyidir.
13) Göreceli değerler yerine pikselleri kullanın
Her şey oldukça basit - belgenin göreceli değerlerin yüzdelerini hesaplaması gerekmediğinden pikseller kodu daha az yükler.
Göreceli niceliklerle ilgili sorun bu göreliliğin aktarılmasıdır.
Konuyu daha açık hale getirmek için bir örnekle açıklayacağım:
gövde (font-size: 62,5%), font-size: 1em, yani 10px anlamına gelir.
#blog-content'in 14 piksele ihtiyacı varsa şunu yazın:
#blog içeriği ( yazı tipi boyutu: 1,4em; )
Şimdi #blog-content içindeki H3 etiketinin 20 piksele ihtiyacı varsa, o zaman şu şekilde ayarlanabilir:
#blog-içerik ( yazı tipi boyutu: 1,4em; ) #blog-içeriği h3 ( yazı tipi boyutu: 2,0em )
Her şey yoluna girecek ama göreliliğimiz var. Ve bunlar 2,0em 1,4em'e uygulanır
#blog içeriği ve sonunda elde edeceğimiz boyut 28 pikseldir.
Bu yüzden sabit değerleri kullanın.
14) Sözde sınıfları bağlantı etiketleriyle sınırlayın
Yeni tarayıcılarda bu sorun yoktur; sorun IE6 liderliğindeki bir dizi eski tarayıcıdan kaynaklanmaktadır.
Sorun şu ki, eski tarayıcılarda sözde sınıflar (örneğin:hover) yalnızca bir etikete uygulandığında çalışır A, yani
#header ul li:hover ( arka plan rengi: #900 )
IE6'da çalışmıyor
Bu sorun jQuery ile düzeltildi
15) Seçicilerle ilgili sorunlardan kaçının
Mümkün olduğunda seçicileri kullanın
Örneğin, bunun yerine kullanın
#ana-içerik.ana-başlık
#ana içerik h1
Seçicileri gruplandırırken dikkatli olun
Sonuçta, göreceli değerleri kullanırsanız burada yanlış oynayabilirsiniz
Bu örnekte her şey yolundaysa,
Ana içerik div,.main-content p ( color: #000; )
Bu konuda göreceli değerlere dikkat edin.
Ana içerik div,.main-content p ( satır yüksekliği: 1,3em; )
Ve sonunda
Başarılı kod yazmak için sürekli olarak bir şeyi diğerine sarmaktan kaçının.
h1, ul ve p etiketlerini öğrenin.
Başarının anahtarı basit; pratik yapın, pratik yapın, pratik yapın
Antrenmanında iyi şanslar)
» »
Paylaşmak önemsemektir!
Ne işe yarar özelliği
