Inline, embedded და გარე სტილის ფურცლები: აი რა უნდა იცოდეთ
Front-end ვებ-გვერდის განვითარება ხშირად წარმოდგენილია როგორც 3-ფეხიანი სკამი. ეს ფეხები ასეთია:
მეორე ფეხი ამ სტილის, CSS ან კასკადური სტილების ცხრილებში არის ის, რასაც დღეს შევხედავთ. კერძოდ, ჩვენ გვინდა მივმართო 3 სახის სტილის შეგიძლიათ დაამატოთ დოკუმენტი.
- ინლაინური სტილები
- ჩაშენებული სტილები
- გარე სტილები
თითოეული ასეთი CSS სტილის აქვს მათი სარგებელი და ნაკლოვანებები, მოდით მიიღოს ღრმა შევხედოთ თითოეული მათგანი ინდივიდუალურად.
Inline Styles
Inline სტილის სტილები, რომლებიც დაწერილია პირდაპირ tag in HTML დოკუმენტი. Inline სტილის მოქმედებს მხოლოდ კონკრეტული tag ისინი გამოიყენება. აქ არის მაგალითი inline სტილის მიმართა სტანდარტული ბმული, ან წამყვანმა, tag:
ეს CSS წესით გახდება სტანდარტული ხაზგასმა ტექსტური გაფორმება ამ ერთი ბმულიდან. თუმცა, ამ გვერდზე არ უნდა შეიცვალოს ნებისმიერი სხვა ბმული. ეს არის ერთ-ერთი შეზღუდვა inline სტილის. მას შემდეგ, რაც ისინი მხოლოდ კონკრეტულ ნივთზე შეიტანენ, საჭიროა ამ HTML სტილის შექმნა, რათა მიიღოთ ორიგინალური გვერდი დიზაინი. ეს არ არის საუკეთესო პრაქტიკა. სინამდვილეში, ეს არის ერთი ნაბიჯი ამოღებული "შრიფტის" tags და ნარევი სტრუქტურა და სტილი ვებ გვერდებზე.
Inline სტილის ასევე აქვს ძალიან მაღალი სპეციფიკა.
ეს ხდის მათ ძალიან მძიმე overwrite სხვა, არასამთავრობო inline სტილის. მაგალითად, თუ გსურთ საიტის რეაგირება და შეცვლა, თუ რა ელემენტს უყურებს გარკვეული დარღვევები მედიის კითხვებით , ელემენტზე ინტილი სტილის გაკეთება ძალიან რთულია.
საბოლოოდ, inline სტილის მართლაც მხოლოდ შესაბამისი, როდესაც გამოიყენება ძალიან sparingly.
სინამდვილეში, მე იშვიათად გამოვიყენებ inline სტილის ჩემს ვებგვერდებზე.
ჩაშენებული სტილები
ჩანერგილი სტილები არიან სტილები, რომლებიც ჩაწერილი არიან დოკუმენტის უფროსში. ჩანერგილი სტილები გავლენას ახდენენ მხოლოდ იმ გვერდებზე, რომლებიც ისინი ჩართული არიან. კიდევ ერთხელ, ეს მიდგომა უარყოფს CSS- ის ერთ-ერთ სიძლიერეს. მას შემდეგ, რაც ყველა გვერდზე ექნება სტილის
, თუ გინდა, რომ გქონდეთ sitewide ცვლილება, მინდა შეცვალოთ ფერი ბმულები წითელიდან მწვანე, თქვენ უნდა მიიღოს ეს ცვლილება ყველა გვერდზე, რადგან ყველა გვერდზე იყენებს ჩადგმული სტილის ფურცელი. ეს უკეთესია, ვიდრე შინაგანი სტილი, მაგრამ მაინც პრობლემატურია ბევრ შემთხვევაში.
სტილისტები, რომლებიც დაემატა
დოკუმენტში ასევე დაამატეთ ამ გვერდის მნიშვნელოვანი ოდენობის მარკირების კოდექსი, რომელსაც ასევე შეუძლია გააუმჯობესოს გვერდი მომავალში მართვაში.
Embedded სტილის ფურცლების გამოყენება ისაა, რომ თავად გვერდი დატვირთვა დაუყოვნებლივ უნდა დატვირთოს. ეს შეიძლება იყოს სარგებელი ჩამოტვირთვის სიჩქარე და შესრულების პერსპექტივა .
გარე სტილი ცხრილები
დღეს ყველაზე ვებ-გვერდები გარე სტილის ფურცლებს იყენებენ. გარე სტილები არის სტილები, რომლებიც დაწერილია ცალკე დოკუმენტში და შემდეგ სხვადასხვა ვებ-გვერდებზე. გარე სტილის ფურცლებზე შეიძლება გავლენა იქონიონ ნებისმიერ დოკუმენტზე, რომლებიც მათ თან ერთვის, რაც იმას ნიშნავს, რომ თუ თქვენ გაქვთ 20 გვერდიანი ვებ გვერდი, სადაც თითოეული გვერდი იყენებს იმავე სტილის ფურცელს (როგორც წესი, როგორ ხდება), შეგიძლიათ გააკეთოთ ვიზუალური ცვლილება ყველასათვის ამ გვერდებზე უბრალოდ რედაქტირება, რომ სტილის ფურცელი.
ეს ხდის გრძელვადიანი საიტის მართვის ბევრად უფრო ადვილია.
გარე სტილების შემცირება ის არის, რომ ისინი მოითხოვენ გვერდს ამ გარე ფაილების მიღება და ჩატვირთვა. არა ყველა გვერდი გამოიყენებს ყველა სტილს CSS ფურცელში, ამდენი გვერდი დატვირთავს ბევრად უფრო დიდი CSS გვერდს, ვიდრე რეალურად სჭირდება.
მიუხედავად იმისა, რომ მართალია, არსებობს შესრულების დარტყმა გარე CSS ფაილი, ეს, რა თქმა უნდა, უნდა შემცირდეს. რეალურად, CSS ფაილი მხოლოდ ტექსტი ფაილი, ასე რომ ისინი ზოგადად არ არის ძალიან დიდი უნდა დაიწყოს. თუ თქვენი მთელი საიტი იყენებს 1 CSS ფაილი, თქვენ ასევე სარგებლობს იმ დოკუმენტის სასარგებლოდ, რომელიც თავდაპირველად იტვირთება.
ეს იმას ნიშნავს, რომ შეიძლება მცირედი შესრულება მოხვდეს პირველი გვერდის ზოგიერთ ვიზიტზე, მაგრამ შემდგომმა გვერდებმა გამოიყენებს ქეშირებული CSS ფაილი, ამიტომ ნებისმიერი ჰიტი უარყოფით იქნება. გარე CSS ფაილები როგორ ვაშენებ ყველა ჩემს ვებგვერდზე.