აღწერა

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

Სინტაქსი

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

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

ნახ. 1 ჩარჩოს სტილები

border-color ადგენს საზღვრის ფერს, მნიშვნელობა შეიძლება იყოს ნებისმიერი მოქმედი CSS ფორმატში.

მემკვიდრეობა მემკვიდრეობით იღებს მშობლის ღირებულებას.

HTML5 CSS2.1 IE Cr Op Sa Fx

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

ფიგურა: 2. სასაზღვრო ქონების გამოყენება

ობიექტის მოდელი

document.getElementById ("elementID") .სტილი.საზღვარი

ბრაუზერები

Internet Explorer და მე -6 ვერსიის ჩათვლით, აჩვენებს წერტილებს, როგორც გაწყვეტილი 1px საზღვრის სისქით. 2px ან მეტი სისქით, წერტილოვანი მნიშვნელობა სწორად მუშაობს. ეს შეცდომა დაფიქსირებულია IE7- ში, მაგრამ მხოლოდ 1px ყველა საზღვრისთვის. თუ უჯრის ერთ-ერთი საზღვარი 2px ან მეტი სისქეა, IE7- ში წერტილოვანი მნიშვნელობა იშლება.

Internet Explorer 7.0 ან უფრო ახალი ვერსია მხარს არ უჭერს მემკვიდრეობითი მნიშვნელობას.

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

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

სტილი ატრიბუტებს საზღვრის მარცხენა სიგანის, საზღვრის ზედა სიგანის, საზღვრის მარჯვენა სიგანის და საზღვრის ქვედა სიგანის სიგანეზე, შესაბამისად, საზღვრის მარცხენა, ზედა, მარჯვენა და ქვედა მხარეების სიგანეზე:

საზღვრის მარცხენა სიგანე | საზღვრის ზედა სიგანე | საზღვრის მარჯვენა სიგანე |

საზღვრის ქვედა სიგანე: თხელი | საშუალო | სქელი |<толщина>| მემკვიდრეობა

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

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

აქ მოცემულია სტილი, რომელიც ქმნის პირველი დონის ყველა სათაურს ჩარჩო მხოლოდ ქვედა მხრიდან, 5 პიქსელის სისქით:

H1 (საზღვრის ქვედა სიგანე: 5px)

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

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

საზღვრის სიგანე:<толщина 1> [<толщина 2> [<толщина 3> [<толщина 4>]]]

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

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

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

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

მაგალითი:

TD, TH (საზღვრის სიგანე: წვრილი)

სტილი ატრიბუტებს საზღვრის მარცხენა ფერის, საზღვრის ზედა ფერის, საზღვრის მარჯვენა ფერის და საზღვრის ქვედა ფერის შესაბამისად ადგენენ საზღვრის მარცხენა, ზედა, მარჯვენა და ქვედა გვერდების ფერს, შესაბამისად:

საზღვრის მარცხენა ფერი | საზღვრის ზედა ფერის | საზღვრის მარჯვენა ფერის |
საზღვრის ქვედა ფერი: გამჭვირვალე |<цвет>| მემკვიდრეობა

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

ყურადღება!

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

მაგალითი:

H1 (საზღვრის ქვედა სიგანე: 5px
საზღვრის ქვედა ფერი: წითელი)

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

საზღვრის ფერი:<цвет 1> [<цвет 2> [<цвет 3> [<цвет 4>]]]

იგი იქცევა ისევე, როგორც მსგავსი საზღვრის სიგანის სტილის ატრიბუტი:

TD, TH (საზღვრის სიგანე: თხელი;
საზღვრის ფერი: შავი)

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

საზღვრის მარცხენა სტილის | საზღვრის ზედა სტილის | საზღვრის მარჯვენა სტილის |

საზღვრის ქვედა სტილი: არცერთი | დამალული | წერტილოვანი | დატეხილი | მყარი | ორმაგი | ღარი |

ქედი | ჩანართი | დასაწყისში | მემკვიდრეობით

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

არცერთი და დაფარული - არანაირი საზღვარი (ნორმალური ქცევა);

წერტილოვანი - წერტილოვანი ხაზი;

დატეხილი - დაწყვეტილი ხაზი;

მყარი - მყარი ხაზი;

ორმაგი - ორმაგი ხაზი;

Groove - "დეპრესიული" 3D ხაზი;

ქედი - "ამოზნექილი" სამგანზომილებიანი ხაზი;

ჩასმა - სამგანზომილებიანი "ბულგარეთი";

აუტსეტი არის სამგანზომილებიანი "ჩაღრმავება".

მაგალითი:

H1 (საზღვრის ქვედა სიგანე: 5px
საზღვრის ქვედა ფერი: წითელი
საზღვრის ქვედა სტილი: ორმაგი)

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

საზღვრის სტილი:<стиль 1> [<стиль 2> [<стиль 3> [<стиль 4>]]]

იგი იქცევა ისე, როგორც მსგავსი სტილი ატრიბუტებს საზღვრის სიგანეს და საზღვრის ფერს.

მაგალითი:

TD, TH (საზღვრის სიგანე: თხელი;
საზღვრის ფერი: შავი;
საზღვრის სტილი: წერტილოვანი)

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

საზღვრის მარცხენა | საზღვრის ზედა | საზღვრის მარჯვენა | საზღვრის ქვედა

<толщина> <стиль> <цвет> | მემკვიდრეობით მიღება

ხშირ შემთხვევაში, სასურველია ამ სტილის ატრიბუტები:

H1 (ქვედა მხრიდან: 5px ორმაგი წითელი)

საზღვრის სტილის "გლობალური" ატრიბუტი საშუალებას გაძლევთ დააყენოთ ყველა პარამეტრი ერთდროულად საზღვრის ყველა მხრიდან:

საზღვარი:<толщина> <стиль> <цвет> | მემკვიდრეობით მიღება
TD, TH (საზღვარი: თხელი წერტილოვანი შავი)

ყურადღება!

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

წარდგენა ჩვენს ვებ – გვერდზე

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

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

შენიშვნაზე

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

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

გარე სივრცე კონტეინერებს navbar (cnavbar) და ძირითადი შინაარსის (cmain) შორის არის 10 პიქსელი.

კონტეინერის შიდა შევსება, რომლის მთავარი შინაარსი (სმ) არის ყველა მხრიდან - თითო 5 პიქსელი.

ძირითადი შინაარსის კონტეინერის ზედა ზღვარი (სმ) არის 10 პიქსელი. ეს გამოყოფს მას cnavbar და cmain კონტეინერებისგან.

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

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

ახლა გავყოთ ოთხივე კონტეინერი ჩარჩოებით.

Cheader კონტეინერი მიიღებს ჩარჩო ერთი ქვედა მხრიდან.

სმ ჭურჭელი არის ჩარჩო, რომელსაც აქვს ერთი მარცხენა მხარე.

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

ჩვენ გავაკეთებთ ჩარჩოებს თხელი და წერტილოვანი. დააყენეთ # B1BEC6 (ღია ლურჯი) ფერით.

11.3 ჩამონათვალში ნაჩვენებია შესწორებული CSS ფრაგმენტი main.css სტილის ფურცლისთვის, რომელიც ახდენს ჩვენ მიერ არჩეული შევსების და საზღვრის ვარიანტებს.

მოდით დავანგრიოთ იგი.

ბრაუზერის ფანჯრის საზღვრებსა და ვებ-გვერდის შინაარსს შორის padding- ის ამოსაღებად, ჩვენ გამოვიყენეთ style ატრიბუტის ზღვარი. ჩვენ ჩადეთ იგი თეგის გადაჭრის სტილში და მისცა მას 0 პიქსელის მნიშვნელობა:

BODY (ფერი: # 3B4043;
ფონის ფერი: # F8F8F8;
შრიფტის ოჯახი: Verdana, Arial, sans-serif;
მინდორი: 0 პიქსელი)

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

# ხელმძღვანელი (სიგანე: 1010 პიქსელი;
შევსება: 0 20px;
საზღვრის ქვედა: წვრილი წერტილოვანი # B1BEC6)

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

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

#cnavbar (სიგანე: 250px;
სიმაღლე: 570 პიქსელი;
ათწილადი: მარცხენა;
ზღვარი მარჯვნივ: 10 პიქსელი)

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

# მთავარი (სიგანე: 760px;
სიმაღლე: 570 პიქსელი;
ათწილადი: მარცხენა;
გადავსება: ავტო;
შევსება: 5px;
მარცხნივ საზღვარი: წვრილი წერტილოვანი # B1BEC6)

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

# საავტორო უფლებები (სიგანე: 1010 პიქსელი;
გასაგებია: ორივე;

შევსება: 10px 20px 0px 20px;
საზღვრის ზედა: წვრილი წერტილოვანი # B1BEC6)

Სულ ეს არის. შევინახოთ main.css სტილის ფურცელი და გავხსნათ index.htm ვებ – გვერდი ვებ – ბრაუზერში. ავტორი აქ ილუსტრაციას არ წარმოადგენს, რადგან ჩვენს მიერ შექმნილი თხელი ჩარჩოები მასზე პრაქტიკულად არ ჩანს. მაგრამ ისინი ძალიან შთამბეჭდავად გამოიყურებიან კომპიუტერის ეკრანზე.

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

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

აქ საჭიროა ცვლილებები:

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

სიის ერთეულების ზედა და ქვედა მინდვრები 10 პიქსელია. ეს გამოყოფს ჰიპერბმულებს ერთმანეთისგან.

ჩამოთვალეთ ელემენტების ჩარჩო - თხელი, მყარი, ფერის # B1BEC6.

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

რჩება მხოლოდ CSS– ის კორექტირება main.css სტილის ფურცლის შესაბამისად (ჩამონათვალი 11.4).

მოდით განვიხილოთ ისინი უფრო დეტალურად.

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

#navbar (შრიფტის ოჯახი: Arial, sans-serif;
შრიფტის ზომა: 14pt;

ტექსტი-გარდაქმნა: დიდი;
სიის სტილის ტიპი: არცერთი;
ზღვარი მარცხნივ: -30 პიქსელი)

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

#navbar LI (შევსება: 5px 10px;
მინდორი: 10px 0px;
საზღვარი: წვრილი მყარი # B1BEC6)

შეინახეთ შესწორებული სტილის ფურცელი და განაახლეთ index.htm ვებ – გვერდი, რომელიც გახსნილია თქვენს ბრაუზერში, დაჭერით ... ეს ბევრად უკეთესი გახდა, არა (სურათი 11.1)?

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

ეს სამი თვისება (სიგანე, სტილი და საზღვრის ფერი) შეიძლება დაყენდეს ერთ დეკლარაციაში. აი მაგალითი:

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

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

გაითვალისწინეთ, როგორ შეგიძლიათ შექმნათ მსგავსი ფორმა CSS– ის გამოყენებით:

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

• საზღვრის სტილი - საზღვრის სტილი.
• საზღვრის სიგანე - საზღვრის სიგანე.
• საზღვრის ფერი - საზღვრის ფერი.

განვიხილოთ თითოეული მნიშვნელობა ცალკე.

საზღვრის სტილის ქონება. საზღვრის სტილი.

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

1. არცერთი - საზღვარი არაა (ნაგულისხმევი).
2. მყარი - მყარი საზღვარი.
3. ორმაგი - ორმაგი საზღვარი.
4. დაშრეტილი - დაშლილი საზღვარი.
5. წერტილოვანი წერტილების საზღვარია.
6. ქედი - ქედის საზღვარი.
7. groove - გროვის საზღვარი.
8. ჩანართი - ჩაღრმავებული საზღვარი.
9. დასაწყისი - წნეხილი საზღვარი.

მაგალითები, თუ როგორ გამოიყურებიან ისინი.

საზღვარი არ არის (არცერთი)

მყარი საზღვარი

ორმაგი საზღვარი (ორმაგი)

წერტილოვანი საზღვარი

დაშლილი საზღვარი (დაშლილი)

ღარის საზღვარი

ქედის საზღვარი

ჩასმული საზღვარი

წნეხილი საზღვარი (დასაწყისში)

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

დივი შავი საზღვრისა და ქედის სტილით.

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

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

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

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

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

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

საზღვრის სიგანის თვისება. საზღვრის სისქე.

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

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

მაგალითი კოდი:

ასევე არსებობს საკვანძო სიტყვების მნიშვნელობები საზღვრის სიგანის თვისებისთვის. სამი მათგანია:

• თხელი - თხელი საზღვარი;
• საშუალო - საშუალო სისქე;
• სქელი - სქელი საზღვარი;

საზღვრის სისქე: თხელი.

საზღვრის სისქე: საშუალო.

საზღვრის სისქე: სქელი.

საზღვრის ფერის თვისება. საზღვრის ფერი.

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

• ფერის თექვსმეტობითი აღნიშვნა (# ff00aa).
• RGB ფორმატი - rgb (255,12,110). RGBA ფორმატის CSS3.
• HSL და HSLA ფორმატები CSS3– სთვის.
• ფერის სახელი, მაგალითად შავი. ფერის სახელების სრული ჩამონათვალისთვის იხილეთ CSS ფერის სახელების ცხრილი.

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

ერთი მნიშვნელობა (წითელი).

ორი მნიშვნელობა (წითელი შავი).

სამი მნიშვნელობა (წითელი შავი ყვითელი).

ოთხი მნიშვნელობა (წითელი შავი ყვითელი ლურჯი).

ახლა დავუბრუნდეთ ზემოთ ნახსენებ პრობლემას და დავხატოთ ფორმა:

აქ მოცემულია კოდი, რომელიც აყალიბებს ასეთ ფორმას, მხოლოდ უფრო დიდი ზომის:

გვერდების ცალკეული მნიშვნელობების დაყენება

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

• საზღვრის ზედა (ზედა საზღვარი)
• საზღვარი-მარჯვნივ (მარჯვენა საზღვარი)
• საზღვრის ქვედა (ქვედა საზღვარი)
• საზღვარი მარცხნივ (მარცხენა საზღვარი)

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

სასაზღვრო ზედა ვარიანტები (საზღვრის ზედა).

• border-top-color - ადგენს ელემენტის ზედა საზღვრის ფერს.
• საზღვრის ზედა სიგანე - ადგენს ელემენტის ზედა საზღვრის სისქეს.
• border-top-style - ადგენს ელემენტის ზედა საზღვრის სტილს.

საზღვრის მარჯვენა ვარიანტები (საზღვარი-მარჯვნივ).

• border-right-color - ადგენს ელემენტის მარჯვენა საზღვრის ფერს.
• საზღვრის მარჯვენა სიგანე - ადგენს ელემენტის მარჯვენა საზღვრის სიგანეს.
• border-right-style - ადგენს ელემენტის მარჯვენა საზღვრის სტილს.

ქვედა პარამეტრები (საზღვარი-ქვედა).

• border-bottom-color - ადგენს ელემენტის ქვედა საზღვრის ფერს.
• საზღვრის ქვედა სიგანე - ადგენს ელემენტის ქვედა საზღვრის სიგანეს.
• border-bottom-style - ადგენს ელემენტის ქვედა საზღვრის სტილს.

მარცხენა საზღვრის ვარიანტები (საზღვარიდან მარცხნივ).

• border-left-color - ადგენს ელემენტის მარცხენა საზღვრის ფერს.
• საზღვრის მარცხენა სიგანე - ადგენს ელემენტის მარცხენა საზღვრის სიგანეს.
• საზღვრის მარცხენა სტილი - ადგენს ელემენტის მარცხენა საზღვრის სტილს.

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

საზღვრის რადიუსის თვისება. საზღვრის კუთხეების დამრგვალება.

საზღვრის რადიუსის თვისება არის ელემენტის საზღვრების კუთხეების დამრგვალებისთვის. ეს თვისება დაინერგა CSS3– ში და სწორად მუშაობს ყველა თანამედროვე ბრაუზერში, გარდა Internet Explorer 8 (და უფრო ძველი).

მნიშვნელობები შეიძლება იყოს CSS– ში გამოყენებული ნებისმიერი რიცხვი.

საზღვრის რადიუსის თვისებაა 15 პიქსელი.

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

საზღვრის რადიუსის თვისებაა 15 პიქსელი.

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

საზღვრის ზედა მარცხენა რადიუსი: 15px; საზღვარი-ზედა-მარჯვენა რადიუსი: 0; საზღვარი-ქვედა-მარჯვენა-რადიუსი: 15px; საზღვარი-ქვედა მარცხენა რადიუსი: 0;

საზღვრის რადიუსის თვისებაა 15 პიქსელი.

მიუხედავად იმისა, რომ ეს კოდი შეიძლება დაიწეროს ერთ დეკლარაციაში: border-radius: 15px 0 15px 0. საქმე იმაშია, რომ საზღვრის რადიუსის თვისება შეიძლება განისაზღვროს ერთიდან ოთხ მნიშვნელობამდე. ქვემოთ მოცემულ ცხრილში მოცემულია წესები, რომლებიც არეგულირებს ასეთ რეკლამებს.

ამ ცხრილის ფრთხილად შესწავლის შემდეგ თქვენ გესმით, რომ საჭირო სტილის ყველაზე მოკლე ჩანაწერი ასეთი იქნება: border-radius: 15px 0. მხოლოდ ორი მნიშვნელობა.

ცოტა პრაქტიკა

ნახაზი ლიმონის გამოყენებით CSS.

აი კოდი ასეთი ბლოკისთვის:

მინდორი: 0 ავტო; / * მოათავსეთ ბლოკი ცენტრში * / სიგანე: 200px; სიმაღლე: 200 პიქსელი; ფონი: # F5F240; საზღვარი: 1px solid # F0D900; საზღვრის რადიუსი: 10px 150px 30px 150px;

ჩვენ უკვე შევადგინეთ ფორმა:

ახლა მისგან სამკუთხედი დავტოვოთ:

სამკუთხედის კოდი ასეთია:

მინდორი: 0 ავტო; / * მოათავსეთ ბლოკი ცენტრში * / padding: 0px; სიგანე: 0px; სიმაღლე: 0; საზღვარი: 30px მყარი თეთრი; საზღვრის ქვედა ფერი: წითელი;

ჩარჩოები (ბლოკის პარამეტრები)

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

Პარამეტრები	მნიშვნელობა	აღწერა
საზღვრის ზედა ფერი საზღვარი-მარჯვენა ფერი საზღვრის მარცხენა ფერი საზღვრის ქვედა ფერი საზღვრის ფერი	ფერი (ფერი არ არის ნაგულისხმევი)	განსაზღვრავს ჩარჩოების ოთხი მხარის ფერს. თუ URL- ს შეცვლით სურათს ფერით, ის მეორდება და ქმნის საზღვარს.
საზღვრის ზედა სტილი საზღვრის მარჯვენა სტილი საზღვრის მარცხენა სტილი საზღვრის ქვედა სტილი საზღვრის სტილი	არცერთი (ნაგულისხმევი) მყარი ორმაგი ღარი ქედი ჩასმული დასაწყისში	განსაზღვრავს ჩარჩოების ოთხი მხარის სტილს.
საზღვრის ზედა საზღვარი-მარჯვნივ საზღვრის მარცხენა საზღვრის ქვედა საზღვარი	ჩარჩოს სიგანე, ჩარჩოს სტილი, ფერი (ნაგულისხმევი: საშუალო, არცერთი, არ არის ფერი)	განსაზღვრავს ჩარჩოების ოთხი მხარის თვისებებს. ეს იგივეა, რაც ბალიშების თვისებები (იხ. ქვემოთ), გარდა იმისა, რომ საზღვარი ჩანს. ჩარჩოს სიგანე შეიძლება იყოს საშუალო, წვრილი, სქელი ან ერთეულებში. ჩარჩო_სტილი შეიძლება იყოს არცერთი და არც მყარი კამათი ფერი გამოიყენება ელემენტის ფონზე შევსების ფერის დასადგენად, როდესაც ის იტვირთება, ისევე როგორც ელემენტის გამჭვირვალე ნაწილების უკან. თუ სურათის მისამართს ჩააბარებთ, ნახაზი განმეორდება და შეავსებს ჩარჩოს კონტურს.
საზღვრის ზედა სიგანე საზღვრის მარჯვენა სიგანე საზღვრის მარცხენა სიგანე საზღვრის ქვედა სიგანე საზღვრის სიგანე	გამხდარი საშუალო (ნაგულისხმევი) სქელი სიგრძე	განსაზღვრავს საზღვრის სიგანეს ელემენტის გარშემო. თითოეული მხარე შეიძლება განისაზღვროს შესაბამისი პარამეტრით. თქვენ შეგიძლიათ შეცვალოთ ოთხი ინდივიდუალური თვისების პარამეტრი ერთი თვისების დაყენებით საზღვრის სიგანე იგივე რაც აბზაცის თვისებებისთვის ზღვარი.
ციიპი	rect (/ ზედა / მარჯვენა / ქვედა / მარცხენა /) ავტო (ნაგულისხმევი)	განსაზღვრავს რამდენად ჩანს ელემენტი. ამ პარამეტრის მიერ მითითებული ტერიტორიის გარეთ არაფერი ჩანს.
ჩვენება	"", არცერთი "" (ნაგულისხმევი)	ეს პარამეტრი განსაზღვრავს, გამოჩნდება თუ არა ნივთი.
ათწილადი	არცერთი (ნაგულისხმევი) მარცხენა მართალი	მიუთითებს, რომ სხვა ელემენტები მიედინება ელემენტის გარშემო მარცხნივ ან მარჯვნივ, ნაცვლად იმისა, რომ განათავსონ ისინი მათ ქვემოთ. მხარდაჭერილია თეგებით , ...
სიმაღლე	ავტო (ნაგულისხმევი) სიგრძე	ელემენტის სიმაღლე დგინდება და საჭიროების შემთხვევაში იზომება. მნიშვნელობა უბრუნდება სტრიქონს, რომელიც შეიცავს ერთეულებს (px,% და ა.შ.). PosHeight თვისება გამოიყენება რიცხვითი მნიშვნელობის მისაღებად.
მარცხენა	ავტო (ნაგულისხმევი) სიგრძე ინტერესი	ადგენს ელემენტის ჰორიზონტალურ კოორდინატს, რაც საშუალებას გაძლევთ განათავსოთ ელემენტები სწორად. მნიშვნელობა უბრუნდება როგორც სტრიქონი ერთეულების ჩათვლით (px,% და ა.შ.). PosLeft თვისება გამოიყენება მნიშვნელობის, როგორც რიცხვის მისაღებად.

მაგალითი 1:
ეს ხაზი ხაზგასმულია წერტილოვანი ხაზით. მაგალითი 2: სხვადასხვა ტიპის ჩარჩოები.

1. არა - საზღვარი არაა (საზღვარი: არცერთი;)

2. მყარი - არსებობს საზღვარი (საზღვარი: 1px მყარი;)

მაგალითი 4: ჩარჩო მრგვალი კუთხით.

... საგადასახადო დეკლარაციებში;
... სერთიფიკატები 2-NDFL;

ყველა ჩამოთვლილი დოკუმენტი მიუთითებს 11ნიშნა OKMO კოდის ნაცვლად ადრე გამოყენებული OKATO კოდების.

#org { სიგანე: 80%; ზღვარი-ზემო: 2em; ზღვარი მარცხნივ: ავტო; ზღვარი მარჯვნივ: ავტო; საზღვარი-რადიუსი: 10px 10px; -moz- საზღვრის რადიუსი: 10px 10px; -webkit- საზღვრის რადიუსი: 10px 10px; შევსება: 15px 20px 15px 80px; მინდორი: 0px 0px 0px 0px; -webkit-box-shadow: 2px 2px 3px # 999; -moz-box-shadow: 2px 2px 3px # 999; / * IE მინი სიმაღლის გატეხვა * / min- სიმაღლე: 40px; სიმაღლე: ავტო! მნიშვნელოვანია; სიმაღლე: 40px; გადავსება: ხილული; თანამდებობა: ნათესავი; ქვედა: 6px; მარჯვნივ: 6px; საზღვარი: 1px მყარი # 7e5a25; / * დააყენეთ ფონის სურათის პოზიცია * / ფონის პოზიცია: 20px 50%; ფონის გამეორება: განმეორება; ტექსტის გასწორება: გამართლება; შრიფტის ზომა: 0.9em; ფონის ფერი: # e8e3d4; background-image: url (baba.gif); }

2014 წლის 1 იანვრიდან OKTMO– ს ახალი კოდები მითითებულია: ... საგადასახადო დეკლარაციებში; ... სერთიფიკატები 2-NDFL; ... საგადახდო დავალებები (ველი 105); ... გადასახადების, მოსაკრებლების, მოსაკრებლების გადახდის ქვითარი, ფორმა PD-4 გადასახადი. ყველა ზემოთ ჩამოთვლილ დოკუმენტში მითითებულია 11-ციფრიანი OKTMO კოდი ადრე გამოყენებული OKATO კოდების ნაცვლად.

მაგალითი 5: ჩარჩო ჩარჩოშია ჩასმული ცხრილებით.

ა. ვ. სუვოროვი

ჩასმული მაგიდები

სურათი ცხრილი 1 ვიწრო შავი საზღვარი (5 პიქსელი) ცხრილის ვარიანტები: ცხრილი -\u003e bgcolor \u003d # 000000 style \u003d "border: 2px solid # a3852f" td -\u003e style \u003d "padding: 5px"

მაგალითი 6: ვერტიკალური ჩარჩო.

ბლოკის ელემენტების სიგანე და სიმაღლე

CSS თვისებები სიგანე და სიმაღლე - დააყენეთ ბლოკის ელემენტების სიგანე და სიმაღლე.
ელემენტის სიგანე და სიმაღლე შეიძლება დაყენდეს შემდეგი გზით:

• ავტო - ელემენტის ზომა განისაზღვრება მისი შინაარსით. (ნაგულისხმევი)
• % - ელემენტის ზომა დაყენებულია მშობლის ელემენტის სიმაღლის / სიგანის პროცენტულად.
• px - ელემენტის ზომა განისაზღვრება პიქსელებში ან CSS– ში მიღებული ნებისმიერი სხვა საზომი ერთეული.

მაგალითი:

ელემენტის შინაარსის კონტროლი

რა უნდა გააკეთოს ელემენტის შინაარსთან, თუ ის აღემატება მის ზომას?

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

ქონება გადავსება შეიძლება ჰქონდეს შემდეგი მნიშვნელობები:

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

მაგალითი:

შედეგი

CSS

CSS (ინგლისური Cascading Style Sheets - კასკადური სტილის ფურცლები) ფორმალური ენაა მარკირების ენის გამოყენებით დაწერილი დოკუმენტის გარეგნობის აღსაწერად. CSS დოკუმენტთან დაკავშირების გზები
CSS წესები იწერება CSS ფორმალურ ენაზე და განლაგებულია სტილის ფურცლებში, ანუ სტილის ფურცლები შეიცავს CSS წესებს. ეს სტილის ფურცლები შეიძლება განთავსდეს როგორც ვებ დოკუმენტში, რომლის გარეგნობას ისინი აღწერენ, ასევე ცალკეულ ფაილებში, რომლებსაც აქვთ CSS ფორმატში. (ძირითადად, CSS ფორმატი არის ჩვეულებრივი ტექსტური ფაილი. .Css ფაილი შეიცავს არაფერს, გარდა CSS წესების ჩამონათვალისა და მათთვის კომენტარების გაგზავნისა.) ანუ, ამ სტილის ფურცლები შეიძლება იყოს ჩართული, ჩადებული ვებ დოკუმენტში, რომელსაც ისინი აღწერენ ოთხი სხვადასხვა გზით :

1. როდესაც სტილის ფურცელი ცალკე ფაილშია, ის შეიძლება მიბმული იყოს ვებ-დოკუმენტთან თეგის გამოყენებით ამ დოკუმენტში მდებარეობს თეგებს შორის და.
   (ტეგ ექნება href ატრიბუტი მითითებული ამ სტილის ფურცლის მისამართზე). ამ ცხრილის ყველა წესი მოქმედებს მთელ დოკუმენტში;

   
   .....
   
   

2. როდესაც სტილის ფურცელი ცალკე ფაილშია, ის შეიძლება დაუკავშირდეს ვებ დოკუმენტს @import დირექტივის გამოყენებით, რომელიც ამ დოკუმენტში მდებარეობს ტეგებს შორის და) ნიშნის შემდეგ დაუყოვნებლივ
   

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

   
   .....
   
   

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

   სპილოს ყიდვა

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

ჩარჩოს სისქე

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

ჩარჩოს ფერი

საზღვრის ფერის თვისება განსაზღვრავს საზღვრის ფერს. მნიშვნელობები არის ნორმალური ფერის მნიშვნელობები, როგორიცაა "# 123456", "rgb (123,123,123)" ან "ყვითელი".

ჩარჩოს ტიპები

არსებობს სხვადასხვა ტიპის ჩარჩოები. ქვემოთ მოცემულია რვა ჩარჩოს ტიპი და მათი ინტერპრეტაცია Internet Explorer 5.5-ში. ყველა მაგალითი ნაჩვენებია "ოქროს" ფერით და "სქელი" სისქით, მაგრამ, რა თქმა უნდა, ისინი სხვადასხვა ფერისა და სისქის ნაჩვენებია.

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

ჩარჩოების განსაზღვრის მაგალითები

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

,

,

და

შედეგი შეიძლება არც ისე შთამბეჭდავი იყოს, მაგრამ ის გარკვეულ შესაძლებლობებს აჩვენებს:

H1 (საზღვრის სიგანე: სქელი; საზღვრის სტილი: წერტილოვანი; საზღვრის ფერი: ოქრო;) h2 (საზღვრის სიგანე: 20px; საზღვრის სტილი: დასაწყისი; საზღვრის ფერი: წითელი;) p (საზღვრის სიგანე: 1px; საზღვრის სტილი: დატეხილი; საზღვრის ფერი: ლურჯი;) ul (საზღვრის სიგანე: თხელი; საზღვრის სტილი: მყარი; საზღვრის ფერი: ნარინჯისფერი;)

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

H1 (საზღვრის ზედა სიგანე: სქელი; საზღვრის ზედა სტილი: მყარი; საზღვრის ზედა ფერი: წითელი; საზღვრის ქვედა სიგანე: სქელი; საზღვრის ქვედა სტილის: მყარი; საზღვრის ქვედა ფერის: ლურჯი; საზღვრის მარჯვენა სიგანე: სქელი; საზღვრის მარჯვენა სტილი: მყარი; საზღვრის მარჯვენა ფერი: მწვანე; საზღვრის მარცხენა სიგანე: სქელი; საზღვრის მარცხენა სტილის: მყარი; საზღვრის მარცხენა ფერის: ნარინჯისფერი;)

შემოკლებული ნოტაცია

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

P (საზღვრის სიგანე: 1px; საზღვრის სტილი: მყარი; საზღვრის ფერი: ლურჯი;)

შეიძლება გაერთიანდეს:

P (საზღვარი: 1px მყარი ლურჯი;)

Შემაჯამებელი

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

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