Შედარებითი - რა არის ეს? დეტალური აღწერა

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

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

რა არის CSS?

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

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

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

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

რას თანამდებობა ქონება?

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

რა მნიშვნელობას თანამდებობა ქონება?

ჩვენი ქონების შეუძლია მიიღოს სხვადასხვა ღირებულებები, არსებობს მხოლოდ ხუთი. მოკლე აღწერა თითოეული:

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

სამუშაო პოზიცია სხვადასხვა ბრაუზერები

არა ყველა ბრაუზერები თანაბრად თავსებადი. მიუხედავად იმისა, რომ ალტერნატიული პროგრამების ინტერნეტ surfing გარეშე hitches აღიქმება ღირებულება თანამდებობა არის აბსოლუტურად მართალია, "ქრონიკულად სპეციალური» Internet Explorer მიიჩნევს ქონება, დამოკიდებულია მის ვერსიებს.

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

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

სამუშაო პოზიცია Javascript

ფაქტობრივად, ამბავი, თუ როგორ უნდა ვიმუშაოთ თანამდებობა ქონების Javascript არის, ჩვენ არ შედის მხოლოდ გულისთვის წესიერება. იმიტომ, რომ ეს ქონება არ გააჩნიათ რაიმე სპეციალური სიმბოლოების სათაური, შეგიძლიათ გამოიყენოთ JS ცვლილებების გარეშე, მაგალითად, მითითებული div პოზიცია შედარებით, უნდა შეიცავდეს ხაზი მოსწონს: div.style.position = 'ნათესავი ".

როგორც ხედავთ, ეს არის საკმაოდ მარტივია.

რატომ თანამდებობა ნათესავი არსებითად განსაკუთრებული ყურადღება?

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

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

როდის უნდა გამოვიყენოთ ნათესავი პოზიციონირების?

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

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

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

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

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

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

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

ტიპიური შეცდომები, როდესაც გამოყენებით შედარებითი

ყველაზე გავრცელებული შეცდომა, როდესაც გამოყენებით პოზიცია ნათესავი არის, რომ ბევრი ვებ დიზაინერებს დაივიწყოს უნარი ვიტოვებთ ადგილი ერთეული, რომელიც შეიძლება ნებისმიერ წერტილში მდებარეობს. მაგალითად, თუ თქვენ გაქვთ საკმაოდ დიდი, განთავსებული გარეთ ეკრანზე და რომელსაც ნათესავი პოზიციონირების, თავის ადგილზე იქნება gaping "ხვრელი". მიუხედავად ამისა, ეს ქონება, ზოგჯერ ქმნის გარკვეულ შეფერხებას შეიძლება გამოყენებულ იქნას კარგი, მაგალითად, შექმნა საინტერესო ეფექტი "თვითმმართველობის იკრიბებიან" საიტი, სადაც ყველა მისი ბლოკები თანდათან მოთავსებული ზედა პოზიცია: 0; მარცხენა: 0; t. ე. თავის თავდაპირველ ადგილას.