რედაქტირებულია html და css W3C ვალიდატორის დახმარებით. CSS ვალიდობის შემოწმება CSS Validation Service-ის გამოყენებით რა არის კოდის ვალიდატორი?

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

1Kb CSS ბადე
მხოლოდ სამი პარამეტრის მითითებით, ასევე იქმნება CSS ბადე. ასევე მითითებულია სიგანე პიქსელებში.

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

CSS Lint
თქვენი ვებსაიტის კოდის შემოწმების სერვისი კარგი იდეაა.

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

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

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

ფენის სტილები
ძალიან კარგი სერვისი. ბურთის სტილის დიალოგური ფანჯრის კორექტირების საფუძველზე, Photoshop პროგრამა ქმნის CSS კოდს.

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

Spritebox
საშუალებას გაძლევთ სწრაფად და მარტივად შექმნათ კლასები და იდენტიფიკატორები ერთი სურათიდან

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

ტიპაჟის შემმოწმებელი
საშუალებას გაძლევთ შეცვალოთ სხვადასხვა შრიფტების ჩაწერა და ამოიღოთ შერჩეული წერის სტილის CSS კოდი.

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

ვალიდაცია არის CSS კოდის CSS2.1 და CSS3 სპეციფიკაციების შესაბამისობის შემოწმება. როგორც ჩანს, სწორ კოდს, რომელიც შეიცავს შეცდომებს, ეწოდება მოქმედი, ხოლო კოდი, რომელიც არ აკმაყოფილებს სპეციფიკაციებს, ეწოდება არასწორი. კოდის გადამოწმების უმარტივესი გზაა ვებსაიტის მეშვეობით http://jigsaw.w3.org/css-validator/, ამ სერვისის გამოყენებით შეგიძლიათ შეიყვანოთ დოკუმენტის მისამართი, ჩამოტვირთოთ ფაილი ან შეამოწმოთ აკრეფილი ტექსტი. სერვისის დიდი უპირატესობაა რუსული და უკრაინული ენების მხარდაჭერა.

შეამოწმეთ URI

ეს ჩანართი საშუალებას გაძლევთ მიუთითოთ ინტერნეტში განთავსებული გვერდის მისამართი. http:// პროტოკოლს არ სჭირდება ჩაწერა, ის ავტომატურად დაემატება (ნახ. 1.42).

ბრინჯი. 1.42. დოკუმენტის გადამოწმება მისამართზე

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

შეამოწმეთ იმპორტირებული ფაილი

ეს ჩანართი გაძლევთ საშუალებას შეიყვანოთ HTML ან CSS ფაილი და შეამოწმოთ იგი შეცდომებზე (ნახ. 1.43).

ბრინჯი. 1.43. ფაილის შემოწმება თქვენი ინტერესის დროს

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

შეამოწმეთ თქვენ მიერ აკრეფილი ტექსტი

დარჩენილი ჩანართი განკუთვნილია HTML ან CSS კოდის პირდაპირ შეყვანისთვის, რომელიც შეცვლის სტილს (ნახ. 1.44).

ბრინჯი. 1.44. შეყვანილი კოდის შემოწმება

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

აირჩიეთ CSS ვერსია

CSS3-ს აქვს მრავალი ახალი სტილის ფუნქცია დამატებული წინა ვერსიაში, ასე რომ თქვენ უნდა შეამოწმოთ კოდი ვერსიის განახლების შემდეგ. სერვისმა მიუთითა CSS2.1 პოპულარიზაციისთვის, ასე რომ, თუ გსურთ შეამოწმოთ კოდი CSS3 თავსებადობისთვის, ის პირდაპირ უნდა მიუთითოთ. ამისათვის დააწკაპუნეთ ტექსტზე „დამატებითი შესაძლებლობები“ და აირჩიეთ CSS3 ბლოკიდან „პროფილის“ სიაში.

ბრინჯი. 1.45. ჩადეთ CSS ვერსია გადასინჯვისთვის

იდენტიფიკატორი და კლასი

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

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

იდენტიფიკატორები

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

ID-ის სახელი არის რეგისტრის მგრძნობიარე.

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

იდენტიფიკატორის სტილს უფრო მაღალი პრიორიტეტი აქვს ვიდრე კლასებს.

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

კლასების სახელები რეგისტრირებულია.

კლასები შეიძლება გაერთიანდეს ერთმანეთთან, ერთ ტეგს დაემატოს რამდენიმე კლასი.

იდენტიფიკატორები

როგორც კი ვებ გვერდი დაიწყებს მუშაობას, აუცილებელია გარკვეული ელემენტების სტილის შეცვლა „დაფრენისას“ ან მათი ჩვენება რომელიმე ტექსტის შუაში, იდენტიფიკატორებთან მუშაობა გაცილებით მარტივია. ელემენტში დაბრუნება მიიღება getElementById მეთოდით, პარამეტრით არის იდენტიფიკატორის სახელი. აპლიკაციაში 1.70, იდენტიფიკატორი სახელწოდებით userName ემატება ფორმის ტექსტურ ველს, შემდეგ დამატებითი JavaScript ფუნქცია გამოიყენება მათთვის, ვინც ველში რაიმე ტექსტს შეაქვს. თუ ტექსტი არ არის და დაჭერილია გაგზავნის ღილაკი, შეტყობინება გამოჩნდება ტეგის შუაში msg იდენტიფიკატორით. თუ ყველაფერი სწორია, ფორმის მონაცემები გამოიყენება მოქმედების ატრიბუტით მითითებულ მისამართზე.

მარაგი 1.70. ფორმის მონაცემების გადამოწმება XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6