, ciltler için bir şarkı rengi ayarlamak gerekir. Robiti nasıl? Standart CSS seçicileri etiketleri takip etmezler, bir satırdaki tüm blokların parametrelerini belirtirler. Affedersin. Bir sınıfa bir öğe atayın. Örneğin, class='red' ile birinci div, class='blue' ile diğeri ve class='green' ile üçüncü div. Artık ek CSS tabloları için bunları seçebilirsiniz.

Sözdizimi şu şekildedir: bir nokta (".") belirtin, ardından sınıfın adını yazarım. Shchob cheruvati ilk blok, vikoristovuemo tasarımı. Diğerleri - .blue vb.

Önemli! class özniteliğinin anlamını anlamanız önerilir. Kirli bir tonda, transliterasyon (örneğin, krasiviy-blok) veya vipadkovy harf/sayı kombinasyonlarının (ojfh834871) kullanımına saygı duyulur. Böyle bir kodla kafanız karışır, bazı zorluklarla sizden sonra projede sıkışıp kalanlarla ilgili gibi görünmüyor. optimum seçenek- BEM uğruna bir metodoloji olarak Vykoristovuvaty.

Pozitif canlılık - başınızı dik tutmak için.

Nedoliki - kіlkoh elementіv'da aynı sınıftan olabilir, o zaman koku hemen redaguvatimutsya olacaktır. Sorun, metodolojinin sapmasına ve ön işlemcilerin azalmasına yenik düşmektir. Obov'yazkovo ustası daha az, sass veya başka herhangi bir ön işlemci, koku robotu affeder.

kimlikli seçici

Herhangi bir varyant için, taslağı hazırlayanların ve programcıların fikirleri belirsizdir. Deyakі asistanlarıcssvzagali, vikoristovuvati'yi önermiyorİD,Yanlış koku stazına sahip kırıklar, çürüme ile ilgili sorunlara neden olabilir. Bununla birlikte, birçok favori aktif olarak her yöne düzenlenmiştir. Vershuvat seni. Sözdizimi şu şekildedir: ґrat sembolü ("# ”), Potim im'ya bloğu. Örneğin,#Kırmızı.

İDparametre sayısı sınıfa bağlıdır. İlk olarak, aynısından iki tane alamazsınız.İD.Bize benzersiz isimler atanır. Başka bir şekilde, böyle bir seçici daha yüksek bir önceliğe sahip olabilir. Tse, bloğa bir sınıf atayabileceğiniz anlamına gelirkırmızıve tablolara girincsskırmızı ve sonra sana atakimlik maviMavi rengi değiştirirseniz, blok mavi olur.

Pozitif hisler - etiketler ve sınıflar için stillere saygıdan ödün vermeden belirli bir öğeyle ince ayar yapabilirsiniz.

Nedoliki - harika kіlkost'ta kaybolmak kolaydırİDіsınıf.

Önemli! BEM metodolojisine (veya benzerlerine) nasıl saygı duyuyorsunuz?İDsen, zahalom, gerek yok. Bu tür bir düzen tekniği, daha zengin olan farklı benzersiz sınıflarda bulunabilir.

Üniversal seçici

Sözdizimi: yıldız işareti ("*") ve kıvrık kemerler, tobto *{}.

Şarkı söylemenin tanınması için zafer, tarafın tüm unsurlarına bir kez atfedilir. Ne zaman şanslı olabilirsin? Örneğin, gücün tarafını ayarlamak istiyorsanızkutu boyutlandırma: kenarlık kutusu.Sadece belgenin tüm bileşenlerini keruvanya için değil, aynı zamanda ana bloğun tüm alt öğelerinin kontrolü için de vikoristovuvatis yapmak mümkündür, örneğin,div*().

Perevagi - keruvati yapabilirsiniz harika kіlkistyu elementler birden.

Nedoliki - yeterli esnek seçenek yok. Ayrıca bu selektörün seçimi bir bakıma tarafın işini iyileştiriyor.

Niteliklerin arkasında

Bir elementi belirli bir nitelikten melekleştirme yeteneği verin. Örneğin, farklı nitelik türlerine sahip birkaç giriş etiketiniz var. Bunlardan biri metin, diğeri şifre, üçüncüsü sayıdır. Açıkçası, cilt sınıfı kimliğini ayarlayabilirsiniz, ancak bunu manuel olarak girmeyin. Niteliklerin arkasındaki CSS seçiciler, şarkı etiketleri için değerleri maksimum hassasiyetle belirtmenize olanak tanır. Örneğin, eksen:

giriş()

Bu öznitelik seçici, metin türündeki tüm girişleri seçer.

Bunu yapmak için araç gnuchky'dir, niteliklerin varlığını görebileceğiniz gibi, onu hangi etiketlerle yenebilirsiniz. Ve yine de hepsi değil! CSS özelliği ile gezinme öğelerini büyük bir kolaylıkla kontrol edebilirsiniz!

Görünüşe göre, yanınızda yer tutucu = "Ad girin" ve giriş yer tutucu = "Parolayı girin" özniteliğine sahip bir giriş var. Seçici yardımıyla da seçim yapabilirsiniz! Muzaffer inşaat kimin için geliyor:

giriş () veya giriş

Niteliklere sahip muhtemelen gnuchkish bir robot. Diyelim ki, benzer başlık özelliklerine sahip bir dizi etiketiniz var ("Hazar" ve "Hazar" diyelim). Hakaretleri seçmek için, vikoristovuєmo bu tür seçiciler:

CSS, "Hazar", yani "Hazar" ve "Hazar" sembollerinden herhangi birinin başlığı için tüm öğeleri seçer.

Nitelikleri şarkı sembollerine dayanan etiketleri de seçebilirsiniz:

veya onlarla bitirin:

{}.

Perevagi - maksimum esneklik. Yan sınıflar ile aynı olmayan temel unsurların olup olmadığını seçebilirsiniz.

Nedoliki - vikoristovuetsya, oldukça nadiren, belirli vipadkah'ta daha az. Verstalnikov'un çoğu metodolojiye öncelik verir, parçalar sınıfı daha basit bir şekilde gösterir, sayısal işaretleri "eşit" olarak düşürür. Ayrıca bu seçiciler internette çalışmaz. Gezgin sürümü 7 ve altı. Vtіm, aynı anda eski Internet Explorer'a kimin ihtiyacı var?

Sözde sınıf seçiciler

Sözde sınıf, öğenin durumunu belirtir. Örneğin, :hover - imlecin üzerine geldiğinizde diğer tarafta görünenler, :visited - mesajı görün. Bunlar xtalt öğelerini içerir: first-child i: last-child.

Bu tür seçiciler, modern verst'te aktif olarak zastosovuetsya, oskolki zavdyaki yeni zastosuvannya JavaScript olmadan "canlı" yan sprobit yapabilir. Örneğin btn class ile bir butonun üzerine geldiğinizde rengi değişecek şekilde çalışmak istiyorsunuz. Hangi galip için böyle bir yapı mümkündür:

Btn: vurgulu (

Arka plan rengi: kırmızı

Güzellik için, düğmenin ana güçlerinde geçişin gücünü, örneğin 0,5 saniyede belirtebilirsiniz - bu durumda, siyah sürenin düğmesi bir mit değil, bir saniyelik bir esnemedir.

Perevagi - tarafların "canlanması" için aktif olarak kazanır. Durgun olduğum için beni affet.

Nedoliki - hiçbiri yok. Tse true zruchny zasib. Bununla birlikte, cahil dizgiciler, çok sayıda sözde sınıf arasında kaybolabilir. Sorun öğrenerek ve uygulayarak aşılır.

Sözde öğe seçicileri

"Sahte öğeler" - bunlar sayfanın bölümleridir, HTML'de yoktur, ancak hepsi bükülebilir. Hiçbir şey anlamadın mı? Her şey daha basit, daha kolay. Örneğin, büyük ve kırmızı satırdaki ilk harfi eklemek, diğer metni küçük ve siyah olarak bırakmak istiyorsunuz. Açıkçası, bu mektubu bir şarkı dersi ile bir aralığa koyabilirsiniz, ama sıkıcı ve sıkıcı. Paragrafı görmek ve sözde öğe::ilk harfi vurgulamak daha kolaydır. Vin, ilk harfin tanıdık görünümüyle melekleşme yeteneği verir.

Pek çok sözde öğeyi bitirmek gerekiyor. Pererahuvati їх bir statünün sınırlarında gitmesi pek olası değil. Kesin bilgileri favori arama sisteminizde bulabilirsiniz.

Olumlu hisler - gnuchko nalashtovuvaty zvnіshnіshnіshі vglyad storіnkі fırsatı vermek için.

Nedoliki - yeni başlayanlar genellikle onlarda kaybolur. Bu türden pek çok seçici, diğer tarayıcılarda daha az pratiktir.

P_dvedemo p_dbag

Seçici, belgenin akışını kontrol etme girişimidir. Zavdyaki youmu, tarafın kesinlikle cilt bileşenini seçebilir (navit іsnuyuchiy daha az zihinseldir). Obov'yazkovo vychit usi nayavnі seçeneklerini kullanın veya їх yazın. Modern tasarıma ve çok sayıda etkileşimli öğeye sahip katlanır kenarlar oluşturduğunuz için bu özellikle önemlidir.

CSS evrensel seçicisi belki de anlaşılması en kolay olanıdır, bu nedenle stillerin suçlama olmaksızın kesinlikle tüm öğelere yapışacağını bilirsiniz. Evrensel seçici yalnızca bir işaretten oluşur - bir zirochka (*), rahatsız edici sözdizimi:

* { güç: anlam; güç: anlam; ... )

CSS evrensel seçicisinin varyasyonuna bir örnek

Paragraf 1

2. paragraf

3. paragraf

Tarayıcıda sonuç

Paragraf 1

2. paragraf

3. paragraf

Bu popo için alanlar sıfırlandı ve yan elemanların çerçeveleri düzenlendi. Başka ne gerekli olabilir? Dersten zaten bildiğiniz gibi başın arkasındaki bazı HTML öğeleri, bazı güçlerin aynı anlamlarını taşır, örneğin, sıfır olmayan üst ve alt boşlukların fiyatının paragraflarında, silan görüntü çerçevesi vb. Ale, her şey o kadar basit değil, içinde ne var? farklı tarayıcılar rozmir tsikh sulama can deshcho vіdіznyatisya ve deyakі zaten uzun zaman önce silan görüntülerinde zamovchuvannyam için çerçeve belirlemedi. Ama her şey mümkün olmaktan uzak.

Böylece eksen, çok fazla verstalnikov (ve bir kerede verst yapmayı öğrenirsiniz) sözde “Skidannya” yaratır. CSS stilleri”, böylece stil tablosunun koçanında sıfır olmayan tüm olası CSS değerlerini sıfırlarlar ve ardından süreçte öğelere stiller eklerler, ancak elbette kendi değerleriyle de. Bu sayede HTML tarafının tüm tarayıcılarda aynı göründüğünden emin olabilirsiniz.

Daha da sık olarak, stillerin düşürülmesi için, evrensel seçici de durgundur, bunun uğruna kullanmak istiyorsanız, seçici etiketlerini başka biri aracılığıyla geçersiz kılmanız yeterlidir ve aksi takdirde açılır listeyi geçmeyin. kendi saygınıza güvenerek. Ne kadar robitimete - sadece sana virishuvati, ama her durumda, bunu düşünmek için çok erken. Ve zaman zaman kendi yazma stilinizi (totoloji için ses) geliştireceğinizden emin olun, bu yüzden onunla dalga geçmeyin.

Ev ödevi.

Evrensel seçicinin ev ödevi umurumda değil, çünkü burada her şey zaten açık, bu yüzden birkaç şeyle daha ilgileneceğim.

1. Etiketin stillerini, vin bir paragrafa benzeyecek şekilde değiştirin. Kendiniz için düşünmeniz gereken Yaku gücü.
2. Paragrafın etiketini, diğer alıntıları görme etiketine benzeyecek şekilde değiştirin.
3. Etiketi satır içi öğeden blok öğesine dönüştürün. Güç kimin için zafer

Bazen web sayfasının tüm öğeleri için aynı anda tek bir stil yüklemeniz gerekir; örneğin, bir yazı tipi veya resim metni yükleyin. Bu şekilde, web sayfasının herhangi bir öğesiyle eşleşen evrensel bir seçici eklenmiş olur.

Evrensel seçicinin değeri için eğik çizgi karakteri (*) gereklidir ve sözdizimi kullanılabilir olacaktır.

* (Stil kurallarının açıklaması)

-de Bazı durumlarda evrensel seçici obv'yazkovo değildir. Yani, örneğin, kayıtlar*.class ve .class sonuçları aynıdır.

-de popo 1.50 bir gösterilen olası eklemeler Evrensel seçici - tüm belge öğeleri için yazı tipini ve metin boyutunu seçin.

popo 1.50. Üniversal seçici varyantı