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

ეს დავალება შეიძლება შესრულდეს სამი გზით:

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

მოდით, უფრო დეტალურად განვიხილოთ თითოეული ვარიანტი და ამავე დროს გავეცნოთ CSS წერის სინტაქსის წესებს.

სტილის ატრიბუტი.

თითქმის ყველა HTML ტეგს აქვს ატრიბუტი სტილი, რაც მიუთითებს, რომ გარკვეული სტილის აღწერა გამოიყენება ამ ტეგზე.

ასე წერია:

სტილი = "">

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

კარგად მაგალითად:

style="color: #ff0000; font-size:12px"> ეს არის აბზაცი პერსონალური სტილით

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

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

style="background-color: #c5ffa0">

style="color: #0000ff; font-size:18px"> ყველაფერი სპილოების შესახებ

იყიდე სპილო

style="color: #ff0000; font-size:14px">

style="color: #0000ff; font-size:16px">დაიქირავეთ სპილო

style="color: #ff0000; font-size:14px">

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

მონიშნეთ (არ უნდა აგვერიოს ამავე სახელწოდების ატრიბუტთან), რომელშიც აღწერილია ჩვენთვის საჭირო ელემენტები.

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

ყველაფერი სპილოების შესახებ

ამ საიტზე ნახავთ ნებისმიერ ინფორმაციას სპილოების შესახებ.

იყიდე სპილო

ჩვენთან შეგიძლიათ შეიძინოთ საუკეთესო სპილოები კონკურენტულ ფასებში!!

იქირავე სპილო

მხოლოდ აქ შეგიძლიათ იქირაოთ ნებისმიერი სპილო!!

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

,

- აბზაცები ლურჯი იქნება

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

ახლა დაპირებული კომენტარები:

მონიშნეთ არსებობს გარკვეული HTML ელემენტების სტილის პირდაპირი დეკლარაცია შემდეგი სინტაქსის მიხედვით:

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

CSS ცალკე გარე ფაილში.

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

ასე რომ, გახსენით რვეული (ან სხვა რედაქტორი) და ჩაწერეთ მასში შემდეგი ტექსტი:

სხეული (ფონის ფერი: #c5ffa0)
a (ფერი:#000060; შრიფტის წონა: თამამი;)
a:hover (ფერი:#ff0000; შრიფტის წონა: თამამი; ტექსტის დეკორაცია: არცერთი)
h1 (ფერი: #0000ff; შრიფტის ზომა: 18 პიქსელი)
h2 (ფერი: #ff00ff; შრიფტის ზომა: 16 პიქსელი)
p (ფერი: #600000; შრიფტის ზომა: 14 პიქსელი)

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

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

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

მონიშნეთ აქვს ატრიბუტები:

href- ფაილისკენ მიმავალი გზა.
rel- განსაზღვრავს ურთიერთობას მიმდინარე დოკუმენტსა და მითითებულ ფაილს შორის.

• მალსახმობის ხატულა - განსაზღვრავს, რომ ჩართული ფაილი არის .
• სტილის ფურცელი- მიუთითებს, რომ ჩართული ფაილი შეიცავს სტილის ფურცელს.
• განაცხადი/rss+xml - ფაილი XML ფორმატიახალი ამბების არხის აღსაწერად.

ტიპი- მიმაგრებული ფაილის MIME მონაცემთა ტიპი.

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

ვიმეორებ, რა თქმა უნდა, შესაძლო გაუგებრობების გასაქრობად. ატრიბუტი relმიანიჭეთ მნიშვნელობა სტილის ფურცელივინაიდან ჩვენ ვაკავშირებთ კასკადურ სტილის ფურცელს, როგორც გარე ფაილს, ჩვენ მივუთითებთ გზას css ფაილისკენ (ამ მაგალითში ფაილი ე.წ. mystyle.cssდა დევს HTML დოკუმენტის გვერდით, რომელშიც ეს ბმული წერია) ჩვენ ასევე აღვნიშნავთ, რომ ეს ფაილი არის ტექსტი და შეიცავს სტილის აღწერას type="text/css"

ახლა ჩვენ ჩავსვით ეს ხაზი ჩვენი საიტის გვერდების სათაურებში და ვტკბებით შედეგით..

mystyle.css ფაილი
სხეული (ფონის ფერი: #c5ffa0)
a (ფერი:#000060; შრიფტის წონა: თამამი;)
a:hover (ფერი:#ff0000; შრიფტის წონა: თამამი; ტექსტის დეკორაცია: არცერთი)
h1 (ფერი: #0000ff; შრიფტის ზომა: 18 პიქსელი)
h2 (ფერი: #ff00ff; შრიფტის ზომა: 16 პიქსელი)
p (ფერი: #600000; შრიფტის ზომა: 14 პიქსელი)
index.html ფაილი

მენიუ:

ყველაფერი სპილოების შესახებ.
იყიდე სპილო.
იქირავე სპილო.

---

ყველაფერი სპილოების შესახებ

ამ საიტზე ნახავთ ნებისმიერ ინფორმაციას სპილოების შესახებ.

ფაილი elephant.html

მენიუ:

ყველაფერი სპილოების შესახებ.
იყიდე სპილო.
იქირავე სპილო.

---

იყიდე სპილო

ჩვენთან შეგიძლიათ შეიძინოთ საუკეთესო სპილოები კონკურენტულ ფასებში!!

ფაილი elephant1.html

მენიუ:

ყველაფერი სპილოების შესახებ.
იყიდე სპილო.
იქირავე სპილო.

---

იქირავე სპილო

მხოლოდ აქ შეგიძლიათ იქირაოთ ნებისმიერი სპილო!!

ზემოთ მოცემულ მაგალითში, "საიტი სპილოების შესახებ", on მომენტში, არის სამი გვერდი, რომელთაგან თითოეული ასოცირდება ერთ გარე css ფაილთან - mystyle.css. ამრიგად, ჩვენ მნიშვნელოვნად „გავტვირთეთ“ და მთელი საიტის დიზაინი „მობილურზე მეგობრული“ გავხადეთ. წარმოიდგინეთ რამდენ კილობაიტს მოვიგებდით ამ საიტს რომ ჰქონდეს ასი სრულფასოვანი გვერდი!? და ასევე, რამდენ დროს დავზოგავთ, თუ მის დიზაინში რაიმეს შეცვლა დაგვჭირდა!?

ამ თავში ჩვენ განვიხილეთ სამი გზა CSS-ის ჩასართავად HTML დოკუმენტში. რომელი ჯობია გამოვიყენო?

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

  შექმენით CSS ცხრილი და დააკავშირეთ იგი html გვერდებთან

  
  
  

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

  "https://www.w3.org/TR/html4/loose.dtd">
  
  
  
  
  
  

  შექმენით CSS ცხრილი და დააკავშირეთ იგი html გვერდებთან

  
  
  

  არ არის მიზანშეწონილი ამ მაგალითების გამოყენება, რადგან ისინი არ იძლევა მნიშვნელოვან უპირატესობას html-თან შედარებით. თუ საჭიროა საიტის მთლიანი დიზაინის შეცვლა, მაშინ მოგიწევთ ყველა გვერდის რედაქტირება, რასაც დიდი დრო დასჭირდება.

  შემდეგი -