საგნების სელექტორები css. სპეციალური სელექტორები CSS-ში. მშობელი, შვილი, კონტექსტის სელექტორები და სელექტორები ტეგის ატრიბუტით. ატრიბუტის მნიშვნელობები დასრულდება სიმღერის ტექსტით
აღწერე
ვებგვერდის ელემენტებს უწოდებენ მიმდებარედ, თუ ისინი ერთმანეთის მიყოლებით ჩნდებიან დოკუმენტის კოდში.
სინტაქსი
E + F (სტილის წესების აღწერა)
ჯუჯული ელემენტების სტილის გასაკონტროლებლად გამოიყენება პლუს სიმბოლო (+), რომელიც მოთავსებულია ორ სელექტორს E და F შორის. პლიუსის გარშემო არსებული ხარვეზები სავალდებულო არ არის. ასეთი ჩანაწერის სტილი სტაგნირებულია F ელემენტამდე, მაგრამ მხოლოდ იმ შემთხვევაში, რადგან ის დაკავშირებულია E ელემენტთან და მომდევნოს შემდეგ. მოდით შევხედოთ კონდახების თაიგულს.
Lorem ipsum დოლორდაჯექი ამეტ.
ტეგი є ბავშვები ტეგთან მიმართებაში
ჭურჭლის შუაში ღვინის ნატეხებია. აუცილებლად
მამა წინ მიიწევს .
Lorem ipsum დოლორ დაჯექიამეტ.
ტეგები і არანაირად არ ემთხვევა ერთმანეთს და არის ბუნებრივი ელემენტები. სუნიანები ჭურჭლის შუაშია გაშლილი ჩი არ მიედინება მის ინსტალაციაზე. ლორემი ipsum Dolor sit amet, შემსრულებელიადიპისკირება ელიტა.
აქ არის ტეგები і , ისევე, როგორც і . ამით і კონტეინერის ელემენტები არ უნდა განთავსდეს კონტეინერის ელემენტებს შორის .
HTML5 CSS 2.1 IE Cr Op Sa Fx
ლორემი ipsum Dolor sit amet, შემსრულებელიადიპისტური ელიტა.
Lorem ipsum dolor sit amet, შემსრულებელიადიპისტური ელიტა.
კონდახზე მოცემული წაკითხვის შედეგი ნახ. 1.
Პატარა 1. ტექსტის წითელი ფერი წყაროს ამომრჩეველებისთვის
ბრაუზერები
ბრაუზერი Internet Explorer 7 არ აჩერებს სტილს, რადგან სელექტორებს შორის ემატება კომენტარი (B + / * პლუს * / I).
ვლად მერჟევიჩი
ვებგვერდის ელემენტებს უწოდებენ მიმდებარედ, თუ ისინი ერთმანეთის მიყოლებით ჩნდებიან დოკუმენტის კოდში. მოდით შევხედოთ რამდენიმე კონდახსა და ელემენტს.
Lorem ipsum დოლორდაჯექი ამეტ.
ვისი ტეგი გამოიყენება? є ბავშვები ტეგთან მიმართებაში
ჭურჭლის შუაში ღვინის ნატეხებია. აუცილებლად
მამა წინ მიიწევს .
Lorem ipsum დოლორ დაჯექიამეტ.
აქ არის ტეგები і არანაირად არ ემთხვევა ერთმანეთს და არის ბუნებრივი ელემენტები. სუნიანები ჭურჭლის შუაშია გაშლილი ის არ ჯდება მის ინსტალაციაში. ლორემი ipsum Dolor sit amet, შემსრულებელიადიპისკირება ელიტა.
აქ არის ტეგები і , ისევე, როგორც і . ამით і კონტეინერის ელემენტები არ უნდა განთავსდეს კონტეინერის ელემენტებს შორის .
დამჭერის ელემენტების სტილის გასაკონტროლებლად გამოიყენება პლუს სიმბოლო (+), რომელიც ჩასმულია ორ სელექტორს შორის. მიღწევების ზაგალური სინტაქსი.
ამომრჩეველი 1 + სელექტორი 2 (სტილის წესების აღწერა)
პლიუსის ირგვლივ არსებული ხარვეზები სავალდებულო არ არის, ასეთი ჩანაწერის სტილი გამკაცრდება სელექტორ 2-მდე, მაგრამ მხოლოდ იმ შემთხვევაში, რაც არ არის აუცილებელი სელექტორი 1-ისთვის და მაშინვე.
ილუსტრაცია 11.1 გვიჩვენებს ტეგებს შორის ურთიერთქმედების სტრუქტურას.
მაგალითი 11.1. გემების სელექტორების ვიკორსტანი
HTML5 CSS 2.1 IE Cr Op Sa Fx
ლორემი ipsum Dolor sit amet, შემსრულებელიადიპისტური ელიტა.
Lorem ipsum dolor sit amet, შემსრულებელიადიპისტური ელიტა.
შედეგი ნაჩვენებია ნახ. 11.1.
Პატარა 11.1. ტექსტის ფერის ხილვა დამატებითი დამხმარე სელექტორების გამოყენებით
ამ აპლიკაციაში შესაძლებელია ტექსტის ფერის შეცვლა კონტეინერის ნაცვლად , როდესაც ღვინო იშლება კონტეინერის შემდეგ დაუყოვნებლივ . პირველ აბზაცში ეს სიტუაცია რეალიზებულია, ამიტომ ბრაუზერში სიტყვა "consectetuer" ნაჩვენებია წითელი ფერის სახით. გქონდეთ კიდევ ერთი აბზაცი, თუმცა არსებობს წინამდებარე ტეგი , ალე ნებისმიერი ტეგით არა, ასე რომ, კონტეინერის სტილი არ იქნება სტაგნაცია.
მოდით შევხედოთ უფრო პრაქტიკულ კონდახს. ხშირად ჩნდება სტატიის ტექსტში სხვადასხვა ღვინისა და შენიშვნების შეტანის საჭიროება. ამ მიზნით შექმენით ახალი სტილის კლასი და დააყენეთ იგი აბზაცზე, ამ გზით შეგიძლიათ მარტივად შეცვალოთ ტექსტის გარეგნობა. მოდით ავიღოთ სხვა მარშრუტი და დავაჩქაროთ გემის სელექციონერებით. პატივისცემის მიზნით, ჩვენ ვქმნით ახალ კლასს, სახელად yogo sic, და იოგოს ვიკორიზებთ ტეგამდე
. პირველი აბზაცი ასეთი სათაურის შემდეგ გამოჩნდება, როგორც ფონის ფერი და შეწევა (მაგალითი 11.2). სხვა აბზაცების გარეგნობა უცვლელი დარჩება.
კონდახი 11.2. აბზაცის სტილის შეცვლა
HTML5 CSS 2.1 IE Cr Op Sa Fx
უდაბნოში ლომის თევზის დაჭერის მეთოდები
თანმიმდევრული ძიების მეთოდი
მოდით, ლომს ჰქონდეს საერთო ზომები L x W x H, სადაც L არის მარცხენა სიგრძე ცხვირის წვერიდან კუდის წვერამდე, W არის მარცხენა სიგანე და H არის სიმაღლე. რის შემდეგაც უდაბნო იყოფა რამდენიმე ელემენტარულ თავდაყირა კოტლეტად, რომელთა ზომა ემთხვევა მარცხენას სიგანეს და სიგრძეს. თუ შევხედავთ იმ ფაქტს, რომ ლომს შეუძლია გადაადგილება არა მკაცრად მოცემულ ხაზზე, არამედ ერთდროულად ორ მათგანზე, გალიაში მოძრავი ადგილის სამუშაოს დასაჭერად და თავად 2L x 2W. რა თქმა უნდა, ცალსახად გვიხარია, თუ კვერცხში დარჩენილი ნაწილის მხოლოდ ნახევარს დავიჭერთ, ან, რაც უფრო უარესია, მხოლოდ კუდს.
პატივმოყვარე
გატაცების ხორცში კუდის გაფხვიერების გასამარტივებლად, მომაკვდავი შეიძლება ამოაგდონ და არ წაიღონ, სანამ მას არ პატივს სცემენ.
კონდახზე მოცემული წაკითხვის შედეგი ნახ. 11.2.
Პატარა 11.2. აბზაცის ხედის შეცვლა rahunok vikoristannya sysidnyh სელექტორისთვის
ამ აპლიკაციაში ტექსტი დაფორმატებულია შედედებული აბზაცებიდან (ტეგ
), Ale ჩანაწერი H2.sic + P აყენებს სტილს მხოლოდ პირველი აბზაცისთვის, რომელიც მოდის ტეგის შემდეგ
, ნებისმიერ დამატებას აქვს კლასი ім'ям sic.
საგნების სელექტორები ხელით უნდა იყოს შერჩეული იმ ტეგებისთვის, რომლებშიც შენატანები ავტომატურად ემატება, რათა დამოუკიდებლად დაარეგულიროს შეყვანის მნიშვნელობა. მაგალითად, როდესაც ტეგები მიდის
і , შემდეგ თქვენ შეგიძლიათ მარტივად დაარეგულიროთ მათ შორის უშუალოდ დამატებითი სელექტორების დახმარებით. ანალოგიურად, მარჯვნივ წადით და წადით ტეგების რიგზე і
і
და ასევე სხვა მსგავს სიტუაციებში. განაცხადში 11.3, დანიშნულ ტეგებს შორის სივრცის რაოდენობა იცვლება ამ გზით.
კონდახი 11.3. ინტერფეისი სათაურებსა და ტექსტს შორის
HTML5 CSS 2.1 IE Cr Op Sa Fx
თემა 1
თემა 2
პარაგრაფი!
თუ ამომრჩევის სტილი შეირჩევა მხოლოდ სხვა ელემენტზე, მაშინ შეყვანის ზომა იცვლება, რაც დამოკიდებულია შესაბამისი მნიშვნელობის ზღვრულ ზედა სიმძლავრის ჩართვაზე. ამ შემთხვევაში, ტექსტი ამოდის ზემოთ, უფრო ახლოს წინა ელემენტთან.
საკვები ხელახლა შესამოწმებლად
1. რა ტეგებია ამ კოდში შესაბამისი?
გოგირდმჟავას ფორმულა:ჰ 2ᲘᲡᲔ 4
І
- і
- і
- і
- і
2. შემდეგი HTML კოდი:
ფერმას დიდი თეორემა
X ნ+ Y ნ
= ზ ნ
de n - მთელი რიცხვი > 2
რომელი ტექსტი ჩნდება წითლად SUP + SUP (ფერი: წითელი;) სტილის შემდეგ?
- მეგობარი "n"
- კიდევ ერთი და მესამე "n".
საღამო მშვიდობისა, ძვირფასო კოლეგებო, დღეს ჩვენ ვთანამშრომლობთ თქვენთან დამატებით ორთან სელექტორი, რას ეძახიან ბავშვის და დაქვემდებარებული css სელექტორები. სამყაროს უმეტესი ნაწილი მათ გარეშე შეიძლება გაკეთდეს, მაგრამ თქვენი განვითარებისთვის საჭიროა მათი შთანთქმა და ხანდახან გაყინვა, რათა სუნი დაკარგოს მეხსიერებიდან. ასე რომ, მოდით ვისაუბროთ იმაზე, თუ როგორ შერჩევითიეს არის მეწყვილე და რომელიც ქალიშვილია, ამას დეტალურად განვიხილავთ.
ბავშვთა სელექტორები css- ელემენტები, რომლებიც ჩნდება მამის ელემენტის შუაში. კონდახის დადგმა შეიძლება. ჩვენ გვაქვს ბლოკი, რომელიც შეიცავს აბზაცს, მეორე ბლოკს და სურათს. ღერძს აქვს სამი ელემენტი და მისი ქალიშვილები. თუ საბავშვო ბლოკი ასევე შეიცავს სხვა ელემენტებს, მაშინ ისინი აღარ არიან პირველი ბლოკის შვილები, არამედ იმ ბლოკის შვილები, რომელშიც ისინი არიან განლაგებული. იმედია მიმიხვდით აზრს.
საგნების სელექტორები CSS- ელემენტები დალაგებულია სათითაოდ დოკუმენტის კოდში. კონდახი ასეთია. არის აბზაცი და ტეგი, რომელიც მას მოსდევს სპანი. ყველაფერი გასაგებია, მაგრამ ჩვენ მოკლებული ვართ ყველაფრის რეალურ კონდახებზე გაგებას.
ტექსტი აბზაცში
ტექსტი დიაპაზონში
აღარ არის საბავშვო ტექსტი აბზაცში
დამატებითი სტილისთვის, ჩვენ დავამატებთ ახალ შედეგს ტეგისთვის სპანი
დივ > სპანი (
შრიფტის ზომა: 200%;
}
გვ +Span(
ფერი: წითელი;
}
ორივე ტიპის ვიკიკოდის შედეგი დარჩება ტეგზე სპანი, იმიტომ რომ ეს არის ტეგის შვილობილი კომპანია დივდა მოდი ტეგის შემდეგ გვ. ამიტომ, შრიფტი ორჯერ დიდი და წითელი ფერის გახდა. ახლა ჩვენ სრულიად განქორწინებულები ვართ თქვენგან ბავშვის და ბავშვის სელექტორები CSS-ში, და თქვენ მოკლებული ხართ თქვენი ცოდნის პრაქტიკაში დაფასების საშუალებას!
ელემენტის ამომრჩეველი ირჩევს დოკუმენტის კოდში მდებარე ელემენტს სხვა მითითებული ელემენტის შემდეგ. მაგალითისთვის ავიღოთ რამდენიმე html კოდი.
I პუნქტი ახალში მსუქანიელემენტი, ღერძი გატაცებაელემენტი.
არის სამი ტეგი:
, і . ტეგები і კონტეინერში დეპონირებული
სუნი იგივეა რაც ადრე. ყველა მხრივ ზღვიდან ერთიდან ერთამდე სუნი ასდის.
დამხმარე სელექტორის სინტაქსია წინა ელემენტის ამომრჩევი, "+" ნიშანი, რასაც მოჰყვება არჩეული ელემენტის ამომრჩევი. მოდით მივცეთ რობოტს მოსამართლის ამომრჩეველი:
I პუნქტი ახალში მსუქანიელემენტი, ღერძი გატაცებაელემენტი.
აქ მსუქანიі სავარძლებიელემენტები, მეტი გატაცება.
მაგალითში ხედავთ, რომ ელემენტის ამომრჩეველი მოხსენიებულია პირველ აბზაცში. აქ არის ტეგები і წადი სათითაოდ. და სხვა აბზაცში მათ შორის არის გამარჯვებული ნიშანი , ახლა არის ორი განსხვავებული ტეგების წყვილი: + і + .
მილკოი ამ ვიდეოში დააყენებს ტეგს ექვემდებარება თარიღს მონიშვნას
მონიშნე აქ є ბავშვები ტეგთან მიმართებაში
და ის, თავისებურად, მისი მამაა .
მე არ აღვწერ მაგალითს ქვემოთ:
I პუნქტი ახალში მსუქანიელემენტი, ღერძი გატაცებაელემენტი.
აქ მსუქანიі სავარძლებიელემენტები, მეტი გატაცება.
უფრო რეალური უკანალი
მოდით შევხედოთ მოსამართლის შერჩევის რობოტს უფრო რეალურ სამყაროში. დიდ სტატიებში არის რამდენიმე სექციები, რომლებიც მითითებულია ტეგებით
, მნიშვნელოვანია ზედა ზღვარის გაზრდა (margin-top power). 30 პიქსელიანი ზღვარი ტექსტს უფრო წასაკითხს გახდის. ალე ღერძი დროდადრო, ტეგის სახით პირდაპირ წავალ , და ეს შეიძლება იყოს სტატიის ზედა ნაწილში, ზედა ჩანაწერი ტეგის ზემოთ ჩვენ დავურეკავთ. ეს დავალება შეიძლება შესრულდეს დამატებითი ელემენტების ამომრჩევის გამოყენებით.
, და ეს შეიძლება იყოს სტატიის ზედა ნაწილში, ზედა ჩანაწერი ტეგის ზემოთ ჩვენ დავურეკავთ. ეს დავალება შეიძლება შესრულდეს დამატებითი ელემენტების ამომრჩევის გამოყენებით.
Axis html კოდი რობოტის ამორჩევის ელემენტის კონდახით.
ვიტანია!
თემა h2
თემა h2
აბზაცის ტექსტი შესახებ naimovernі სასარგებლოა.
თემა h2
აბზაცის ტექსტი შესახებ naimovernі სასარგებლოა.
თემა h2
აბზაცის ტექსტი შესახებ naimovernі სასარგებლოა.
თქვენ ასევე შეგიძლიათ ხელით დაარეგულიროთ სივრცე სათაურსა და განყოფილების პირველ აბზაცს შორის, ჩვენს აპლიკაციაში არის ტეგები