Როგორ გადავიდეს გამოსახულება ტექსტის მარცხენა გვერდზე

CSS- ის გამოყენება ვებ-გვერდის განლაგების მარცხენა მხარეს

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

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

სურათის მარცხენა მხარესთან გამოსახული სურათისას, ამ გვერდის ტექსტის ირგვლივ მიედინება ეს არის საერთო დიზაინის მკურნალობა ნაბეჭდი დიზაინისა და ვებ გვერდებისთვის. ვებ ტერმინებში, ეს ეფექტი ცნობილია, როგორც გამოსახულების მცურავი . ეს სტილი მიიღწევა CSS საკუთრებისთვის "float". ეს ქონება საშუალებას აძლევს ტექსტს გადაადგილდეს მარცხნივ დამონტაჟებული გამოსახულების მარჯვენა მხარეს. (ან მის გარშემო მარჯვენა მხარეს გამოსახული მისი მარცხენა მხარეს.) მოდით შევხედოთ როგორ მივაღწიოთ ამ ვიზუალური ეფექტი.

დაწყება HTML

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

ტეგი). აქ არის ის, რაც HTML მარკირების ჰგავს:

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

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

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

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

CSS სტილები

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

.ლეტი {float: left; padding: 0 20px 20px 0; }

ეს სტილი მიუთითებს, რომ გამოსახულება მარცხნივ და დასძენს პატარა padding (გამოყენებით გარკვეული CSS shorthand) მარჯვნივ და ბოლოში გამოსახულება.

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

ალტერნატიული გზები ამ სტილის მისაღწევად

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

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

ამ სურათის სტილი, თქვენ შეგიძლიათ დაწეროთ ეს CSS:

.main-content img {float: მარცხნივ; padding: 0 20px 20px 0; }

ამ sceario, ჩვენი გამოსახულება იქნება შეესაბამება მარცხენა, რომელზეც ტექსტი მცურავი გარშემო, ისევე როგორც ადრე, მაგრამ ჩვენ არ გვჭირდება დაამატოთ დამატებითი კლასის ღირებულება ჩვენი markup. ამის გაკეთება მასშტაბით შეუძლია შექმნას პატარა HTML ფაილი, რომელიც უფრო ადვილად იმოქმედებს და ასევე შეუძლია გააუმჯობესოს შესრულება.

საბოლოოდ, თქვენ შეგიძლიათ კიდევ დაამატოთ სტილის პირდაპირ თქვენს HTML მარკირებას, როგორიცაა:

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

ეს მეთოდი ეწოდება " inline styles ". ეს არ არის მიზანშეწონილი, რადგან იგი აშკარად აერთიანებს ელემენტის სტილს მისი სტრუქტურული მარკირებით. ვებ საუკეთესო პრაქტიკა უკარნახოს, რომ სტილი და სტრუქტურა გვერდზე უნდა დარჩეს ცალკე. ეს განსაკუთრებით სასარგებლოა, როდესაც თქვენს გვერდზე უნდა შეიცვალოს განლაგება და გამოიყურებოდეს სხვადასხვა ეკრანზე ზომის და მოწყობილობების საპასუხო ნახვა. HTML- ში ინტეგრირებული გვერდის სტილი გაცილებით რთულად ხდის ჟურნალის მედიის შეკითხვებს , რომლებიც შეცვლიან თქვენს ვებ-გვერდს, როგორც ეს საჭიროა სხვადასხვა ეკრანებისთვის.

ჯენიფერ კრიინინის ორიგინალური სტატია. რედაქტირებულია Jeremy Girard on 4/3/17.