Bu videoda, CSSA seçicileri sorununun çözümüne geçeceğiz.
Üst kattaki her sorunu da gidereceğim.
Bu nedenle sorun yaşadığınız bir veya iki varsa hızlı bir şekilde ileri gitmekten çekinmeyin.
İlk videoda birlikte ilkini yaptık, gövde elemanına bu rengin bir arka planını verdik.
Dolayısıyla sadece vücut arka planı bu renk bizim için tasarruf olduğunu söylüyoruz.
Devam edin ve tarayıcı yenilemesinde yükleyelim ve gri bir arka plan görüyoruz.
Böylece bir sonraki renk, H bir elementi bu rengin yapmaktır.
Arkaplanda ziyade, sadece renkli dediklerimiz dışında aynı şey.
Kalıpları koruyoruz ya da H-1 mor renk alıyor.
Unutmayın, sayfada birden fazla H-1 olsaydı hepsi mor olurdu.
Yani bir sonraki bu, tüm H-2 elemanlarını turuncu yapıyor.
Dolayısıyla yukarıdaki ikisi ile aynen aynı seçici.
Ve sonra portakal yapmak için sadece yerleşik turuncu rengi kullanacağım ancak başka renk sistemlerini
de kullanabilirsiniz ve her yaşı bu dört kişiye ulaştıracağımızı görebilirsiniz.
Turuncuya dönüşüyorlar.
Öyleyse bir sonraki adıma, tüm müttefiklerimizi mavi yapacak şekilde kaydırmaya gidiyoruz.
Kendi onaltılık mavinizi seçin.
Bunu yapmak için bütün müttefikleri seçip onlara bir renk verelim ve onaltılık
mavi yapacağız.
Yani başka herhangi bir şeyden daha mavi olduğu sürece burada bir şey koyabilirsiniz.
İlk kanalı kırmızı, sonra yeşil olanı hatırlayın.
Bu yüzden biraz yeşil yapalım sonra bir maviyi yapacağız.
Bunu kaydedin ve Müttefikler'e bir göz atalım ve mavi ışıklar gördüğünüzü görebilirsiniz.
Şimdi sarı olabilmesi için her paragrafın arka planını değiştirin.
Sadece bir türün her elemanını seçtiğimiz bir yer.
Böylece tüm paragraflar sarıya arka planda kalır ve biz bir sürü sarı paragraf alırız.
Sonraki girişler tüm girdileri seçin ve onlara üç piksel kırmızı kenarlık verin.
Dolayısıyla sınırı girin ve bunu yapmanın birkaç yolu var, hepsini aynı anda yapabiliriz.
Üç piksel katı kırmızı
sipariş edin ve iki girdimizin bir önek veya düz kırmızı kenarlığa sahip
olduğunu görebilir veya
bunu ayrı olarak kenarlık rengi kırmızı kenarlık üç pikselle yapabiliriz ve nihayet kenarlık stili oldukça belirgin nedenlerle sağlamdır.
Bunu yapmak çok daha kolaydır.
Ancak bazen javascript'e eriştiğinizde bunu yapmak isteyeceksiniz.
Sadece bir bölüm güncellemek isteyeceğiz.
Dolayısıyla bir kullanıcı bir şeyin üzerine geldiğinde kırmızı bir sınıftan yeşil bir sınıra geçirmek istersiniz.
Peki biz sadece rengini değiştirmek isteyebiliriz ve birlikte olanları stildeki gibi bırakabiliriz.
Bu yüzden onu böyle bırakacağım.
Şimdi sıra sınıf seçicisine geçiyoruz.
Herşeyi sınıfta verin Merhaba.
Beyaz bir arka plan.
Ve şuraya bakarsak, aslında sadece bir şey var.
Bu div içerisinde sınıfın ilk paragrafı.
Merhaba.
Böylece sınıfı seçiyoruz.
Merhaba arka plan beyaz.
Ve bu paragrafın buraya geldiğini görebilirsiniz.
Beyaza dönüyor.
Sıradaki, elemana özel bir iki piksellik mavi bir kenarlık verin.
Kendi R'yi seçin. G. maviye dön.
Aynı şey yine bu sefer nokta yerine, hash işaretini veya Thorpe'taki yay'ı kullanıyor ve
sonra tekrar görebileceği kimliğin adı şu anda burada Id patent var.
Ve sonra piksel katı ve sonra R için iki piksel katı bir sınır vermek istiyoruz. G. maviye dön.
Ve böylece 0 kırmızı 100 yeşil 200 mavi olacak ve taze olduğumuzu görürsek, bu paragrafın
etrafında kimliğiyle 2 piksel mavi bir kenarlık elde edeceğiz.
25 piksel font ve ipucu ise bu özellik fontu Dasch boyutu 25 piksel kullanıyor.
Sıradaki, div'lerin içinde yer alan tüm paragrafları
Dolayısıyla, burada yapmamız gereken şey, tüm paragrafları seçmekten ziyade, sadece bir
div'in içindeki paragrafları istemektir; böylece bir div içinde olmayan bu gibi bazıları görülebilirsindir.
Yazı tipi boyutunun 25 piksel olmasını istemiyoruz.
ve sonra div'ın içinde tüm paragrafları içeriyor bu nedenle herhangi bir div'da yaşayan paragraflar herhangi bir
div içerisindeki herhangi bir paragrafın onları seçip yazı tipi boyutu 25 piksellik verecek şekilde div'yi
değiştirmiyor ve bunların hepsinin daha büyük olabileceğini görebilirsiniz, ancak bir div içinde paragraf olmadığını söyleyen bu paragraflar büyük olmaz çünkü bunlar bir
div yerine bir metin değildir Gelecekte, yalnızca tür metinli girdilerin gri arka plana sahip olmasını sağlayın.
Dolayısıyla div olarak adlandırdığımız bu torun seçicisini kullanıyoruz
Dolayısıyla bu başka bir seçici türüdür ve bir niteliği temel alır.
Bu nedenle, yapmak istediğiniz özellik, türün metne eşit olduğu yerleri bulmaktır.
Yani temel olarak burada sadece bu girdi metne eşittir.
Ve böylece yaptığımız yolla, girdi yazıp kare parantezler ve yep kare parantezleri yazacağız.
Ve sonra orada özellik olan özellik var ve biz nereye metin eşit
olduğuna bakıyoruz ve biz sadece arka plan gri diyeceğim.
Ve sonra buraya inip yenileyip gözümüzü burada tutarsak, gri bir arka plan elde ettiğimizi görebilirsiniz.
Google'a gelen tüm bağlantıları seçmesini isterseniz bu yine yararlıdır.
Biz merkezli olarak seçiyoruz H. F. ya da orada başka herhangi bir özelliği seçebiliriz.
Bu yüzden sonraki kadar üçüncü div içinde her iki paragrafa pembe bir arka plan verin.
Yani bu biraz deliriyor.
Şimdi HMO'ya bir göz atalım.
İşte üçüncü divanımız. Birincisi burada.
İkincisi burada, ikincisi burada
ve iki paragraf var ve ikisini de seçip onlara pembe bir arka plan vermek istiyoruz.
Dolayısıyla, daha önce yaptığımız şey, burada çalışmayacak tüm div'ların içindeki tüm paragrafları seçmekti.
Yapmak istediğimiz şey, sayfadaki üçüncü div'un içindeki tüm paragrafları seçmek.
Ve üçüncü div'u belirleyebilmemizin yolu, tür bitimini kullanmaktır.
Böylece div ve 3. tür söyleyeceğiz.
Dolayısıyla bu bize üçüncü bir div vereceğim ve daha sonra tüm paragrafların yerine
biz sadece arka planın pembe olduğunu söyleyeceğiz ve yenilemeyi ve çift kontrolü yapalım.
İşte ilk divizim.
İşte ikinci div.
Ve işte üçüncü div.
Hurmaya başlamak için paragrafa başlayın ve ben ikinci paragrafım.
Orada hırka gidiyoruz.
İkinci paragraftayım.
Sıradaki bu ikinci paragrafı, üçüncü divda beş piksel kenarlık beyaz sınırı içerisine verin.
Dolayısıyla bu çok benzer, ancak yalnızca üçüncü paragrafın içindeki ikinci paragrafı istiyoruz.
Yani sadece bu bir tane.
ve türden yapacağız.
Bu yüzden, üçüncü div'u ve tip 3'ü seçtiğimizde aynı şeyi yaparız ve daha sonra tüm paragraflardan ziyade paragraf
Ve biz ikinci bir tane istiyoruz, böylece onları birleştirebiliriz.
Bu, üçüncü div yerine ikinci paragrafı seçecek
ve 5 piksel beyaz sınır kenarlığı 5 piksel katı beyaz vermek istiyoruz.
Oraya gidiyoruz.
Div'taki ikinci paragraftaki beş piksellik katı beyaz sınır.
İlk değil.
Sıradaki, E-M'yi üçüncü div öğesinde beyaz ve 20 piksel yazı tipi haline getir.
İşte tam buradaki E-M, cronut kaykay.
Krown bilmiyorsanız çok lezzetlidir.
Belki abartılmıştır.
New York'taki pastayı kesinlikle overpriced.
Bir çörek ve bir kruvasan var.
Burada kesinlikle hipster ipsum kelime yerine evde.
Ve E-M'yi alacağız ve beyaz ve 20 piksel Kuğu yapacağız.
üçüncü div 3'ü ve ardından sadece E-M'yi seçmek zorunda kaldık.
Bu yüzden daha önce olduğu
gibi
Ve bu, tüm IEM'leri seçecek ve yalnızca bir tane olduğu ortaya çıkıyor.
Fakat birden fazla sözcük varsa, bir paragraf
yerine E-M ilk veya E-M söylemek isteyebiliriz, ancak şu an için bunu bırakacağız.
Ve beyaza renk ve 20 piksel yazı tipi rengi beyaz ve yazı tipi boyutu 20 piksel vermek istiyoruz.
Ve hatırlatmak gerekirse, gelecekteki videolarda yazı tipleri ve yazı tipi
boyutu ve bir sürü şeyden bahsedelim.
Oraya gidiyoruz.
Beyaz ve font boyutu değişiyor.
Şimdi en sevdiğim bazı bonus egzersizlerine başladık.
Bazı şeyleri seçmek ve onları manipüle etmek için daha ilginç yollar daha belirsizdir.
Başlamak için.
Kontrol edilen tüm onay kutularının sol kenar boşluğu 50 piksele sahip olduğunuza ve sana verdiğinizden emin olun.
50 piksel için sol kenar boşluğu kullanmanız gerekiyor.
Dolayısıyla kontrol edilen öğeleri seçmek için bir seçici var.
Ve sadece öyle görünüyor.
Bu, n. Tıpkı bir sözde selektördür.
Bu yüzden, aradığımız şeyi söylemeliyiz, kontrol edilmiş.
Bu yüzden yalnızca kontrol edilen tüm girdileri söyleyeceğim çünkü
onay kutularının girdi türü eşittir onay kutusu var, başta radyo düğmesi olsa da kontrol edilebilecek diğer unsurlar var.
Dolayısıyla bu kontrol edilmiş olan radyo düğmelerini de seçecek ve şimdilik iyi durumda.
Dolayısıyla, bu girdi iki nokta üst üste işareti işaretlenmiş gibi görünüyor.
Ve yapmak istediğimiz elli piksel boşluk bırakmaktır.
Bu, bu videoyu eklediğimizde gelecek videolardan bazılarına yaklaştığımızın
küçük bir önizlemesidir ve onay kutusunun sol tarafında bir
miktar yer ekleyerek taşınmış olarak kontrol edilen videoları görebilirsiniz.
Şimdi bunu kontrol edersem, bu kontrol edilir ve sağdaki 50 piksele geçilir.
Onların işaretini kaldırırsam ve sola dönersem.
Bu kontrol edildi.
Sıradaki.
Bu muhtemelen benim en sevdiğim şey.
Etiket unsurlarını HMO'yu değiştirmeden tümüyle büyük yapın.
Dolayısıyla kesinlikle buna bakmak isteyeceğinizi söylemiştim,
bunun sebebi kesinlikle bunun üzerine gitmediğimizdir.
Başlamak için sadece
tüm etiket öğelerini seçelim ve sonra da HMO'yu değiştirmeden nasıl büyük harf yapacağımı bilmediğimi söyleyelim.
Bu yüzden Google'ı yukarı çekip bir arama yapalım ve daha önce yapmış olduğum bir şey.
Öyleyse yukarı çıkıp bir arama yapalım bkz. Büyük
harfle değerlendiren ilk şey, metin dönüşümü ve metin metin öğelerinden nasıl yararlanılacağını belirten metin dönüşümü.
Metnin tümü büyük harf veya hepsi küçük harflerle veya her bir kelimeyi büyük harfle görünür hale getirmek için kullanılabilir.
Dolayısıyla aşağı doğru ilerleyip sözdizimine göz atalım ve sermayeye sahip olduğumuza benziyor.
Kapitalistin ilk harfi büyük harf ve küçük harf mi olacak?
Bu yüzden büyük harf istiyoruz.
Böylece metin büyük harf dönüştürür.
Ve burada yaptığım şey sadece sana bir şey
göstermek değil, aslında her zaman yaptığım şeyler, yani Google'a yazmaya devam
eden şeyler, C Ss blah blah blah CSSA büyük harf C S S şeffaf yapmak için arıyorum her şeyi yapmaktı.
Ve sadece arama sonuçlarına bakıyorum çünkü geri çağırmak için pek çok özellik var.
Hepsini hatırlayamıyorsun.
Bu yüzden daha karanlık olanlardan biri.
Kesinlikle.
Ve yenilersek, burada olan etiketler içindir.
O zaman sadece sana zamanı göstermek için bundan kurtulalım.
Bunlar etiketler.
Ve sonra bunları ekledik ve üst kasalarını yeniledik.
Öyleyse sıra sıra ID özel yeşil ve 100 piksel yazı tipi boyutlu elemanın ilk harfini oluşturduk.
Bu yüzden, ilk harfi hedefleyelim, bakmamız gereken bir diğeri olan ilk
harf, ilk mektubumuzdan SEUS'a ve neye sahip olduğumuza bakın.
Yani başka bir sözde seçici varmış gibi görünüyor.
İlk harf C Ss elemanı, bir bloğun ilk satırının ilk harfini seçer.
Örnek bir ilk mektuba bir göz atarsanız.
Devam edin ve bunu deneyelim.
Önce özel ID'yi ve ardından önce bunun mektubunu seçmek istiyoruz.
Ve bunu yeşil ve yazı tipi boyutunda 100 piksel
yapmak istiyoruz, böylece renk yeşil ve yazı tipi boyutu 100 pikseldir ve bu eleman burada.
Yenilediğimiz ilk harfle göz atın ve bu dev yeşil gözü elde edin.
Sonradan üzerine gelindiğinde H-1 elemanlarının rengi maviye dönüşür.
Yani bu aslında bir çeşit etkiye sahip olmak için oldukça yaygındır.
Genellikle bir şeyin üzerinde gezindiğinizde belki bir düğme gibi oldukça
ince olur ve üzerine geliyorsanız, renk birazcık biraz değişip biraz biraz 3d vermek üzere 3
boyutlu perspektifler gibi görünüyorsa görünen küçük bir gölgede var. dikkat dağıtılmadan rahatsız edilmeden interaktiflik.
Bu yüzden H-1'i seçeceğiz ve bu aslında her biri.
Ancak bu durumda yalnızca bir tanesi ve sözde seçici
fareyle üzerine geliyorsa ve buraya girdiklerimiz yalnızca bir kullanıcı öğenin üzerine geldiğinde uygulanır.
Yani maviyi renklendirelim.
İşte H-1.
Fareyle gezinmeyi bıraktığımda fareyle mavi dönersem, eskiden olduğu gibi döner.
Sonunda, ziyaret edilen unsurları griye çevirin ve iki unsuru da görebildiğiniz gibi, bu
iki bağlantı aslında her ikisi de daha önce ziyaret ettiğim bağlantılar olan Facebook'a bağlanır.
Bu nedenle varsayılan olarak mor olan Chrome, ziyaret edilenlerin hepsinin mor olduğunu düşünmelerini sağlayacaktır.
Bu yüzden, daha önce hiç görmediğim bir bağlantı koyalım ve yalnızca başlamak için
bir şeyler hazırlayacağım ve sana yenilemek için sayfayı yenileyeceğim göstereceğim.
Artık mavi.
Çünkü orada bulunmadım.
Şimdi bu şekilde bırakalım, şimdilik tıklamayacağım.
Ve biz ziyaret edilenlerin yerine mor yerine olmasını isteriz.
Üzgünüm, ziyaretin bir zamanlar mor yerine gri olmasını istiyoruz.
Dolayısıyla sahte seçiciler tarafından ziyaret edilen etiketler seçilir ve ardından gri kaydettiririz.
Ve eğer yenilersek.
Buraya göz kulak ol burada.
Yazı tipini biraz daha büyük yapacağım.
Şu an mor olduğundan, yenilemeden önce oradaydım.
Şimdi harika
Tamam o zaman bu egzersiz zevk umuyoruz.
Orada açacak çok şey var.
Bir sürü farklı seçici.
Ve ekleyeceğim bir şey sahip
olduğum her çözüm için veya neredeyse her birinde aynı sonucu elde etmenin en az bir veya iki yolu var.
Benden farklı bir şeyler olsaydı, yine de işe yaradı, bu harika oldu.
Yorum eklemekte özgürsün.
Bunu başkalarıyla paylaşın.
Tamamen geçerlidir.
Ben de bunu yapardým.
Bir başka şey.
Açıkçası site özellikle cazip değil.
Bu gerçek bir site değil.
Bir sonraki etkinlik videosunda çok yakında gerçek bir proje üzerinde çalışacağız.
Aslında biraz daha iyi tasarlanmış küçük bir blog sitesi hazırlayacağız.
Bundan çok daha güzel görünüyor.
Bu sadece bir uygulama egzersizidir.