[Powered by Google Translate] [CSS] [Juozapas Ong - Harvardo universiteto] [Tai CS50. - CS50.TV] 

Šiandien mes kalbame apie CSS ar Cascading Style Sheets. 

Taigi, kas tiksliai yra CSS? Na, galime nutraukti laikotarpio CSS žemyn į 2 dalis: Cascading Style Sheets ir. Cascading yra šiek tiek sudėtingesnis, ir tai, ką mes padengti kitoje vaizdo. Bet starteriai, Style Sheets labai daug patarimų, ką CSS daro. Ji priduria, stilių į tinklalapį HTML, keičiasi, kaip interneto puslapis estetiškai atrodo. Tai reiškia, kad viskas nuo teksto šrifto prie turinio pozicionavimo puslapyje iki kitų įdomių dalykų, pavyzdžiui, priėmimo į dėžutę užapvalintais kampais arba pridedant šešėlius į tekstą. Jūs netgi galite padaryti crazy dalykų, pavyzdžiui, kad viskas animuoti ekrane. 

Taigi, kaip mes naudojame CSS su HTML? Paimkite šį prastos išvaizdos svetainė Aš tiesiog parašė. Jei Robas buvo pažvelgti į šią svetainę dabar, jis tikriausiai pasakyti kažką panašaus, "Oho! Mano įvedimas atrodo baisi. Juozapas, esate baisu dizaineris." "Naudojant numatytuosius laikus šriftą?" Helvetica "yra daug geriau." 

Taigi, kas gali būti paprasčiausias būdas taikyti stilius Rob nori? Akivaizdžiausias būdas daug žmonių iš pradžių rašė CSS buvo įdėti ką mes vadiname stiliaus deklaracijos teisė paties elemento naudojant HTML stiliaus atributas. Stilius deklaracija tėra HTML elemento CSS nuosavybės norime pakeisti po kurio dedamas dvitaškis, po naujos turto vertę ir kabliataškiu pabaigoje. Pavyzdžiui, tarkime, Rob nori juodu rėmeliu aplink jo įvedimo. Mes pirmą kartą pateikti stiliaus atributą Rob div čia tada viduje kabutes įdėti CSS deklaraciją: "Sienos: 1px juodas;" 1 pikselių reiškia sienos pločio, kietas reiškia sienos stilius, ir pabaigoje spalva lemia tai, ką sieną savo spalva. 

Jei norime daug stilių ant elemento, rašome šias seka deklaracijas. Pavyzdžiui, jei Rob nori, kad jo antraštės tekstą Helvetica su mėlyname fone ir daugiau erdvės aplink tekstą, mes galime tai padaryti: style = "font-family:" Helvetica ", fono spalva: mėlyna; padding: 5px;" Paskutinis kabliataškis faktiškai privalomas, tačiau žmonės paprastai laikykite jį už nuoseklumo. 

Mes išsaugosime paaiškinti kai aušintuvas ir sudėtingesnių CSS savybės kito vaizdo. Jei turite kažką galvoje, tiesiog "Google" paiešką norimą efektą, po to CSS tikriausiai suteiks jums gana gerų rezultatų. The cool dalykas yra tai, kad CSS yra gana plati, todėl šansai yra, jei kas nors norite padaryti - proto ribose - CSS tikriausiai tai padaryti. Mes vadiname šį stiliaus inline stiliaus natūra. Elementas stilius yra gerai, atsižvelgiant į pradžios žyma. 

Dėl žmonių, kurie tikrai mėgsta būti organizuojama, galite pradėti vis tiek Dirginimas, kaip nepatogus visa tai atrodo. Įsivaizduokite, jei jūs turėjote tai padaryti už kiekvieną puslapio elementą, plius dabar jūsų HTML ir CSS visi sulydyti ir netvarkinga. Pilna, tiesa? Norėdami išspręsti šią problemą, žmonės galiausiai pradėjo gaudyti ant atskirdami savo HTML žymėjimo iš jų CSS stiliaus, naudojant kažką vadinama CSS selektoriai. CSS selektoriai naudojami pasirinkti elementus, kuriuos deklaracijos būtų taikomos. Selektorių kartu su CSS deklaracijų sąraše dažnai vadinama CSS taisyklė. Šios taisyklės turėtų būti tarp atidaryti ir uždaryti HTML stiliaus žymeles, dažnai dokumento galvos. 

Tai daug lengviau pamatyti, pavyzdys todėl galime pradėti kurti paprastą CSS taisyklė. Pirma, galime įdėti stiliaus žymeles galvos skyriuje mūsų HTML. Be to, pasirinkimo. Pradėsime nuo naudojant vieną iš paprasčiausių selektoriai, grotelėmis, kurie pasirenka HTML elementas savo ID atributas. Tokiu atveju mes jums parinksime div kuri atstovauja Rob Įvadas įvesdami maišos ženklą po div asmens tapatybės, Rob. Dabar deklaracijos. Mes pridėti atveria ir uždaro petnešos ir perkelti savo ankstesnes Inline deklaracijas Rob div viduje šių petnešos, atnaujinti, ir kietas, Rob intro vis dar turi juodu rėmeliu aplink jį atėmus nepatogus inline bjaurumas. 

Dabar ką daryti, jei mes norėjome pasirinkti h1 viduje su Rob intro? Jūs manote, "Leiskite įdėti apie jį ID ir tada perkelkite savo ankstesnes stilius." Tai veikia, bet CSS turi kitų būdų leidžia jums pasirinkti elementus naudojant tai, ką mes vadiname combinators maišyti paprastus selektoriai. Pavyzdžiui, tarpai simbolis gali būti naudojamas kaip Combinator nurodyti visus 1 selektorių kad gyvena viduje kitos selektorių atvejais. Tai skamba daug sudėtingesnis, nei ji iš tikrųjų yra. Štai pavyzdys. Mes įveskite # apiplėšti, pridėti tarpą, ir po to su H1, dar vienas paprastas selektorių vadinama žyma selektorių kad pasirenka tipų elementų kaip DIV ar pastraipų. Erdvė jungia mūsų 2 paprastus selektoriai, taikant visas css ir garbanotas petnešos H1 žymeles, kurios gyvena viduje su id = "Rob" elementas. Tiesiog įtikinti jus, kad tai veikia, aš pakeisti šrifto spalvą į baltą, atnaujinimo, ir, atrodo, Rob antraštė yra dabar baltas. 

Visi šio darbo eina į rodo, kad naudojant taisykles, o ne inline stilių mes galime gauti daug švaresnį kodą. Iš tiesų, jei šis stilius blokas pradeda gauti šiek tiek didelis, Net galiu traukti šių stilių išeiti į kitą failą apskritai. 

Norėdami įtraukti šį naują failą kaip CSS šiame dokumente aš tiesiog naudokite HTML'o link tag. Čia aš sakau tai, kad aš susiejimas į išorės stilių, rel atributas, ir nurodant kelią iki failo, su mano href atributas. Dabar mano HTML žymėjimo ir CSS organizuoja gražiai visiškai atskirus failus, kuris yra beveik visada būdas dizainerių nori dirbti su HTML ir CSS. 

Tuo atveju, jei jums įdomu, paprastas selektoriai yra ID selektoriai ir pažymėti selektoriai, kaip tie mes tiesiog matė taip pat klasės selektoriai atrankos elementus su tam tikros klasės, atributas selektoriai atrankos elementus iš kitų atributų, pavyzdžiui, tipo = "radijas" radijo mygtuką sąnaudas, ir pseudoselectors kaip užveskite ir sutelkti tiksliai apibrėžti stilių, kai sąveika patinka nukreipdami pelės žymeklį elemento atsiranda. 

Bendros combinators apima tarpus visiems vaikams o kableliai ir taškai atskirti selektoriai. Kiti jūs gali susidurti apimti tiesioginių tik vaikams rodyklę visų brolių ir seserų, kurie atsiranda po elemento tildė, ir pliuso ženklas už 1 sese, kuri ateina iš karto po elemento. 

Derinant šias selektoriai ir combinators, galite praplėsti stiliaus asortimentą galite pasiekti tam tikroje tinklalapį ir rašyti CSS efektyviau. Tik su eilučių CSS matote man rašyti čia pora, Galiu greitai padaryti kažką panašaus į tai kaip kažką panašaus į tai žiūrėti. 

Aš Juozapas, ir tai yra CS50. 

[CS50.TV] 

Mm, kur man pradėti? Leiskite man padaryti, kad be - [juokiasi] Gerai. Pridėti - Leiskite man pakeisti tą tekstą. Ooh. Atsiprašau.