პრობლემების მოგვარება CSS- თან. რატომ არის CSS იმდენად მნიშვნელოვანი, სადაც შემიძლია წერა CSS

ასეთი მიდგომა იყო რამდენიმე მიზეზის გამო,

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

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

რა არის CSS

CSS (Cascading Style Sheets) ნიშნავს კასკადური სტილის ფურცლებს და არის სტილის მარკირების ენა (როგორც HTML ან XML). ამდენად, CSS არ წარმოადგენს თავისთავად, თუ არ უკავშირდება HTML დოკუმენტს.

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

როგორ მუშაობს CSS

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

P (ფერი: წითელი;)

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

სად შემიძლია წერა CSS?

CSS როგორც ატრიბუტი

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

ეს არის მნიშვნელოვანი ტექსტი.

CSS ბ

თქვენ შეგიძლიათ გამოიყენოთ tag

ეს პუნქტი წითელი იქნება.

CSS ცალკე ფაილში

თქვენ შეგიძლიათ დაწეროთ თქვენი CSS ცალკე ფაილი გაფართოებით. CSS, და შემდეგ გვაკავშირებს მას HTML გამოყენებით tag .

P (ფერი: წითელი;)

ეს პუნქტი წითელი იქნება.

ეს HTML დოკუმენტი, რომელიც "მოუწოდებს" CSS ფაილი, ჩვენს შემთხვევაში, ფაილი დაასახელა Style.css მდებარეობს იმავე საქაღალდეში, როგორც CSS ფაილი.

ეს მესამე მეთოდიცალკე CSS ფაილის გამოყენება მაშული.

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

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

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

საიტის პრეზენტაციის გამოყოფა მისი შინაარსიდან.

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

გაზრდის საიტის დატვირთვის სიჩქარე.

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

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

თავსებადობა CSS თანამედროვე ბრაუზერებთან.

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

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

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

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

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

რატომ შეიძლება გჭირდებათ ენების ცოდნა (მარკირების, სტილის, სერვერის პროგრამირების)

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

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

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

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

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

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

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

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

რომელი რედაქტორი უკეთესია კოდით შეცვალოს ან შეცვალოს ცვლილებები

ამდენად რთული არაფერია, რადგან სინამდვილეში ეს არ არის პროგრამირების ენა, მაგრამ ჰიპერტექსტის მარკირება, რუსი სინტაქსის მსგავსია. რა მინდა, რომ დაუყოვნებლივ ვურჩევ, დაყრდნობით საკუთარ გამოცდილებას? სცადეთ დაწეროთ tags თავს notepad, ტიპის Notepad ++. (წაიკითხეთ ნაღმი), და არა პროგრამებში, როგორიცაა drimvuiver. რატომ?

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

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

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

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

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

მიუხედავად იმისა, რომ ვებ-გვერდები თანამედროვე CMS- ში არ არის ჩაწერილი ზოგიერთი ან მეტი ფაილი, როგორც ეს იყო ადრე, და გენერირებული (ინტერპრეტაცია) PHP. ეს იყო კოდი, რომელიც უკვე გენერირდება ამ გზით, რომ ბრაუზერი გამოიყენება ბრაუზერში ისე, რომ მას მხრივ, ინტერპრეტაციას ის ღია ონლაინ გვერდზე ჩვენთვის. Heathwood, არ არის ეს?

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

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

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

პრობლემა წარმოიქმნება, როგორც წესი, მეორეში. როგორ მოვძებნოთ ეს ფაილი PHP გაფართოებით, რომელშიც შეიქმნება ტეგების საჭირო ფრაგმენტები? აქ არის საკითხის საკითხი. დიახ, რა თქმა უნდა, თუ თქვენ გაქვთ გამოცდილება მონაცემთა ძრავებთან მუშაობისას, მაშინ მე ვფიქრობ, coeal. მაგრამ თუ თქვენ ხართ ახალი და არ ვიცი, რომელი ასობით PCP ფაილი რა არის პასუხისმგებელი?

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

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

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

Წარმატებას გისურვებ! ორაზროვანი შეხვედრები ბლოგზე გვერდებზე

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

ლამაზი რუსული შრიფტები საიტზე და კომპიუტერში ონლაინ Google Font მომსახურება - სად უნდა ჩამოტვირთოთ და როგორ დააყენოთ ადაპტური (საპასუხო) დიზაინი - საიტის ოპტიმიზაცია მობილური მოწყობილობების სანახავად
GIF, PNG ან JPG - ვებ-გვერდისთვის რასტრული გრაფიკის ფორმატები, მათი დადებითი და cons როდესაც გამოიყენება საიტზე

ზოგჯერ CSS ქცევა შეიძლება აღრეული. შეიტყვეთ ზოგიერთი cunning თვისებები, რომელიც შეიძლება გამოიწვიოს ყველაზე გავრცელებული პრობლემები, და როგორ ეს პრობლემები შეიძლება მოგვარდეს.

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

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

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

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

ნაკადის გაწმენდა (float გაწმენდის) - კითხვა ძველი, როგორც მსოფლიოში

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

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

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

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

ClearFix: შემდეგ (შინაარსი: ""; ჩვენება: ცხრილი; ნათელი: ორივე;)

სინამდვილეში, მე ვამბობდი, რომ ეს ვერსია არის უახლესი, მაგრამ ეს ნამდვილად ყველაზე ოპტიმიზირებულია. თუ თქვენ გჭირდებათ მხარდაჭერა IE 6/7, მაშინ საჭიროა ეს სურვილისამებრ კოდი:

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

როგორ გაუმკლავდეთ სივრცეში inline-block ელემენტებს შორის?

შევეცადოთ ერთჯერადი ელემენტი, მაგრამ ქონების გამოყენების გარეშე. ტივტივი, ხოლო განსაზღვრავს მათ, როგორც სწორი ბლოკი (inline-block) ნივთები. საკუთრება ჩვენება: Inline-Block დიდი ხნის განმავლობაში, ის დარჩა undervalued და პატარა გამოყენებული, მაგრამ ჩვენ საბოლოოდ figured, თუ როგორ მუშაობს და შეაფასა ძლიერი. დღესდღეობით, უფრო და უფრო მეტი ინტერფეისის დეველოპერებს მოშორებით მცურავი ელემენტების მოშორება, იმ პირობით, რომ შესაძლებელია.

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

აქ გეტყვით: "და რა შეიძლება იყოს მათთან პრობლემა?". პრობლემა ისაა, რომ ისინი ნახევარი ზედიზედ არიან და, ისევე როგორც ხაზები, ისინი ერთმანეთისგან გამოყოფილია მცირე სიმბოლოების სიგანეზე. სტანდარტული შრიფტისთვის 16px- ისთვის, ამ მანძილის განზომილება 4px არის. უმეტეს შემთხვევაში, ეს მანძილი არის შრიფტის ზომა 25%. ნებისმიერ შემთხვევაში, ეს გაღიზიანებს, როდესაც თქვენ ცდილობენ აშენება ელემენტები. მოდით ვივარაუდოთ, რომ ჩვენ გვყავს მშობელი ელემენტი 600px ფართო სამი ქალიშვილი-ბლოკი ელემენტები 200px სიგანე. თუ ამ ოთხი პიქსელის ფართს არ მოშორება, ჩვენ ვიღებთ, რომ ელემენტების შედეგად სიგანე უფრო დიდია, ვიდრე მშობლის ელემენტის სიგანე (200 * 3 + 4 * 2 \u003d 608).

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

მარკირების გამოყენებით: ჩვენ ამოიღეთ ხარვეზები

ყურადღება მიაქციე ამ მარკირებას - მე აღწერილი რამდენიმე ხაზს ადრე.

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

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

კიდევ ერთი უჩვეულო ვარიანტი:

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

მარკირება: ჩაიდინოს ინტერვალი

და რა, თუ კომენტარს აკეთებს ხარვეზების ნაცვლად მათი მოშორება?

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

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

CSS: მანიპულირება სივრცეებს \u200b\u200bშორის სიმბოლოებს შორის. წერილი-სივრცის ქონება

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

მშობელი (Letter-spacappation: -0.3em;) .child (letter-spacing: ნორმალური;)

ეს ტექნიკა გამოიყენება Griddle - Nicolas Gallagher- ის მიერ შემუშავებული ქსელის ძრავა, ამიტომ ჩვენ შეგვიძლია განვიხილოთ ეს ვარიანტი საკმაოდ საიმედო. თუმცა, მე ნამდვილად არ მომწონს ის, რაც ჩვენ გვსურს რაღაც ჯადოსნური რიცხვი. გარდა ამისა, ზოგიერთი შრიფტისთვის თქვენ უნდა დააყენოთ ღირებულება ქვემოთ -0.3EM - მაგალითად, -0.31em ან -0.32EM. თქვენ უნდა მოერგოთ თითოეული კონკრეტული შემთხვევა.

CSS: უარყოფითი გარე განზრახვა

კიდევ ერთი გზა, რომელიც წინა მსგავსია, არის უარყოფითი საპენსიო გამოყენება. ეს მეთოდი IE 6/7- ში წარუმატებლობებს, რადგან ისინი არ არიან მეგობრული უარყოფითი უკან. გარდა ამისა, თქვენ უნდა ამოიღოთ უარყოფითი indent პირველი ბავშვის ელემენტს ისე, რომ იგი არ გადადის მარცხნივ, და რომ ბავშვის ელემენტები მთლიანად climbed შევიდა კონტეინერი:

ბავშვი (ზღვარი-მარცხნივ: -0.25EM;) .CHILD: პირველი ტიპის (ზღვარი მარცხნივ: 0;)

თუ თქვენ არ გჭირდებათ მხარდაჭერა IE 6/7, ან თუ თქვენ გაქვთ ცალკე სტილის ფაილი ამ ბრაუზერები - მე ვფიქრობ, რომ ეს არის საკმაოდ კარგი და უსაფრთხო გამოსავალი.

CSS: შრიფტის ზომა

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

მშობელი (შრიფტის ზომა: 0;) .child (შრიფტის ზომა: 16px;)

ეს მეთოდი კარგად მუშაობს, მაგრამ მას ასევე აქვს მისი ნაკლოვანებები:

• თქვენ არ შეგიძლიათ აღადგინოთ შრიფტის ზომა ნათესავი ღირებულების გამოყენებით. em.მშობლის ელემენტის შრიფტის ზომა 0px არის
• ფართები არ არის ამოღებული სტანდარტული Android ბრაუზერები Jelly Bean
• თუ კონტექსტში შეცვლით @ შრიფტის სახე, შრიფტი არ შეიძლება იყოს Safari 5- ში
• ზოგიერთი ბრაუზერი არ არის ნულოვანი სიმაღლის შრიფტი, მაგალითად, ჩინურ Chrome- ს ასეთ შრიფტს ასახავს სტანდარტულ 12px- ს

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

ჩვენ აბსოლუტურ პოზიციაზე დაიშალა

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

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

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

ელემენტი (თანამდებობა: აბსოლუტური, ტოპ: 0; მარცხენა: 0;)

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

ზემოთ მოყვანილი კოდი რეალურად ნიშნავს: " მინდა ჩემი ელემენტი განთავსდეს ზედა მარჯვენა კუთხეში მისი კონტექსტში". რა არის " კონტექსტი”? ეს არის პირველი არასამთავრობო სტატიკური წინაპარი.. ეს შეიძლება იყოს პირდაპირი მშობლის ელემენტი. ან მშობლის მშობლის ელემენტი. მშობლის მშობელი მშობლის მშობელი ... და ასე იქნება პირველი ელემენტის ძიება, რომლის პოზიციაც არ არის მითითებული სტატიკური..

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

აქ არის მარტივი მაგალითი, თუ რას ვსაუბრობდით. ორი მშობელი ელემენტები, თითოეული ბავშვის ელემენტში, რომელიც შემოთავაზებულია აბსოლუტურად ღირებულებით ყველაზე: 0. და მარჯვენა: 0. მარცხნივ, მშობლის ელემენტი შედარებით (მოსალოდნელი ქცევის) მდგომარეობაშია. მარჯვენა მშობლის ელემენტი დარჩა სტატიკური (არასწორი).

როდის უნდა გამოიყენოთ სიმაღლე / სიგანე 100%?

100% სიმაღლე

მოდით პირველი გაერკვნენ ის ნაკლებად რთული მაგალითით. როდის უნდა გამოიყენოთ სიმაღლე: 100%? სინამდვილეში, ბევრ ჩვენგანს მინიმუმ ერთხელ მაინც გაოცებული კითხვაზე "რა ჯოჯოხეთი? მე ვფიქრობდი, რომ ჩემი გვერდი იქნებოდა მინიმუმ დაიკავოს მთლიანი სიმაღლე ეკრანზე! " Მე მართალი ვარ?

ამ კითხვაზე პასუხის გასაცემად, თქვენ უნდა გაიგოთ, რა რეალურად ნიშნავს ქონებას. სიმაღლე: 100%: მშობლის ელემენტის სრული სიმაღლე. ეს არ ნიშნავს "ეკრანის ყველა სიმაღლეს". ასე რომ, თუ გსურთ თქვენი კონტეინერი ეკრანის მთელ სიმაღლეზე, სიმაღლე: 100% Არ არის საკმარისი.

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

რატომ? იმის გამო, რომ მშობლის ელემენტი tag სხეული. (hTML.) აქვს ნაგულისხმევი სიმაღლე ავტო.რას ნიშნავს ეს, რომ მისი ზომა დამოკიდებულია შინაარსზე. და რა მოხდება, თუ თქვენ ცდილობთ ვთხოვოთ ელემენტს hTML სიმაღლე: 100%? სამუშაოები!

რატომ? სინამდვილეში, რადგან root ელემენტს ( hTML.) - ეს არ არის უახლესი მშობლის ბლოკი გვერდზე - ასევე არსებობს ხედვის ფანჯარა. უბრალოდ განათავსეთ - ეს არის ბრაუზერის ფანჯარა. ასე რომ, თუ თქვენ გეკითხებით სიმაღლე: 100% ელემენტი hTML.თქვენ გახდის მას სიმაღლე ბრაუზერის სიმაღლეზე. ეს მხოლოდ მხოლოდ.

ჩვენი ისტორიის შედეგი აისახება შემდეგ კოდექსში:

HTML, სხეული, .Container (სიმაღლე: 100%;)

და რა მოხდება, თუ მშობელი ელემენტია მინი-სიმაღლე, მაგრამ არ სთხოვა სიმაღლე?

როჯერ იოჰანსონი ცოტა ხნის წინ გამოვლინდა პრობლემა სიმაღლე: 100% იმ შემთხვევაში, როდესაც მშობლის ელემენტს არ აქვს დანიშნული სიმაღლე, მაგრამ მინიმალური სიმაღლეა. მე არ შევაფასებ აღწერას, მაგრამ შედეგად, გადაწყვეტილება ისაა, რომ მშობლის ელემენტს 1 სთ-ის სიმაღლე უნდა დააყენოს, ისე, რომ ბავშვის ელემენტს შეუძლია გაჭიმოს იგი წთ სიმაღლე.

მშობელი (წთ სიმაღლე: 300px; სიმაღლე: 1px; / * ჩვენ გვჭირდება, რომ წმინდა სიმაღლის მთლიანი სიმაღლისთვის გამოვლენილი ბავშვის ელემენტი (სიმაღლე: სიმაღლე: 100%;)

100% სიგანე

ახლა მოდით გაუმკლავდეთ პარამეტრს სიგანე: 100%. დაუყოვნებლივ შეგახსენოთ, რომ სიმაღლე, პარამეტრი სიგანე: 100% - ეს არის მითითება, რომ ელემენტი უნდა იყოს იგივე სიგანე, როგორც მშობლის ელემენტი. აქ არ არის სიურპრიზი.

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

თუ ჩვენ დავამატებთ შიდა სფეროში და საზღვრებს თქვენს ელემენტს, რომელსაც სიგანე გამოფენილია სიგანე: 100%ეს ელემენტი არ შეესაბამება მშობელს - ის სცილდება მის ფარგლებს გარეთ. ეს ყველაფერი არის დარგებისა და საზღვრების გამო. და ამიტომ ქონება სიგანე. მას ეწოდება შინაარსის სიგანე (შინაარსის სიგანე). გთხოვთ, გაითვალისწინოთ შემდეგი მაგალითი იმისა, თუ რას ვგულისხმობ:

მშობლის ელემენტის სიგანე ტოლია 25EM.. ბავშვთა ელემენტის სიგანე 100% ტოლია 100% -ით (მისი მშობლის ელემენტიდან), მაგრამ ასევე აქვს 1-ის ველი (1EM მარცხნივ, 1EM მარჯვნივ. ჰორიზონტალურად იქნება 2), ისევე როგორც საზღვრის 0.5EM (მხოლოდ 1m ჰორიზონტალურად), რომელიც იწვევს იმ ფაქტს, რომ ბავშვის ელემენტის შედეგად გამოწვეული სიგანე 25M (100%) + 2EM + 1EM \u003d 28EM. Hmm ... ჰიუსტონი, როგორც ჩანს, პრობლემაა.

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

ვერ გამოიყენებს სიგანე: 100%, და დააყენეთ კონკრეტული სიგანე ელემენტს. ჩვენს შემთხვევაში, ეს არის 20 - (2 + 1) \u003d 22EM. უნდა ითქვას, რომ ეს გამოსავალი ცუდია, რადგან აუცილებელია ხელით გამოვთვალოთ ელემენტის სასურველი სიგანე. სხვა გზა!

მესამე ვარიანტი იქნება გამოყენებული calc ()გაანგარიშების ავტომატიზირება: სიგანე: Calc (100% - 3m). ყველა იგივე ცუდი. პირველ რიგში, ჩვენ გვჭირდება გამოვთვალოთ ჰორიზონტალური ველის + ვერტიკალური საზღვრების ჯამი. Მეორეც, calc () ეს არ არის მხარდაჭერილი საუკეთესო ბრაუზერებში (ეს არ უჭერს მხარს IE 8, Safari 5, Opera 12 და სტანდარტული Android ბრაუზერი).

მეოთხე ვარიანტი - გამოიყენეთ ქონება box-Sizing: სასაზღვრო ყუთი. არსებითად, ის ცვლის კონტეინერის მოდელის ქცევას ისე, რომ სიგანე აისახება ელემენტის მთლიანი სიგანე, საზღვრები და სფეროები შედის. კარგი ამბავია, რომ ამ ქონების ბრაუზერის მხარდაჭერა საკმაოდ კარგია (ყველაფერი, რაც 7 და ოპერისა 9).

როგორ არ შეცვალოთ შეცდომა Z- ინდექსთან?

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

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

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

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

Z ღერძის გასწვრივ პოზიციის შეცვლით, ელემენტები შეიძლება ერთმანეთის გადაფარვას სასურველ ბრძანებაში. აი, როგორ, CSS- ის მონაცემებით, დაზუსტება ერთი ჯგუფის კონტექსტში ელემენტებს აჩვენებს:

1. ფონისა და საზღვრების ელემენტის, რომელიც ქმნის ჯგუფის კონტექსტს
2. ქალიშვილი ჯგუფი კონტექსტებს უარყოფით დონეზე (პირველი ყველაზე პატარაა)
3. in-streaming, არასამთავრობო ხაზი, არასამთავრობო მიდგომები
4. არა-კომუნალური მცურავი ელემენტები
5. in-streaming, ხაზი, არაპროდუქციის შთამომავლები, მათ შორის მაგიდები და ყველაზე პატარა ბლოკები
6. ქალიშვილი ჯგუფი კონტექსტშია 0 დონის 0 და სოკოვანი შთამომავლები დონეზე 0
7. ქალიშვილი ჯგუფი კონტექსტებს დადებით დონეზე (ნაკლები მეტი)

როდესაც შედეგი საშინელებაა

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

ფაქტია, რომ თითოეული ჯგუფის კონტექსტში აქვს საკუთარი მასშტაბები Z ღერძის გასწვრივ. ძირითადად, ელემენტის ჯგუფი კონტექსტში 1 და ელემენტის ჯგუფში კონტექსტში 2 არ შეუძლებელია Z- ინდექსებთან ურთიერთქმედება. ეს იმას ნიშნავს, რომ ელემენტი არის ჯგუფის კონტექსტის ნაწილი, რომელიც არის დაჯგუფების ჯგუფის ბოლოში და არ არსებობს შესაძლებლობა, რომ მას B ელემენტის წინ, რომელიც სხვა ჯგუფშია, რომელსაც აქვს უმაღლესი ჯგუფის შეკვეთა, მაშინაც კი, თუ ეს ძალიან მაღალია Z -index.

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

დიახ, დიახ - ქონება ხოცვა ქმნის ახალ ჯგუფურ კონტექსტს. ასევე ვრცელდება თვისებები გარდაქმნა და perspevtive.. მაგრამ ეს არ არის აზრი, არა? ეს იმას ნიშნავს, რომ თუ თქვენ გაქვთ გამჭვირვალობის ელემენტი, განსხვავდება 1, ან ტრანსფორმაციის გარდა არაფერი - თქვენ გაქვთ პოტენციური პრობლემა.

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

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

რა არის ცენტრის კავშირი?

მე ვფიქრობ, რომ ეს არის ერთ-ერთი "glitches" CSS, რომელმაც ყველაზე მეტი დრო დასჭირდა. მე მჯერა, რომ თქვენ ამბობთ, რომ ეს უცნაურია, როგორც Z- ინდექსის ქცევა. მოკლედ, შინაგან საქმეთა კავშირი არის, როდესაც ორი ელემენტის ზედა და ქვედა განზრახვა შერწყმულია ამ ორიდან ორიდან. ზოგადად, ორ ბლოკს შორის ვერტიკალური ინტენსივობა გამოითვლება შემდეგნაირად:

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

დაკავშირებული ბლოკები

როდესაც ორი მიმდებარე ბლოკს აქვს ვერტიკალური ინდურენტები, ისინი კომბინირებულნი არიან ერთი ელემენტის ქვედა დეპოზიტზე და მეორე უკან დაბრუნება. ეს შეიძლება თავიდან აიცილონ რამდენიმე ბილიკით:

• ნათელი: მარცხენა; Float: მარცხენა; მიმდებარე ბლოკებისთვის (უფლება ასევე მუშაობს)
• ჩვენება: Inline-Block ძმებზე (ასევე იწვევს Inline-Table)

მშობელთა ელემენტი და პირველი / ბოლო ქალიშვილი ელემენტი

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

• overflow: დამალული. (ან სხვა ავტომატური გარდა)
• padding: 1px (ან სხვა ღირებულება, 0-ზე მეტი); ზოგიერთი ბრაუზერი კი subpixel ღირებულებების მხარდაჭერას)
• სასაზღვრო: 1px მყარი გამჭვირვალე (ან საზღვარი)
• ჩვენება: Inline-Block (Lowning მაგიდები ასევე მუშაობს - inline-table)
• float: მარცხენა. (უფლება ასევე შეესაბამება)

შემდეგი მაგალითი გვიჩვენებს ამ აფიქსირებს მოქმედებაში:

ცარიელი ბლოკები

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

შედეგები

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

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

ჩვენ წარმოვადგენთ სტატიის თარგმანს "რატომ CSS ქსელი უკეთესია, ვიდრე Bootstrap for Layouts- ის შექმნა" ჰარალდ ბორგენისგან, რომელიც გამოქვეყნდა ვებ-გვერდზე ru.hexlet.io.

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

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

მოდით შევხედოთ სამ ძირითად მიზეზს, რის გამოც მე ვფიქრობ, რომ CSS ქსელი უფრო მაღალია bootstrap.

მარკირება ადვილი იქნება

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

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

ჩატუტიკა

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

აქ მინდა ყურადღება მიაქციოთ რა:

1. თითოეული ხაზი უნდა იყოს ცალკე ტეგით
   .
2. განლაგების მიზნით, უნდა იქნას გამოყენებული განლაგება, კლასი სახელები (Col-XS-2).
3. როდესაც ეს თარგი გართულებულია, HTML ძალიან.

თუ ეს არის ადაპტური საიტი, tags გამოიყურება, როგორც წესი კი უარესი:

CSS ქსელი.

ახლა მოდით შევხედოთ გზას განახორციელოს იგივე CSS ქსელის. აქ არის HTML:

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

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

და განსხვავებით bootstrap, ეს მარკირება არ იქნება ძალიან რთული მზარდი სირთულის გვერდზე განლაგება.

მაგალითად Bootstrap, თქვენ არ უნდა დაამატოთ CSS, CSS ქსელის, რა თქმა უნდა, საჭიროა. თუ კონკრეტულად თქვენ უნდა დაამატოთ იგი:

ზოგიერთი, ეს შეიძლება იყოს არგუმენტი სასარგებლოდ Bootstrap: თქვენ არ გჭირდებათ ფიქრი CSS შექმნა მარტივი ქსელის - თქვენ უბრალოდ ავაშენოთ განლაგება HTML.

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

ბევრად უფრო მოქნილობა

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

სხვა სიტყვებით - შეცვალეთ განლაგება ამით:

ამასთან დაკავშირებით:

CSS ქსელი.

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

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

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

ჩატუტიკა

თუ ჩვენ გვინდა გავაკეთოთ იგივე bootstrap, ჩვენ უნდა შევცვალოთ HTML. ჩვენ უნდა გვქონდეს მენიუს tag დაბრუნება ზედა რიგის, გარდა header, რადგან მენიუ არის მეორე რიგის მძევლად.

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

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

აღარ შეზღუდულია 12 დინამიკი

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

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

ეს კეთდება გამეორება (7, 1fr) ღირებულების Grid-Template-Columns- ისთვის, როგორიც არის:

ალბათ არის hack გზა, რათა მსგავსი bootstrap ... და მე ვიცი, რომ Bootstrap 4 იყენებს FlexBox, რაც საშუალებას იძლევა ასეთი მოქნილობა, მაგრამ ეს ჯერ კიდევ არ გამოვა ბეტა.

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

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

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

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

დასკვნა

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