ყველაზე ხშირად, HTML- გვერდებში ჩაღრმავებების ზომის დასაზუსტებლად, გამოიყენება CSS ენის (Cascading Style Sheets) შესაძლებლობები. მიუხედავად იმისა, რომ თავად HTML ენაში არსებობს რამდენიმე "ელემენტარული" ნაშთი, რაც ზოგ შემთხვევაში საშუალებას აძლევს ჩადგმის დაყენებას. ქვემოთ მოცემულია ის ვარიანტები, რომლებიც ყველაზე ხშირად გამოიყენება, მაგრამ მათ გარდა კიდევ ბევრი სხვადასხვა ხრიკია, რომელიც საშუალებას გაძლევთ დადგით HTML დოკუმენტების არასტანდარტული ნიშანდებას.
Ეს აუცილებელია
HTML და CSS ენების ცოდნა
ინსტრუქციები
Ნაბიჯი 1
განვსაზღვროთ გვერდის ელემენტი, საიდანაც უნდა ამოვიდეს. მაგალითად, თუ ტექსტი მოთავსებულია თეგის შიგნით … (ბლოკი), მაშინ ეს ბლოკი იქნება ამ ტექსტის მშობელი ელემენტი და შენატანი უნდა ჩაითვალოს ბლოკის საზღვრებიდან. თუ ტექსტი (ან სურათი) არ არის რომელიმე ბლოკის (div, li და ა.შ.) ან შინაგანი (span, p და ა.შ.) ელემენტებში, მაშინ მისი მშობელი იქნება დოკუმენტის კორპუსი (body tag). ტექსტისთვის მშობლის ელემენტის განსაზღვრა აუცილებელია, რადგან სწორედ მან უნდა ჩამოაყალიბოს სტილის აღწერები, რომლებიც ქმნის ჩაღრმავებებს. მოდით ვივარაუდოთ, რომ თქვენი ტექსტი მოთავსებულია div ბლოკში: ტექსტის ნიმუში
ნაბიჯი 2
გამოიყენეთ CSS ენის ზღვრის თვისება მინდვრების დასადგენად, ანუ მანძილი ელემენტის საზღვრებიდან მომიჯნავე ელემენტებამდე, ასევე მშობელი ელემენტის საზღვრებამდე. ეს მანძილი შეიძლება განისაზღვროს ცალ – ცალკე თითოეული მხარის დასაფენად: მარჟა – ზემოდან - ზემოდან, მინდორი - მარჯვნივ - მარჯვნივ, მინდორი - ქვედა - ქვედა, მინდორი მარცხნივ - მარცხნივ. ზემოთ მოყვანილი მაგალითისთვის, ეს css კოდი შეიძლება ასე გამოიყურებოდეს: div {
margin-top: 10px;
ზღვარი მარჯვნივ: 15 პიქსელი;
ზღვარი-ქვედა: 40px;
ზღვარი მარცხნივ: 70 პიქსელი;
} აქ "div" არის სელექტორი, რომელიც განსაზღვრავს, რომ ეს სტილი უნდა იქნას გამოყენებული ყველა div- ზე დოკუმენტის კოდში. CSS სინტაქსი საშუალებას გაძლევთ დააკავშიროთ ოთხივე ხაზი ერთში: div {
მინდორი: 10px 15px 40px 70px;
} ჩაღრმავებების მნიშვნელობები ყოველთვის უნდა იყოს მითითებული ამ თანმიმდევრობით: ჯერ - ზედა, შემდეგ - მარჯვნივ, ქვედა და მარცხნივ. თუ ჩაღრმავებები ყველა მხრიდან ერთნაირია, საკმარისია მიუთითოთ მნიშვნელობა ერთხელ: div {
ზღვარი: 70px;
} გარდა ამისა, თქვენ შეგიძლიათ დააყენოთ მცურავი ჰორიზონტალური ზღვარი (ეს არის მარცხენა და მარჯვენა). ეს შეიძლება ძალიან სასარგებლო იყოს, როდესაც მოცემული სიგანის ბლოკი უნდა დააყენოთ ბრაუზერის ფანჯრის ცენტრში. თავად ბრაუზერი ავტომატურად განსაზღვრავს, თუ რამდენი უნდა იყოს ჩაღრმავება ორივე მხარეს, თუ დაწერეთ შემდეგი CSS დებულება: div {
ზღვარი: 0 ავტო;
}
ნაბიჯი 3
გამოიყენეთ padding თვისება padding- ის დასაყენებლად, რაც არის ელემენტის საზღვრიდან მანძილი მის შიგნით განთავსებულ ნებისმიერ ელემენტამდე, ტექსტის ჩათვლით. სინტაქსი ამ თვისებისთვის ზუსტად იგივეა, რაც ზღვრული თვისებისთვის: div {
padding-top: 10px;
padding- მარჯვნივ: 15px;
padding- ქვედა: 40px;
padding- მარცხნივ: 70px;
} ან div {
შევსება: 10px 15px 40px 70px;
}
ნაბიჯი 4
გამოიყენეთ text-indent თვისება, რომ დააყენოთ დამატებითი ჩაღრმავება ტექსტის თითოეული აბზაცის პირველი სტრიქონისთვის. მაგალითად: div {
text-indent: 80px;
}
ნაბიჯი 5
გამოიყენეთ HTML img ტეგის hspace და vspace ატრიბუტები, გამოსახულებისგან შესაბამისად ჰორიზონტალური და ვერტიკალური ჩაღრმავების შესადგენად. მაგალითად, ასე:
ნაბიჯი 6
გამოიყენეთ უჯრედის paddding ატრიბუტი ცხრილის ნიშნისთვის, თუ საჭიროა ცხრილის უჯრედების საზღვრებიდან ჩაღრმავება მათი შინაარსისთვის. უჯრედული სივრცის ატრიბუტი ადგენს შუალედს მაგიდის უჯრედებს შორის. Მაგალითად:
| 1 | 2 |
