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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[CS50.TV] 

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