სურათების ან ტექსტის გარშემო განთავსებული ჩარჩოები ამშვენებს საიტს და მრავალფეროვნებას ანიჭებს მის დიზაინს. თუ იყენებთ ცხრილებს საზღვრების შესაქმნელად, მაშინ თითოეული საზღვრის კოდი ძალიან დიდ ადგილს დაიკავებს. ასევე, ამ შემთხვევაში, თქვენ უნდა გადაწეროთ HTML კოდი თითოეული ჩარჩოსთვის. CSS– ით შეგიძლიათ მარტივად შექმნათ თქვენთვის სასურველი ნებისმიერი სისქისა და ფერის საზღვარი, თუ ერთხელ დაწერეთ მარტივი კოდი ყველა იმ ელემენტისთვის, რომლებიც გარშემორტყმული იქნება ამ საზღვრით. ეს ტექნოლოგია საშუალებას მისცემს, საჭიროების შემთხვევაში, შეცვალოს ჩარჩოების ტიპი რამდენიმე წუთში.
Ეს აუცილებელია
- - გქონდეთ საკუთარი ვებსაიტი;
- - იცოდეთ რა არის CSS და სად წერია ეს სტილები საიტზე.
ინსტრუქციები
Ნაბიჯი 1
საზღვრის შესაქმნელად, ჯერ დაწერეთ შემდეგი კოდი CSS- ში:
რამკა {}
ნაბიჯი 2
იმისათვის, რომ საზღვარი თქვენთვის სასურველი ზომა იყოს, გამოიყენეთ საზღვრის სიგანის პარამეტრი, რომელიც ადგენს ხაზის სიგანეს პიქსელებში. მაგალითად, თუ ჩარჩოს ხაზი უნდა იყოს 3 პიქსელი სიგანე, მაშინ ჩანაწერი ასე გამოიყურება:
ramka {საზღვრის სიგანე: 3px;}
ნაბიჯი 3
ახლა საზღვრის სტილის განსაზღვრა საზღვრის სტილის პარამეტრის გამოყენებით. თუ გსურთ შექმნათ საზღვარი, რომლის მხარეებიც არის რეგულარული მყარი ხაზები, შემდეგ კოლონში ჩასვით შემდეგი ჩანაწერი ტალღოვან ფრჩხილებს - საზღვრის სტილის: მყარი.
ნაბიჯი 4
წერტილოვანი საზღვრის მიღება შესაძლებელია ასე დაწერით: საზღვრის სტილი: წერტილოვანი. საზღვრის სტილის შემოწმება: დაწყვეტილი მოგცემთ დაწყვეტილ საზღვარს.
ნაბიჯი 5
შეგიძლიათ გააკეთოთ საზღვარი ორმაგი მყარი ხაზით, როგორც ეს: საზღვრის სტილი: ორმაგი. გამოიყენეთ საზღვრის სტილი: ღარი ან საზღვრის სტილი: ქედი ტექსტის ან სურათების ჩარჩოებში ჩასადებად, 3D გვერდითი ეფექტებით. განსხვავება ამ ორ ვარიანტს შორის არის ის, რომ პირველ შემთხვევაში, ჩარჩო შედგენილი ხაზებისგან შედგება, ხოლო მეორეში, ამოზნექილი.
ნაბიჯი 6
გამოიყენეთ ეს კოდი: border-style: inset საიტის ელემენტის საზღვართან ჩასმული ეფექტის შესაქმნელად. საზღვრის შინაარსი, საზღვართან ერთად, პირიქით, ამოზნექილია, დაწერეთ საზღვრის სტილი: დასაწყისში.
ნაბიჯი 7
ჩარჩოს შეგიძლიათ დაამატოთ სასურველი ფერი საზღვრის ფერის პარამეტრის გამოყენებით, რომელიც ასევე მოთავსებულია ხვეულ ბრეკეტებს შორის. თუ გსურთ საზღვარი წითელი გახადოთ, მაშინ დაწერეთ საზღვრის ფერი: წითელი, ლურჯი - საზღვრის ფერი: ლურჯი, ნარინჯისფერი - საზღვრის ფერი: ნარინჯისფერი.
ნაბიჯი 8
CSS სასაზღვრო კოდი, ყველა ვარიანტის ჩათვლით, ასე გამოიყურება:
ramka {საზღვრის სიგანე: 3px; საზღვრის სტილი: მყარი; საზღვრის ფერი: ლურჯი;}
ნაბიჯი 9
ახლა HTML- ში დაწერეთ ეს:
ჩარჩოს შინაარსი ფრაზის "ჩარჩოს შინაარსი" ნაცვლად, ჩადეთ სასურველი სურათის ტექსტი ან კოდი.
ნაბიჯი 10
ამრიგად, თქვენ შეგიძლიათ შექმნათ შეუზღუდავი რაოდენობის ელემენტები საიტზე. ჩარჩოს გარეგნობის შესაცვლელად საჭიროა მხოლოდ CSS კოდის შეცვლა.
