«
»

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

May 10 2007

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

ზემოთ მითითებული თვისებების მსგავსად background თვისების შემოკლებული ჩაწერის ფორმაც არსებობს რაც განსაკუთრებით მნიშვნელოვანია ისეთი ტიპის საიტებისათვის რომლებიც დიზაინში უხვად იყენებენ გრაფიკულ ელემენტებს…

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

  • background-color: განსაზღვრავს ელემენტის ფონის ფერს (მაგ. #0000CC)
  • background-image: განსაზღვრავს ელემენტსი ფონურ სურათს (მაგ. url(sidebar-bg.gif))
  • background-repeat: განსაზღვრავს უნდა განმეორდეს თუ არა ფონური სურათი (მაგ. no-repeat, repeat-x, repeat-y)
  • background-attachment: განსაზღვრავს ფონური სურათი ფიქსირებულად ინარჩუნების პოზიციას თუ არა (მაგ. scroll, fixed)
  • background-position: განსაზღვრავს ფონური სურათის პოზციას (მაგ. top left
    )

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

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

This is background property test!

მაგალითიში გამოყენებული CSS კოდი გამოიყურება შემდეგნაირად:

1
2
3
4
5
6
7
8
9
10
.bg-long {
    background-color: black;
    background-image: url(/wp-content/themes/myblog/img/logo.gif);
    background-repeat: no-repeat;
    background-position: top right;
    border: 2px solid red;
    padding: 24px;
    font: bold italic 1em arial;
    color: green;
}

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

1
2
3
4
5
6
7
.bg-short{
    background: black url(/wp-content/themes/myblog/img/logo.gif) no-repeat top right;
    border: 2px solid red;
    padding: 24px;
    font: bold italic 1em arial;
    color: green;
}

შედეგი თვალსაჩინოა და არ საჭიროებს განსაკუთრებულ ახსნას. თუმცა ღირს იმ ფაქტის აღნიშვნა რომ ბოლო მაგალითში გამოყენებულია ორი ტიპის შემოკლებული ჩაწერა, ერთი background ხოლო მეორე font თვისებისათვის. აღნიშნული ორი თვისება რომ ჩაგვწერეა შემოკლებების გარეშე 1) გაიზრდებოდა თვითონ CSS კოდის რაოდენობა; 2) საერთო ჯამში კოდი გახდებოდა ნაკლებად კითხვადი; მსგავსი პატარა მაგალითებიდან კოდის სიდიდე შესაძლოა არ ჩანდეს განსაკუთრებით პრობლემატურად, თუმცა ისეთ შემთხვევებში როდესაც კოდის სტრიქონების რაოდენობა აღემატება რამდენიმე ასეულს ნამდვილად დამაბრკოლებელი ფაქტორია კოდის ყოველი ზედმეტი სტრიქონი.

მსგავსი შემოკლებული ჩაწერისას გასათვალისწინებელია რამდენიმე დეტალი:

  1. თვისებების მნიშვნელობების მიმდევრობა უნდა განისაზღვროს იმ მიმდევრობით რა მიმდევრობითაც ეს ნაჩვენებია პოსტის დასაწყისში გაკეთებულ ჩამონათვალში;
  2. რომელიმე მნიშვნელობის გამოტოვება არ დაარღვევს საბოლოო რეზულტატს;
  3. როდესაც ელემენტისათვის გვინდა მხოლოდ ფონური ფერის განსაზღვრა სხვა css კლასის მნიშნველობით ან უბრალოდ ელემენტის style ატრიბუტის გამოყენებით, უნდა გამოვიყენოთ background-color (და არა background თუმცა ეს შესაძლებელია) რადგან იმ შემთხვევაში თუ ელემენტისთვის სხვა კლასში უკვე განსაზღვრულია ფონური სურათი მოხდება მისი ჩანაცვლება საწყისი none მნიშვნელობით რაც სურათის გაქრობას გამოიწვევს;

ტეგები:

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

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