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

Div'ler ve açıklıklar web sayfası yapımında birbirinin yerine kullanılamaz. Her biri farklı amaçlara hizmet eder ve her birinin ne zaman kullanılacağını bilmek temiz, yönetimi kolay web siteleri geliştirmenize yardımcı olur.

Div Öğesini Kullanma

Div'ler web sayfanızda mantıksal bölümler tanımlayın. bir div—bölmenin kısaltması—temelde içine diğerlerini yerleştirebileceğiniz bir kutudur. HTML öğeleri birbirine ait olan. Bir bölümün içinde paragraflar, başlıklar, listeler, bağlantılar, resimler vb. gibi birden çok başka öğe olabilir. Ek yapı ve organizasyon sağlamak için içinde başka bölümler bile olabilir.

kullanmak için div eleman, açık bir yer sayfanızın ayrı bir bölüm olarak olmasını istediğiniz alanından önce etiketleyin ve bir kapanış 

 ondan sonra etiketleyin:

div'in içeriği

Bu alanı CSS ile şekillendirecekseniz, bir İD açılış div etiketine seçici:


Veya bir sınıf seçici ekleyebilirsiniz:


Daha sonra bu öğelerle CSS veya JavaScript'te çalışabilirsiniz.

Mevcut en iyi uygulamalar, kısmen belirli kimlik seçicilerinin ne kadar özel olduğu nedeniyle, kimlikler yerine sınıf seçicileri kullanmaya yöneliktir. Ancak her ikisi de kabul edilebilir ve hatta bir

instagram viewer
div hem kimlik hem de sınıf seçici.

Div'ler mi, Bölümler mi?

div eleman farklıdır HTML5Bölüm öğedir, çünkü ekteki içeriğe anlamsal bir anlam vermez. İçerik bloğunun bir olması gerekip gerekmediğinden emin değilseniz div veya bir Bölüm, öğenin amacını ve içeriğini düşünün.

  • Öğeye yalnızca sayfanın o alanına stiller eklemek için ihtiyacınız varsa, div öğe.
  • İçeriğin belirgin bir odağı varsa ve kendi başına ayakta durabiliyorsa, Bölüm yerine eleman.

Sonuçta, hem div'ler ve bölümler benzer şekilde davranın ve bunlardan herhangi birine nitelikler verebilir ve CSS ile stil verebilirsiniz. Her ikisi de blok düzeyinde öğelerdir.

Aralıkları Kullanma

açıklık aksine, varsayılan olarak bir satır içi öğedir div ve Bölüm elementler. açıklık eleman genellikle, stil eklemek için kullanabileceğiniz ek bir kanca sağlamak için metin gibi belirli bir içerik parçasını sarmak için kullanılır. Bununla birlikte, herhangi bir stil özelliği olmadan, açıklık metin üzerinde hiçbir etkisi yoktur.

arasındaki diğer bir fark açıklık ve div elemanlar şu ki div öğesi bir paragraf sonu içerirken, açıklık öğesi, tarayıcıya yalnızca ilişkili CSS stil kurallarını, içinde bulunanlara uygulamasını söyler. etiketler:


Vurgulanan metin  ve vurgulanmayan metin.



Ekleyebilirsin.

sınıf = "vurgula"

veya buna benzer açıklık metni CSS ile stillendirmek için öğe.

span öğesinin gerekli öznitelikleri yoktur, ancak en kullanışlı olan üçü, aşağıdakilerinkilerle aynıdır. div eleman:

  • stil
  • sınıf
  • İD

kullanın açıklık o içeriği yeni bir içerik olarak tanımlamadan içeriğin stilini değiştirmek istediğinizde blok düzeyinde öğe belgede.

Örneğin, bir kelimenin ikinci kelimesini istiyorsanız h3 kırmızı olacak, bu kelimeyi bir açıklık bu kelimeyi kırmızı metin olarak biçimlendirecek öğe. Söz hala bir parçası olmaya devam ediyor h3 öğesi, ancak kırmızı olarak görüntülenecektir.

instagram story viewer