საღამო მშვიდობისა, ძვირფასო კოლეგებო, დღეს ჩვენთან ერთად კიდევ ორს შეისწავლით სელექტორირომელთაც ეძახიან ბავშვისა და და-ძმის CSS არჩევა... უფრო მეტიც, ამის გაკეთება შეგიძლია მათ გარეშე, თუმცა შენი განვითარებისათვის უნდა ისწავლო და ზოგჯერ გამოიყენო ისე, რომ შენს მეხსიერებაში დარჩეს. ამიტომ, რომელზე ვისაუბრებთ სელექციონერები მეზობელი არიან და რომელი ბავშვები, და ჩვენ მაგალითს გავაანალიზებთ.
ბავშვთა CSS სელექტორები - ელემენტები, რომლებიც მდებარეობს მშობლის ელემენტის შიგნით. ამის მაგალითი შეიძლება იყოს შემდეგი. ჩვენ გვაქვს ბლოკი, რომელიც შეიცავს აბზაცს, სხვა ბლოკს და სურათს. ეს სამი ელემენტი არის ბავშვები. თუ ბავშვთა ბლოკი შეიცავს სხვა ელემენტებს, ისინი აღარ არიან პირველი ბლოკის შვილები, არამედ არიან იმ ბლოკის ბავშვები, რომელშიც ისინი პირდაპირ მდებარეობს. ვიმედოვნებ, რომ აზრს მიიღებთ.
მიმდებარე CSS სელექტორები - დოკუმენტის კოდექსში ერთმანეთის მიყოლებით განლაგებული ელემენტები. ამის მაგალითია. გვაქვს აბზაცი, რომელსაც მოჰყვება ნიშანი სიგრძე... ყველაფერი საკმაოდ ნათელია, მაგრამ ჩვენ უბრალოდ უნდა განვსაზღვროთ ეს ყველაფერი რეალური მაგალითებით.
ტექსტი აბზაცში
Span ტექსტი
აღარ არის ბავშვთა ტექსტი აბზაცში
სტილის გამოყენება თეგისთვის იგივე შედეგის დასამატებლად სიგრძე
განყოფილება \u003e span (
შრიფტის ზომა: 200%;
}
გვ + span (
ფერი: წითელი;
}
კოდის შესრულების შედეგი ორივე შემთხვევაში გამოყენებული იქნება თეგზე სიგრძერადგან იგი თეგის შვილია div შემდეგ კი ნიშნის შემდეგ გვ... ამიტომ, შრიფტი ორჯერ უფრო დიდი და წითელი გახდა. ახლა ჩვენ მთლიანად გავუმკლავდით cSS– ში ბავშვთა და და-ძმების სელექციონერებითქვენ უბრალოდ უნდა გააძლიეროთ თქვენი ცოდნა პრაქტიკაში, გნახავთ მალე!
CSS– ის სინტაქსი მარტივია და ამის გასაგებად არ გჭირდებათ დოქტორანტურა IT– ში. ამასთან, ეს არის ერთ – ერთი პოპულარული ენა, რომელიც ლოგიკური არ არის ამ სიტყვის ნამდვილი გაგებით. სხვა ვებ პროგრამირების ენებისგან განსხვავებით, როგორიცაა JavaScript და PHP, CSS არ წყვეტს პრობლემებს რეგულარული ლოგიკით. ალგორითმები, როგორიცაა "თუ X მაშინ გააკეთე Y, წინააღმდეგ შემთხვევაში გააკეთე Z" ან "შეარჩიე ყველა Y, შემდეგ გააკეთე X მათთან" არ შეიძლება განხორციელდეს CSS ენაზე. მარტივად რომ ვთქვათ, ეს არის ენა, რომელიც შექმნილია დიზაინისთვის, ენაა დიზაინერებისათვის და არა დეველოპერებისთვის. ზოგიერთმა გამოცდილმა პროგრამისტმა, რომელთანაც მე ვმუშაობდი, დიდი ძალისხმევა დახარჯა CSS– ის შესწავლაზე სწორედ ამ მიზეზით.
CSS– ის სწავლა იწყება კლასებით და პირადობის მოწმობებით, აგრეთვე გამოყენებით. და # ელემენტების პირდაპირ აღსაწერად. ეს საკმარისია სრულად ფუნქციონირებადი ვებსაიტის შესაქმნელად, მაგრამ არ არის საკმარისად მოქნილი სრული გადაკეთების შემთხვევაში. მოდით გავეცნოთ ალტერნატიულ მიდგომას ასეთი ძნელად მისადგომი საგნების მართვისთვის.
მომიჯნავე და-ძმის კომბინატორი
დავიწყოთ სელექტორით, რომელიც გამოგადგებათ რთულ სიტუაციებში - მომიჯნავე ძმათა კომბინირება. მეზობელი და-ძმა კომბინატორი აღინიშნება ორი ელემენტის შეერთებით + ნიშნის გამოყენებით:H1 + გვ
ეს ირჩევს შემდეგ p- ელემენტს DOM- ში h1 ელემენტის შემდეგ. ტიპოგრაფიული თეორიის თანახმად, ტექსტის აბზაცებში უნდა გამოვიყენოთ ჩაღრმავება, მაგრამ მხოლოდ იმ შემთხვევაში, თუ ისინი სხვა აბზაცს მიჰყვებიან. პრაქტიკაში, ეს შეიძლება გამოყენებულ იქნას ყველა აბზაცში, გარდა პირველი პუნქტისა:
p + p (ტექსტი-აბზაცი: 1em;)
ეს ბევრად უფრო მოსახერხებელია, ვიდრე პირველი აბზაცის გამოყოფა class \u003d "first" - ით. სამი ხაზი, კლასების გარეშე და ბრაუზერის სრული მხარდაჭერა. თუ საიტის შინაარსთან დაკავშირებული img ტეგები ჩასვით p თეგებში (როგორც უნდა გქონდეთ), შეგიძლიათ უბრალოდ დააჭიროთ მათ მარცხენა მინდვრებს უარყოფითი მნიშვნელობით -1em:
p + p img (მინდორი მარცხნივ: -1em;)
საკმაოდ მარტივია, არა? მაგრამ რა მოხდება, თუ გვინდა ყველა აბზაცის პირველი სტრიქონი შევარჩიოთ სათაურების შემდეგ, ყველა დანარჩენი პუნქტის შეცვლის გარეშე? ისევ შეგვიძლია გამოვიყენოთ ხედვის კლასი. მარტივი სელექტორი, რომელიც მზადდება მიმდებარე კომბინირებისა და ფსევდო ელემენტისგან, შეასრულებს სამუშაოს:
h1 + p :: პირველი ხაზი (შრიფტის ვარიანტი: small-caps;)
შენიშვნა: პირველი სტრიქონის ფსევდოელემენტი მიღებულია CSS 2.1 – ში, CSS 3 იყენებს :: აღნიშვნას ფსევდო კლასებისა და ფსევდოელემენტების განასხვავებლად.
მემკვიდრეობითი კომბინატორი
ჩვეულებრივი მარკირების პროტოკოლია განყოფილებების განთავსება დასახელებულ ელემენტში # გვერდზე ან # გადატანა:წარსულ თავებში ჩვენ შევისწავლეთ ურთიერთობები HTML დოკუმენტში, მათ შორის ბავშვის ამორჩევისთვის. ახლა დროა გაეცნოთ და-ძმის ამორჩევას და და-ძმის ამორჩევას.
მიმდებარე სელექციონერები
მომიჯნავე სელექციონერები (მას ასევე უწოდებენ მიმდებარე სელექტორებს), ვებგვერდზე შეარჩიონ ისეთი ელემენტები, რომლებსაც აქვთ საერთო მშობელი და ერთმანეთთან მომიჯნავე. სტილი გამოიყენება შერჩევაში მითითებულ ბოლო ელემენტზე.
მაგალითი: ვთქვათ, რომ გჭირდებათ თითოეული აბზაცი
რაც პირველი ხდება სათაურის შემდეგ
, ჰქონდა დახრილი შრიფტი. ამის განხორციელება შესაძლებელია მსგავსი CSS კოდით:
H1 + p (შრიფტის სტილი: დახრილი;)
ამ წესის დაწერისას, უპირველეს ყოვლისა, უნდა მიუთითოთ პირველი მეზობლის სახელი, შემდეგ დაამატოთ + სიმბოლო და მეორე მეზობლის სახელი (რომლის სტილიც უნდა გამოვიყენოთ). ასევე შეიძლება შეიქმნას გრძელი კომბინაციები. ამორჩევის წერის სქემა ასეთია: selector1 + selector2 +… + selectorN () (სტილი გამოიყენება selectorN– ზე).
წერის მაგალითები:
/ * აბზაციდან სურათზე 30px * / p + img (padding-top: 30px;) / * მწვანე აბზაცისთვის, რომელიც შემდეგნაირად h3- სთან ერთად h2 * / h2 + h3 + p (ფერი: მწვანე;)
დაკავშირებული სელექტორები
და-ძმის ამორჩევა (სხვა სახელები: ძმა, და-ძმა) საშუალებას გაძლევთ აირჩიოთ HTML გვერდის ელემენტები, რომლებიც დაკავშირებულია ერთმანეთთან (ანუ საერთო მშობელი ჰყავთ და იმავე დონეზე არიან). და-ს ამორჩევა მეზობელი ამორჩევის მსგავსია, მაგრამ ისინი განსხვავდებიან იმით, რომ სტილი ვრცელდება არჩეული ტიპის ყველა ელემენტზე და არა მხოლოდ პირველზე. ტილდეს სიმბოლო ~ გამოიყენება + –ის ნაცვლად.
მაგალითი: მოდით, ოდნავ შევცვალოთ წინა დავალება და წარმოვიდგინოთ, რომ საჭიროა ყველა აბზაცისთვის დახრილი შრიფტის გაკეთება
ეს ტიტულის შემდეგ მოდის
... CSS კოდი ასე გამოიყურება:
H1 ~ p (შრიფტის სტილი: დახრილი;)
... და რამდენიმე HTML მაგალითად:
სათაური 1
სათაური 2
გადახედეთ HTML- ს: სტილი ვრცელდება ყველა ტეგზე
რაც მოჰყვება შემდეგ ტეგი
და არიან მანამდე მშობლის დახურვის ნიშანი ... ჩვენს ვერსიას აქვს 3 ელემენტი რომელსაც სტილი შეეფერება. გაითვალისწინეთ, რომ ტეგი
ის არანაირად არ ჩაერევა. გაითვალისწინეთ ისიც, რომ ამ შემთხვევაში სტილი არ გამოიყენება ამ თეგზე
რომელიც მდებარეობს დასრულდა
და ასევე ტეგით
განსხვავებული მშობლის ყოლა
.
დასკვნები
მომიჯნავე (მომიჯნავე) სელექტორების გამოყენებით შეგიძლიათ ელემენტის სტილირება, როდესაც ის მაშინვე მიჰყვება სხვა ელემენტს (ან ელემენტების ჯგუფს). ეს მუშაობს ელემენტებთან, რომლებიც იმავე დონეზე არიან და აქვთ საერთო მშობელი.
და-ძმის ამორჩევის საშუალებით შეგიძლიათ მონიშნოთ არჩეული ტიპის ყველა ელემენტი, როდესაც ისინი დაუყოვნებლივ მიჰყვებიან სხვა ელემენტს (ან ელემენტების ჯგუფს). ეს მუშაობს ელემენტებთან, რომლებიც იმავე დონეზე არიან და აქვთ საერთო მშობელი.
აღწერა
ვებ-გვერდის ელემენტებს მეზობლებს უწოდებენ, როდესაც ისინი დაუყოვნებლივ მიჰყვებიან ერთმანეთს დოკუმენტის კოდში.
Სინტაქსი
E + F (სტილის წესების აღწერა)
მომიჯნავე ელემენტების სტილის გასაკონტროლებლად გამოიყენეთ პლუს (+) სიმბოლო ორ ამომრჩეველს შორის E და F. პლუსის გარშემო ადგილები არასავალდებულოა. ეს სტილი ვრცელდება F ელემენტზე, მაგრამ მხოლოდ იმ შემთხვევაში, თუ იგი E ელემენტის მომიჯნავეა და მაშინვე მიჰყვება მას. მოდით ვნახოთ რამდენიმე მაგალითი.
Lorem ipsum დოლორი იჯდეს ამეტ.
მონიშნე თეგის შვილია
იმიტომ, რომ ეს არის ამ კონტეინერის შიგნით. შესაბამისად
მოქმედებს როგორც მშობელი
.
Lorem ipsum დოლორი ჯდომა ამეტ
წარწერები და არანაირად არ გადაფაროთ და წარმოადგინოთ მიმდებარე ელემენტები. ის ფაქტი, რომ ისინი კონტეინერის შიგნით მდებარეობს არ მოქმედებს მათ დამოკიდებულებაზე.
ლორემი იფსუმი დოლორი იჯდეს ამეტ, მშვენიერი adipiscing ელიტარული.
ტეგები აქვეა მომიჯნავე და და და ... სადაც და მიმდებარე ელემენტები არ არის დაკავშირებული იმის გამო, რომ მათ შორის არის კონტეინერი
.
HTML5 CSS 2.1 IE Cr Op Sa Fx
მიმდებარე სელექციონერები
ლორემი იფსუმი დოლორი იჯდეს ამეტ, მშვენიერი adipiscing ელიტა.
Lorem ipsum dolor sit amet, მშვენიერი adipiscing ელიტა.
ამ მაგალითის შედეგი ნაჩვენებია ნახატზე. ერთი
ფიგურა: 1. წითელი ტექსტის ფერი მიმდებარე სელექტორებისთვის
ბრაუზერები
Internet Explorer 7 არ აყალიბებს სტილს, თუკი ამომრჩეველს შორის არის კომენტარი (B + / * plus * / I).
მოგესალმებით ძვირფასო მკითხველო! ჩვენ ვაგრძელებთ CSS სელექტორების თემას და დღეს შევეცდები მისაწვდომი გზით ავუხსნა რა არის ეს მიმდებარე CSS სელექტორებიდა ასევე რა როლს ასრულებს უნივერსალური სელექტორი... ყველა სახის CSS ინსტრუმენტის გამოყენების მექანიზმის ცოდნა საშუალებას მოგცემთ მიაღწიოთ დოკუმენტის ოპტიმალურ და კომპაქტურ შინაარსს, სადაც აღწერილია ელემენტების სტილები, რაც თქვენი რესურსის წარმატებული პოპულარიზაციის ერთ-ერთი კომპონენტია. შემთხვევაში, თუ უგულებელყოფთ შესაძლებლობას მიიღოთ სასარგებლო ინფორმაცია სელექტორის კონცეფციისა და მისი ყველა სახის შესახებ.
თუ გახსოვთ და ყურადღებით ადევნებთ თვალყურს პუბლიკაციებს, უკვე განხილულია მრავალი სახის შერჩევა; ; ... კიდევ ერთხელ მოგიწოდებთ, არ უგულებელყოთ CSS– ის საფუძვლების სწავლა, რადგან ეს მომავალში ბევრ უპირატესობას მოგანიჭებთ.
უნივერსალური სელექტორი
ახლა პირდაპირ გადავიდეთ დღევანდელი გამოცემის არსზე. რაც შეეხება უნივერსალურ სელექტორს, ის საკმაოდ მარტივია, ამიტომ მასზე დიდხანს აღარ ვისაუბრებ. CSS წესის წერის სინტაქსი, რომელიც იყენებს უნივერსალურ სელექტორს, ასეთია:
აქ ოპერატორი "*" ნიშნავს, რომ ჩვენ გვაქვს უნივერსალური ამორჩევა. იგი გამოიყენება მაშინ, როდესაც საჭიროა ვებგვერდზე ყველა ელემენტისთვის ერთიანი სტილის დამკვიდრება. ზოგჯერ უნივერსალური სელექტორი არასავალდებულოა. მაგალითად, ნოტაცია. * კლასი და. კლასი ზუსტად ერთნაირია ამ შემთხვევებში. ახლა საჭიროა მაგალითი. ჩვეულებრივ, ყველაზე ხშირად გვხვდება ერთგვაროვანი შრიფტის, ზომისა და ფერისა და ჩვეულებრივი ტექსტის ადგილმდებარეობის განსაზღვრა ბლოგზე ან ვებგვერდზე.
* (შრიფტის ოჯახი: Tahoma, Arial, Helvetica, sans-serif; / * ტექსტის შრიფტი * / ფერი: # 646464; / * ტექსტის ფერი * / შრიფტის ზომა: 75%; / * ტექსტის ზომა * / ტექსტის გასწორება: მარცხნივ; / * ტექსტის განლაგება * /)
ამ გზით, თქვენ შეგიძლიათ განსაზღვროთ ტექსტის გამოჩენა ყველა ელემენტისთვის, რომლებიც განთავსებულია გვერდზე. გაითვალისწინეთ, რომ ამ შემთხვევაში, შედეგი იგივე იქნება, თუ უნივერსალური ამორჩევის ნაცვლად გამოიყენეთ სხეულის ნიშნის სახელი, რომელიც მოიცავს ყველა ელემენტის თეგებს.
მიმდებარე CSS სელექტორები
ახლა კი, მოდით, ცოტა მეტი დრო დაუთმოთ მეზობელ სელექტორებს. ვებ-გვერდის ელემენტები მეზობელია, როდესაც ისინი დოკუმენტის კოდში პირდაპირ არიან ერთმანეთთან. ამ შემთხვევაში, CSS სტილის სინტაქსი ასე გამოიყურება:
ახლა ავიღოთ p ტეგით განსაზღვრული ტექსტის აბზაცი, რომელიც ბავშვობაში მოიცავს b, i და big თეგებს, რომლებიც განსაზღვრავენ ტექსტის ფორმატირებას, შესაბამისად, თამამად, დახრილ და შრიფტის გაზრდით:
ეს პუნქტი იყენებს ტეგი ბ, მონიშნე მე, დიდი ნიშანი.
და CSS და HTML რედაქტირების ინსტრუმენტის გამოყენებით, რომელიც ჩაშენებულია ყველა პოპულარული ბრაუზერის უახლეს ვერსიებში (,) და რომელიც არის ცნობილი Firefox ბრაუზერის დანამატის ანალოგი (), ჩვენ ჩავსვამთ ამ აბზაცს სადმე, აბსოლუტურად ნებისმიერ ვებგვერდზე (I ეს გააკეთა პირველი პუნქტის წინა სტატიის გვერდზე). მაგალითად, Chrome- ში ეს ინსტრუმენტი გამოიყენება F12 ღილაკის უბრალოდ დაჭერით. ის შეიძლება გამოყენებულ იქნას, როგორც პრაქტიკული მითითება HTML საფუძვლებისა და CSS სახელმძღვანელოსთვის. პირველ აბზაცად ჩავსვი ტექსტის ნაწილი:
ეს პუნქტი იქნება ექსპერიმენტული და მისი მაგალითის გამოყენებით განვიხილავთ განაცხადს მიმდებარე სელექციონერები... როგორც ვთქვი, b, i და big tags არიან p პუნქტის ნიშნის შვილები, რადგან ისინი ყველა პირდაპირ p კონტეინერის შიგნით არიან. აქ, მიმდებარე ნიშნებია b და i, ისევე როგორც i და big. ახლა მოდით გამოვიყენოთ CSS წესი მიმდებარე სელექტორებისთვის:
B + i (ფერი: წითელი;) i + დიდი (ფერი: მწვანე;)
ამ სტილის გამოყენების შემდეგ, აბზაცი ასე გამოიყურება:
ეს ეხება ვებგვერდზე განთავსებულ ყველა ტეგს, რომელიც მოიცავს b, i და დიდ ელემენტებს. უფრო მეტიც, b და i, i და big უნდა განთავსდეს მის გვერდით, სხვა კომბინაციებისათვის ეს CSS წესი არ იმუშავებს. ვფიქრობ, ახლა თქვენთვის გასაგებია, თუ როგორ იყენებენ მიმდებარე სელექტორები CSS დოკუმენტის წერის ან რედაქტირებისას. კიდევ ერთი ძალიან მნიშვნელოვანი შენიშვნა: თუ თქვენ შენიშნეთ, მიმდებარე ელემენტების შემთხვევაში, მითითებული სტილი გამოიყენება მხოლოდ მეორე ელემენტზე.
აბზაცთან დაკავშირებული მაგალითი, რომელიც ძალიან აღწერილობითია და საშუალებას გაძლევთ სწრაფად გაიგოთ CSS– ში მომიჯნავე სელექტორების არსი. ამასთან, ჩვეულებრივ, ჩვეულებრივ, გამოიყენება მიმდებარე სელექციონერების გამოყენების სხვა სფეროები. მაგალითად, ძალიან ხშირად საჭიროა ტექსტის ნაწილის შეტანა სტატიის კორპუსში, განსაკუთრებით ტექსტის ისეთ ნაწილად, როგორიცაა სქოლიოები, შენიშვნები და ა.შ.
ამ მიზნებისათვის ჩვეულებრივია ცალკეული კლასის შექმნა და მისი გამოყენება სასურველ აბზაცზე. მაგრამ ბევრად უფრო ოპტიმალური გზაა მომიჯნავე სელექტორების გამოყენება. მაგალითად, ჩემს ბლოგზე არის სტილები, რომლებიც შექმნილია ჩვეულებრივი h3 სათაურის სტილის შესაქმნელად.
H3 (შრიფტის ზომა: 1.7em; / * შრიფტის ზომა * / ტექსტის გასწორება: ცენტრი; / * ტექსტის განთავსება * / შრიფტის წონა: ნორმალური; / * ტექსტის ჩვეულებრივი სტილი * / შრიფტის ოჯახი: Tahoma, Arial, Helvetica, sans-serif; / * შრიფტის სტილი * / ფერი: # 646464; / * ტექსტის ფერი * /)
ჩანიშვნის ან სქოლიოს სათაურის ხაზგასასმელად განვსაზღვროთ სპეციალური კლასი, ვთქვათ, დააყენოთ:
H3.put (ფერი: წითელი; / * ტექსტის ფერი * / ზღვარი მარცხნივ: 5px; / * მარცხენა მინდორი * / margin-top: 0.5em; / * ზედა ზღვარი * / padding: 10px; / * ტექსტის მინდვრები * / ტექსტი გასწორება: მარცხნივ; / * ტექსტის პოზიცია * /)
ახლა მოდით გამოვიყენოთ მომიჯნავე სელექციონერები სქოლიოთი აბზაცის სტილის შესაქმნელად, ეს პუნქტი განთავსდება პირდაპირ სათაურის ქვემოთ "h3.put" სტილით:
H3.put + p (ფონი: # ffefd5; / * ფონის ფერი * / ზღვარი მარცხნივ: 15px; / * მარცხენა მინდორი * / ზღვარი მარჯვნივ: 120px; / * მარჯვენა ზღვარი * / ზღვარი ზედა: 0.5em; / * ზედა padding * / padding: 5px; / * მინდვრები ტექსტის გარშემო * /)
კიდევ ერთხელ, Google Chrome- ის რედაქტირების ინსტრუმენტის გამოყენებით, რომელიც ყველა ყურამდე მივაწვდინე (მაგრამ ღირს), ჩაწერეთ სქოლიოს სათაური და არ დაგვავიწყდეს, რომ მისთვის დააყენეთ კლასი:
ყურადღება!
შემდეგ ჩვენ ვწერთ სქოლიოს ტექსტს:
ამ პუბლიკაციაში წარმოდგენილი მასალა ძალიან მნიშვნელოვანია CSS (Cascading Style Sheets) საფუძვლების შესწავლის თვალსაზრისით.
.
ყველა ამ ჟესტის შემდეგ, ვებგვერდზე მივიღებთ სქოლიოს ასეთ აბზაცს (გახსოვდეთ, რომ ეს პუნქტი ჩავსვი ჩემი წინა სტატიის ბოლოს ბავშვისა და კონტექსტის ამორჩევის შესახებ):
ახლა, ბლოგზე ან ვებსაიტზე, როდესაც "put" კლასი ვალდებულია ნებისმიერი h3 ტეგით, ასეთი სქოლიო გამოჩნდება ვებ – გვერდზე. უფრო მეტიც, h3 ნიშნის შემდეგ მხოლოდ პირველი აბზაცი "class \u003d" put "" იქნება სპეციალური გზით გაფორმებული. მაგრამ სწორედ ეს გვინდოდა, არა?
ამაზე ნება მომეცით დავასრულო დღევანდელი სახელმძღვანელო, რომელშიც მოცემულია ალგორითმი მეზობელი, ასევე უნივერსალური სელექტორების გამოყენებისათვის. ვიმედოვნებ, რომ ეს სტატია ხელს შეუწყობს თქვენ, ძვირფასო მკითხველს, გამოწერას
რომელსაც სტილი შეეფერება. გაითვალისწინეთ, რომ ტეგი
ის არანაირად არ ჩაერევა. გაითვალისწინეთ ისიც, რომ ამ შემთხვევაში სტილი არ გამოიყენება ამ თეგზე
რომელიც მდებარეობს დასრულდა
და ასევე ტეგით
განსხვავებული მშობლის ყოლა
დასკვნები
მომიჯნავე (მომიჯნავე) სელექტორების გამოყენებით შეგიძლიათ ელემენტის სტილირება, როდესაც ის მაშინვე მიჰყვება სხვა ელემენტს (ან ელემენტების ჯგუფს). ეს მუშაობს ელემენტებთან, რომლებიც იმავე დონეზე არიან და აქვთ საერთო მშობელი.
და-ძმის ამორჩევის საშუალებით შეგიძლიათ მონიშნოთ არჩეული ტიპის ყველა ელემენტი, როდესაც ისინი დაუყოვნებლივ მიჰყვებიან სხვა ელემენტს (ან ელემენტების ჯგუფს). ეს მუშაობს ელემენტებთან, რომლებიც იმავე დონეზე არიან და აქვთ საერთო მშობელი.
აღწერა
ვებ-გვერდის ელემენტებს მეზობლებს უწოდებენ, როდესაც ისინი დაუყოვნებლივ მიჰყვებიან ერთმანეთს დოკუმენტის კოდში.
Სინტაქსი
E + F (სტილის წესების აღწერა)
მომიჯნავე ელემენტების სტილის გასაკონტროლებლად გამოიყენეთ პლუს (+) სიმბოლო ორ ამომრჩეველს შორის E და F. პლუსის გარშემო ადგილები არასავალდებულოა. ეს სტილი ვრცელდება F ელემენტზე, მაგრამ მხოლოდ იმ შემთხვევაში, თუ იგი E ელემენტის მომიჯნავეა და მაშინვე მიჰყვება მას. მოდით ვნახოთ რამდენიმე მაგალითი.
Lorem ipsum დოლორი იჯდეს ამეტ.
მონიშნე თეგის შვილია
იმიტომ, რომ ეს არის ამ კონტეინერის შიგნით. შესაბამისად
მოქმედებს როგორც მშობელი .
Lorem ipsum დოლორი ჯდომა ამეტ
წარწერები და არანაირად არ გადაფაროთ და წარმოადგინოთ მიმდებარე ელემენტები. ის ფაქტი, რომ ისინი კონტეინერის შიგნით მდებარეობს არ მოქმედებს მათ დამოკიდებულებაზე. ლორემი იფსუმი დოლორი იჯდეს ამეტ, მშვენიერი adipiscing ელიტარული.
ტეგები აქვეა მომიჯნავე და და და ... სადაც და მიმდებარე ელემენტები არ არის დაკავშირებული იმის გამო, რომ მათ შორის არის კონტეინერი .
HTML5 CSS 2.1 IE Cr Op Sa Fx
ლორემი იფსუმი დოლორი იჯდეს ამეტ, მშვენიერი adipiscing ელიტა.
Lorem ipsum dolor sit amet, მშვენიერი adipiscing ელიტა.
ამ მაგალითის შედეგი ნაჩვენებია ნახატზე. ერთი
ფიგურა: 1. წითელი ტექსტის ფერი მიმდებარე სელექტორებისთვის
ბრაუზერები
Internet Explorer 7 არ აყალიბებს სტილს, თუკი ამომრჩეველს შორის არის კომენტარი (B + / * plus * / I).
მოგესალმებით ძვირფასო მკითხველო! ჩვენ ვაგრძელებთ CSS სელექტორების თემას და დღეს შევეცდები მისაწვდომი გზით ავუხსნა რა არის ეს მიმდებარე CSS სელექტორებიდა ასევე რა როლს ასრულებს უნივერსალური სელექტორი... ყველა სახის CSS ინსტრუმენტის გამოყენების მექანიზმის ცოდნა საშუალებას მოგცემთ მიაღწიოთ დოკუმენტის ოპტიმალურ და კომპაქტურ შინაარსს, სადაც აღწერილია ელემენტების სტილები, რაც თქვენი რესურსის წარმატებული პოპულარიზაციის ერთ-ერთი კომპონენტია. შემთხვევაში, თუ უგულებელყოფთ შესაძლებლობას მიიღოთ სასარგებლო ინფორმაცია სელექტორის კონცეფციისა და მისი ყველა სახის შესახებ.
თუ გახსოვთ და ყურადღებით ადევნებთ თვალყურს პუბლიკაციებს, უკვე განხილულია მრავალი სახის შერჩევა; ; ... კიდევ ერთხელ მოგიწოდებთ, არ უგულებელყოთ CSS– ის საფუძვლების სწავლა, რადგან ეს მომავალში ბევრ უპირატესობას მოგანიჭებთ.
უნივერსალური სელექტორი
ახლა პირდაპირ გადავიდეთ დღევანდელი გამოცემის არსზე. რაც შეეხება უნივერსალურ სელექტორს, ის საკმაოდ მარტივია, ამიტომ მასზე დიდხანს აღარ ვისაუბრებ. CSS წესის წერის სინტაქსი, რომელიც იყენებს უნივერსალურ სელექტორს, ასეთია:
აქ ოპერატორი "*" ნიშნავს, რომ ჩვენ გვაქვს უნივერსალური ამორჩევა. იგი გამოიყენება მაშინ, როდესაც საჭიროა ვებგვერდზე ყველა ელემენტისთვის ერთიანი სტილის დამკვიდრება. ზოგჯერ უნივერსალური სელექტორი არასავალდებულოა. მაგალითად, ნოტაცია. * კლასი და. კლასი ზუსტად ერთნაირია ამ შემთხვევებში. ახლა საჭიროა მაგალითი. ჩვეულებრივ, ყველაზე ხშირად გვხვდება ერთგვაროვანი შრიფტის, ზომისა და ფერისა და ჩვეულებრივი ტექსტის ადგილმდებარეობის განსაზღვრა ბლოგზე ან ვებგვერდზე.
* (შრიფტის ოჯახი: Tahoma, Arial, Helvetica, sans-serif; / * ტექსტის შრიფტი * / ფერი: # 646464; / * ტექსტის ფერი * / შრიფტის ზომა: 75%; / * ტექსტის ზომა * / ტექსტის გასწორება: მარცხნივ; / * ტექსტის განლაგება * /)
ამ გზით, თქვენ შეგიძლიათ განსაზღვროთ ტექსტის გამოჩენა ყველა ელემენტისთვის, რომლებიც განთავსებულია გვერდზე. გაითვალისწინეთ, რომ ამ შემთხვევაში, შედეგი იგივე იქნება, თუ უნივერსალური ამორჩევის ნაცვლად გამოიყენეთ სხეულის ნიშნის სახელი, რომელიც მოიცავს ყველა ელემენტის თეგებს.
მიმდებარე CSS სელექტორები
ახლა კი, მოდით, ცოტა მეტი დრო დაუთმოთ მეზობელ სელექტორებს. ვებ-გვერდის ელემენტები მეზობელია, როდესაც ისინი დოკუმენტის კოდში პირდაპირ არიან ერთმანეთთან. ამ შემთხვევაში, CSS სტილის სინტაქსი ასე გამოიყურება:
ახლა ავიღოთ p ტეგით განსაზღვრული ტექსტის აბზაცი, რომელიც ბავშვობაში მოიცავს b, i და big თეგებს, რომლებიც განსაზღვრავენ ტექსტის ფორმატირებას, შესაბამისად, თამამად, დახრილ და შრიფტის გაზრდით:
ეს პუნქტი იყენებს ტეგი ბ, მონიშნე მე, დიდი ნიშანი.
და CSS და HTML რედაქტირების ინსტრუმენტის გამოყენებით, რომელიც ჩაშენებულია ყველა პოპულარული ბრაუზერის უახლეს ვერსიებში (,) და რომელიც არის ცნობილი Firefox ბრაუზერის დანამატის ანალოგი (), ჩვენ ჩავსვამთ ამ აბზაცს სადმე, აბსოლუტურად ნებისმიერ ვებგვერდზე (I ეს გააკეთა პირველი პუნქტის წინა სტატიის გვერდზე). მაგალითად, Chrome- ში ეს ინსტრუმენტი გამოიყენება F12 ღილაკის უბრალოდ დაჭერით. ის შეიძლება გამოყენებულ იქნას, როგორც პრაქტიკული მითითება HTML საფუძვლებისა და CSS სახელმძღვანელოსთვის. პირველ აბზაცად ჩავსვი ტექსტის ნაწილი:
ეს პუნქტი იქნება ექსპერიმენტული და მისი მაგალითის გამოყენებით განვიხილავთ განაცხადს მიმდებარე სელექციონერები... როგორც ვთქვი, b, i და big tags არიან p პუნქტის ნიშნის შვილები, რადგან ისინი ყველა პირდაპირ p კონტეინერის შიგნით არიან. აქ, მიმდებარე ნიშნებია b და i, ისევე როგორც i და big. ახლა მოდით გამოვიყენოთ CSS წესი მიმდებარე სელექტორებისთვის:
B + i (ფერი: წითელი;) i + დიდი (ფერი: მწვანე;)
ამ სტილის გამოყენების შემდეგ, აბზაცი ასე გამოიყურება:
ეს ეხება ვებგვერდზე განთავსებულ ყველა ტეგს, რომელიც მოიცავს b, i და დიდ ელემენტებს. უფრო მეტიც, b და i, i და big უნდა განთავსდეს მის გვერდით, სხვა კომბინაციებისათვის ეს CSS წესი არ იმუშავებს. ვფიქრობ, ახლა თქვენთვის გასაგებია, თუ როგორ იყენებენ მიმდებარე სელექტორები CSS დოკუმენტის წერის ან რედაქტირებისას. კიდევ ერთი ძალიან მნიშვნელოვანი შენიშვნა: თუ თქვენ შენიშნეთ, მიმდებარე ელემენტების შემთხვევაში, მითითებული სტილი გამოიყენება მხოლოდ მეორე ელემენტზე.
აბზაცთან დაკავშირებული მაგალითი, რომელიც ძალიან აღწერილობითია და საშუალებას გაძლევთ სწრაფად გაიგოთ CSS– ში მომიჯნავე სელექტორების არსი. ამასთან, ჩვეულებრივ, ჩვეულებრივ, გამოიყენება მიმდებარე სელექციონერების გამოყენების სხვა სფეროები. მაგალითად, ძალიან ხშირად საჭიროა ტექსტის ნაწილის შეტანა სტატიის კორპუსში, განსაკუთრებით ტექსტის ისეთ ნაწილად, როგორიცაა სქოლიოები, შენიშვნები და ა.შ.
ამ მიზნებისათვის ჩვეულებრივია ცალკეული კლასის შექმნა და მისი გამოყენება სასურველ აბზაცზე. მაგრამ ბევრად უფრო ოპტიმალური გზაა მომიჯნავე სელექტორების გამოყენება. მაგალითად, ჩემს ბლოგზე არის სტილები, რომლებიც შექმნილია ჩვეულებრივი h3 სათაურის სტილის შესაქმნელად.
H3 (შრიფტის ზომა: 1.7em; / * შრიფტის ზომა * / ტექსტის გასწორება: ცენტრი; / * ტექსტის განთავსება * / შრიფტის წონა: ნორმალური; / * ტექსტის ჩვეულებრივი სტილი * / შრიფტის ოჯახი: Tahoma, Arial, Helvetica, sans-serif; / * შრიფტის სტილი * / ფერი: # 646464; / * ტექსტის ფერი * /)
ჩანიშვნის ან სქოლიოს სათაურის ხაზგასასმელად განვსაზღვროთ სპეციალური კლასი, ვთქვათ, დააყენოთ:
H3.put (ფერი: წითელი; / * ტექსტის ფერი * / ზღვარი მარცხნივ: 5px; / * მარცხენა მინდორი * / margin-top: 0.5em; / * ზედა ზღვარი * / padding: 10px; / * ტექსტის მინდვრები * / ტექსტი გასწორება: მარცხნივ; / * ტექსტის პოზიცია * /)
ახლა მოდით გამოვიყენოთ მომიჯნავე სელექციონერები სქოლიოთი აბზაცის სტილის შესაქმნელად, ეს პუნქტი განთავსდება პირდაპირ სათაურის ქვემოთ "h3.put" სტილით:
H3.put + p (ფონი: # ffefd5; / * ფონის ფერი * / ზღვარი მარცხნივ: 15px; / * მარცხენა მინდორი * / ზღვარი მარჯვნივ: 120px; / * მარჯვენა ზღვარი * / ზღვარი ზედა: 0.5em; / * ზედა padding * / padding: 5px; / * მინდვრები ტექსტის გარშემო * /)
კიდევ ერთხელ, Google Chrome- ის რედაქტირების ინსტრუმენტის გამოყენებით, რომელიც ყველა ყურამდე მივაწვდინე (მაგრამ ღირს), ჩაწერეთ სქოლიოს სათაური და არ დაგვავიწყდეს, რომ მისთვის დააყენეთ კლასი:
ყურადღება!
შემდეგ ჩვენ ვწერთ სქოლიოს ტექსტს:
ამ პუბლიკაციაში წარმოდგენილი მასალა ძალიან მნიშვნელოვანია CSS (Cascading Style Sheets) საფუძვლების შესწავლის თვალსაზრისით.
.ყველა ამ ჟესტის შემდეგ, ვებგვერდზე მივიღებთ სქოლიოს ასეთ აბზაცს (გახსოვდეთ, რომ ეს პუნქტი ჩავსვი ჩემი წინა სტატიის ბოლოს ბავშვისა და კონტექსტის ამორჩევის შესახებ):
ახლა, ბლოგზე ან ვებსაიტზე, როდესაც "put" კლასი ვალდებულია ნებისმიერი h3 ტეგით, ასეთი სქოლიო გამოჩნდება ვებ – გვერდზე. უფრო მეტიც, h3 ნიშნის შემდეგ მხოლოდ პირველი აბზაცი "class \u003d" put "" იქნება სპეციალური გზით გაფორმებული. მაგრამ სწორედ ეს გვინდოდა, არა?
ამაზე ნება მომეცით დავასრულო დღევანდელი სახელმძღვანელო, რომელშიც მოცემულია ალგორითმი მეზობელი, ასევე უნივერსალური სელექტორების გამოყენებისათვის. ვიმედოვნებ, რომ ეს სტატია ხელს შეუწყობს თქვენ, ძვირფასო მკითხველს, გამოწერას
