«
»

CSS შემოკლებები – border

Mar 14 2007

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

არის რამდენიმე CSS თვისება რომელიც შეიძლება საგრძნობლად მოკლედ ჩიაწეროს: border, font, padding, margin, list-style.


border

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

this is div

უნდა დავწეროთ შემდეგი CSS კოდი:

1
2
3
border-size: 1px;
border-style: dotted;
border-color: green;

თუმცა უფრო მოკლე გზა გამოიყურება ასე:

1
border: 1px solid green;

იგივე ტიპის შემოკლება შეგვიძლია გამოვიყენოთ: border-top, border-right, border-bottom და border-left – ისთვის.

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

1
2
3
4
5
6
#d1 {
  border-top: 2px dotted red;
  border-right: 2px dotted green;
  border-bottom: 2px dotted blue;
  border-left: 2px dotted orange;
}

მივიღებთ ასეთ შედეგს:

this is div

თუმცა იგივე შედეგის მისაღწევად საკმარისია შემდეგი კოდი:

1
2
3
4
#d1 {
  border: 2px dotted;
  border-color: red green blue orange;
}

ყურადღება მიაქციეთ რომ, კოდის შემოკლებულ ვარიანტში ელემენტის გვერდების ფერები განსაზღვრულია შემდეგი მიმდევრობით: top, right, bottom, left

ნებისმიერი CSS თვისება რომელისაც აქვს საშუალება რომ ერთდროულად განვსაზღვროთ მნიშვნელობა ელემენტის გვერდებისთვის(მაგ: padding, margin, border) იყენებს ზუსტად იგივე მიმდევრობას.

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

border-color: red green blue; ან სულაც border: red green; ან border: red; თუმცა ამ ჩაწერით მიღებული რეზულტატი საჭიროებს ახსნას.

შემდეგი კოდი:

1
border-color: red green blue;

ექვივალენტურია ასეთი ჩაწერისა:

1
border-color: red green blue green;

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

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

1
2
border: 2px solid;
border-color: blue red;

this is div

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

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

1
2
3
4
border-top-width: 2px;
border-right-width: 4px;
border-bottom-width: 2px;
border-left-width: 5px;

შეგვიძლია გადავწეროთ ასე:

1
border-width: 2px 4px 2px 5px;

აბსოლუტურად იგივე ეხება გვერდების სტილებს: border-top-style, border-right-style, border-bottom-style, border-left-style. ისნი შეიძლება შევამოკოთ და მათ ნაცვლად საჭიროების შემთხვევაში გამოვიყენოთ border-style(მაგ. border-style: solid dotted dotted solid).

ტეგები:

6 Responses to “CSS შემოკლებები – border”

  1. Otory says:
    March 14, 2007 at 5:19 am

    Cool Article :)
    Keep It Up!

  2. იოსები says:
    March 14, 2007 at 5:20 am

    thank you ;)

  3. kalosha says:
    April 1, 2007 at 7:19 am

    მოციმციმე border თუ მოსულა CSS-ის საშუალებით?

  4. Code.ge Blog - For Better WEB » CSS შემოკლებები - font says:
    May 10, 2007 at 2:19 am

    [...] პოსტში ლაპარაკი მქონდა css – ის border თვისების შემოკლებებზე, ამჯერად ყურადღებას შევაჩერებ font [...]

  5. საშკა says:
    October 20, 2007 at 7:29 am

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

  6. იოსები says:
    October 20, 2007 at 1:17 pm

    არაფრის :)

დატოვე კომენტარი:

ქართული კლავიატურა, ჩართვა/გამორთვა კლავიშით "~"