Განსხვავება CSS2 და CSS3

გააზრება ძირითადი ცვლილებები CSS3

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

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

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

ახალი CSS3 სელექტორები

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

სამი ახალი ატრიბუტის სელექტორები:

• ატრიბუტი იწყებს ზუსტად ელემენტს [foo ^ = "bar"] ელემენტს აქვს ატრიბუტი, რომელიც foo- ს იწყებს "ბარ"
• ატრიბუტი დამთავრებული მატჩები ზუსტად ელემენტს [foo $ = "bar"] ელემენტს აქვს ატრიბუტი, რომელსაც foo, რომელიც მთავრდება "ბარი"
• ატრიბუტი შეიცავს ელემენტის ელემენტს [foo * = "bar"] ელემენტს აქვს ატრიბუტი, რომელიც foo- ს შეიცავს, რომელიც შეიცავს სტრინგს "ბარი"

16 ახალი ფსევდო-კლასები:

• : root
  • დოკუმენტის ძირეული ელემენტი. HTML- ში ეს ყოველთვის არის.
• : nth- შვილი (n)
  • გამოიყენეთ ეს შესაბამისი ბავშვის ელემენტების შესატყვისი ან გამოიყენოთ ცვლადები ალტერნატიული მატჩის მისაღებად.
• : nth-last-child (n)
  • შეესაბამება ზუსტ ბავშვთა ელემენტებს, რომლებიც ითვლიან ბოლოდან.
• : nth-of-type (n)
  • მატჩის ძაფი ელემენტები იგივე სახელით, სანამ დოკუმენტი ხე.
• : nth-last-of-type (n)
  • დაამატეთ ძმათა ელემენტები იგივე სახელით, რომლებიც ითვლიან ქვედადან.
• :ნაბოლარა
  • ემთხვევა მშობლის ბოლო ბავშვის ელემენტს.
• : პირველი ტიპის
  • ემთხვევა ამ ძმის პირველი ძმის ელემენტი.
• : ბოლო ტიპის
  • ამ ტიპის ბოლო ძმათა ელემენტთან მატჩი.
• :დედისერთა
  • ემთხვევა ელემენტს, რომელიც არის მისი მშობლის ერთადერთი შვილი.
• : მხოლოდ-ის ტიპის
  • ემთხვევა ელემენტს, რომელიც არის მისი მხოლოდ ერთი ტიპი.
• : ცარიელი
  • ემთხვევა ელემენტს, რომელსაც არ აქვს შვილები (მათ შორის ტექსტური კვანძები).
• : სამიზნე
  • ემთხვევა ელემენტს, რომელიც მიზნად ისახავს URI გულისხმობს.
• : ჩართულია
  • ემთხვევა ელემენტს, როდესაც ის ჩართულია.
• : გამორთულია
  • ემთხვევა ელემენტს, როდესაც ის გამორთულია.
• : შემოწმებულია
  • ემთხვევა ელემენტს, როდესაც ის შემოწმდება (რადიო ღილაკი ან ჩამრთველი).

• : არა (ებ)
  • ემთხვევა, როდესაც ელემენტი არ შეესაბამება უბრალო სელექტორს .

ერთი ახალი კომბინატორი:

• elementA ~ elementB
  • ემთხვევა, როდესაც elementB შემდეგნაირად სადმე შემდეგ elementA, არ არის აუცილებლად დაუყოვნებლივ.

ახალი თვისებები

CSS3 ასევე გააცნო მთელი რიგი ახალი CSS თვისებები. ბევრი ასეთი თვისებები იყო ვიზუალური სტილის შექმნა, რაც უფრო მეტად დაემატება გრაფიკული პროგრამით, როგორიცაა Photoshop. ზოგიერთი მათგანი, როგორიც სასაზღვრო-რადიუსი ან ყუთშია ჩაკეტილი, შემოდის, თუ შემოთავაზება, თუ CSS3. სხვა, როგორიცაა flexbox ან თუნდაც CSS Grid არის ახალი სტილის, რომლებიც ჯერ კიდევ ხშირად განიხილება CSS3 დამატებები.

In CSS3, ყუთი მოდელი არ შეცვლილა. მაგრამ არსებობს რამოდენიმე ახალი სტილი თვისებები, რომელიც დაგეხმარებათ სტილის ფონები და საზღვრები თქვენი ყუთები.

მრავალ ფენას

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

ახალი ფონის სტილის თვისებები

არსებობს რამდენიმე ახალი ფონური თვისებები CSS3.

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

ცვლილებები არსებული ფონის სტილის თვისებები

ასევე არსებობს ცვლილებები არსებული ფონური სტილის თვისებებზე:

• background-repeat
  • ამ თვისებისთვის ორი ახალი ღირებულებაა: სივრცე და რაუნდი. ფართი ფართები კრამიტი გამოსახულება თანაბრად ფარგლებში ყუთი გარეშე clipped. მრგვალი იცვლება ფონის სურათის სახით ისე, რომ იგი ყუთში მთელ რიგ რიცხვს კეთდება.
• ფონური დანართი
  • ახალი ღირებულება "ლოკალური" დაემატება ისე, რომ ფონზე გამოჩნდება ელემენტის შინაარსი, როდესაც ეს ელემენტს აქვს გადახვევის ბარი.
• ფონზე
  • ფონის მოკლევადიანი ქონება დასძენს ზომისა და წარმოშობის თვისებებში.

CSS3 სასაზღვრო თვისებები

In CSS3 საზღვრები შეიძლება იყოს სტილის ჩვენ გამოყენებული (მყარი, ორმაგი, დატეხილი და ა.შ.) ან ისინი შეიძლება იყოს გამოსახულება. Plus, CSS3 მოაქვს უნარი შექმნათ მომრგვალებული კუთხეებში. სასაზღვრო სურათები საინტერესოა, რადგან თქვენ შექმნით სურათს ოთხივე საზღვრები და შემდეგ გითხრათ CSS როგორ გამოიყენოთ ეს სურათი თქვენს საზღვრებთან.

ახალი სასაზღვრო სტილის თვისებები

არსებობს ახალი საზღვრის თვისებები CSS3:

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

დამატებითი CSS3 თვისებები დაკავშირებული საზღვრები და ფონზე

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

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

With CSS3, თქვენ შეგიძლიათ მარტივად შექმნას ვებ გვერდზე მრავალი სვეტების გარეშე მაგიდები ან რთული div tag სტრუქტურები. უბრალოდ გითხრათ ბრაუზერი რამდენი სვეტის სხეულის ელემენტს უნდა ჰქონდეს და რამდენად ფართო უნდა იყოს ისინი. ასევე შეგიძლიათ დაამატოთ საზღვრები (წესები), ფონის ფერები, რომლებიც სვეტის სიმაღლეზე ვრცელდება და თქვენი ტექსტი ავტომატურად გაივლის ყველა სვეტს.

CSS3 სვეტები - განსაზღვრა სვეტების რაოდენობა და სიგანე

არსებობს სამი ახალი თვისება, რომელიც საშუალებას გაძლევთ განსაზღვროთ თქვენი სვეტების რიცხვი და სიგანე:

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

CSS3 სვეტი ხარვეზები და წესები

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

• სვეტის უფსკრული
  • განსაზღვრავს სვეტების სიგანე სვეტების სიგანეზე.
• სვეტის წესის ფერი
  • განსაზღვრავს ფერის წესს.
• სვეტის წესის სტილი
  • განსაზღვრავს წესის წესს (მყარი, dotted, ორმაგი და ა.შ.).
• სვეტის წესის სიგანე
  • განსაზღვრავს წესის სიგანე.
• სვეტის წესი
  • მოკლე შინაარსი, რომელიც განსაზღვრავს სამივე სვეტის წესს.

CSS3 სვეტი შესვენებები, Spanning სვეტები, და შევსების სვეტები

სვეტის წყვეტები იყენებენ იმავე CSS2 პარამეტრებს, რომლებიც გამოიყენება პარადიკულ შინაარსში შესვენების, მაგრამ სამი ახალი თვისებით: შესვენების წინ , შესვენების შემდეგ და შესვენებისას .

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

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

მეტი ფუნქციები CSS3, რომ Aren & # 39; t შედის CSS2

არსებობს უამრავი დამატებითი ფუნქცია CSS3, რომელიც არ არსებობს CSS2, მათ შორის:

• CSS თარგის განლაგება მოდული და CSS3 Grid წესი მოდული : შექმნა ბადეები ერთად CSS.
• CSS3 ტექსტი მოდული : განტოტვილი ტექსტი და კიდევ შექმნათ drop-shadows ერთად CSS.
• CSS3 ფერი მოდული : ახლა opacity.
• ცვლილებების ყუთში მოდელის ჩათვლით: მარკეტინგის ქონების ჩათვლით, რომელიც იწარმოებს IE ტეგის მსგავსად.
• CSS3 ინტერფეისი მოდული : ახალი კურსორის, რეაგირების ქმედებების, საჭირო დარგების და კიდევ resizing ელემენტების მინიჭება.
• მედია შეკითხვა : მედია შეკითხვებს საშუალებას მოგცემთ უფრო მეტი მოქნილობა გამოვყოთ, თუ როგორ უნდა იქნას გამოყენებული სტილის ფურცელი. მაგალითად, შეგიძლიათ განსაზღვროთ სტილის ფურცელი, რომელიც მხოლოდ ხელსაწყო მოწყობილობებისთვისაა, რომლებსაც 20-ზე მეტი ხედი აქვს.
• CSS3 Ruby მოდული : უზრუნველყოფს მხარდაჭერა ენებზე, რომლებიც იყენებენ ტექსტურულ რუბლს ანოტაციას დოკუმენტებზე.
• CSS3 Paged მედია მოდული : კიდევ უფრო მეტი მხარდაჭერა paged მედია (ქაღალდი, transparencies და ა.შ.).
• გენერირებული შინაარსი : L გაშვებული სათაურები და ქვედა კოლონტიტები, სქოლიოები და სხვა შინაარსი, რომლებიც გამომუშავებულია პროგრამით, განსაკუთრებით paged მედია.
• CSS3 Speech მოდული : ცვლილებები aural CSS.