css ცხრილის შიდა საზღვრების ჩვენება. საზღვრები და ჩარჩოები

გაკვეთილის მიზანი:ცხრილის თვისებების და CSS ცხრილის განლაგების პრინციპების გაცნობა

მოდით შევხედოთ CSS ცხრილის ძირითად თვისებებს

საზღვარი

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

ბორდერ-სტილი
საზღვრის სიგანე
სასაზღვრო-ფერი

ასევე არსებობს კოლექტიური წესი:

table.collapse (საზღვრის-collapse: collapse;) table.separate (საზღვრის დაშლა: ცალკე;)

შედეგი:

სიგანე და სიმაღლე
(მაგიდის სიმაღლე და სიგანე)

ღირებულებები:

მაგალითი:

ტექსტის გასწორება
(ჰორიზონტალური გასწორება)

ღირებულებები:

ცენტრი (ცენტრირებული)
მარცხნივ (მარცხნივ გასწორებული)
მარჯვნივ (მარჯვნივ გასწორებული)
გამართლება (სიგანე)

ვერტიკალური გასწორება
(ვერტიკალური გასწორება)

ღირებულებები:

საბაზისო (საწყისი)
ქვე (ქვეინდექსის სახით)
სუპერ (როგორც ზედწერილი)
ზედა (ზედა)
შუა (შუა)
ქვედა (ქვედა)
% (ხაზის მანძილის სიმაღლის)

მაგალითი:

padding
(მაგიდის შიგთავსი)

ფონის ფერი (ფონი)
ფერი (ტექსტის ფერი)

CSS ცხრილის განლაგება

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

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

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

ელცხრილის ორსვეტიანი განლაგება

განლაგების ერთ-ერთი ყველაზე გავრცელებული მეთოდია ორი სვეტი, ე.ი. გვერდი დაყოფილია ორ ნაწილად.

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

ამ შემთხვევაში დაყენებულია მარცხენა მხარის სიგანე გარკვეული ღირებულება, ე.ი. რთულია და მარჯვენა მხარე იკავებს გვერდის დანარჩენ ნაწილს.

ამ შემთხვევაში, თქვენ უნდა დააყენოთ მთლიანი ცხრილის მთლიანი სიგანე (ცხრილის ტეგი) პროცენტებში სიგანე თვისების გამოყენებით (100%), ხოლო პირველი უჯრედისთვის (td tag) დააყენოთ სიგანე (ასევე სიგანე თვისება) პიქსელებში. ან პროცენტი.

მაგალითი:დააყენეთ გვერდის მთავარი ჩარჩო ორ სვეტად: პირველი - ფიქსირებული ზომით, მეორე - ბრაუზერის დანარჩენი ზონისთვის. შეასრულეთ დავალება CSS სტილის გამოყენებით ()

Შესრულება:

</ თავი> <სხეული> <ცხრილის id = "maket" cellpacing = "0"> <tr> <td id = "მარცხნივ"> 1</ td> <td id = "სწორი"> 2</ td> </ tr> </ მაგიდა> ...

...

შედეგი:

ახლა შევეცადოთ ვიზუალურად გამოვყოთ ცხრილის ორი სვეტი ერთმანეთისგან.

მაგალითი:დააყენეთ უჯრედების განსხვავებული ფონი (ორი სვეტის ერთმანეთისგან გამოყოფა) და დააყენეთ მანძილი სვეტებს შორის (გამყოფი)

Შესრულება:
მოდით დავამატოთ ახალი სტილის თვისებები:

/ * მარცხენა უჯრედისთვის * / td # მარცხენა (სიგანე: 200 px; ფონი: #cccc; საზღვარი: 1px მყარი შავი; / * დროებით აღნიშნეთ საზღვრები * /) / * მარჯვენა უჯრედისთვის * / td # მარჯვნივ (ფონი: # fc3; საზღვარი: 1px მყარი შავი; / * დროებით აღნიშნეთ საზღვრები * /) / * გამყოფისთვის * / #razdel (სიგანე: 10 პიქსელი; / * დაშორება სვეტებს შორის * /)

ერთად:

</ თავი> <სხეული> <ცხრილის id = "maket" cellpacing = "0"> <tr> <td id = "მარცხნივ"> 1</ td> <td id = "razdel"> <td id = "სწორი"> 2</ td> </ tr> </ მაგიდა>

გამყოფისთვის დაემატა ახალი უჯრედი.
შედეგი:

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

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

Შესრულება:
მოდით დავამატოთ ახალი საზღვრების თვისებები უჯრედებისთვის:

/ * მარცხენა უჯრედისთვის * / td # მარცხენა (სიგანე: 200 პიქსელი; ფონი: #cccc; / * მარცხენა სვეტის ფონის ფერი * / / * ახალი * / საზღვარი-მარჯვნივ: 1px წყვეტილი # 000; / * მარჯვენა წყვეტილი საზღვრის პარამეტრები * / )

ერთად:

</ თავი> <სხეული> <ცხრილის id = "maket" cellpacing = "0"> <tr> <td id = "მარცხნივ"> 1</ td> <td id = "სწორი"> 2</ td> </ tr> </ მაგიდა>

შედეგი:

ცხრილების სამსვეტიანი განლაგება

არსებობს ფიქსირებული ან "თხევადი" განლაგების კონცეფცია.

დაფიქსირდა CSS განლაგება

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

მაგალითი:შექმენით გვერდის შაბლონი სამი სვეტით. გამოიყენეთ ფიქსირებული მაგიდის განლაგება:

მარცხენა სვეტი - 150 პიქსელი;
შუა სვეტი - 400 პიქსელი;

Შესრულება:

</ თავი> <სხეული> <ცხრილის id = "maket" cellpacing = "0"> <tr> <td id = "მარცხნივ"> 1</ td> <td id = "ცენტრალური"> 2</ td> <td id = "სწორი"> 3</ td> </ tr> </ მაგიდა>

შედეგი:

რეზინის მაკეტი

მაგიდის სიგანე"რეზინის" დიზაინის გამოყენებისას ბრაუზერის ფანჯრის სიგანის% დაყენება... რომ. როდესაც ბრაუზერის ფანჯარა იცვლება, ცხრილის ზომაც იცვლება.
ყველა უჯრედის სიგანეშეიძლება დამონტაჟდეს პროცენტებში.
მეორე ვარიანტი არის როდის ზოგიერთი უჯრედის სიგანედადგენილია პროცენტებში, ა ზოგიერთი პიქსელებში.

Მნიშვნელოვანი:ყველა სვეტის სიგანეების ჯამი უნდა იყოს 100%, მიუხედავად ცხრილის სიგანისა.

მაგალითი:

მარცხენა სვეტი - 20%;
შუა სვეტი - 40%;
მარჯვენა სვეტი - 40%;

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

Შესრულება:

შედეგი:

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

მაგალითი:შექმენით გვერდის შაბლონი სამი სვეტით. გამოიყენეთ თხევადი მაგიდის განლაგება:

მარცხენა სვეტი - 150 პიქსელი;
შუა სვეტი - 40%;
მარჯვენა სვეტი - 200 პიქსელი;

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

Შესრულება:

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

წყობილი მაგიდის გამოყენება სითხის განლაგებაში

თუ ორი სვეტის სიგანე დაყენებულია პროცენტებში, ხოლო მესამე პიქსელებში, თქვენ ვერ შეძლებთ ერთი ცხრილით გადალახვას. ასე რომ, თუ მთელი ცხრილის სიგანე 100 პროცენტია, პირველი სვეტი არის 200 პიქსელი, ხოლო დანარჩენი სვეტები 20 პროცენტია, მაშინ მარტივი გაანგარიშება აჩვენებს, რომ პირველი სვეტის ზომა არის 60 პროცენტი. ამ შემთხვევაში ბრაუზერი არ მიიღებს მითითებულ მნიშვნელობას პიქსელებში და ზომა დაყენდება პროცენტებში.

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

მაგალითი:შექმენით გვერდის შაბლონი სამი სვეტით. გამოიყენეთ სითხის განლაგება წყობილი ცხრილით:

მარცხენა სვეტი - 150 პიქსელი;
შუა სვეტი - 60%;
მარჯვენა სვეტი - 40%;

დააყენეთ ფონი სვეტებისთვის.

Შესრულება:

თქვენ შეგიძლიათ გამოიყენოთ მხოლოდ ერთი CSS თვისება, background-color, მაგრამ თქვენ არ შეგიძლიათ პირდაპირ დააყენოთ ფონის ფერი hover-ზე (the: hover pseudo-class) ამ ელემენტზე. ამ მაგალითში ჩვენ განვიხილავთ, თუ როგორ უნდა გამოვყოთ ცხრილის სვეტი მხოლოდ CSS-ის გამოყენებით.

ცხრილის სვეტებისა და რიგების ხაზგასმის მაგალითი ჰოვერზე

აქ საჭიროა ტეგის ატრიბუტები cellpadding და cellpacing, რათა არ იყოს "უფსკრული" ცხრილებს შორის.
შედეგი:

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

უჯრედში შეწევის გასაკეთებლად გამოიყენეთ ატრიბუტი cellpaddingტეგისთვის

... თუმცა, არსებობს კიდევ ერთი, უფრო სასურველი ვარიანტი: CSS.

ამ შემთხვევაში, შეწევა დაყენებულია ქონების გამოყენებით padding... მისი დახმარებით, არ იქნება რთული შეწევა საჭიროების შემთხვევაში, ანუ ზემოდან, მარჯვნივ, ქვედა ან მარცხნივ, შესაბამისად, ერთი ამ თვისების გამოყენებით: padding-top, padding-მარჯვნივ, padding-ქვედადა padding-მარცხნივ.

თქვენ შეგიძლიათ დააყენოთ რამდენი პიქსელი უნდა იყოს ჩაჭრილი. აქ არის მაგალითი, სადაც ქვედა ზღვარი იქნება 20 პიქსელები და ყველა დანარჩენი იქნება 10 ... ასეთი CSS- კოდი ასე გამოიყურება:

Td (შეფუთვა: 10 px; padding-ქვედა: 20 px;)

და სტილის სრული კოდი ამ ეტაპზე:

ცხრილი (საზღვარი: მყარი 1px ლურჯი; საზღვრები-collapse: collapse;) td (საზღვარი: მყარი 1px ლურჯი; padding: 10px; padding-bottom: 20px;)

შედეგი ბრაუზერში:

ჩაღრმავება უჯრედებს შორის

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

ცხრილებში ჩაღრმავები არ არის მხოლოდ უჯრედების შიგნით. ისინი ასევე შეიძლება იმყოფებოდნენ თავად უჯრედებს შორის.

უჯრედებს შორის შეწევის ორი გზა არსებობს:

ატრიბუტის გამოყენებით უჯრედების ინტერვალიტეგისთვის

გამოყენებით CSS-თვისებები საზღვრების დაშორება.

ხაზგასმით უნდა აღინიშნოს, რომ საზღვრების დაშორებაიწერება მთლიანი ცხრილისთვის, ხოლო საკუთრება paddingგანსაზღვრავს პირდაპირ უჯრედებს.

მოდით შევხედოთ მაგალითს:

ცხრილი (საზღვარი: მყარი 1px ლურჯი; საზღვრის ჩაკეცვა: ცალკე; საზღვრების დაშორება: 5px;) td (საზღვარი: მყარი 1px ლურჯი; padding: 10px; padding-bottom: 20px;)

და შედეგად მიღებული შედეგი:

მოდი დაუყოვნებლივ განვსაზღვროთ, რომ არ უნდა სცადოთ ასეთი ჩაღრმავების გაკეთება საზღვარი-ჩამოშლა: ნგრევა... მართლაც, ამ პარამეტრის გამოყენებისას უჯრედები ერთმანეთს „ეწებება“.

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

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

საზღვრის კოლაფსი: ცალკე - თითოეულ უჯრედს აქვს საკუთარი საზღვარი (ნაგულისხმევი)

საზღვარი-ჩაშლა: კოლაფსი - ზოგადი საზღვარი

საზღვარი-კოლაფსი: მემკვიდრეობა - მნიშვნელობა აღებულია მშობელი ელემენტი

მაგალითად, შევქმნათ ცხრილი და დავაყენოთ ჩარჩო ყველა ცხრილის უჯრედებისთვის, რომლებიც იქნება გვერდზე. პირველ რიგში, ნუ შევცვლით არაფერს, რომ ვნახოთ, როგორ გამოიყურება ცხრილი:

სტილი:

და და მათი სტილი.

ცხრილის სვეტების ხაზგასმის მაგალითი

1
2
3
4
5
6

გვერდი

სახელი	გვარი
ჰომეროსი	სიმპსონი
მარჯი	სიმპსონი

სახელი	გვარი
ჰომეროსი	სიმპსონი
მარჯი	სიმპსონი

სცადე"

მაგიდის ზომა

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

Th, td (padding: 7px;) სცადეთ "

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

ცხრილი (სიგანე: 70%;) ე (სიმაღლე: 50 პიქსელი;) სცადეთ "

ტექსტის გასწორება

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

ვერტიკალური გასწორება CSS თვისება გაძლევთ საშუალებას აკონტროლოთ ტექსტის შინაარსის ვერტიკალური გასწორება. ნაგულისხმევად, ტექსტი ვერტიკალურად არის გასწორებული უჯრედების ცენტრში. ვერტიკალური გასწორება შეიძლება გადაფარდეს ვერტიკალური გასწორების საკუთრების ერთ-ერთი მნიშვნელობით:

ზედა: ტექსტი გასწორებულია უჯრედის ზედა ნაწილში
შუა: ასწორებს ტექსტს ცენტრში (ნაგულისხმევი)
bottom: ტექსტი გასწორებულია უჯრედის ბოლოში

დოკუმენტის სახელი

სახელი	გვარი
ჰომეროსი	სიმპსონი
მარჯი	სიმპსონი

სცადე"

ცხრილის რიგების ფონის ფერის შეცვლა

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

დოკუმენტის სახელი

სახელი	გვარი	თანამდებობა
ჰომეროსი	სიმპსონი	მამა
მარჯი	სიმპსონი	დედა
ბარტ	სიმპსონი	ვაჟიშვილი
ლიზა	სიმპსონი	ქალიშვილი

სცადე"

ყოველ მეორე სტრიქონზე კლასის ატრიბუტის დამატება დამღლელი ამოცანაა. ამ პრობლემის გადასაჭრელად CSS3-ში დაემატა: nth-child ფსევდოკლასი ალტერნატიული გზა... მონაცვლეობის ეფექტის მიღწევა ახლა შესაძლებელია ექსკლუზიურად CSS-ის გამოყენებითდოკუმენტის HTML მარკირების შეცვლის გარეშე. ფსევდოკლასით: nth-child შესაძლებელია ცხრილის ყველა კენტი ან ლუწი მწკრივის არჩევა ერთ-ერთის გამოყენებით. საკვანძო სიტყვები: ლუწი (ლუწი) ან კენტი (კენტი):

Tr: nth-child (კენტი) (ფონის ფერი: # EAF2D3;) სცადეთ "

შეცვალეთ ხაზის ფონი ჰოვერზე

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

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

Tr: გადაიტანეთ (ფონის ფერი: # E0E0FF;) სცადეთ "

მაგიდის ცენტრში განლაგება

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

ცხრილი (ზღვარი: 10 პიქსელი ავტო;) სცადეთ "

თუ თქვენ გჭირდებათ სხვადასხვა მინდვრები ცხრილის ზედა და ქვედა ნაწილში, შეგიძლიათ დააყენოთ margin თვისება სამ მნიშვნელობაზე: პირველი პასუხისმგებელია ზედა ზღვარზე, მეორე ჰორიზონტალური გასწორებისთვის და მესამე ქვედა ზღვარზე:

ცხრილი (ზღვარი: 10px auto 30px;)

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

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

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

(ცხრილის "ძირი") ფონის ფერი - მარჯანიელემენტისთვის (ცხრილის "Header") დააყენეთ ფონის ფერი ვერცხლი.

ნივთებისთვის

რომლებიც ელემენტის შიგნით არიან (მაგიდის სხეული) დააყენეთ ფონის ფერის ცვლილება hover-ზე (ფსევდო კლასი: hover) გ თეთრითითო ფერზე ხაკისფერი(მთელი ხაზი მონიშნულია).

ჩვენი მაგალითის შედეგი:

ბრინჯი. 153 ცხრილების რიგების სტილის მაგალითი

შემდეგი მაგალითი გვიჩვენებს, თუ როგორ უნდა გამოიყენოთ კუთხის დამრგვალება ცხრილის უჯრედებზე (საკუთრება).

უჯრედის კუთხეების დამრგვალების მაგალითი

მონიშნეთ

აღწერა


განსაზღვრავს ცხრილის შინაარსს.

განსაზღვრავს ცხრილის სახელს.
		განსაზღვრავს ცხრილის სათაურის უჯრედს.

განსაზღვრავს რიგს ცხრილში.
		განსაზღვრავს ცხრილის მონაცემთა უჯრედს.

გამოიყენება ცხრილში ჯგუფის სათაურის შესატანად (ცხრილის სათაური).

გამოიყენება მაგიდის „სხეულის“ შესანახად.

გამოიყენება ცხრილის (ფუტერის) „ძირის“ შესატანად.

განსაზღვრავს სვეტის მითითებულ თვისებებს ტეგის ფარგლებში თითოეული სვეტისთვის

განსაზღვრავს სვეტების ჯგუფს ცხრილში.

ცხრილის ჭრილებთან მუშაობა

ბალიშის გამოყენება მაგიდაზე

ცხრილის შეწევა
1	2	3	4
2
3
4

ამ მაგალითში ჩვენ:

მოათავსეთ მაგიდა ცენტრში ჰორიზონტალური გასწორების ტექნიკის გამოყენებით მინდვრები(ზღვარი: 0 ავტო).
მაგიდის სახელისთვის (ტეგ

) ქვედა ბალიშს ვაყენებთ 19 პიქსელზე. იმედია არ შეგაწუხებთ არათანაბარი რიცხვები :)

ჩვენი მაგალითის შედეგი:

დაშორება უჯრედებს შორის

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

მიმდებარე უჯრედების საზღვრებს შორის მანძილის დასადგენად, თქვენ უნდა გამოიყენოთ CSS თვისება - border-spacing.

შეცვალეთ მანძილი ცხრილებს შორის

საზღვრების დაშორება: 30px 10px;
1	2	3
2
3

საზღვრების დაშორება: 0;
1	2	3
2
3

საზღვრების დაშორება: 0.2 მმ;
1	2	3
2
3

ამ მაგალითში ჩვენ:

ათწილადი: მარცხნივ). თუ გამოტოვეთ მცურავი ელემენტების თემა, მაშინ ყოველთვის შეგიძლიათ დაუბრუნდეთ მას ამ სახელმძღვანელოში - "".
გარდა ამისა, ჩვენ დავაყენებთ ცხრილის ბალიშს მარჯვნივ 30 პიქსელზე და დავაყენეთ ცხრილების ვერტიკალური განლაგება (ელემენტის ზედა ნაწილი შეესაბამება ყველაზე მაღალი ელემენტის ზედა მხარეს). ამ ქონებას დეტალურად დავუბრუნდებით ამ სტატიაში.

) - თამამი.

ცხრილის უჯრედებისთვის (სათაური და მონაცემთა უჯრედები), ჩვენ დავაყენეთ 1 პიქსელიანი მყარი საზღვარი # F50 თექვსმეტობით და დავაყენეთ ბალიშები 19 პიქსელზე ყველა მხრიდან.

პირველი მაგიდისთვის კლასით .პირველიჩვენ დავაყენეთ მანძილი ცხრილის უჯრედებს შორის (საზღვრის დაშორების თვისება) 30px 10px-ზე, მეორე ცხრილისთვის კლასით .მეორენულის ტოლი, მესამე ცხრილისთვის კლასით .მესამეუდრის 0,2ემ.

თქვენს ყურადღებას ვაქცევ იმ ფაქტს, რომ თუ მხოლოდ ერთი სიგრძის მნიშვნელობა არის მითითებული საზღვრების დაშორების თვისებაში, მაშინ ის მიუთითებს ინტერვალს, როგორც ჰორიზონტალურად, ასევე ვერტიკალურად, ხოლო თუ მითითებულია სიგრძის ორი მნიშვნელობა, მაშინ პირველი განსაზღვრავს ჰორიზონტალურ მანძილს. და მეორე ვერტიკალური. მიმდებარე უჯრედების საზღვრებს შორის მანძილი შეიძლება განისაზღვროს CSS ერთეულებში (px, cm, em და ა.შ.). უარყოფითი მნიშვნელობები დაუშვებელია.

ჩვენი მაგალითის შედეგი:

ცხრილის უჯრედების გარშემო საზღვრების ჩვენება

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

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

ამისათვის თქვენ უნდა გამოიყენოთ საზღვრის კოლაფსის CSS თვისება. უცნაურად საკმარისია, საზღვრის-collapse თვისების გამოყენება collapse მნიშვნელობით არის საუკეთესო გზაროგორ შეგიძლიათ ამოიღოთ უფსკრული უჯრედებს შორის და არ მიიღოთ ორმაგი საზღვრები მათ შორის.

განვიხილოთ საზღვრის ქცევის შედარება 0 მნიშვნელობით საზღვრების დაშლის თვისების გამოყენებისას და კოლაფსის მნიშვნელობის მქონე საზღვრის დაშლის თვისების გამოყენებისას:

ცხრილის უჯრედების გარშემო საზღვრების ჩვენების მაგალითი

საზღვრების დაშორება: 0;
1	2	3
2
3

საზღვარი-ჩაშლა: ნგრევა;
1	2	3
2
3

ამ მაგალითში ჩვენ:

გავხადეთ ჩვენი ცხრილები მოძრავი და მარცხნივ გასწორებული (float: მარცხნივ), დააყენეთ მათი მარჯვენა ზღვარი 30 პიქსელზე.
დააყენეთ ცხრილის სახელი (ტეგი

) - თამამი.

ცხრილის უჯრედებისთვის (სათაური და მონაცემთა უჯრედები), ჩვენ დავაყენეთ 5px მყარი საზღვარი # F50 hex-ით და დავაყენეთ ფიქსირებული სიგანე 50px და სიმაღლე 75px.

პირველი მაგიდისთვის კლასით .პირველიჩვენ დავაყენეთ მანძილი ცხრილის უჯრედებს შორის ნულამდე (საზღვრების ინტერვალი: 0;), ხოლო მეორე ცხრილისთვის კლასთან .მეორედააყენეთ border-collapse თვისება collapse-ზე, რომელიც აერთიანებს უჯრედის საზღვრებს ერთში, როდესაც ეს შესაძლებელია.

ჩვენი მაგალითის შედეგი:

ცარიელი უჯრედის ქცევა

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

მოდით გადავიდეთ მაგალითზე:

ცხრილის ცარიელი უჯრედების ჩვენების მაგალითი

ცარიელი-უჯრედები: ჩვენება;
1	2	3
2		☺
3	☺

ცარიელი უჯრედები: დამალვა;
1	2	3
2		☺
3	☺

იმის გაგება, თუ როგორ მუშაობს ცარიელი უჯრედების თვისება ამ მაგალითიდან, ძალიან მარტივია, თუ ის დაყენებულია დამალვაზე, მაშინ ცარიელი უჯრედები და მათში არსებული ფონი დაიმალება, თუ დაყენებულია ჩვენებაზე (ნაგულისხმევი), მაშინ ისინი გამოჩნდება.

ცხრილის სათაურის მდებარეობა

მოდით გადავხედოთ ცხრილების სტილის კიდევ ერთ მარტივ თვისებას - caption-side, რომელიც ადგენს ცხრილის წარწერის პოზიციას (ცხრილის ზემოთ ან ქვემოთ). ნაგულისხმევად, სუბტიტრების მხარის თვისება დაყენებულია ზედა, რაც ათავსებს წარწერას ცხრილის ზემოთ. იმისათვის, რომ სათაური ცხრილის ქვეშ მოათავსოთ, თქვენ უნდა გამოიყენოთ ქონება ქვედა მნიშვნელობით.

ვნახოთ ამ ქონების გამოყენების მაგალითი:

წარწერის მხარის თვისების გამოყენების მაგალითი

მაგიდის ზემოთ მიმავალი
სახელი	ფასი
Თევზი	350 რუბლი
ხორცი	250 რუბლი

სათაური ცხრილის ქვემოთ
სახელი	ფასი
Თევზი	350 რუბლი
ხორცი	250 რუბლი

ამ მაგალითში ჩვენ შევქმენით ორი კლასირომლებიც აკონტროლებენ ცხრილის სათაურის პოზიციას. პირველი კლასი ( .topCaption) აყენებს ცხრილის სათაურს ზემოთ, ჩვენ გამოვიყენეთ იგი პირველ ცხრილზე, ხოლო მეორე კლასში ( .bottomCaption) ათავსებს ცხრილის სათაურს ქვემოთ, ჩვენ გამოვიყენეთ მეორე ცხრილზე. Კლასი .topCaptionაქვს სათაურის ნაგულისხმევი თვისება და შეიქმნა საჩვენებელი მიზნებისთვის.

ჩვენი მაგალითის შედეგი:

ჰორიზონტალური და ვერტიკალური განლაგება

უმეტეს შემთხვევაში, ცხრილებთან მუშაობისას, თქვენ უნდა დაარეგულიროთ შინაარსის გასწორება სათაურსა და მონაცემთა უჯრედებში. ტექსტის გასწორება გამოიყენება ნებისმიერი ტექსტური ინფორმაციის მსგავსი ჰორიზონტალური გასწორებისთვის. ჩვენ განვიხილეთ ამ თვისების გამოყენება ტექსტისთვის ადრე სტატიაში "".

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

ჰორიზონტალური გასწორების მაგალითი ცხრილში

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

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

ჩვენი მაგალითის შედეგი:

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

გთხოვთ გაითვალისწინოთ, რომ ცხრილის უჯრედებთან მუშაობისას გამოიყენება ამ თვისების მხოლოდ შემდეგი მნიშვნელობები *:

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

მოდით შევხედოთ გამოყენების მაგალითს:

ვერტიკალური გასწორების მაგალითი ცხრილში

მნიშვნელობა	აღწერა
საბაზისო	ასწორებს უჯრედის საბაზისო ხაზს მშობლის საბაზისო ხაზთან. ეს არის ნაგულისხმევი.
ზედა	ასწორებს უჯრედის შიგთავსს ვერტიკალურად ზევით.
შუა	ასწორებს უჯრედის შიგთავსს ვერტიკალურად შუაში.
ქვედა	ასწორებს უჯრედის შიგთავსს ვერტიკალურად ბოლოში.

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

ბრაუზერის მიერ ცხრილის განლაგების განთავსების ალგორითმი

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

ბრაუზერის მიერ ცხრილის განლაგების ტიპის შეცვლა ავტომატური on დაფიქსირდა, თქვენ უნდა გამოიყენოთ ცხრილის განლაგება CSS თვისება დაყენებული fixed.

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

მოდით შევხედოთ ამ ქონების გამოყენებას შემდეგი მაგალითით:

table-layout თვისების გამოყენების მაგალითი

მაგიდა-განლაგება: ავტო;
სახელი	2009	2010	2011	2012	2013	2014	2015	2016
ხორბალი	125	215	2540	33287	695878	1222222	125840000	125

მაგიდა-განლაგება: ფიქსირებული;
სახელი	2009	2010	2011	2012	2013	2014	2015	2016
ხორბალი	125	215	2540	33287	695878	1222222	125840000	125

ამ მაგალითში ჩვენ:

ცხრილის სტრიქონების და სვეტების სტილისტიკა

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

მოდით გადახედოთ წინა ტექნიკას და გამოვიკვლიოთ ახალი გზები ცხრილების რიგებისა და სვეტების სტილისტიკისთვის. მოდით გადავიდეთ მაგალითებზე.

ცხრილებით nth-child ფსევდოკლასის გამოყენების მაგალითი

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

ამ მაგალითში ჩვენ:

ჩვენი მაგალითის შედეგი:

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

ცხრილების რიგების სტილის მაგალითი

სერვისი	ფასი
ჯამი	15 000
1	1 000
2	2 000
3	3 000
4	4 000
5	5 000

ამ მაგალითში ჩვენ:

დააყენეთ ცხრილის სიგანე ძირითადი ელემენტის სიგანის 100%-ზე, დააყენეთ სათაური და მონაცემთა უჯრედები 1px მყარ საზღვარზე.
დაყენებულია ნივთისთვის

1	2	3	4	5

ამ მაგალითში ჩვენ:

მოათავსეთ ცხრილი ბალიშებით, დააყენეთ სათაურის უჯრედების სიგანე და სიმაღლე 50 პიქსელზე, მითითებული გამჭვირვალესაზღვარი 5 პიქსელი.
აღმოჩნდა, რომ სათაურის უჯრედზე (ფსევდო-კლასი: hover) გადაადგილებისას ის იღებს ფონი ლურჯიფერები, ნარინჯისფერიტექსტის ფერი, საზღვრები ფორთოხალიფერები 5 პიქსელი და რადიუსი 100%.
გამჭვირვალე საზღვარიაუცილებელია იმისთვის, რომ დაჯავშნოთ სივრცე საზღვრებისთვის, რომელიც გამოჩნდება ჰოვერზე, თუ ეს არ გაკეთებულა, ცხრილი "გადახტება".

ჩვენი მაგალითის შედეგი:

შემდეგი მაგალითი ეხება HTML ელემენტების გამოყენებას

Აპლიკაციის ნომერი	სერვისი	ფასი, რუბლი.	სულ
1	სიმღერა	6 000	6 000
2	გარეცხვა	2 000	2 000
3	დასუფთავება	1 000	1 000
4	ღელვა	1 500	1 500
5	Კითხვა	3 000	3 000

ამ მაგალითში ჩვენ:

ჩვენი მაგალითის შედეგი:

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

წინა მაგალითში ჩვენ მივხვდით ამას HTML ელემენტი

Აპლიკაციის ნომერი	სერვისი	ფასი, რუბლი.	სულ
1	სიმღერა	6 000	6 000
2	გარეცხვა	2 000	2 000
3	დასუფთავება	1 000	1 000
4	ღელვა	1 500	1 500
5	Კითხვა	3 000	3 000

ამ მაგალითში ჩვენ:

ჩვენ ვაყენებთ ჩვენს ცხრილს, რომ დაიკავოს მთავარი ელემენტის 100%, ცხრილის უჯრედები იკავებენ მშობელი ელემენტის 25%-ს და აქვთ 1 პიქსელიანი მწვანე მყარი საზღვარი, სათაურები და მონაცემთა უჯრედები 45 პიქსელის სიმაღლეა. ჩვენ ამოიღეთ უფსკრული უჯრედებს შორის მნიშვნელობის მქონე border-collapse თვისების გამოყენებით .
ასე რომ, ფსევდოელემენტის შემდეგ :: გამოყენებით, დაამატეთ შინაარსი თითოეული ელემენტის შემდეგ. ჰოვერზე. :: შემდეგ ფსევდოელემენტი აუცილებლად გამოიყენება შინაარსის თვისებასთან ერთად, რის წყალობითაც ჩავსვით ბლოკის ელემენტი, რომელსაც აქვს ფონის ფერი. ტყისმწვანედა აქვს აბსოლუტური პოზიციონირება.
აქ აბსოლუტური პოზიციონირება აუცილებელია ელემენტის წინაპრის მითითებულ კიდესთან შედარებით, ხოლო წინაპარს უნდა ჰქონდეს პოზიციის მნიშვნელობა, გარდა ნაგულისხმევი სტატიკური, წინააღმდეგ შემთხვევაში, რაოდენობა იქნება ბრაუზერის ფანჯრის მითითებულ კიდესთან შედარებით, ამ მიზეზით. სუფრაზე გავშალეთ შედარებითი პოზიციონირება(ნათესავი).
ჩვენი გენერირებული ბლოკისთვის დავაყენეთ ზედა თვისება, რომელიც მიუთითებს განლაგებული ელემენტის გადაადგილების მიმართულებაზე ზედა კიდიდან და ქვედა თვისება, რომელიც მიუთითებს განლაგებული ელემენტის გადაადგილების მიმართულებას ქვედა კიდიდან. ორივე თვისებისთვის მითითებული იყო მნიშვნელობა 0, ასე რომ ბლოკი მთლიანად დაიკავებს ელემენტს ცხრილის ქვემოდან და ზემოდან, ამ ბლოკის სიგანე დაყენებული იყო 25%, ეს მნიშვნელობა შეესაბამება უჯრედის სიგანის მნიშვნელობას. თავად.
და საბოლოო თვისება, რომელიც ჩვენ დავაყენეთ ამ ბლოკისთვის: z-index მნიშვნელობით "-1" ის განსაზღვრავს განლაგებული ელემენტების თანმიმდევრობას. Z ღერძი... ეს თვისება აუცილებელია იმისთვის, რომ ტექსტი იყოს ამ ბლოკის წინ, და არა მის უკან, თუ არ დააყენეთ მნიშვნელობა ნულზე ნაკლები, მაშინ ბლოკი დახურავს ტექსტს.

ჩვენი მაგალითის შედეგი:

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