Computer help - file server


[ Blog ] - [ File Server ] - [ Удаленная компьютерная помощь ]

გჭირდებათ კოდი ტექსტის სურათის გარშემო შესაფუთად? ჩვეულებრივ, როდესაც HTML გვერდს ქმნით, ყველაფერი მიედინება წრფივად, რაც ნიშნავს ერთი ბლოკის პირდაპირ მიყოლებით. ჩემი ყველა წინა პოსტი ამის მაგალითია, მაგ. ტექსტი, შემდეგ სურათი, შემდეგ ტექსტი და ა.შ. ამას ეწოდება სურათის გარშემო ტექსტის შეფუთვა. სინამდვილეში საკმაოდ მარტივია ტექსტის HTML- ის გამოყენებით შეფუთვა. გაითვალისწინეთ, რომ არ გჭირდებათ CSS- ის გამოყენება ტექსტის შესაფუთად.



ამასთან, ამ დღეებში W3C გირჩევთ გამოიყენოთ CSS HTML ამ ტიპის დავალებებისთვის.ქვემოთ აღვნიშნავ ორივე მეთოდს, მაგრამ თუ შეგიძლიათ, უმჯობესია გამოიყენოთ CSS, რადგან ის უფრო მორგებულია ვებსაიტების საპასუხო დიზაინზე. გადაიტანეთ ტექსტი HTML- ის გამოყენებით HTML



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet.მშვენიერი nunc in lorem egestas non imperdiet enim congue.

იმისათვის, რომ ტექსტი გადაფაროთ სურათის მარჯვენა მხარეს, სურათის გასწორება გჭირდებათ მარცხნივ:

თქვენი ტექსტი აქ მიდის.

თუ გსურთ ტექსტი გამოჩნდეს მარცხნივ და გამოსახულება გამოჩნდეს მარჯვნივ, უბრალოდ შეცვალეთ გასწორების პარამეტრი „მარჯვნივ“.



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis.Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. მშვენიერი nunc in lorem egestas non imperdiet enim congue.

თქვენი ტექსტი აქ მიდის.

ეს არის ის! საკმაოდ ადვილია? ერთადერთი შემთხვევა, როდესაც გსურთ CSS გამოიყენოთ, არის თუ გსურთ დაამატოთ მინდვრები სურათებს, რომ ტექსტსა და სურათს შორის იყოს გარკვეული სივრცე.

სურათს შეგიძლიათ დაამატოთ მინდვრები შემდეგი CSS სტილის კოდის გამოყენებით:

თქვენი ტექსტი აქ მიდის.

ზემოთ მოცემული კოდი იყენებს MARGIN CSS ელემენტს სურათის მარჯვენა მხარეს 10 პიქსელის დასამატებლად. მას შემდეგ, რაც სურათი მიუახლოვდით მარცხნივ, გვსურს, რომ თეთრი სივრცე დავამატოთ მარჯვნივ.

ძირითადად, ოთხი ნომერი წარმოადგენს TOP RIGHT BOTTOM LEFT. ასე რომ, თუ გსურთ თეთრი ადგილის სწორად გასწორებულ სურათს დაამატოთ, თქვენ გააკეთებდით ამას:

თქვენი ტექსტი აქ მიდის.

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

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

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

IMG თეგში, თქვენ უბრალოდ მიანიჭებთ კლასს თეგს და მიანიჭებთ მას სახელს.ჩემს მაგალითში კლასს დავარქვი მარცხენა. ჩემი სტილის ფურცელში, მხოლოდ მე უნდა დავამატო შემდეგი კოდი: .left {float: left; padding: 0 10px 0 0;}

როგორც ხედავთ, მე დავამატე 10px padding მარცხენა გასწორებული სურათის მარჯვენა მხარეს. მე ასევე გამოვიყენე float თვისება, რომ გადამეტანა გამოსახულება დოკუმენტის ნორმალური ნაკადიდან და ჩავსვა მშობლის კონტეინერის მარცხენა მხარეს.

როგორც ხედავთ, ეს გაცილებით სუფთაა, ვიდრე მთელი კოდის დამატება IMG თეგში. მისი მართვა უფრო ადვილია და შეგიძლიათ გაცილებით მეტი CSS თვისება გამოიყენოთ თქვენს ვებგვერდზე გარეგნობის მოსარგებად.თუ თქვენ გაქვთ რაიმე შეკითხვა, შეგიძლიათ კომენტარი დატოვოთ. ისიამოვნეთ!


SETUP UA COMPUTER BLOG