[Powered by Google Translate] [CSS] [ჯოზეფ Ong - ჰარვარდის უნივერსიტეტი] [ეს არის CS50. - CS50.TV] 

დღეს ჩვენ ვისაუბრებთ CSS ან კასკადური სტილების. 

რა ზუსტად არის CSS? კარგად, მოდით შესვენება ვადა CSS down შევიდა 2 ნაწილები: კასკადური და სტილების. კასკადური არის ცოტა უფრო რთული, და ეს რაღაც ჩვენ დაფარავს სხვა ვიდეო. მაგრამ იწყებენ, სტილების ძალიან მინიშნებები რა CSS აკეთებს. იგი დასძენს სტილის HTML of ვებ გვერდზე, შეცვლის თუ როგორ ვებ გვერდზე ესთეტიურად გამოიყურება. ეს ნიშნავს, ყველაფერი შრიფტის of ტექსტი პოზიციონირების შინაარსი გვერდი სხვა cool რამ, როგორიცაა მიღების კუთხეში box მომრგვალებული ან დაამატონ ჩრდილები ტექსტის. თქვენ კი გააკეთოს Crazy რამ, როგორიცაა მიიღოს რამ animate ეკრანზე. 

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

ასე რომ, რაც შეიძლება მარტივი გზა გამოიყენოს სტილის რობ სურს? ყველაზე ნათელი გზა უამრავი ადამიანი თავდაპირველად წერდა CSS იყო დააყენა, რაც ჩვენ მოვუწოდებთ სტილის დეკლარაციების უფლება ელემენტს თავად გამოყენებით HTML სტილის ატრიბუტია. სტილი დეკლარაციის უბრალოდ შედგება HTML ელემენტის CSS ქონების გვინდა რომ შეიცვალოს მოჰყვა მსხვილი ნაწლავის მოჰყვა ახალი ღირებულების ქონება და მძიმით დასასრულს. მაგალითად, ვთქვათ რობ სურს შავი საზღვრის გარშემო მისი დანერგვა. ჩვენ პირველი დააყენა სტილის ატრიბუტი ჩართულია რობ ს div აქ მაშინ შიგნით ორმაგი შეთავაზებები დააყენა CSS დეკლარაცია: "საზღვრის: 1px მყარი შავი"; 1 pixel ეხება სიგანე საზღვრის, მყარი ეხება სტილი საზღვარი, და ფერი დასასრულს განსაზღვრავს რა საზღვრის მისი ფერი არის. 

თუ გვინდა მრავალჯერადი სტილის შესახებ ელემენტს, დაწერეთ ამ დეკლარაციების რიგით. მაგალითად, თუ რობ სურს მისი თავით ტექსტი Helvetica ერთად ლურჯ ფონზე და მეტი სივრცე გარშემო ტექსტი, ჩვენ შეგვიძლია გავაკეთოთ ეს: სტილი = "შრიფტის-family: Helvetica; ფონზე-ფერი: ლურჯი; padding: 5px;" ბოლო მძიმით ფაქტობრივად პირობითი, მაგრამ ხალხი, როგორც წესი, შეინახოს იგი ამისთვის თანმიმდევრულობა ის გულისთვის. 

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

ამისთვის დაკარგულია ნამდვილად უნდა იყოს ორგანიზებული, თქვენ შეიძლება დაიწყოს მიღების პატარა peeved როგორ ბინძურ ამ ყველა გამოიყურება. წარმოიდგინეთ, თუ თქვენ ეს უნდა გააკეთოს ყველა ელემენტს გვერდზე, Plus არის თქვენი HTML და CSS ყველა intermixed და cluttered. მთლიანი, არა? დაფიქსირება ამ, ხალხი საბოლოოდ დაიწყო catching შესახებ, რომ ჰყოფს მათ HTML markup მათი CSS სტილის გამოყენებით რაღაც მოუწოდა CSS selectors. CSS selectors გამოიყენება აირჩიოს ელემენტები, რომლის დეკლარაციების გამოიყენება. არჩევის ერთად სიაში CSS დეკლარაციების ხშირად მოიხსენიებენ როგორც CSS წესით. ეს წესები იქნება დააყენა შორის ღია და მჭიდრო HTML სტილის tags, ხშირად უფროსი დოკუმენტი. 

ეს ბევრად უფრო ადვილია, რომ ნახოთ ერთად მაგალითად, მოდით ახლა გადავიდეთ შექმნით უბრალო CSS წესით. თავიდან, მოდით დააყენა სტილი Tags სათაო მონაკვეთზე ჩვენი HTML. შემდეგი, Selector. დავიწყოთ off გამოყენებით ერთი მარტივი selectors, hash სიმბოლო, რომელიც ირჩევს HTML ელემენტს თავისი ID ატრიბუტი. ამ შემთხვევაში ჩვენ აირჩიეთ div რომელიც წარმოადგენს Rob-ს დანერგვა აკრეფით hash სიმბოლო მოჰყვა div პირადობის, რობ. ახლა დეკლარაციებს. ჩვენ დაამატოთ ღია და მჭიდრო braces და გადაიტანოს ჩვენი ადრე inline დეკლარაციებს რობ ს div შიგნით ამ braces, განახლების, და, ზემოთ, რობ ს intro კიდევ აქვს შავი საზღვრის გარშემო მინუს ბინძურ inline უშნო. 

ახლა, რა, თუ გვინდოდა აირჩიეთ h1 შიგნით Rob ს intro? თქვენ ალბათ ფიქრობთ, "მოდით დააყენა ID მასზე და მაშინ გადატანა ჩვენი ადრინდელი სტილი." რომ მუშაობს, მაგრამ CSS სხვა გზები გაქირავების თქვენ აირჩიეთ ელემენტები გამოყენებით, რაც ჩვენ მოვუწოდებთ combinators ავურიოთ მარტივი selectors. მაგალითად, whitespace ხასიათი, შეიძლება გამოყენებულ იქნას combinator დაზუსტება ყველა ინსტანციის 1 არჩევის რომ ცხოვრობს შიგნით სხვა selector. რომ ჟღერს უფრო რთული, ვიდრე ეს რეალურად არის. აი მაგალითად. ჩვენ აკრიფოთ # ძარცვა, დაამატოთ სივრცე, და დაიცვას იგი h1, კიდევ ერთი მარტივი არჩევის მოუწოდა tag არჩევის რომ ირჩევს ტიპის ელემენტები მოსწონს divs ან პუნქტებში. სივრცეში აერთიანებს ჩვენი 2 მარტივი selectors, გამოყენებისათვის ყველა CSS დეკლარაციების და curly braces to h1 Tags რომ ცხოვრობს შიგნით ელემენტს ერთად id = "რობ". უბრალოდ დარწმუნება იმაში, რომ მუშაობს, მე შეცვლის შრიფტის ფერის თეთრი, განახლების, და, შევხედოთ, რობ ს ჰედერი არის თეთრი. 

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

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

იმ შემთხვევაში თუ თქვენ გაინტერესებთ, მარტივი selectors მოიცავს ID selectors და tag selectors მოსწონს პირობა ჩვენ უბრალოდ დაინახა ასევე კლასის selectors შერჩევის ელემენტების გარკვეული კლასის, ატრიბუტი selectors შერჩევის ელემენტების მიერ სხვა ატრიბუტები, როგორიცაა ტიპი = "რადიო" რადიო ღილაკს საშუალებებით, და pseudoselectors მოსწონს hover და ფოკუსირება ამისთვის სასურველი სტილის როდესაც ურთიერთქმედების like mousing მეტი ელემენტს მოხდეს. 

საერთო combinators მოიცავს whitespace ყველა ბავშვისათვის და მძიმეები გამოირჩეოდნენ selectors. სხვა შეგიძლიათ ექმნებათ მოიცავს arrow პირდაპირი ბავშვებს მხოლოდ, tilde ყველა ძმა, რომ მოხდეს შემდეგ ელემენტს, და პლუს ნიშანი 1 ძმა რომ მოდის შემდეგ დაუყოვნებლივ ელემენტს. 

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

მე იოსები, და ეს არის CS50. 

[CS50.TV] 

Uh, სადაც დავიწყო? ნება მომეცით გავაკეთოთ, რომ გარეშე - [იცინის] Okay. დამატება - ნება მომეცით, რომ შეცვალოს ფორმულირება. Ooh. უკაცრავად.