Kimlik ve sınıf arasındaki fark nedir?

Ne arasındaki fark var <div class="">ve <div id="">ne zaman CSS geliyor? Kullanmak uygun <div id="">mu?

Farklı geliştiricilerin bunu her iki şekilde de yaptıklarını görüyorum ve kendi kendime öğrettiğim için bunu gerçekten anlayamadım.

idsclassbirçok şeye uygulanabildiği yerde benzersiz olmalıdır . CSS'de, ids gibi görünür #elementIDve classöğeler benzer.someClass

Genel olarak, idbelirli bir öğeye başvurmak istediğinizde ve classbirbirine benzeyen bir çok şeyiniz olduğunda kullanın. Örneğin, ortak idunsurlar gibi şeylerdir header, footer, sidebar. Ortak classöğeler highlightveya gibi şeylerdir external-link.

Art arda gelenleri okumak ve çeşitli seçicilere atanan önceliği anlamak iyi bir fikirdir: http://www.w3.org/TR/CSS2/cascade.html

Bununla birlikte, anlamanız gereken en temel öncelik, idseçicilerin seçicilere göre öncelikli olmasıdır class. Eğer buna sahipseniz:

<p id="intro" class="foo">Hello!</p>

ve:

#intro { color: red }
.foo { color: blue }

idSeçici seçiciden öncelikli olduğundan metin kırmızı olur class.

Belki bir benzetme farkı anlamaya yardımcı olacaktır:

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

Öğrenci kimlik kartları farklıdır. Kampüsteki hiçbir öğrenci aynı öğrenci kimlik kartına sahip olmayacaktır . Ancak, birçok öğrenci en az bir Sınıfı birbirleriyle paylaşabilir ve paylaşır .

Birden fazla öğrenciyi Biyoloji gibi bir Sınıf başlığı altına sokmanız uygundur. Ancak birden fazla öğrenciyi bir öğrenci kimliğinin altına koymak asla kabul edilemez .

Okul interkom sistemi üzerinden Kural verirken , bir Sınıfa Kurallar verebilirsiniz :

"Yarın, tüm öğrenciler Biyoloji dersine kırmızı bir gömlek giyecekler."

.Biology {
  color: red;
}

Veya belirli bir Öğrencisine benzersiz kimliğini arayarak kurallar verebilirsiniz :

"Jonathan Sampson yarın yeşil gömlek giyecek."

#JonathanSampson {
  color: green;
}

Bu durumda, Jonathan Sampson iki komut alır: biri Biyoloji sınıfında öğrenci, diğeri doğrudan gereksinim. Jonathan doğrudan id niteliği ile yeşil gömlek giymesi söylendiğinden, daha önce kırmızı gömlek giyme talebini göz ardı edecektir.

Daha spesifik seçiciler kazanır.

Sınıfla kimliğin nerede kullanıldığı

İkisi arasındaki basit fark, bir sınıfın bir sayfada tekrar tekrar kullanılabilmesine rağmen, bir kimliğin her sayfada yalnızca bir kez kullanılması gerektiğidir. Bu nedenle, div öğesinde sayfadaki ana içeriği işaretleyen bir kimlik kullanmak uygundur, çünkü yalnızca bir ana içerik bölümü olacaktır. Buna karşılık, tanım gereği birden çok kez kullanılacakları için, bir tabloda alternatif satır renkleri ayarlamak için bir sınıf kullanmalısınız.

Kimlikler inanılmaz derecede güçlü bir araçtır. Kimliği olan bir öğe, öğeyi veya içeriğini bir şekilde işleyen bir JavaScript parçasının hedefi olabilir. Kimlik özelliği, bağlantı etiketlerini ad nitelikleriyle değiştirerek dahili bir bağlantının hedefi olarak kullanılabilir. Son olarak, kimliklerinizi net ve mantıklı hale getirirseniz, belge içinde bir tür “kendi kendine dokümantasyon” görevi görebilirler. Örneğin, bloğun açılış etiketi, örneğin "ana", "başlık", "altbilgisi" kimliğine sahipse, bir kod bloğunun ana içeriği içereceğini belirten bir açıklama eklemeniz gerekmez. ", vb.

Kimlik, tüm sayfada benzersiz olmalıdır.

Bir sınıf birçok öğeye uygulanabilir.

Bazen kimlikleri kullanmak iyi bir fikirdir.

Bir sayfada, genellikle bir altbilgi, bir üstbilginiz olur ...

Ardından altbilgi kimliğine sahip bir div olabilir

<div id = "altbilgi" sınıf = "...">

ve hala bir dersiniz var

Aynı stil için istediğiniz birden çok öğe için bir SINIF kullanılmalıdır. Bir kimlik benzersiz elemanı için olmalıdır. Bu eğiticiye bakın .

Katı bir konformist olmak istiyorsanız veya sayfalarınızın standartlara göre doğrulanmasını istiyorsanız W3C standartlarına başvurmalısınız .

Kimlikler benzersizdir. Sınıflar değil. Öğelerin birden fazla sınıfı olabilir. Ayrıca sınıflar dinamik olarak eklenebilir ve bir öğeye kaldırılabilir.

Kimliğinizi kullanabileceğiniz her yerde sınıf kullanabilirsiniz. Tersi doğru değil.

Kural her sayfada bulunan sayfa öğeleri ("gezinme çubuğu" veya "menü" gibi) için kimlikleri ve diğer her şey için sınıfları kullanıyor gibi görünüyor, ancak bu sadece bir konudur ve kullanımda büyük bir farklılık bulacaksınız.

Diğer bir fark, form giriş öğeleri için, <label>öğenin bir alana kimliğe başvurmasıdır, böylece kullanacaksanız kimlikleri kullanmanız gerekir <label>. erişilebilir bir şeydir ve gerçekten kullanmalısınız.

Yıllar içinde Javascript'te (getElementById) kolayca erişilebildiği için kimlikler de tercih edildi. JQuery ve diğer Javascript çerçevelerinin ortaya çıkmasıyla, bu hemen hemen bir sorun değil.

Sınıflar, kategoriler gibidir. Birçok HTML öğesi bir sınıfa ait olabilir ve bir HTML öğesinin birden fazla sınıfı olabilir. Sınıflar, birden çok HTML öğesine uygulanabilecek genel stilleri veya stilleri uygulamak için kullanılır.

Kimlikler tanımlayıcılardır. Onlar eşsiz; hiç kimsenin aynı kimliğe sahip olmasına izin verilmez. Kimlikler, bir HTML öğesine benzersiz stiller uygulamak için kullanılır.

Kimlik ve sınıfları şu şekilde kullanıyorum:

<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>

Bu örnekte, başlık ve içerik bölümleri #header ve #content ile şekillendirilebilir. İçeriğin her bir bölümüne #content .section bölümünden ortak bir stil uygulanabilir. Sadece tekmeler için, orta bölüm için "özel" bir sınıf ekledim. Belirli bir bölümün özel bir stile sahip olmasını istediğinizi varsayalım. Bu, .special sınıfıyla gerçekleştirilebilir, ancak bölüm hala #content .section öğesinden ortak stilleri devralır.

JavaScript veya CSS geliştirme yaptığımda, genellikle çok özel bir HTML öğesine erişmek / işlemek için kimlikleri kullanır ve stilleri çok çeşitli öğelere erişmek / uygulamak için sınıfları kullanırım.

CSS nesne yönelimlidir. Kimlik örneği diyor, sınıf sınıfı söylüyor.

CSS uygularken, bir sınıfa uygulayın ve bir kimliğe mümkün olduğunca kaçınmaya çalışın. Kimlik, yalnızca öğeyi getirmek veya herhangi bir etkinlik bağlama için JavaScript'te kullanılmalıdır.

Sınıflar CSS uygulamak için kullanılmalıdır.

Bazen olay bağlama için sınıfları kullanmanız gerekir. Bu gibi durumlarda, CSS uygulamak için kullanılan sınıflardan kaçınmaya çalışın ve bunun yerine karşılık gelen CSS'ye sahip olmayan yeni sınıflar ekleyin. Bu, herhangi bir sınıfın CSS'sini değiştirmeniz veya herhangi bir öğe için CSS sınıf adını hep birlikte değiştirmeniz gerektiğinde yardımcı olacaktır.

CSS seçici alanı aslında koşullu kimlik stiline izin verir:

h1#my-id {color:red}
p#my-id {color:blue}

beklendiği gibi oluşturulur. Neden bunu yaptın? Bazen kimlikler dinamik olarak vb. Oluşturulur. Başka bir kullanım, üst düzey bir kimlik atamasına bağlı olarak başlıkları farklı şekilde oluşturmaktır:

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

Şahsen, daha uzun sınıf seçicileri tercih ediyorum:

body#list-page .title-block > h1 {font-size:56px}

tedavi biraz sapkın farklılaştırmak için iç içe kimlikleri kullanarak buldum. Sass / SCSS dünyasındaki geliştiriciler bu şeyleri ele geçirdiklerinde , iç içe geçmiş kimliklerin norm haline geldiğini bilin.

Son olarak, seçici performans ve önceliğe gelince, ID kazanma eğilimindedir. Bu başka bir konudur.

Herhangi bir öğenin bir sınıfı veya kimliği olabilir.

Sınıf, belirli bir görüntüleme türüne başvurmak için kullanılır; örneğin, bu sorunun cevabını temsil eden bir div için bir css sınıfınız olabilir. Birçok cevap olacağından, birden fazla div aynı stile ihtiyaç duyacak ve bir sınıf kullanacaksınız.

Kimlik yalnızca tek bir öğeye karşılık gelir, örneğin sağdaki ilgili bölüm, başka bir yerde yeniden kullanılmayan özel biçime sahip olabilir, bir kimlik kullanır.

Teknik olarak hepsi için sınıfları kullanabilir veya mantıksal olarak ayırabilirsiniz. Ancak, kimlikleri birden çok öğe için yeniden kullanamazsınız.

Sınıf, tarzınızı bir grup öğeye uygulamak içindir. Kimlik stilleri yalnızca bu kimliğe sahip öğeye uygulanır (yalnızca bir tane olmalıdır). Genellikle sınıfları kullanırsınız, ancak bir kerelik varsa kimlikleri kullanabilirsiniz (veya stili doğrudan öğeye yapıştırabilirsiniz).

Gelişmiş geliştirme kimliklerinde temel olarak JavaScript kullanabiliriz.

Tekrarlanabilir amaçlar için, sınıf es benzersiz olması gereken kimliklerin aksine kullanışlı gelir .

Aşağıda, yukarıdaki ifadeleri gösteren bir örnek verilmiştir:

<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>

Şimdi burada görebilirsiniz boxve box1iki (2) farklı <div>elementtir, ancak boxve bg-color-redsınıflarını her ikisine de uygulayabiliriz .

Kavram OOP dilinde kalıtımdır .

1) div kimliği yeniden kullanılamaz ve div sınıfı birden çok öğeye eklenebilirken HTML'nin yalnızca bir öğesine uygulanmalıdır.

2) Her ikisi de aynı öğeye uygulanırsa ve çakışan stillere sahipse, bir kimliğin önemi daha fazla olur, kimliğin stilleri uygulanır.

3) Stil öğesi her zaman a koyarak bir div sınıfına başvurur. (nokta) adlarının önüne div id sınıfı isimlerinin önüne # (karma) koyarak referans verilir.

4) Örnek: -

<style>deklarasyonda sınıf -.red-background { background-color: red; }

<style>beyanda kimlik - #blue-background {background-color: blue;}

<div class="red-background" id="blue-background">Hello</div> Burada arka plan mavi renkte olacak

idve classiki Genel / Standart HTML özelliği (Aşağıdaki genel özellikler herhangi bir HTML öğesinde kullanılabilir.)

class Bir öğe için bir veya daha fazla sınıf adı belirtir (stil sayfasındaki bir sınıfa başvurur)

id Bir öğe için benzersiz bir kimlik belirtir

İd öznitelikleri, sınıf özniteliğinin benzer öğeleri sınıflandırmanın bir yolunu sağladığı, belge çapında benzersiz bir tanımlayıcı verir.

İd özelliği değeri, aynı özelliği uygulamak istediğiniz her yerde sınıf özelliğinin yeniden kullanılabileceği HTML sayfasında benzersiz olmalıdır.

Sınıf, ortak özelliklere sahip birden çok öğe için kullanılır. P ve gövde etiketi için aynı renk ve yazı tipini istiyorsanız sınıf özniteliğini veya bir bölümün kendisini kullanın.

Öte yandan id, tek bir öğe niteliklerini vurgulamak için kullanılır ve yalnızca belirli bir öğe için kullanılır.Örneğin, bazı niteliklere sahip bir h1 etiketimiz var, sayfadaki diğer öğelerde tekrarlanmasını istemeyiz.

Unutulmamalıdır ki, bir öğede hem sınıf hem de kimlik kullanırsak, * id sınıf niteliklerini geçersiz kılar.

Aşağıdaki örneğe bakın

<html>
<head>
<style>
    #html_id{
        color:aqua;
        background-color: black;

    }
    .html_class{
        color:burlywood;
        background-color: brown;
    }
</style>

   </head>
    <body>
<p  class="html_class">Lorem ipsum dolor sit amet consectetur adipisicing 
   elit. 
    Perspiciatis a dicta qui unde veritatis cupiditate ullam quibusdam! 
     Mollitia enim, 
    nulla totam deserunt ex nihil quod, eaque, sed facilis quos iste.</p>
    </body>
   </html>

Çıktıyı üretiyoruz

Çıktı