[მუსიკალური სათამაშო] ALLISON BUCHHOLTZ-AU: ასე ჩვენ ძირითადად უბრალოდ აპირებს გაძლევთ rundown CSS, რადგან ჩვენ ვიცით, რომ ეს არ იყო დაფარული ყველა სექციები. და ჩვენ ნამდვილად გვინდა დავრწმუნდეთ, რომ თქვენ ბიჭები გვყავს ამ ინსტრუმენტია თქვენს განკარგულებაშია, იმის გამო, რომ მას აქვს უნარი, რათა თქვენი საიტებზე გამოიყურება ბევრად გალამაზებაში. 

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

TOMAS Reimers: ჰო. Allison განაცხადა, რომ ის კარგად. ამიტომ ვფიქრობ, პირველი, რაც ჩვენ უნდა დაიწყოს, რა არის CSS? ასე რომ CSS არის რა. CSS-- 

ALLISON BUCHHOLTZ-AU: ეს სახელი ჩვენი სემინარი. 

TOMAS Reimers: ჰო. ეს მართლაც მნიშვნელოვანია, რომ თქვენ იცით, რომ მაშინ. თუ თქვენ მხოლოდ წართმევას ერთი რამ, ის, რომ CSS, თუ რა. ორი არის CSS დგას კასკადური სტილების. ასე რომ, მისი ძირითადი, CSS არის style sheet, რაც იმას ნიშნავს, ის საშუალებას გაძლევთ სტილი ვებ გვერდზე. და მერე რა, რაც იმას ნიშნავს, რომ ეს გზა დაამატოთ სტილი თქვენს საიტებზე. ასე რომ, სტილი, ჩვენ ნიშნავს ყველაფერს რომ არ structural-- ასე რამ, როგორიცაა ფერები, ფონზე სურათებით, საზღვრების, როგორიცაა, padding, მინდვრები. ჩვენ ვსაუბრობთ რა ყველა ეს ნიშნავს, რომ ცოტა. 

ასე რომ ჩვენ უბრალოდ წავიდა წინ და გახსნა ორივე up in gedit. ასე რომ ეს არის შეცდომა. და ეს არის main.css. ასე main.css არაფერი აქვს. ALLISON BUCHHOLTZ-AU: არარის style ჯერჯერობით. TOMAS Reimers: None. და როგორც დაინახავთ, ეს მართლაც მახინჯი საიტზე. ALLISON BUCHHOLTZ-AU: ეს უბრალოდ ჩვეულებრივი. TOMAS Reimers: ჰო. ჰო, ეს არ არის მახინჯი, ეს მხოლოდ მინიმალისტური. და მერე აქ გვაქვს index.html. და ასე სწრაფი recap of HTML, Allison, გსურთ, უბრალოდ ვისაუბროთ გვერდი? 

ALLISON BUCHHOLTZ-AU: ჰო. ამიტომ ბუნებრივია, ჩვენ გვაქვს ჩვენი HTML tag, რომელიც მხოლოდ სახელები HTML ფაილი. ჩვენ გვაქვს ჩვენი header აქ, CSS Awesomeness, which-- თუ უკან. სად არის? 

TOMAS Reimers: Oh. ჰო, ხედავთ. ALLISON BUCHHOLTZ-AU: და შეამჩნია header ეს არის tab header უფლება აქ. და შემდეგ "Hello, world!" არის ტექსტი, რომ ჩვენ გვაქვს მხოლოდ ჩვენებისას ვებგვერდი გვერდი, რომელიც is-- დაბრუნდეს. უკან. რომელიც მხოლოდ ჩვენი სხეულის აქ ძირითადი ტექსტი. ასევე, ერთი რამ შეამჩნევთ, თუ გადავხედავთ აქ, Tomas გადავიდა up ამ ორი ჩვენი slide. ასე რომ, რადგან თქვენ გაქვთ ყველა სამი, თქვენ ჯარიმა. ისინი შეიძლება იყოს ნებისმიერი მიზნით, მათ სურთ. რა არის ყველაზე მნიშვნელოვანი ის არის, რომ მხოლოდ თქვენ გაქვთ თითოეული იმ სამი რამ. 

TOMAS Reimers: Cool. დამატება doc ტიპის? ALLISON BUCHHOLTZ-AU: ჰო. TOMAS Reimers: ჰო. მაგარი. ALLISON BUCHHOLTZ-AU: როგორც ჩანს, ჩემი mics არ მოვწონვარ. TOMAS Reimers: Oh, მოგვცეს წ მხოლოდ ხოლო Allison ცვლის თავისი მიკროფონი. ასე yeah. ასე რომ, ჩვენ გვაქვს ჩვენი მთავარ გვერდზე. ეს ერთგვარი unstyled. ჩვენ არ გვაქვს ბევრი. ჩვენ უბრალოდ უნდა ძირითადად ტექსტი. ჩვენ გვაქვს სტილის ფურცელი. ჩვენ გვაქვს ტიტული. ასე რომ მხოლოდ შიშველი boned კომპონენტები ნახვა. 

ასე, რომ იქ, მოდით ვისაუბროთ რა CSS არის და რას ჰგავს და ყველა რომ. ასე that-- ALLISON BUCHHOLTZ-AU: უკან სლაიდები. TOMAS Reimers: დასაწყისზე სლაიდები. და Allison შეიძლება აღება. 

ALLISON BUCHHOLTZ-AU: Woo. OK. ასე რომ, თქვენი CSS ფაილი, თქვენ ვაპირებთ აქვს ბევრი ეს ყველაფერი მოუწოდა სელექციონერები. რომელიც მხოლოდ საფუძველზე თქვენი CSS ფაილი. ეს უბრალოდ იქნება უამრავი და უამრავი ეს. ასე selector. ეს არის მხოლოდ ზოგადი ანატომია. ჩვენ ვაპირებთ გავლა მაგალითები, რადგან თუ ბიჭები არასდროს ვუყურე ჩემი განყოფილებიანი, ვგრძნობ მსგავსი რამ აბსტრაქტული ნამდვილად არ აქვს აზრი. ის ყოველთვის ეხმარება დაინახოს მაგალითები. 

ამიტომ ჩვენ გვაქვს რამდენიმე მეთოდი. რომ იქნება გარკვეული იდენტიფიკატორი რაც ჩვენ გვინდა, სტილი უნდა მიმართონ. და მაშინ ჩვენ შეიძლება ჰქონდეს ნებისმიერი წესები და ღირებულებები. ასე სელექციონერები რომ თქვენ შეიძლება ვხედავთ შეიძლება იყოს რაღაც სხეული, ან მე P, ან header, ან რასაც, რაც გაგიხარდებათ თქვენი HTML tags იყოს. 

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

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

TOMAS Reimers: No. Allison მიიღო. ჩვენ უბრალოდ აპირებს მოჭრილი up მაგალითად აქ ჩვენს მაგალითად საიტზე. მოდით რეალურად მიიღებს. ეს არის სრულყოფილი. ამიტომ მე უბრალოდ აპირებს ასლი და პასტა რომ უფლება ჩვენს main.css ფაილი. და მე ვაპირებ გადარჩენა იგი. და მაშინ ჩვენ გაუშვით. ასე მინიშნება, ერთ-ერთი ყველაზე სამწუხარო რამ არის, თუ არ შენახვა ფაილი, და მაშინ, ისევე, განაახლეთ გვერდი და, რატომ არ არის ცვლილება ხდება? ეს მოხდება. ასე რომ, აქ ჩვენ ვნახეთ, რომ ჩვენი საიტზე ღია ლურჯი ფონის და ზოგიერთი bolded ტექსტი. 

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

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

TOMAS Reimers: მოდით სახის dissect ამ. ასე რომ გსურთ დაიწყება ერთად selector აქ? 

ALLISON BUCHHOLTZ-AU: ჰო. როგორც მე ამბობდა ადრე, სხეულის არის მხოლოდ ჩვენი selector აქ. ასე რომ, თუ ჩვენ დავბრუნდებით მეტი ჩვენი index-- ah. 

TOMAS Reimers: რომელი მე უბრალოდ დახურულია. მომეცი მეორე. ასე ფაილი, ღია, index.html. ALLISON BUCHHOLTZ-AU: Cool. ასე რომ, თუ თქვენ შეამჩნევთ აქ, ჩვენ აქვს ამ სხეულის tags, არა? ასე selector მხოლოდ შეესაბამება tags, რომ ჩვენ ვსაუბრობთ. ასე ორგანოს უფლება აქ. ასე რომ, ჩვენ ვამბობთ, რომ არის everything-- შეგვიძლია დავუბრუნდეთ? ვუსურვებ შემეძლო მხოლოდ როგორიცაა შეეხოთ ეკრანზე. ეს მინდა იყოს იმდენად ქულერი. 

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

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

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

ALLISON BUCHHOLTZ-AU: ასე რომ ეს არის ყველა ორგანოს, მაგრამ ახლა ჩვენი selector მხოლოდ შეესაბამება პუნქტში. ასე რომ, ჩვენ უბრალოდ უნდა თამამი და ლურჯი ამ კონკრეტული პუნქტის, იმიტომ, რომ ეს არის ერთადერთი, რომ არის ჩასმული p ტეგით. 

TOMAS Reimers: არა, რომ აზრი სახის როგორ რამ encapsulate სხვა რამ? ALLISON BUCHHOLTZ-AU: ასევე, ვთქვათ, როგორიცაა, ერთ ერთი საუკეთესო გზა ნამდვილად კომფორტულად CSS არის უბრალოდ რამ, როგორიცაა ამ, სცადეთ ის გარეთ. ეს ძალიან მარტივია აკრიფოთ რაღაც გარეთ, მოხვდა განახლება, და ვნახოთ, რა მოხდება. და როგორც ყველაზე CS, ექსპერიმენტების ხშირად გამოიწვიოს, ბევრად უკეთესი ინტუიტიური გაგება. უფრო მეტადაც, ვიდრე ჩვენთან, უბრალოდ, როგორიცაა, საუბარი თქვენ. 

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

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

ALLISON BUCHHOLTZ-AU: I ვფიქრობ, შეგიძლიათ გამოიყენოთ hex. არ შეგიძლია? 

TOMAS Reimers: ჰო. ასე რომ თქვენ შეგიძლიათ გამოიყენოთ hex. მაგრამ მე ვფიქრობ, სახელი ბრძენი. ასე არ არის? ALLISON BUCHHOLTZ-AU: შეგიძლიათ გააკეთოთ საკმაოდ. საკმაოდ ჰგავს ყველაზე ფერები, რომ თქვენ შეგიძლიათ name--, როგორიცაა, მე ვფიქრობ, ორაგული არის ერთი. 

TOMAS Reimers: ჩვენ კარგად ლელო ორაგული. ALLISON BUCHHOLTZ-AU: I ვფიქრობ, chartreuse არის იქ. TOMAS Reimers: ჰო. ვხედავ? ასე რომ თქვენ შეგიძლიათ მიიღოთ საკმაოდ შემოქმედებითი. 

ALLISON BUCHHOLTZ-AU თქვენ შეიძლება კიდევ საკმაოდ შემოქმედებითი. ასე, თუ თქვენ შეიძლება ვიფიქროთ, ფერის სახელი, ალბათ არსებობს. თუ თქვენ ნამდვილად გსურთ ჯარიმა დეტალური, შეგიძლიათ გადადით hex. 

TOMAS Reimers: ჰო. ასე თექვსმეტობითი. თუ ბიჭები გახსოვთ ეს უკან თქვენი ძველი PSET, გამოსახულების აღდგენა, თქვენ ბიჭები უნდა გაუმკლავდეთ ამ hex ღირებულებებს. და ერთგვარი, რომ Recap რა არის, hex აქვს სამი ფასეულობა ინახება იგი. ასე რომ, ეს ჯგუფი ორი მდე. პირველი ორი წარმოადგენს წითელი მნიშვნელობა. მეორე წარმოადგენს მწვანე მნიშვნელობა. და ბოლოს ერთი არის ლურჯი? 

ასე FF ხდება წარმოადგენს თექვსმეტობითი 255. ასე რომ თქვენ გაქვთ 255 წითელი, 255 მწვანე და 0 ლურჯი. და ღირებულებების მერყეობს 0-დან 255. 

აუდიტორია: მარჯვენა. ასე რომ, არსებითად, ჩვენ ვერ ძიება ინტერნეტში ნებისმიერი ფერი, ჩვენ გვინდა, და იდენტიფიცირება რეალურად ცნობილი ფერი სპექტრი combo, და მაშინ ჩვენ ვერ დააყენა ეს? ALLISON BUCHHOLTZ-AU: ზუსტად. ასე რომ თქვენ გაქვთ საკმაოდ ბევრი სრული კონტროლი მეტი ფერები გსურთ ფარგლებში CSS. ჩვენ ვაპირებთ ვისაუბროთ ფონის სურათები მოგვიანებით? თუ გვინდა ამის გაკეთება? 

TOMAS Reimers: ჰო. აბსოლუტურად. ასე რომ, პირველი, რომ გაჩვენოთ, წითელი და მწვანე არის ყვითელი. და თუ საჭიროა გარკვეული დაეხმარება მოძიებაში, თქვენ შეგიძლიათ Google რაღაც როგორიცაა "color picker". ALLISON BUCHHOLTZ-AU: ოჰ, ეს იმდენად კარგი. მე მიყვარს ფერი Picker. 

TOMAS Reimers: colorpicker.com არის კარგი მაგალითი. და აქ, თქვენ ნახავთ, რომ თქვენ გაქვთ სრული Photoshop მსგავსი ფერის ამომრჩევი. 

ALLISON BUCHHOLTZ-AU: Mm-hm. გარდა ამისა, მაგარი რამ ხარ შეგიძლიათ გენერირება ფერადი სქემები ასე რომ თქვენ არ აქვს, როგორიცაა, მოწინააღმდეგე ფერები. TOMAS Reimers: და მაშინ აქ არის hex მნიშვნელობა აქ. ასე რომ თქვენ ყოველთვის შეგიძლიათ იპოვოთ ამჟამად, ძირითადად, ადგილების მისაღებად hex მნიშვნელობა. ეს არ არის ერთგვარი, რომ უბრალოდ, მოსწონს, ჩვენ იხილეთ ფერები მსოფლიოში ნომრები. ეს უფრო, რომ ჩვენ წავიდეთ ონლაინ და იპოვოს რა ფერის ჩვენ გვინდა, და მერე ნომერი down. იმიტომ, რომ ეს უბრალოდ მართლაც ადვილი გზა მითითებას რამ CS. 

ALLISON BUCHHOLTZ-AU: და შემდეგ იქ also-- მე დაგვავიწყდეს ზუსტი სახელი საიტზე. მაგრამ იქ ნამდვილად, მე ვფიქრობ, რაღაც Adobe რომელიც ქმნის ფერადი სქემები, თქვენ, რომელიც ნამდვილად მაგარი, რადგან თქვენ definitely-- ეს ზოგჯერ იმისთვის, რომ გაერკვნენ, oh, თუ მინდა, რომ ეს ფერი, რა შეიძლება იყოს კიდევ ერთი სასარგებლო ერთი გამოიყენოს სხვაგან ჩემი საიტი, როგორიცაა, რათა ის ლამაზი და შეკრული. 

TOMAS Reimers: Allison ის ვსაუბრობთ ერთი Adobe მოუწოდა Kuler, ვფიქრობ. ეს K-U-L-E-R. ALLISON BUCHHOLTZ-AU: მე ასე ვფიქრობ. მე დარწმუნებული ვარ, რომ ის ერთი. 

TOMAS Reimers: ჩემი საყვარელი აქვს ყოველთვის ფერადი სქემა დიზაინერი. 

ALLISON BUCHHOLTZ-AU: Ooh. 

TOMAS Reimers: რა არის ახლა 

ALLISON BUCHHOLTZ-AU: Ah, ეს არის ლამაზი. 

TOMAS Reimers: თქვენ შეგიძლიათ ძირითადად ამბობენ, როგორიცაა, მინდა სამი ფერის შემდეგი ერთმანეთს. და მაშინ მოდით გავაკეთოთ რაღაც ლამაზი. და შემდეგ შეგიძლიათ მიიღოთ მაგალითად რა შეიძლება, რომ ჰგავს. და მაშინ, თუ თქვენ hover ნებისმიერი მათ, გაძლევთ hex ღირებულება. 

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

უკან ფაქტობრივი CSS. ALLISON BUCHHOLTZ-AU: მაგრამ ცხადია, ჩვენ იცით, ამ ცნობას შეიძლება იყოს სასარგებლო. TOMAS Reimers: არა, ისინი ნამდვილად შეიძლება იყოს სასარგებლო. ასე რომ, მეორე წესი, Allison? 

ALLISON BUCHHOLTZ-AU: ჰო. მეორე წესი ის არის მხოლოდ შესაბამისი ჩვენი font. ასე შრიფტის წონა არის მხოლოდ სახის of-- ამიტომ წონა გვინდა იქნება თუ გსურთ უბრალოდ, მოსწონს, ნორმალური ან, ისევე, თხელი შრიფტები, ან ამ შემთხვევაში, ისევე, თამამი. მე დაგვავიწყდეს. რა არის, თუ თქვენ სურდა it-- არის თხელი, ვიდრე უბრალოდ, მოსწონს, ნორმალურია? TOMAS Reimers: მე არ რეალურად ვიცი, თუ არსებობს თხელი ერთი. ALLISON BUCHHOLTZ-AU: მე დაგვავიწყდეს. ასე შრიფტის წონა ჩვენ, როგორც წესი, უბრალოდ გამოიყენოთ თამამი. თუ გსურთ მიიღოთ მართლაც შევიდა ის, რომ ჩვენ ვაპირებთ, რომ ნახოთ თქვენ. W3Schools აქვს ყველა სხვადასხვა რამ რისი გაკეთებაც შეგიძლიათ შრიფტები. მაგრამ ძირითადად, თუ თქვენ ოდესმე გვინდა არაფერს შეცვლის შრიფტის, ის ყოველთვის იქნება, როგორიცაა, font-რაღაც. ასე რომ, ეს იქნება, როგორიც, font-family თუ თქვენ ცდილობს შეცვალოს ფაქტობრივი ტიპის. ეს იქნება font-style, თუ გინდათ ის, როგორიცაა cursive, ან დახრილი, ან whatnot. ან თუნდაც font-ფერი, თუ გვინდოდა, რომ შეიცვალოს. 

TOMAS Reimers: Yup. ასე რომ თქვენ შეგიძლიათ შეცვლის. და სახის უბრალოდ recap ახლა, ასე რომ თქვენ შეგიძლიათ , რომ ჩვენ გვაქვს selector აქ. ჩვენ გვაქვს ამ Curly braces. და მაშინ ჩვენ გვაქვს წესები delimited მიერ semicolons. ამჯამად რომ აზრი? ჰო? მაგარი. ასე რომ, თუ არის good-- 

ALLISON BUCHHOLTZ-AU: Back. TOMAS Reimers: ვისაუბროთ კონკრეტულად რა სახის სელექციონერები გვაქვს. 'Cause ახლავე ჩვენ სახის უბრალოდ ნაჩვენები tags. მაგრამ თქვენ ბიჭები ვერ ვხედავ, რომ დამაჯერებელი. ვთქვათ თქვენ გაქვთ ორი პუნქტის გვერდზე და თქვენ გსურთ შეძლებს სტილი ერთი, მაგრამ არა სხვა, თქვენ არ მხოლოდ სურს ზღუდავს საკუთარ თავს უნდა გამოვიყენოთ სხვადასხვა აქტუალურ HTML tags, რათა მათ სხვადასხვა სტილის. 

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

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

სხვა ერთი გვაქვს არის id, რომელიც ჩვენ აღინიშნოს hash, ან ფუნტი, ან hashtag. TOMAS Reimers: ოქტოტორფი. ALLISON BUCHHOLTZ-AU: ოქტოტორფი. რომელიც მუშაობს, ძალიან. და ეს ერთი ნამდვილად უნდა იყოს უნიკალური. მათ უნდა მხოლოდ ვრცელდება ერთი რამ თქვენს გვერდზე. ასე თუ არა, რომ კონკრეტული პუნქტის, ან რაიმე ელემენტის სიაში, ან რასაც, ეს უნდა იყოს უნიკალური. და იმ გზით, რომ ჩვენ უბრალოდ ამბობენ, ისევე, class = "Class1 class2" ეს შეიძლება იყოს მხოლოდ id რასაც ჩვენ გვაქვს. TOMAS Reimers: ჰო. ასე რომ, მოდით ნამდვილად გაიგო შესახებ მაგალითები აქ. და მე უბრალოდ აპირებს ჩაყვინთვის სწორი ისევ კოდი. ასე რომ, მოდით შევხედოთ ჩვენი HTML. ასე რომ, ჩვენ ახლა აქვს ერთ პუნქტში. ეს არის ტექსტი. მე უბრალოდ აპირებს ცვლილებები მას. "ეს არის ტექსტი 1." და მაშინ ჩვენ ვაპირებთ აქვს "ეს არის ტექსტი 2." 

ALLISON BUCHHOLTZ-AU: Second ერთი. TOMAS Reimers: Yup. ამიტომ, ჩვენ ახლა "ეს არის ტექსტი, 2," უფლება? და ჩვენ ვაპირებთ, რომ თუ ჩვენ განაახლეთ გვერდი, რასაც ჩვენ ვაპირებთ, რათა იპოვოს არის, რომ ჩვენ კარგად find-- ALLISON BUCHHOLTZ-AU: Ooh. TOMAS Reimers: ჰო. ჩვენ ვაპირებთ, რათა იპოვოს "ეს არის ტექსტის 1 "და" ეს არის ტექსტი 2. " 

ALLISON BUCHHOLTZ-AU: და out lovely ყვითელი ფერი. 

TOMAS Reimers: და დაინახავთ რომ ჩვენი selector ახლა, რომელიც ეხება p მიერ, ან პუნქტები, გავლენას ახდენს ორივე მათგანი, რადგან ორივე მათგანი შეხვდება პირობით, რომ ისინი ორივე p tag. რომ რაც საერთო აზრი. ასე რომ, კითხვა, ასევე, რა თუ გვინდოდა მხოლოდ ერთი? ასე ზუსტად ისევე, Allison ამბობდა, ჩვენ გვაქვს ორი სხვა გზები უნდა გავაკეთოთ, რომ. მე ვაპირებ, რომ დაიწყოს id. 

ALLISON BUCHHOLTZ-AU: მოდით დავიწყოთ id. 

TOMAS Reimers: ორივე ეს არის ატრიბუტები. ასე ატრიბუტები არსებობს HTML. და რასაც ისინი არის რაღაც, რომ თქვენ დაამატოთ შიგნით tag რომელიც გამოეყოს tag სახელი. ასე რომ თქვენ შეგიძლიათ აქვს მრავალი ატრიბუტები. ჰო? 

ALLISON BUCHHOLTZ-AU: მე უბრალოდ აპირებს ვთქვათ, თქვენი მაგალითი pset 7, თუ რომელიმე თქვენგანი ცდილობენ უერთდებიან რამ ცენტრში, თქვენ შეიძლება არ გამოიყენება "Text უერთდებიან = ცენტრი." და შენიშნა ეს, ალბათ, უნდა ორიენტირებული ტექსტის ან თქვენი ნავიგაცია ბარი. ასე რომ, მხოლოდ ასევე ატრიბუტი რომ თქვენ შეიძლება იცნობს. TOMAS Reimers: არსებობს რამოდენიმე ატრიბუტები, რომ დაინახავთ. Yeah. ისევე როგორც კარგი მინიშნება pset 7. ჩვენ გვაქვს id. ასევე, შეგიძლიათ აქვს კლასი, რამ მოსწონს ეს. ერთ tag შეიძლება ბევრი ატრიბუტები. ასე იწყება id, მოდით ვითომ ჩვენ გსურთ აქვს id of-- მე არ ვიცი. ჩვენ მოვუწოდებთ მას განსაკუთრებული, რადგან ეს ერთი, ჩვენ ვაპირებთ, რათა თამამი და ხაზგასმა და რასაც. ALLISON BUCHHOLTZ-AU: ეს კარგად იქნება სუპერ სპეციალური. TOMAS Reimers: ასე რომ, ეს ერთი, ჩვენ გვაქვს id განსაკუთრებული. ასე რომ გზა აირჩიოთ, რომ მაშინ, in main.css, ვიდრე აქვს p tag, თქვენ ამის #special, OK? და რომ ირჩევს რამ id განსაკუთრებული. ნიშნავს თუ არა ეს აზრი, რომ ყველასთვის? აუდიტორია: Yeah. TOMAS Reimers: Cool. ასე რომ, ახლა თუ ჩვენ დავუბრუნდებით, ჩვენ ყველაფერს ვხედავ whoops. Yeah. ჩვენ დავინახავთ, რომ იგი მხოლოდ ირჩევს ერთი id განსაკუთრებული. ჰო? ხმები cool. დიახ. 

აუდიტორია: რაღაც აქვს მიეწერა, როგორც კლასის და id? 

TOMAS Reimers: დიახ. აუდიტორია: OK. და მერე რა მოხდება, თუ თქვენ მაშინ მისცეს მას გარკვეული წესების CSS, რომ კონფლიქტი? TOMAS Reimers: რა თქმა უნდა. ჩვენ აუცილებლად აპირებს ლაპარაკი იმაზე, რომ. ისე ზუსტად რა თქვენ იღებდნენ დროს, ასევე შეგიძლიათ კლასების. მოდით ვითომ მე მქონდა სამი პუნქტი და მე სასურველი სტილის პირველი ორი, მაგრამ არა მესამე. ასევე, თქვენი პირველი იდეა, შეიძლება, ასევე, მე ვერ უბრალოდ მისცეს მეორე id. მაგრამ თქვენ არ შეგიძლიათ, რადგან id, ზუსტად ისევე, როგორც Allison ამბობდა, უნდა იყოს უნიკალური. 

ასე რომ, ნაცვლად id, რაც თქვენ შეგიძლიათ გამოიყენოთ შეგიძლიათ გამოიყენოთ კლასი. და class--, რაც საშუალებას თქვენ უნდა გავაკეთოთ არის ძირითადად ამბობენ, ეს ეკუთვნის ნაწილი ჯგუფი. ამ შემთხვევაში, ჩვენი ჯგუფი ეწოდება სპეციალური. და რასაც ჩვენ ვაპირებთ გავაკეთოთ შემდეგ არის ჩვენ ვაპირებთ, რომ ვთქვა, ვიდრე ფუნტი, ჩვენ ვაპირებთ გამოვიყენოთ dot. OK? და შეამჩნია, რომ ფუნტი და dot მხოლოდ არსებობს ფარგლებში CSS ფაილი, არ ფარგლებში HTML. ALLISON BUCHHOLTZ-AU: დიახ. მნიშვნელოვანი განსხვავება. 

TOMAS Reimers: მე მაქვს იმდენი ბრძოლა, იმიტომ, რომ მე დააყენა hash in HTML და მაშინ უბრალოდ იგრძნო სულელური დიდი ხნის განმავლობაში. აგრეთვე, თუ როგორ ირჩევს ორივე პირობა, რომ კლასში? მაგარი. 

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

ALLISON BUCHHOLTZ-AU: შესაძლოა არ რეკომენდირებულია, რომ თქვენი ნახვა. მაგრამ ჩვენი მიზნებისთვის, ის ყველაფერს გააკეთებს. 

TOMAS Reimers: ეს არ არის კარგი ფერი სქემა. ALLISON BUCHHOLTZ-AU: ისე, ყვითელი და ლურჯი არის ჩემი უმაღლესი სკოლის ფერები. მე არ ვიცი, თუმცა. TOMAS Reimers: Allison მაღალი სკოლა არ ჰქონდა დიდი ფერადი სქემა. [სიცილი] ასე შემდეგ, რაც ჩვენ შეგვიძლია ვუწოდოთ არის მოდით მოვუწოდებთ ამ ამიტომ ჩვენ გვაქვს სპეციალური და ჩვენ უნდა Pretty. მე გთავაზობთ, ამ, თქვენ იყენებთ ბევრად უფრო აღწერითი სახელები. ALLISON BUCHHOLTZ-AU: ჰო, მე დარეკეთ ამ, ისევე, ყვითელი ან ლურჯი. 

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

ასე ფონის ფერი. და მაშინ ჩვენ ვაპირებთ ამბობენ ასე გზა შეცვალოს ფერი არის მხოლოდ "ფერადი". და ჩვენ ვაპირებთ, რათა ის ლურჯი. სწორედ ზემოთ. ასე რომ, ახლა ჩვენ გვაქვს პირველი ორი აქვს განსაკუთრებული. შემდეგი ერთი აპირებს აქვს "class = საკმაოდ". ALLISON BUCHHOLTZ-AU: და მაშინ თქვენ გსურთ დაამატოთ "ლამაზი" შუა ერთი. TOMAS Reimers: Yup. და შემდეგ შუა ერთი, დამატება "საკმაოდ," რა ხდება არის უბრალოდ აქვს სივრცეში. ასე კლასი ატრიბუტი არის სივრცე-გამოყოფილი სია ყველა კლასი რომ მიმართოს, რომ აქვს. OK? ეს არ არის, როგორც ეს ერთი ეკუთვნის რაიმე სახის განსაკუთრებული კლასის მოუწოდა "განსაკუთრებული, სივრცე, საკმაოდ". ის მიეკუთვნება ორ classes-- განსაკუთრებული და ლამაზი. დიახ? მაგარი. 

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

ALLISON BUCHHOLTZ-AU: --has თამამი ყვითელი ფონზე ლურჯი ტექსტი. და ჩვენი ბოლო ერთი უბრალოდ აქვს ლურჯი ტექსტი, რომ ჩვენ ენიჭება მას. 

TOMAS Reimers: Cool? როგორ სელექციონერები მუშაობს? გასაოცარია. 

ALLISON BUCHHOLTZ-AU: გვინდა ვისაუბროთ კონფლიქტი მაშინ? 

TOMAS Reimers: ასე yeah. აბსოლუტურად. რა მოხდება, თუ თქვენ კონფლიქტი, არა? მოდით ვიტყვი პირველი ქმნის რაღაც მსგავსი ALLISON BUCHHOLTZ-AU: Maybe ეს ერთი ცვლის ფონზე? TOMAS Reimers: ჰო. ასე რომ, ჩვენ ვაპირებთ, რომ "ლამაზი" შეცვლის ფონზე ორაგული. ALLISON BUCHHOLTZ-AU: თქვენ მხოლოდ ყველა დიდი ფერები დღეს, Tomas. TOMAS Reimers: ჰო. იმიტომ, რომ მე გავარკვიე საიტიდან გამოყენების ორაგული, როგორც რეალური ფერი. ასე რომ, ჩვენ მხოლოდ აპირებს ამის გაკეთებას. მე ასევე ვფიქრობ Sunset არის რეალური ფერი. აუდიტორია: Sunset რეალური ფერი? ALLISON BUCHHOLTZ-AU: მოდით ცდილობენ. TOMAS Reimers: მას შემდეგ, რაც ამ დემო მხოლოდ იმიტომ, რომ იმ შემთხვევაში, თუ ის messes, მე არ მინდა, რომ იყოს გამართვის. ასე რომ, ჩვენ ვიცით, ორაგული რეალური ფერი. ასე რომ, ნებისმიერი მიხვდება რა მოხდება? 

ALLISON BUCHHOLTZ-AU: ნებისმიერი იდეა? 

აუდიტორია: [INAUDIBLE]. 

TOMAS Reimers: ჰო. ასე რომ თქვენ გაქვთ ეს სწორედ. ძირითადად, ის იღებს ბოლო გამორიცხავს, ​​რომ ეს გადაეცა. 

ALLISON BUCHHOLTZ-AU: ასე რომ, ეს არის სადაც კასკადური ძალაში. 

TOMAS Reimers: ასე მახსოვს, თუ როგორ ჩვენ ჰქონდა, რომ კასკადური სტილების? ასე რომ, ჩვენ ასეთი ნიშნავს რომ ჩვენ გვაქვს რამოდენიმე წესები რომელიც ვრცელდება თავზე ერთმანეთს და მათ შეუძლიათ აგრეთვე override ერთმანეთს. 

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

TOMAS Reimers: ან იქნებ არ მინდა, რომ გადავაწერო წესები. 

ALLISON BUCHHOLTZ-AU: ან იქნებ გავაკეთოთ. დიახ. 

TOMAS Reimers: თითქოს თქვენ გაქვთ კლასი, რომელიც ეხება ყველაზე რამ, მაგრამ ვთქვათ თქვენ გსურთ შეცვალოთ ფონის ფერი წითელი და font წონა თამამი ყველაზე რამ, მაგრამ ერთი, თუ გსურთ მხოლოდ ფონის ფერი იყოს წითელი, მაგრამ გსურთ ყველა სხვა თვისებების, თქვენ შეიძლება რაღაც როგორიცაა "font-weight = ნორმალურია" რომელიც მაშინ გაუქმება, რომ თამამი ცვლილება. ჰო? ერთხელ, საუკეთესო გზა, მე ვფიქრობ, Allison განაცხადა, რომ ის, უბრალოდ პრაქტიკაში. 

ALLISON BUCHHOLTZ-AU: ექსპერიმენტების. 

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

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

TOMAS Reimers: არა, არ არის. 

ALLISON BUCHHOLTZ-AU: რა მნიშვნელობა აქვს, იმისათვის, თქვენი CSS სტილის ფურცელი. აუდიტორია: იქნებ ვიმეორებ კითხვას? TOMAS Reimers: Oh. ALLISON BUCHHOLTZ-AU: Within კლასი, როდესაც თქვენ ლექციების რაღაც HTML, აკეთებს ის მნიშვნელობა, რომელიც წესრიგს ისინი წელს? არ აქვს მნიშვნელობა მიზნით. რა მნიშვნელობა აქვს არის ბრძანებით კლასის სელექციონერები თქვენი CSS, თქვენი სტილის ფურცელი. 

TOMAS Reimers: Sound კარგი? 

ALLISON BUCHHOLTZ-AU: Lovely. 

TOMAS Reimers: და მაშინ ჩვენ ვაპირებთ გავაგრძელოთ, რომელთა მიზანია: ALLISON BUCHHOLTZ-AU: რა გვაქვს შემდეგი? მე დაგვავიწყდეს. Oh, ჩვენ უბრალოდ უნდა მაგალითები. მაგრამ ჩვენ სახის გააკეთა იმ. ჩვენ გავაკეთეთ მაგალითები on the fly. 

TOMAS Reimers: ჩვენ მისაღებად გაერთიანდება სელექციონერები მალე. 

ALLISON BUCHHOLTZ-AU: Oh, მივიღებთ, რომ გაერთიანდება სელექციონერები. TOMAS Reimers: ასე მაგალითები გვაქვს, # Dog-- ფუნტი, ან hashtag, ან ოქტოტორფი, ან რასაც თქვენ მინდა მოვუწოდო that-- მკვეთრი. 

ALLISON BUCHHOLTZ-AU: Sharp ძაღლი. 

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

ასე რომ, მოდით დავუბრუნდეთ კოდი და დანერგვა another-- yeah. ასე რომ, ისევ აქ. 

ALLISON BUCHHOLTZ-AU: I გრძნობს, როგორც ეს არის ნამდვილად მინდა უბრალოდ გადახედეთ მაგალითები ნამდვილად გზა უნდა ვისწავლოთ ამ. ისე, რომ ის, რასაც ჩვენ ვაკეთებთ. 

TOMAS Reimers: მოდით ვითომ ჩვენ მხოლოდ უნდა აირჩიოთ text 2, არა? ასე რომ, ჩვენ ნამდვილად არ შეიძლება გავაკეთოთ, რომ id. ასევე, ჩვენ შეგვიძლია გავაკეთოთ, რომ ერთად id, მაგრამ ეს არ უნდა id. მე ვერ დავამატებთ, მაგრამ მოდით ვიტყვი რომ მე არ მინდა, რომ დაამატოთ ერთი ან ეს უკვე რაღაც. მე არ შემიძლია, რომ ამ. აქვს ნამდვილად არ არის უნიკალური, არა? და არც არის კლასი. მაგრამ თქვენ შეგიძლიათ დააკავშიროთ ეს ყველაფერი. ვთქვათ, ჩვენ გვინდოდა, რომ რამე რომელიც ეხება მხოლოდ იმას, რაც გვაქვს კლასის სპეციალური და რომელსაც აქვს კლასი საკმაოდ. 

ასე რომ, რა შეგიძლიათ გააკეთოთ არის main.css, შეიძლება ითქვას, მოდით პირველ წაშლა. თქვენ შეგიძლიათ დააკავშიროთ ეს. ასე რომ თქვენ შეგიძლიათ .special. არ სივრცეში. უბრალოდ .special.pretty. იმას ნიშნავს, რომ რაღაც რომელიც, როგორც განსაკუთრებული და ლამაზი. ამჯამად რომ აზრი? თუ ჩვენ აქ, რა თქვენ ვაპირებთ, არის ეს წესი ვრცელდება მხოლოდ მეორე, რომელსაც აქვს ორივე. და შეგიძლიათ გააკეთოთ, რომ ბევრი რამ. თქვენ შეგიძლიათ ვთქვათ მოდით ვითომ მე მხოლოდ მინდოდა უნდა გააკეთოს, რასაც აქვს კლასი საკმაოდ და რომლებიც ასევე პუნქტის აქვს. ასე p.pretty. მოდით ვიტყვი, რომ მე მქონდა რაღაც საკმაოდ on tag ორგანოს. OK? შემიძლია აწარმოებს და მე ხედავთ, რომ ეს მხოლოდ აპირებს მიმართოს, რასაც პუნქტის კლასის საკმაოდ. და თქვენ შეგიძლიათ დააკავშიროთ ეს, ძირითადად, როგორც ბევრი როგორც თქვენ გსურთ. ასე რომ თქვენ შეგიძლიათ განათავსოთ მათ ერთად. ამჯამად რომ აზრი? ALLISON BUCHHOLTZ-AU: ასე ამ სახის უფრო სასარგებლო როდესაც, Tomas ამბობდა ადრე, შესაძლოა, თქვენ გაქვთ ძალიან რთული ნახვა, და თქვენ უკვე გაქვთ ბევრი ამ წესების დაწერილი, და თქვენ უბრალოდ უნდა აერთიანებს ორ წლამდე. როგორიცაა ნაცვლად წერა მთელი ახალი selector და შეცვლის, იქ, თქვენ შეგიძლიათ მხოლოდ დააკავშიროთ მათ, სადაც იგი ემთხვევა. 

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

ALLISON BUCHHOLTZ-AU: Good იმ სახის გამონაკლისი. TOMAS Reimers: ასე რომ, ფიქრი პრობლემების რომლებიც შეიძლება წარმოიშვას, როდესაც თქვენ დააკავშიროთ მათ. მაგარი. ასე რომ თავში ჩვენი პრეზენტაცია. ALLISON BUCHHOLTZ-AU: ჩვენ თითქმის არ არსებობს. TOMAS Reimers: ეს შეჩერდა აკავშირებს. ALLISON BUCHHOLTZ-AU: ო, არა. ALLISON BUCHHOLTZ-AU: CS ზე office, internet მიდის ქვემოთ. Oh, ირონია. 

TOMAS Reimers: ასე რომ საბედნიეროდ, ჩვენ შეგვიძლია წარმოადგინოს გარეშე ინტერნეტით, ვფიქრობ, იმიტომ, რომ ჩვენ ყველა სლაიდები აქ. ასე რომ, მოდით ვისაუბროთ ურთიერთობა tags. ALLISON BUCHHOLTZ-AU: Right. ასე რომ მხოლოდ სახის აპირებს off რა Tomas განაცხადა, ეს არის კიდევ ერთი გზა ამის გაკეთება. ასე რომ, ჩვენ გვაქვს მშობელი არჩევის ბავშვთან ერთად selector. ასე რომ ამ მაგალითში, ჩვენ გვაქვს სხეულის კლასის navbar, კლასის ღილაკს. Ah. 

TOMAS Reimers: ოჰ, უკაცრავად. 

ALLISON BUCHHOLTZ-AU: და ძირითადად, რას ნიშნავს ეს არის აირჩიეთ ყველა ბავშვები, ისევე როგორც ყველა ამ სახის სელექციონერები ამ მშობელი selector. და ეს არის ერთადერთი პირობა, ეს ოდესმე აპირებს მიმართოს. მე არ ვიცი, თუ აქვს უკეთესი გზა of-- TOMAS Reimers: So I გამოვიცნოთ გზა ვფიქრობ ეს არის ის, მახსოვს, ადრე, თუ როგორ ჩვენ ერთგვარი მოსწონს ისინი ერთად. და მაშინ ეს იმას ნიშნავს ერთი ელემენტი რომელიც შეესაბამება ყველა ამ. რას გვეუბნება ეს არის, მე გვინდა, რომ თქვენ ემთხვევა ყველაფერი ფარგლებში some-- მინდა თქვენ მოძიების selector. და შემდეგ შიგნით რომ, მინდა თქვენ ემთხვევა ახალი რამ. არა? ასე რომ, CSS, ეს ყველაფერი ერთგვარი მიმდინარეობს შეუძლია ემთხვევა ეს საკითხი. და თქვენ შეგიძლიათ ცდილობენ ემთხვევა ნივთები ფარგლებში სხვა ნივთები. 

მოდით რეალურად ამის გაკეთება, მაგალითად, და ვფიქრობთ, რომ გაერკვია. მოდით ვითომ ჩვენ გვაქვს სპეციალური, სპეციალური საკმაოდ, რასაც. და მაშინ ჩვენ გვაქვს ბმული, OK? ასე მახსოვს, არის ლინკი. ის არ აპირებს არსად. და ჩვენ ვაპირებთ, რათა ეს კლასი ბმული, ვფიქრობ. მოდით მივცეთ მას class-- მომეცი იდეა. ALLISON BUCHHOLTZ-AU: Cool. TOMAS Reimers: Coo-- მოდით წასვლა კლასი საკმაოდ. რატომ არა? 

ALLISON BUCHHOLTZ-AU: OK. TOMAS Reimers: ასე ახლა საკმაოდ რამ ვაპირებთ ფონზე ლურჯი, ფერის ორაგული. ეს აზრი. და თუ ჩვენ ამის გაკეთება 

ALLISON BUCHHOLTZ-AU: გინდათ დაამატოთ ტექსტი ასე ჰიპერბმულის რეალურად გვიჩვენებს up? TOMAS Reimers: ეს იქნება კარგი ზარი. ALLISON BUCHHOLTZ-AU: 'Cause უფლება ახლა ჩვენ უბრალოდ კარგად არაფერი. TOMAS Reimers: ასე რომ, ეს არის ლინკი. "ეს არის ბმული". Oh, და ამ აპირებს კიდევ ერთი რგოლი. მოდით მივცეთ მას კლასი "მაგარი". თქვენ უფლება. მაგარი. ასე რომ, ახლა ჩვენ ვაპირებთ, რომ აითვისებდა. ჩვენ ვაპირებთ, რომ იმისათვის, რომ ერთი. ჩვენ გვაქვს ერთი სპეციალური tag, და ჩვენ ასევე ვაპირებთ აქვს ერთი საკმაოდ აქვს. და ახლა რა ჩვენ ვაპირებთ რომ არის ჩვენ ვაპირებთ, რათა cool-- რა გვინდა ამის გაკეთება? ALLISON BUCHHOLTZ-AU: შეგვიძლია ეს უფრო დიდი? TOMAS Reimers: მოდით მივცეთ მას საზღვარი. ALLISON BUCHHOLTZ-AU: ჩვენ შეგვეძლო ესაზღვრება. TOMAS Reimers: ჰო. ამიტომ, ჩვენ ვაპირებთ, რომ რამე როგორიცაა, საზღვრის is-- და ჩვენ ვაპირებ ახსნას ეს ყველაფერი მეორე. ამისთვის ახლა 

ALLISON BUCHHOLTZ-AU: ყუთი მოდელი. TOMAS Reimers: მაგრამ ახლა, ჩვენ უბრალოდ აპირებს იგი საზღვარი. ასე იმას ნიშნავს, რომ თქვენ აპირებს ვხედავ, რომ ეს კავშირები. და თქვენ ვაპირებთ, რომ მათ აქვთ ეს, ისევე, მახინჯი შავი საზღვრები არის მაგარი. 

ALLISON BUCHHOLTZ-AU: ჩვენი საიტი ასე ნამდვილად. 

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

მაგრამ ჩვენ გვინდა, რომ მხოლოდ ენერგია კლებულობს რომლებიც კლასში განსაკუთრებული, არ კლასში საკმაოდ, უნდა ჰქონდეს, რომ საზღვარზე. ისე, თუ რა შეგიძლიათ გააკეთოთ შეიძლება ითქვას, .special, სივრცე, .cool. და რა რომ აკეთებს, როდესაც ფიქრობთ ამის შესახებ, არის ის, ძირითადად ამბობდა, OK, იპოვოს ჩემთვის ყველაფერი რომ შეესაბამება განსაკუთრებული. მაშინ ფარგლებში იმ tags, იპოვოს ჩემთვის ყველაფერი, რაც ზემოთ. ALLISON BUCHHOLTZ-AU: ასე რომ სხვა გზა რომ კარგი იქნებოდა ფიქრი ამ, შემოტანა მას თავში C, ისევე, როგორც იდეა ფარგლებს. ასე რომ, როდესაც თქვენ გაქვთ გარკვეული selector, ისევე როგორც პირობა რომ ჩვენ უკვე მუშაობა ადრე, თქვენი მთელი ვებ გვერდზე, ყველა თქვენი HTML არის თქვენი ფარგლებს, არა? მაგრამ როდესაც ჩვენ გვაქვს ეს მშობლისა და შვილის ურთიერთობის, თითქოს თქვენ შევიწროება ქვემოთ, სადაც თქვენ ეძებთ კონკრეტული ადგილი, თითქოს, როგორიცაა, ჩვენ ვეძებთ ფარგლებში კონკრეტული ფუნქცია ნაცვლად ჩვენი მთელი ფაილი. აუდიტორია: ასე, რომ გონება, რომ ეს იქნებოდა მნიშვნელოვანი, თუ ჩვენ გვქონდა changed-- ALLISON BUCHHOLTZ-AU: ბრძანება? აუდიტორია: --the კლასის CSS to .cool, სივრცე, .special? ALLISON BUCHHOLTZ-AU: დიახ, იმიტომ, რომ მაშინ ვიტყოდი, ფარგლებს მას ყველაფერი, რაც აქვს მაგარი, და შემდეგ შეხედეთ რა has-- ვგულისხმობ, როგორიც, ამ შემთხვევაში, მე არ ვფიქრობ, რომ შეიცვალა მას. 

TOMAS Reimers: თუ ჩვენ ვთქვით, რა? უკაცრავად. 

ALLISON BUCHHOLTZ-AU: თუ ჩვენ ფარგლებში გაგრილებას და შემდეგ ვეძებთ რამ out სპეციალური, ეს იქნება იგივე, რეალურად. 

TOMAS Reimers: ასე რომ არ იყოს. 

ALLISON BUCHHOLTZ-AU: ეს არა? ოჰ, რა კარგად. მე ვარ არასწორი. 

TOMAS Reimers: So მიზეზი ეს different-- საერთო mistake-- ის არის, რომ ახლა მხოლოდ ბმული აქვს მაგარი, არა? ვფიქრობ, ჩემი შეკითხვა, ბიჭები, რა ამ გვერდზე არის შესაბამისი .cool? არსებობს ორი tags აქ, არა? რომელიც ამ ერთი და ეს ერთი. ორივე ემთხვევა ზემოთ. სხვა არაფერი აქვს. ასე რომ, თუ თქვენ თქვით, .cool, სივრცე, .special, რაც თქვენ ვაპირებთ ვთქვა, არის, ფარგლებში ამ tags, რა არის განსაკუთრებული? ALLISON BUCHHOLTZ-AU: Hm. რომ ის, რაც it-- უფლება. იმიტომ, რომ ეს, უბრალოდ რაღაც აქ. 

TOMAS Reimers: ასე ირჩევს არაფერი. 

ALLISON BUCHHOLTZ-AU: ვინაიდან სპეციალური, ჩვენ ფარგლებში ამ tags აქ. 

TOMAS Reimers: ისინი, და იმ. აუდიტორია: OK. ასე რომ, იმ tags საწყისი ნაბიჯია slash? 

TOMAS Reimers: დიახ. ამჯამად რომ აზრი? როგორ ეს, ძირითადად, ცდილობს ვიწრო ფარგლებს. ALLISON BUCHHOLTZ-AU: ჰო. მე ვფიქრობ, რომ, ალბათ, იოლი გზა ვიფიქროთ ამაზე. 

TOMAS Reimers: ასე აღმოვაჩინეთ ეს, და ჩვენ ვნახეთ ამ ორივე შესაბამისი განსაკუთრებული. და მაშინ ჩვენ ეკითხება ფარგლებში ეს ბიჭები, რა არის მაგარი? და ამ ერთი, ეს ერთი მაგარი. ამ ერთი, არაფერი მაგარი. ასე რომ ეს არის მხოლოდ tag რომ რჩება. 

ALLISON BUCHHOLTZ-AU: ვინაიდან cool არის მხოლოდ ფარგლებში ამ tags არსებობს. TOMAS Reimers: ზუსტად. და რა არის განსაკუთრებული იმ ფარგლებში? არაფერი. ახლა, რა მინდა ვთქვა, ის არის, თუ არ იყო სივრცეში, თქვენ გეკითხებით, რა მაგარი და special-- ან რა არის ლამაზი და სპეციალური, არა? თუ ამბობენ, .special.pretty, რომ იგივე, რაც .pretty.special. 

რადგან ის, რაც მოხსნის სივრცე გეკითხებით არის, როცა ამბობენ, რომ .special, თქვენ გეკითხებით, OK, რაც პირობა არის განსაკუთრებული? და მერე იმ, რომელიც პირობა ასევე საკმაოდ, რომელიც არის იგივე, გრამატიკულად, როგორც ეკითხება, რა ლამაზია, და შემდეგ მათ, რა არის ასევე განსაკუთრებული? არა? ეს განსხვავება რა არის შიგნით რა არის. აუდიტორია: OK. TOMAS Reimers: ჰო. გასაოცარია. ასე, რომ გონება შემდეგ კი 

ALLISON BUCHHOLTZ-AU: მე ვფიქრობ, რომ ჩვენი ბოლო ის არის (ლამაზი ბრიტანული აქცენტით) ყუთი მოდელი. 

TOMAS Reimers: ყუთში [Chuckles] მე მიყვარს გზა Allison ამბობს, რომ. ასე ყუთი მოდელი რამ. 

ALLISON BUCHHOLTZ-AU: Just აქვს ყუთი, მე ვიქნები თქვენი ყუთი მოდელი. TOMAS Reimers: მოდით ვისაუბროთ, რომ. ასე რომ, ახლა ჩვენ გაატარა ბევრი დრო ვსაუბრობთ სელექციონერები. ახლა, თქვენ ბიჭები არიან ალბათ, ისევე, ოსტატები selectors-- თქვენ იცით, როგორ ზუსტად შეარჩიოს შინაარსი, გსურთ მანიპულირება თქვენს ეკრანზე. 

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

კარგი გზა ვიფიქროთ რომ არის, თუ რა ფორმის არის ორაგული? რა ფორმის არის, ისევე, ორაგული ფერის ფონზე? 

აუდიტორია: ეს მართკუთხედი. 

TOMAS Reimers: ეს მართკუთხედი, არა? 

ALLISON BUCHHOLTZ-AU: იყო არ შეასრულა კითხვაზე. [სიცილი] 

TOMAS Reimers: არ ცდილობს Trick თქვენ ბიჭები გვიან. ასე რომ, ჩვენ გვაქვს ეს მართკუთხედი. და tag არის p, არა? ასე რომ გვაძლევს კარგი რწმენა იმისა, რომ პირველი პუნქტის წარმოდგენილია, როგორც ოთხკუთხედი, at მაინც გონება ბრაუზერი, რომელიც ეს არის. 

ALLISON BUCHHOLTZ-AU: მე ვგულისხმობ, ბრაუზერები, როგორც წესი, მართკუთხა, ასე რომ აზრი. 

TOMAS Reimers: იდეა აქ არის რომ ყველა tags ფარგლებში CSS წარმოდგენილია, როგორც მართკუთხედი. და ყოველ მართკუთხედი ოთხი ნაწილები მიხედვით CSS, OK? თქვენ გაქვთ რეალური შინაარსი. რომ ის, სადაც ტექსტი დევს. 

ALLISON BUCHHOLTZ-AU: იქნებ თქვენი სურათი. 

TOMAS Reimers: ჰო. თქვენ უნდა padding, რომელიც უბრალოდ რაიმე სახის თეთრი სივრცე. მაშინ თქვენ გაქვთ საზღვარზე. და მაშინ აქვს ზღვარი, რომელიც თეთრი სივრცეში გარეთ რომ. ასე რომ აზრი არა აქვს არავის, ასე რომ ჩვენ ვაპირებთ ვისაუბროთ, რომ მეორე. ასე რომ სწორედ აქ, რასაც ჩვენ ვაპირებთ, რომ ჩვენ ვაპირებთ, რომ შევქმნათ რაღაც divs, OK? მაპატიეთ, ხოლო I-- 

ALLISON BUCHHOLTZ-AU: ვგრძნობ, ჩვენ უნდა დააყენოს cute სურათი. 

TOMAS Reimers: ჩვენ აუცილებლად უნდა. 

ALLISON BUCHHOLTZ-AU: მე ვგრძნობ, რომ ყველას შეიძლება ისარგებლოს cute სურათი, არის ყველა. 

TOMAS Reimers: შეგვიძლია ყველა სარგებელს a-- 

აუდიტორია: Yeah, რა თქმა უნდა. TOMAS Reimers: OK, მაგარი. ასე რომ, ჩვენ უნდა დააყენოს მიმზიდველი სურათი სადღაც. ALLISON BUCHHOLTZ-AU: ვგრძნობ, cute bunny შეიძლება იყოს სასარგებლო ახლავე. TOMAS Reimers: რა თქმა უნდა. ALLISON BUCHHOLTZ-AU: End კვირაში. გაქვთ რაიმე adorab-- 

TOMAS Reimers: როგორ bout kitten? 

ALLISON BUCHHOLTZ-AU: Kitten მუშაობს, ძალიან. 

TOMAS Reimers: ზემოთ, რადგან არსებობს საიტი, რომ. ეს ე.წ. PlaceKitten. ALLISON BUCHHOLTZ-AU: ეს არის დიდი. TOMAS Reimers: დიახ. ALLISON BUCHHOLTZ-AU: Just, ისევე, placeholder images თქვენს საიტზე. TOMAS Reimers: Mm-hm. არსებობს ასევე PlacePuppy. და იქ PlaceBacon. 

ALLISON BUCHHOLTZ-AU: PlaceBacon? ნამდვილად? 

TOMAS Reimers: Oh, ჩვენ არ აქვს ინტერნეტი აქ. 

ALLISON BUCHHOLTZ-AU: [ოხვრის] ტრაგიკული. TOMAS Reimers: წინააღმდეგ შემთხვევაში, მინდა გაჩვენოთ ბიჭები როგორ უნდა დააყენოს images თქვენს საიტზე. ჩვენ ვაპირებთ, რომ ცდილობენ ეს სამუშაო, სანამ ჩვენ უნდა წავიდეთ. მაგრამ ახლა, ჩვენ მხოლოდ ვაპირებთ, რომ გაიგო ფერები შემდეგ. ჩვენ გვინდა, რომ დააყენოს სურათები kittens-- 

ALLISON BUCHHOLTZ-AU: ჩვენ გავაკეთეთ. 

TOMAS Reimers: --the ინტერნეტში ქვემოთ მოცემულ მომენტში მიმდინარეობს. ასე რომ, ჩვენ გვაქვს ორი divs და ჩვენ აპირებს მათ ორი პირადობის მოწმობა. ჩვენ ვაპირებთ ეძახით "პირველი" და "მეორე". ასე id = "პირველი". და ჩვენ ვაპირებთ, რათა მათ ორი ფერის. ასე როგორ უნდა აირჩიოთ ის, რომელზეც id "პირველი"? ALLISON BUCHHOLTZ-AU: Dot ან hash? აუდიტორია: Sharp. TOMAS Reimers: Sharp, სრულყოფილი. მკვეთრი, hash, რასაც we-- 

ALLISON BUCHHOLTZ-AU: ბევრი რამ ეძახით. 

TOMAS Reimers: OK. ჩვენ ვაპირებთ, რომ მოაგვაროს hashtag, და ეს არის ის, რასაც ჩვენ ვაპირებთ წავიდეთ ერთად. OK? 

ALLISON BUCHHOLTZ-AU: Hashtag. 

TOMAS Reimers: So hashtag პირველი. 

ALLISON BUCHHOLTZ-AU: ასე თქვენ შეგიძლიათ tweet seminar-- hashtag CSS, hashtag cool. TOMAS Reimers: Hashtag Awesomeness. ALLISON BUCHHOLTZ-AU: Hashtag Awesomeness, დიახ. TOMAS Reimers: OK. ამიტომ ჩვენ უნდა "პირველი" და "მეორე". ასე რომ, პირველი, ჩვენ ვაპირებთ აქვს ფონის ფერი წითელი. ALLISON BUCHHOLTZ-AU: Uh, მსხვილი ნაწლავის. TOMAS Reimers: Yup. ALLISON BUCHHOLTZ-AU: მე ვიქნები თქვენი ადგილზე შემოწმება. TOMAS Reimers: Allison მიიღო ჩემთვის. ფონის ფერი blue-- 

TOMAS Reimers: Purple! 

TOMAS Reimers: Purple. ALLISON BUCHHOLTZ-AU: დიახ. Purple არის ჩემი საყვარელი ფერი, და ჩვენ არ გამოიყენება იგი ამჟამად. 

TOMAS Reimers: Violet. ALLISON BUCHHOLTZ-AU: Violet. რომელიც მუშაობს. 

TOMAS Reimers: ასე რომ, ჩვენ გვექნება ორი divs. ისინი იქნება სრულიად ცარიელი. ჩვენ უნდა ალბათ რაღაც ტექსტი. ასე რომ, "პირველი" იქნება "HELLO". და "მეორე" იტყვის 

ALLISON BUCHHOLTZ-AU: Goodbye. 

აუდიტორია: - "მსოფლიო". Hello, Goodbye. ALLISON BUCHHOLTZ-AU: დავინახე, მათ კონცერტი სხვა კვირაში. TOMAS Reimers: The Beatles? ALLISON BUCHHOLTZ-AU: For reals. ისინი დიდი არ არის. მე არ მომწონს. 

TOMAS Reimers: ჩვენ არ გვაქვს "გამარჯობა" და "მშვიდობით". და ისევ, CSS უბრალოდ გასაოცარია, რადგან იგი აღიარებს ჩვენი ფერები. არ უნდა კი შიშობენ, რომ ისინი არსებობენ. ისინი. 

ALLISON BUCHHOLTZ-AU: ისინი არსებობენ. 

TOMAS Reimers: So CSS ვფიქრობ აქვს 255 სიტყვა ვისაუბროთ ფერი. თუ თქვენ ფიქრობთ, რომ ფერი გარეთ იმ 255, მინდა, მე შთაბეჭდილება მოახდინა. ALLISON BUCHHOLTZ-AU: ჰო. მე ვფიქრობ, თქვენ ბიჭები შეიძლება ჰქონდეს უბრალოდ მოდის შემდეგ. 

TOMAS Reimers: ასე რომ, აქ, დაინახავთ, რომ ჩვენ გვაქვს ორი ყუთი უფლება თავზე ერთმანეთს, არა? HELLO და Goodbye. 

ALLISON BUCHHOLTZ-AU: არ სივრცეში შორის. ისინი უბრალოდ smooshed უფლება თავზე ერთმანეთს. 

TOMAS Reimers: ასე რომ, პირველ რიგში, ვფიქრობ, ჩვენ უნდა ვისაუბროთ არის, მოდით ასევე ვთქვა, yeah. ასე CSS წარმოადგენს მათ ერთგვარი ყუთები. და ყუთები, მათ აქვთ შინაარსი. და შინაარსი ახლა არის ერთგვარი HELLO ან GOODBYE და მორჩა. OK? 

ასე რომ, ერთი პირველი რამ, შეგიძლიათ გააკეთოთ შეგიძლიათ დაამატოთ padding. Padding ამბობს, რამდენი ადგილი მას უნდა დატოვონ თითოეულ მხარეს. ასე ვთქვათ, მე მინდა ვთქვა, 10 პიქსელი თითოეულ მხარეს. და მე გაკვეთა, რომ მეორე. ALLISON BUCHHOLTZ-AU: ყველა ამ საკითხზე აქ ვაპირებთ იყოს ძირითადად pixels დანარჩენი სემინარს. თქვენ აპირებს, რომ მას აქვს ზოგიერთი სივრცის გარშემო, არა? ასე რომ თქვენ ვერ ვხედავ აქ არის იქ ამ უხილავი სახის padding თითოეულ მხარეს, რომელიც ამბობს, ისევე, OK, თქვენ უნდა თქვენი ყუთი content-- 

ALLISON BUCHHOLTZ-AU: გსურთ უბრალოდ დახევის up შეამოწმოს ელემენტს? 

TOMAS Reimers: ჰო, კარგი იდეა. ALLISON BUCHHOLTZ-AU: გარდა ამისა, მე რომ შეამოწმოს ელემენტს არის კარგი გზა გაერკვნენ, თუ რაღაც აპირებს არასწორია, თუ რაიმე მოულოდნელი ხდება, შემოწმების tags და ხედავს, თუ რა ეს იგივეა, ინსტალერის არის გამოსადეგი. 

TOMAS Reimers: ასე რომ მე არ ვარ დარწმუნებული თუ ბიჭები, რომ ეს ფერი. შეგიძლიათ? დაინახავთ ამ padding ერთგვარი ზღვარი. და მაშინ ვხედავ რეალურ content ლურჯი, არა? ასე რომ, ძალიან საფუძვლები ყუთი მოდელი. თქვენ გაქვთ შინაარსი. მაშინ თქვენ უნდა padding. 

აუდიტორია: რატომ არ მხოლოდ გამოყენება ყუთი შიგნით the-- 

ALLISON BUCHHOLTZ-AU: Right. იმიტომ, რომ ეს მხოლოდ შერჩევის ელემენტს ახლავე. 

TOMAS Reimers: Yup. სხვა რამ. ასე რომ, მოდით, ვისაუბროთ, რომ padding ბრძანება მეორე. ასე რომ, CSS, გაზომვები უნდა ერთეული. ასე რომ, პირველი თქვენ გაქვთ თანხა. ასე რომ, ამ შემთხვევაში, ჩვენ განაცხადა 10. და შემდეგ მომდევნო ერთი ჩვენ ვთქვით, რომ პიქსელი, px. სხვა პირობა ალბათ არიან რამ, როგორიცაა სანტიმეტრი, დუიმი. შეგიძლიათ გააკეთოთ რამ, როგორიცაა, რა არის 10 inches? და ეს იქნება სასაცილოა. 

ALLISON BUCHHOLTZ-AU: Oh, ბიჭი. 

აუდიტორია: Whoa. 

TOMAS და ALLISON: ჰო. TOMAS Reimers: ასე რომ, ყველა padding. მე ვაპირებ დაბრუნდეს pixels. 

ALLISON BUCHHOLTZ-AU: Pixels ტენდენცია იყოს, როგორიცაა, სტანდარტი. როდესაც თქვენ შეხედეთ ბევრი საიტები, ისინი ძირითადად იმუშავებს pixels. TOMAS Reimers: ასე ვაპირებთ, ან pixels-- სხვა პირობა ხედავთ არის em, რომელიც არის ერთ em არის თანაბარი სიმაღლე font რომელიც თქვენ ამჟამად იყენებთ. 

ALLISON BUCHHOLTZ-AU: Mm. TOMAS Reimers: ეს არის კარგი გზა რომ ვთქვათ, მინდა, მინდა იმდენი სივრცე, როგორც ჩემი font დგამს. ALLISON BUCHHOLTZ-AU: არ ვიცოდი, რომ. ისწავლოს რაიმე ახალი ყოველდღე. TOMAS Reimers: არსებობს ბევრი გაზომვები CS. მე გთავაზობთ შევხედოთ მათ. თქვენი ყველა შემთხვევაში, მე ვფიქრობ, pixels უნდა იყოს საკმარისი. და ისინი ასევე რა თქვენ ვაპირებთ, უმრავლესობაში მაგალითები გაკეთდეს online. ასე რომ, ჩვენ დავტოვებთ მას pixels. 

ასევე შეგიძლიათ, მე უნდა ვთქვა ასე padding კომპლექტი ყველა paddings. ასევე შეგიძლიათ გააკეთოთ რაღაც "Padding-top" უბრალოდ კომპლექტი ALLISON BUCHHOLTZ-AU: Maybe ჩვენ კიდევ ჩვენი "HELLO" უკან. TOMAS Reimers: --to მხოლოდ მითითებული padding ზედა და სხვა არაფერი. ასე რომ, ოთხი ბრძანებები padding-top, padding-bottom, padding-left, და padding უფლება. 

ALLISON BUCHHOLTZ-AU: ისევე, როგორც თქვენ მოელოდა ყუთში. 

TOMAS Reimers: ჰო. არაფერი ძალიან გიჟები არსებობს. ამჯამად რომ აზრი? ასე, რომ ეს padding. მე ვაპირებ მითითებული ყველა paddings უკან 10. და შემდეგ მე ვაპირებ გადაადგილება საზღვარზე. 

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

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

აუდიტორია: Yeah. 

TOMAS Reimers: Cool. რა არის ეს? ასე რომ, პირველ რიგში, ეს არის ერთ-ერთი pixel. რომ არის თავისთავადი საკმარისი, არა? როგორიცაა, ეს არის ერთ pixel სქელი. ან ეს იქნება ერთი pixel, მაგრამ მე მიახლოება, ასე რომ ცოტა მეტი ვიდრე, რომ. 

ALLISON BUCHHOLTZ-AU: და ჩვენ გვაქვს ეს სასაცილოა რეზოლუციის TV. 

TOMAS Reimers: ჰო. შეგიძლიათ ეს დიდი, პატარა, რასაც. ასე რომ, აქ ორი pixel საზღვარზე. დაინახავთ, რომ ეს ორჯერ სქელი. შემდეგი რამ, რომ თქვენ გაქვთ ფერი. ეს არ არის საინტერესო. მე არ ვაპირებ გაიგო ამის შესახებ, ნამდვილად. 

ALLISON BUCHHOLTZ-AU: მაგრამ სტილი შეიძლება იყოს მხოლოდ პატარა საინტერესო. 

TOMAS Reimers: ჰო. ასე style, არსებობს რამდენიმე პირობა რომ ვხედავ გამოიყენება საყოველთაოდ. პირველი მყარი, მომდევნო ერთი dotted, და ბოლო ერთი გაუცრუვდათ. და აქ არის მოფენილი. დაინახავთ, რომ ისინი რამოდენიმე წერტილები, არა? კარგი გზა ერთგვარი მიიღოს ლამაზი საზღვარზე აპირებს, dashes ასევე საკმაოდ პოპულარულია. 

ALLISON BUCHHOLTZ-AU: და მაშინ, რა თქმა უნდა, მე ვარ დარწმუნებული ვარ, არსებობს უამრავი სხვა სტილის, რომ შეგიძლიათ მიიღოთ. და ჩვენ გვაქვს დიდი ნაკრები ბმულები დასასრულს თქვენ ბიჭები სახის peruse და შევხედოთ უფრო მაგარი CSS. 

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

ALLISON BUCHHOLTZ-AU: ეს არის მაგარი ხაზგასმით რამ ან დაამატოთ ხაზები სხვადასხვა ელემენტებს შორის. TOMAS Reimers: რა თქმა უნდა. ისე, რომ ჩვენი საზღვარი. და ბოლო ერთი ზღვარი. ზღვარი ს მოსწონს padding გარდა ამისა, ეს არ within-- ALLISON BUCHHOLTZ-AU: ეს არ არის გარშემო თქვენი ელემენტს მაგრამ რეალურად მთელი ყუთი, რომელიც ჩვენ უკვე ხედავს. 

TOMAS Reimers: ჰო. Allison განაცხადა, რომ ეს შესანიშნავად. ეს არ არის, ისევე, შიგნით თქვენი ელემენტს, ეს მთელი ყუთი. ეს ნიშნავს, რომ რამ, როგორიცაა ფონზე არ ვრცელდება იგი. და ეს, ძირითადად, ამბობს, მინდა, მე არ მინდა არაფერი ამ ბევრი სივრცე ჩემთვის. ისე, როგორც აქ ჩვენ გვაქვს ზღვარი 10 პიქსელი. ასე რომ არაფერი ფარგლებში 10 pixels უნდა იყოს შემდეგი ჩემთვის. რომ სახის მისი სივრცეში, მაგრამ სახის არ არის. ასე რომ, ძალიან საფუძვლები ყუთი მოდელი. ამჯამად რომ აზრი? მაგარი, მაგარი. ALLISON BUCHHOLTZ-AU: გასაოცარია. ასე რომ, ახლა მე ვფიქრობ, რომ ჩვენ უბრალოდ გვაქვს ჩვენი cool რესურსების რომ ჩვენ გადაგიყვანთ ბიჭები მეშვეობით ძალიან სწრაფად. და ჩვენ რეალურად კარგად, გვაქვს ინტერნეტში ჯერ? 

TOMAS Reimers მოდით თუ შემიძლია გახსნა up-- ნება მომეცით, თუ მე შეგიძლიათ მიიღოთ ინტერნეტ სწრაფად ხოლო Allison საუბრობს არაფერი Allison სურს საუბარი. ALLISON BUCHHOLTZ-AU: ასე basically-- მე არ ვიცი, რა შემიძლია ვთქვა, რომ ამ ეტაპზე. არამედ ეს არის რამდენიმე ნამდვილად კარგი რესურსი. ეს არის პირობა, რომ Tomas და მე არ გამოიყენება, და რომ ჩვენ რეალურად გამოიყენება მოსამზადებელი ამ. W3Schools ერთი, რომ თქვენ ბიჭები უნდა მინახავს ადრე. ჩვენ გირჩევთ ეს ბევრი რამ CSS. მე ვიცი, მე გირჩევთ, რომ ის ჩემი მონაკვეთზე ყველა დროის. 

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

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

TOMAS Reimers: ჰო. არა, ეს ასე არ არის. გსურთ ჩემთვის ცდილობენ და გადატვირთეთ ჩემს კომპიუტერში? ან გვინდა, რომელთა მიზანია: 

ALLISON BUCHHOLTZ-AU: მე ვგულისხმობ, ასევე, ეს იქნება ონლაინ რეჟიმში. ყველა სლაიდები იქნება ონლაინ რეჟიმში. ასე რომ მე უბრალოდ მაღალ რეკომენდაციას აკეთებს ეს. 

ეს არის დიდი, როგორც მხოლოდ როგორიცაა cheat ფურცელი. ეს მხოლოდ ყველა ძირითადი ბრძანებები, რომ თქვენ გაქვთ. ეს არის დიდი, როდესაც თქვენ პირველი დაწყებული out თქვენი ნახვა. იმიტომ, რომ, შესაძლოა, თქვენ არ გვინდა ყველა უძრავი nitty gritty დიზაინი მძიმე ნივთები. თქვენ უბრალოდ უნდა დააფორმატოთ ის გზა რომ ასეთი სახის აზრი და ნება ნუ დროისათვის. და თუ თქვენ ნამდვილად გსურთ შეღწევას, მე ვიცი, ეს არის, როგორც ერთ-ერთი Tomas საყვარელი ცნობას. ჩვენ გამოყენებით მას მოსამზადებელი, და ეს ზღაპრული. ის შემქმნელი from Mozilla. 

TOMAS Reimers: So Mozilla არიან ადამიანები, რომლებიც Firefox. და ეს მხოლოდ საკუთარ დეველოპერი მინიშნება, რომელიც მე ვფიქრობ, არის რა. და მას აქვს შესანიშნავი სიაში რესურსები. ასე რომ, ჩვენ ფლობის 

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

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

TOMAS Reimers: Right. კი, როგორიცაა საიტები ასე, თქვენ ხედავთ, იქ ნამდვილად div ზედა. და მაშინ თქვენ გაქვთ სხვა div ფარგლებში აქ, რაც CSS Awesomeness. და მაშინ თქვენ გაქვთ რამოდენიმე ბმულები აქ. თუ მართლაც მხოლოდ შეამოწმოს ელემენტები, თქვენ შეგიძლიათ დაალაგოთ დაიწყოს დაინახოს, თუ რა გააკეთოს საიტები ასე, და როგორ შემიძლია ხელახლა რომ თუ მინდოდა. ამჯამად რომ აზრი? ასე რომ, ჩვენ მხოლოდ სამი წუთი დარჩა. ასე კითხვები? რომელიმე მათგანი? დიახ. 

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

TOMAS Reimers: ჰო, აბსოლუტურად. ნება მომეცით, რეალურად. მე მაქვს ორი იდეები. ასე რომ, პირველ რიგში, თქვენ ასევე, შეგიძლიათ გამოიყენოთ პროცენტით. 

აუდიტორია: მართლა? 

ALLISON BUCHHOLTZ-AU: ასე რომ რაღაც ეძებოთ ნათესავი წესი. ის, რაც ჩვენ არ გვაქვს დრო შეღწევას, მაგრამ ეს რაღაც ნამდვილად რეკომენდაცია თქვენ ბიჭები შემოწმების გარეთ. 

TOMAS Reimers: So პროცენტით. და ვნახოთ, როგორ ჩვენ ეს მხოლოდ 50% სიგანე? ALLISON BUCHHOLTZ-AU: თუ ვიცი რეალურად ნომერი პიქსელი, თქვენ შეიძლება უფრო ზუსტად, რომ გზა. შეგიძლიათ fiddle გარშემო. მაგრამ 50%. თუ ჩვენ შეცვლის ჩვენი ბრაუზერის, ეს გახდის მას პატარა. 

TOMAS Reimers: ისე, ეს ძირითადად 50% ახლა, ვფიქრობ. ეს 50%, და მაშინ ზღვარი დაემატა, რომ. CSS აქვს ბევრი quirks. ასე რომ, ახლა ეს არის 50% გვერდი სიგანე. მაგრამ გახსოვდეთ, რომ თქვენ გაქვთ 10 pixels წაიყვანეს თითოეულ მხარეს. ასე რომ, თუ თქვენ გადატანა, რომ წინააღმდეგ მარცხენა კიდეზე ბრაუზერი, მაშინ ის ჰგავს 50%. კიდევ ერთხელ, როგორც ვთქვი, CSS საიტიდან იქნება ბევრი ამოიცნობთ და შემოწმება. როგორიცაა, თქვენ ფიქრობთ, რომ რაღაც აპირებენ მოიქცევა ერთი გზა, მაგრამ იქცევა სრულიად განსხვავებული გზა. 

ALLISON BUCHHOLTZ-AU: და თქვენ უბრალოდ ჭკვიანია, და თქვენ უბრალოდ უკეთესი ინტუიცია მას, როგორც თქვენ გადატანა ერთად. 

TOMAS Reimers: ეს იღებს უარესი და უარესი. ასე რომ, ეს უბრალოდ რბოლა. 

ALLISON BUCHHOLTZ-AU: რომ სუპერ იმედისმომცემი. ჩვენ გვინდა, რომ მათ მოსწონთ CSS. 

TOMAS Reimers: CSS გასაოცარია. გვახსოვდეს, რომ. სხვა კითხვები? 

ALLISON BUCHHOLTZ-AU: ერთი რამ. არაფერი? მაგარი. 

TOMAS Reimers: გასაოცარია. 

ALLISON BUCHHOLTZ-AU: ისე, თუ ბიჭებს რაიმე კითხვა მოგვიანებით, ჩვენ ყოველთვის ხელმისაწვდომია როგორც პოსტი ჩვეულებრივი. თქვენ ალბათ ზოგიერთი აშშ-ის საბოლოო პროექტები და ნამდვილად დროს hackathon. 

TOMAS Reimers: რა თქმა უნდა. და სამართლიანი. 

ALLISON BUCHHOLTZ-AU: და სამართლიანი. Oh. 

TOMAS Reimers: ველით ხედავს ყველა თქვენი awesome-- 

ALLISON BUCHHOLTZ-AU: ჩვენ დავინახავთ, ყველა თქვენი გასაოცარია საიტები რომ იქნება ლამაზი. TOMAS Reimers თქვენ ყოველთვის შეგიძლიათ ვხედავ, როგორიცაა, საიტებზე ვისაც ჰქონდა, როგორიცაა, კარგი CSS და შემდეგ როგორიცაა, ვინც არ ვცდილობთ გავაკეთოთ CSS. ALLISON BUCHHOLTZ-AU: ასევე, სხვა რამ, კიდევ ერთი რამ უნდა გავერკვეთ არის Bootstrapping. ასე ჩატვირთვის არის დიდი. 

TOMAS Reimers: Google, რომ თუ თქვენგანი 

ALLISON BUCHHOLTZ-AU: Google იგი. ეს ზღაპრული. თქვენ მიყვარს ეს. და ახლა, რომ თქვენ გაქვთ ძირითადი გაგება CSS, ეს თქვენ, რათა გაცილებით მეტი გრძნობა. გასაოცარია. მადლობა, ბიჭები. 

TOMAS Reimers: დიდი მადლობა.