Skip to main content

Web Tasarımında CSS ile Span ve Div HTML Öğelerini Kullanma

Divs vs Spans (Mayıs Ayı 2024)

Divs vs Spans (Mayıs Ayı 2024)
Anonim

Web tasarımı ve HTML / CSS için yeni olan birçok kişi ve

Web sayfalarını oluşturdukça birbirinin yerine kullanılır. Gerçek şu ki, bu HTML öğelerinin her biri farklı amaçlara hizmet ediyor. Her birinin amaçlanan amaç için kullanmayı öğrenmek, kodun genel olarak yönetilmesini kolaylaştıran daha temiz web sayfaları geliştirmenize yardımcı olacaktır.

Kullanmak
eleman

Div öğesi, web sayfanızdaki mantıksal bölümleri tanımlar. Temelde mantıksal olarak bir araya gelen diğer HTML öğelerini yerleştirebileceğiniz bir kutu. Bir bölüm, paragraflar, başlıklar, listeler, bağlantılar, resimler vb. Gibi birçok başka öğeye sahip olabilir. HTML belgenize ek yapı ve organizasyon sağlamak için içinde başka bölümler bile olabilir.

Div öğesini kullanmak için açık bir yere yerleştirin

sayfanızın bölümünün ayrı bir bölüm olarak olmasını istediğiniz etiketi ve bir kapat
etiketinden sonra:

div içeriği

Sayfanızın alanı, daha sonra CSS ile stil uygulamak için kullanacağınız bazı ek bilgilere ihtiyaç duyuyorsa, bir kimlik seçici ekleyebilirsiniz (ör.

id = "myDiv">

) veya bir sınıf seçici (ör.

class = "bigDiv">

). Bu özelliklerin ikisi de CSS kullanılarak seçilebilir veya JavaScript kullanılarak değiştirilebilir. Mevcut en iyi uygulamalar, kısmen belirli kimlik seçicilerin ne olduğu nedeniyle, ID'leri yerine sınıf seçicilerini kullanmaya yönelmektedir. Gerçekte, ancak, birini kullanabilirsiniz ve hatta bir ID ve bir sınıf seçicinin bir bölünme bile verebilir.
Karşı

Div öğesi HTML5 bölüm öğesinden farklıdır, çünkü kapalı içeriğe semantik bir anlam vermez. İçerik bloğunun bir bölüm veya bölüm olması gerektiğinden emin değilseniz, öğenin amacının ve içeriğin hangisinin kullanılacağına karar vermenize yardımcı olacağını düşünün:

  • Eğer elemanın sadece bu alanın sayfalarına stil eklemek istiyorsanız, div elemanını kullanmalısınız.
  • İçerilecek içerik ayrı bir odağa sahipse ve kendi başına durabilirse, bunun yerine bölüm öğesini kullanmak isteyebilirsiniz.

Nihayetinde, hem div hem de bölümler oldukça benzer şekilde davranır ve bunlardan herhangi birini verilere atayabilir ve ihtiyacınız olan sitenin görünümünü elde etmek için bunları CSS ile stilleyebilirsiniz. Bunların ikisi de blok seviyesi unsurlardır.

Kullanmak eleman

Yayılma öğesi, varsayılan olarak satır içi bir öğedir. Bu onu div ve bölüm elemanlarından ayırır. Yayılma elemanı genellikle, daha sonra biçimlendirilebilecek ek bir "kanca" vermek için belirli bir içerik parçasını normal olarak metin sarmak için kullanılır. CSS ile kullanıldığında, içerdiği metnin stilini değiştirebilir; Bununla birlikte, herhangi bir stil özelliği olmaksızın, yalnızca yayılma elemanının metin üzerinde hiçbir etkisi yoktur.

Bu, span ve div elemanları arasındaki ana farktır. Yukarıda belirtildiği gibi, div öğesi bir paragraf sonu içerir, oysa yayılma elemanı sadece tarayıcıya, ilgili CSS stili kurallarını tarafından nelerin içerildiğine bildirmesini söyler. etiketler:

Vurgulanan metin ve vurgulanmamış metin.

Ekle

class = "highlight"

veya metni CSS ile stil haline getirmek için span öğesine başka bir sınıf (ör.

class = "highlight">

). Span öğesinin gerekli öznitelikleri yoktur, ancak en kullanışlı üçü div öğesininkilerle aynıdır:

  • stil
  • sınıf
  • İD

İçeriğin stilini, belgede belgede yeni bir blok seviyesi öğesi olarak tanımlamaksızın değiştirmek istediğinizde span kullanın.

Örneğin, bir h3 başlığının ikinci kelimesinin kırmızı olmasını istiyorsanız, bu sözcüğü kırmızı sözcüğü bu sözcüğü stil edebilecek bir açıklık öğesiyle kaplayabilirsiniz. Sözcük hala h3 öğesinin bir parçası olarak kalır, ancak şimdi de kırmızı olarak görüntülenir:

Bu benim harika başlığım