Როგორ გამოვიყენოთ Span და Div HTML ელემენტები

გამოყენება span და div ერთად CSS მეტი სტილი და განლაგება კონტროლი.

ბევრი ადამიანი, რომლებიც ახალი დიზაინისა და HTML / CSS- ს ახალია, გამოიყენეთ და

ელემენტები ერთმანეთთან, როგორც ისინი აშენებენ ვებგვერდებზე. რეალობა, თუმცა, ისაა, რომ თითოეული ამ HTML ელემენტები სხვადასხვა მიზნებს ემსახურება. სწავლისთვის თითოეული თავისი მიზნის მისაღწევად გამოიყენებს სუფთა ვებ გვერდების განვითარებას, რომლებიც კოდს ადვილად აკონტროლებს მთლიანობაში.

ელემენტის გამოყენება

Div ელემენტს განსაზღვრავს ლოგიკური განყოფილებები თქვენს ვებ გვერდზე.

ეს ძირითადად ყუთი, რომელშიც შეგიძლიათ განათავსოთ სხვა HTML ელემენტები, რომლებიც ლოგიკურად ერთად წავიდეთ. დივიზიას შეიძლება ჰქონდეს მრავალი სხვა ელემენტი, როგორიცაა პუნქტები, სათაურები, სიები, ბმულები, სურათები და ა.შ. მას შეუძლია სხვა განყოფილებების შიგნით შეავსოს დამატებითი სტრუქტურა და ორგანიზაცია თქვენს HTML დოკუმენტში.

გამოიყენეთ div ელემენტი, განათავსეთ ღია

tag თქვენი გვერდის არეში, რომ გსურთ ცალკე განყოფილება და დახურვა tag შემდეგ:

შინაარსი div

თუ თქვენს გვერდს სჭირდება გარკვეული დამატებითი ინფორმაცია, რომელიც მოგვიანებით გამოიყენებთ სტილი CSS- ს, შეგიძლიათ დაამატოთ ID- ის სელექტორი (მაგალითად,

id = "myDiv">), ან კლასის სელექტორი (მაგალითად, კლასი = "bigDiv">). ორივე ეს ატრიბუტი მაშინ შეირჩევა CSS- ის გამოყენებით ან შეცვლილი JavaScript- ის გამოყენებით. დღევანდელი საუკეთესო პრაქტიკა იცვლება კლასის სელექციონერების ნაცვლად პირადობის მოწმობების ნაცვლად, ნაწილობრივ იმიტომ, რომ კონკრეტული პირადობის შემფასებლები არიან. თუმცა, სინამდვილეში თქვენ შეგიძლიათ გამოიყენოთ ერთი და კიდევ დაამატოთ განყოფილება როგორც ID და კლასის სელექტორია.

როდის უნდა გამოიყენოთ

VERSus

Div ელემენტი განსხვავებულია HTML5 სექციის ელემენტისგან, რადგან იგი არ იძლევა თანდართულ შინაარსს ნებისმიერი სემანტიკური მნიშვნელობისთვის. თუ არ ხართ დარწმუნებული, თუ შინაარსი ბლოკი უნდა იყოს div ან სექცია, ვიფიქროთ იმაზე, თუ რა ელემენტისა და შინაარსის შინაარსის მიზანია დაგეხმაროთ გადაწყვიტოს რომელი გამოყენება:

  • თუ საჭიროა ელემენტის უბრალოდ სტილის დამატება გვერდის არეში, უნდა გამოიყენოთ div ელემენტი.
  • თუ შინაარსის შემცველი აქვს მკაფიო აქცენტი და შეიძლება დადგეს საკუთარი, თქვენ შეგიძლიათ გამოიყენოთ სექცია ელემენტის ნაცვლად.

საბოლოო ჯამში, ორივე divs და სექციები მოიქცევა საკმაოდ მსგავსად და შეგიძლიათ მისცეს მათ შორის ატრიბუტი ღირებულებები და სტილის მათ CSS მისაღებად სახე თქვენი საიტი, რომელიც გჭირდებათ. ორივე ესაა ბლოკის დონის ელემენტები.

ელემენტის გამოყენება

Span ელემენტი არის inline ელემენტის ნაგულისხმევი. ეს განსაზღვრავს div და სექციის ელემენტებს. Span ელემენტის ხშირად გამოიყენება გადაიტანოთ კონკრეტული ნაჭერი შინაარსი, ჩვეულებრივ ტექსტი, მისცეს მას დამატებითი "Hook", რომელიც შეიძლება ეყრდნობიან მოგვიანებით. გამოიყენება CSS- ით, მას შეუძლია შეცვალოს ტექსტის სტილის შეცვლა; თუმცა, ნებისმიერი სტილი ატრიბუტების გარეშე, span ელემენტს მარტო არ აქვს გავლენა ტექსტის ყველა.

ეს არის მთავარი განსხვავება span და div ელემენტები. როგორც ზემოთ აღინიშნა, div ელემენტს შეიცავს პუნქტის შესვენება, ხოლო span ელემენტის მხოლოდ ეუბნება ბრაუზერს გამოიყენოს ასოცირებული CSS სტილი წესები, რაც თან ერთვის მიერ tags:


ხაზგასმული ტექსტი და არა-ხაზგასმული ტექსტი.

დაამატეთ კლასს = "Highlight" ან სხვა კლასს span ელემენტში სტილის ტექსტი CSS- ით (მაგალითად, კლასი = "Highlight">).

Span ელემენტს არ გააჩნია საჭირო ატრიბუტები, მაგრამ სამი, რაც ყველაზე სასარგებლოა, იგივეა, რაც div ელემენტს:

  • სტილი
  • კლასი
  • id

გამოყენება span როდესაც გსურთ შეცვალოთ სტილი შინაარსი გარეშე განსაზღვრავს, რომ შინაარსი, როგორც ახალი ბლოკ-დონის ელემენტი დოკუმენტი.

მაგალითად, თუ გსურთ მეორე სიტყვა H3 სასაქონლო იყოს წითელი, შეგიძლიათ გარს რომ სიტყვა ერთად span ელემენტს, რომელიც სტილი, რომ სიტყვა, როგორც წითელი ტექსტი. სიტყვა კვლავ რჩება H3 ელემენტის ნაწილში, მაგრამ ახლა ასევე გამოჩნდება წითელი:

ეს არის ჩემი გასაოცარია სათაური

რედაქტირებულია Jeremy Girard on 2/2/17