Konuyu Değerlendir
  • 0 Oy - 0 Ortalama
  • 1
  • 2
  • 3
  • 4
  • 5
Css id ve class kullanımı
#1
Bağlantılar ve resimler bölümünde, bir HTML belgesini projemizdeki diğer dosyalara nasıl bağlayacağımızı öğrendik. "CSS seçicileri" benzerdir, ancak tüm dosyalar arasında gezinmek yerine, tek bir CSS kuralını belirli bir HTML öğesine eşlememize izin verirler. Bu, başkalarını göz ardı ederken bireysel öğeleri seçici olarak şekillendirmeyi mümkün kılar.

Web sitenizin her bölümünün tam olarak aynı görünmesini istemediğiniz sürece, bu bizim için çok önemli bir işlevsellik. "Bu paragrafın mavi olmasını ve diğer paragrafın sarı olmasını istiyorum.” Şimdiye kadar, sadece tüm paragraflarınızı mavi (veya sarı) çevirebildik.

Şimdiye kadar gördüğümüz tek CSS seçici, bir sayfadaki tüm eşleşen öğeleri hedefleyen “tür seçici” olarak adlandırılır. Bu bölümde, bir Web sayfasını sınıf seçicileri, alt seçiciler, sözde sınıflar ve kimlik seçicileri ile şekillendirmenin daha ayrıntılı yollarını keşfedeceğiz.


HTML sınıfı özniteliğinin değeri, CSS'NİZDEKİ seçiciyle eşleştiği sürece istediğiniz herhangi bir şey olabilir. Sınıflar için standart adlandırma kuralı, dosya ve klasör adları gibi boşluklar için tüm küçük ve tire harflerini kullanmaktır.

Bir Sınıf özniteliği eklemek, HTML belgenizin anlamsal anlamını hiç değiştirmez - yalnızca CSS stil sayfanıza takılmak içindir. Bununla birlikte, görünümlerine göre adlandırma sınıflarından kaçınmak genellikle iyi bir fikirdir. Sınıfımızın adını seçersek .italik, kafa karıştırıcı bir duruma yol açmadan CSS'NİZDE italik hale getirmenin yanı sıra çok şey yapamayız. Anlamsal bir şey kullanarak .Özet, CSS'MİZİN bu özetin nasıl görüntülendiğini özelleştirmek için bize daha fazla özgürlük verir.


Şimdi ikinci düğmemizle ilgili birkaç önemli şey var:

Orijinaline yeni bir yazı tipi stili bildirimi ekliyor .düğme kuralı.
Mevcut bir arka plan rengi stilini geçersiz kılıyor .düğme.
Geçersiz kılma sırası nedeniyle oluşur .eylem çağrısı ve .stil sayfanızdaki düğme. Bir CSS dosyasında iki çakışan özellik olduğunda, sonuncusu her zaman uygulanan özelliktir. Yani, eğer taşındıysan.stillerin en üstüne eylem çağrısı.css, .düğme, arka plan renginin değeri üzerinde son kelimeye sahip olacak ve mavi kalacaktır.

Bu, HTML öğemizdeki sınıf özniteliğinin sırasını geçersiz kılma davranışı üzerinde hiçbir etkisi olmadığı anlamına gelir. Tek bir öğedeki birden çok sınıf “eşit” olarak uygulanır (daha iyi bir terimin olmaması için), bu nedenle öncelik yalnızca stillerdeki kuralların sırasına göre belirlenir.css. Başka bir deyişle, aşağıdaki öğeler etkili bir şekilde eşdeğerdir:


Bu bölümde, sınıf seçicileri, soyundan gelen seçiciler, sözde sınıflar, bağlantı stili ve kimlik seçicileri ile bazı uygulamalı deneyimlerimiz var. Tüm bunların amacı, CSS'NİZDEN belirli bir HTML öğesini hedefleyebilmekti. Sınıf seçiciler çok yönlüdür ve en az miktarda dezavantajla birlikte gelir. Sonuç olarak, bir web geliştiricisi olarak günlük hayatınızın bir parçası olacaklar.

Beğenin ya da beğenmeyin, işler bu bölümde çok daha karmaşık hale geldi. Artık CSS'İMİZİ bir HTML belgesiyle yarım düzine farklı şekilde etkileşime sokabiliyoruz. Ayrıca, önümüzdeki birkaç bölümde, HTML'nin yapısı ve bir web sayfasının düzeni arasında bir bağımlılık görmeye başlayacağız. CSS ve HTML arasındaki tüm bu etkileşimle, yeni bir web sayfası oluşturmaya nereden başlayacağınızı bilmek zor olabilir.

İçeriğin sunudan ayrılması bu süreci yönlendirmeye yardımcı olur. Sunmadan önce içeriğe ihtiyacınız var, bu nedenle ilk adımınız genellikle ham içeriğinizi HTML etiketleriyle işaretlemektir. Bu hazırlandıktan sonra, öğelerinize sınıf öznitelikleri eklemeye ve bunları tek tek şekillendirmeye hazırsınız. İstediğiniz bir düzen oluşturmak için bazı ek yapılara ihtiyaç duyduğunuzda (örneğin, bir grup öğeyi bir kenar çubuğuna dönüştürün), içeriğinizi <div>kapsayıcısına sarmaya başladığınızda.

Bu bölüm, gerçek web sitelerine güç veren hemen hemen tüm CSS seçicilerini kapsıyordu. Karmaşık CSS düzenlerine daha derin dalmak için ihtiyacımız olan araçlara sahibiz. HTML ve CSS'NİN bir sonraki taksitinde zor, CSS yüzen sütunları ve kenar çubuklarını nasıl oluşturacağımızı öğreneceğiz.
Bul
Alıntı


Foruma Git:


Bu konuyu görüntüleyen kullanıcı(lar): 1 Ziyaretçi