Skip to main content

Używanie Span i Div HTML Elements z CSS w Web Design

Co wybrać czasową główkę czy KETO ????⁉️ LIVE ???? (Kwiecień 2024)

Co wybrać czasową główkę czy KETO ????⁉️ LIVE ???? (Kwiecień 2024)
Anonim

Wiele osób, które dopiero zaczynają projektowanie stron internetowych i HTML / CSS używają i

elementy zamiennie, gdy budują strony internetowe. Rzeczywistość jest jednak taka, że ​​każdy z tych elementów HTML służy innym celom. Nauka korzystania z każdego dla jego zamierzonego celu pomoże ci opracować czystsze strony internetowe, których kodowanie jest łatwiejsze do zarządzania.

Używając
Element

Element div definiuje logiczne podziały na twojej stronie internetowej. Jest to w zasadzie pudełko, w którym można umieścić inne elementy HTML, które logicznie idą w parze. Podział może zawierać wiele innych elementów, takich jak akapity, nagłówki, listy, linki, obrazy itp. Może nawet zawierać inne podziały w celu zapewnienia dodatkowej struktury i organizacji do dokumentu HTML.

Aby użyć elementu div, umieść otwartą

taguj przed obszarem strony, który chcesz jako osobny podział i zamknij
znacznik po:

zawartość div

Jeśli obszar strony wymaga dodatkowych informacji, których będziesz używać do późniejszego stylu CSS, możesz dodać selektor identyfikatora (np.

id = "myDiv">

) lub selektorem klasy (np.

class = "bigDiv">

). Oba te atrybuty można następnie wybrać za pomocą CSS lub zmodyfikować za pomocą JavaScript. Obecne najlepsze praktyki skłaniają się do używania selektorów klas zamiast identyfikatorów, częściowo z powodu tego, jak specyficzne są selektory identyfikatorów. Prawdę mówiąc, możesz użyć jednego z nich, a nawet podać podział ID i selektora klasy. Kiedy używać
Przeciw

Element div różni się od elementu sekcji HTML5, ponieważ nie nadaje on żadnej treści semantycznej. Jeśli nie masz pewności, czy blok treści powinien być divem, czy sekcją, zastanów się, jaki jest cel elementu i treści, aby pomóc Ci zdecydować, z którego użyć:

  • Jeśli potrzebujesz elementu po prostu do dodawania stylów do tego obszaru strony, powinieneś użyć elementu div.
  • Jeśli treść, która ma być zawarta, ma wyraźny fokus i może być samodzielna, możesz zamiast tego użyć elementu section.

Ostatecznie zarówno elementy div, jak i sekcje zachowują się podobnie i możesz nadać im dowolne wartości atrybutów i nadać im styl CSS, aby uzyskać wygląd witryny, której potrzebujesz. Oba są elementami blokowymi.

Używając Element

Element span jest domyślnie elementem wstawianym. To odróżnia ją od elementów div i section. Element span jest często używany do zawijania określonego fragmentu treści, zwykle tekstu, w celu nadania mu dodatkowego "haka", który można później stylizować. Używany z CSS, może zmienić styl tekstu, który otacza; jednak bez żadnych atrybutów stylu sam element span nie ma żadnego wpływu na tekst.

Jest to główna różnica między elementami span i div. Jak wspomniano powyżej, element div zawiera podział akapitu, podczas gdy element zakresu tylko informuje przeglądarkę, aby zastosować powiązane reguły stylu CSS do tego, co jest zawarte w tagi:

Zaznaczony tekst i nie wyróżniony tekst.

Dodaj

class = "highlight"

lub inną klasę do elementu span, aby stylować tekst za pomocą CSS (np.

class = "highlight">

). Element span nie ma wymaganych atrybutów, ale trzy najbardziej użyteczne są takie same, jak elementy div:

  • styl
  • klasa
  • ID

Użyj zakresu, aby zmienić styl treści bez definiowania tej zawartości jako nowego elementu blokowego w dokumencie.

Na przykład, jeśli chcesz, aby drugie słowo nagłówka h3 było czerwone, możesz otoczyć to słowo elementem span, który będzie stylować to słowo jako czerwony tekst. Słowo nadal pozostaje częścią elementu h3, ale teraz jest również wyświetlane na czerwono:

To jest mój niesamowity nagłówek