[Powered by Google Translate] [CSS] [Džozefas Ong - Harvardo universiteto] [Tai CS50. - CS50.TV] 

Šiandien mes kalbame apie CSS ar Cascading Style Sheets. 

Taigi, kas tiksliai yra CSS? Na, galime nutraukti terminą CSS žemyn į 2 dalis: Cascading Style Sheets. "Domino efektą" yra šiek tiek sudėtingesnis, ir tai ką mes padengti kitoje vaizdo. Bet starteriai, Style Sheets labai daug užuominų į ką CSS. Ji priduria, interneto puslapio HTML stilių, keičiasi, kaip interneto puslapis atrodo estetiškai. Tai reiškia, kad viską iš teksto šrifto prie turinio pozicionavimo puslapyje kitų įdomių dalykų, pavyzdžiui, dėžutę suapvalinti kampus ar įtraukti į tekstą, šešėlius. Jūs netgi galite padaryti crazy dalykų, pavyzdžiui, kad viskas animuoti ekrane. 

Taigi, kaip mes naudoti CSS HTML? Paimkite šį prastos išvaizdos puslapį Aš tiesiog parašė. Jei Rob pažvelgti į šios svetainės dabar, jis tikriausiai pasakys kažką panašaus, "Oho! Įvade 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 elementas CSS nuosavybės, mes norime pakeisti pagal naują turto vertę ir kabliataškiu pabaigoje po kurio dedamas dvitaškis. Pavyzdžiui, tarkime, Rob nori juodą kraštinę aplink jo įvedimo. Mes pirmą kartą įdėti stiliaus atributą Rob div čia tada viduje kabutes įdėti CSS deklaraciją: "Border: 1px solid black;" 1 taškas reiškia, kad sienos pločio, kieto stiliaus sienos, ir pabaigoje spalva lemia ką pasienio spalva. 

Jei norime, kad kelias elemento stilių, rašyti šiuos eilės deklaracijas. Pavyzdžiui,, jei Rob nori savo antraštės tekstą "Helvetica" mėlyname fone daugiau erdvės aplink tekstą, mes galime tai padaryti: style = "font-family:" Helvetica "background-color: mėlyna; padding: 5px;" Paskutinis kabliataškis iš tiesų yra neprivalomas, tačiau žmonės paprastai laikykite jį už nuoseklumo. 

Mes išsaugosime paaiškinti kai aušintuvas ir sudėtingesnių nuosavybės CSS kito vaizdo. Jei turite kažką galvoje, tiesiog "Google" paiešką norimą efektą, po CSS tikriausiai jums gana gerų rezultatų. The cool dalykas yra tai, kad CSS yra gana plati, todėl šansai yra, jei nėra nieko, jūs norite daryti - per priežasties - CSS gali tikriausiai tai padaryti. Mes tai vadiname stiliaus inline stiliaus natūra. Elementas stilius yra gerai, pradžios žyma. 

Žmonių, kurie tikrai patinka būti organizuojami, galite pradėti gauti šiek tiek Dirginimas, kaip nepatogus visa tai atrodo. Įsivaizduokite, jei jums turėjo tai padaryti kiekvieno puslapio elemento, plius dabar jūsų HTML ir CSS visi sulydyti ir netvarkinga. Bruto, tiesa? Norėdami išspręsti šią problemą, žmonės galiausiai pradėjo gaudyti ant atskirti savo HTML žymėjimo iš jų CSS stiliaus naudojant kažką vadinama CSS selektoriai. CSS selektoriai naudojami pasirinkti tas deklaracijas yra taikomi elementai. Yra dažnai vadinamas kaip taisyklė CSS selektorių, kartu su css sąrašą. Šios taisyklės turėtų būti tarp atidaryti ir uždaryti HTML stiliaus žymes dažnai dokumento galvos. 

Tai daug lengviau pamatyti, pavyzdžiui, todėl pradėkime sukurti paprastą CSS taisyklė. Pirma, tegul stiliaus skyriuje "head mūsų HTML žymes. Be to, selektorius. Mes pradėti nuo naudojant vieną iš paprasčiausių selektoriai, grotelėmis, kuris pasirenka pagal jo ID atributą HTML elementas. Tokiu atveju mes jums parinksime div kuri atstovauja Rob įvadas įvesdami div ID, Rob po grotelėmis. Dabar deklaracijas. Mes pridėti atveria ir uždaro petnešos ir perkelti į savo ankstesnes inline Rob div deklaracijas dėl viduje šių petnešos, atnaujinti, , kietas, Rob intro vis dar turi juodą kraštinę aplink jį atėmus purvinas inline bjaurumo. 

Dabar, ką, jei mes norėjome pasirinkti h1 Rob intro viduje? Jūs manote, tegul ant jo ID ir tada perkelti mūsų ankstesnį stilių. " Kad veikia, bet CSS turi kitų būdų leidžia jums pasirinkti elementus naudojant tai, ką mes vadiname paprastus selektoriai combinators maišyti. Pavyzdžiui, tarpus simbolis gali būti naudojamas kaip Combinator nurodyti visus 1 selektorių, kad gyvena viduje kitos selektorių atvejus. Kad skamba daug sudėtingesnis, nei ji iš tikrųjų yra. Štai pavyzdys. Mes įvesti # apiplėšti, pridėti tarpą, ir po to su H1, dar vienas paprastas selektoriaus vadinamas tegus selektorių, kad pasirenka tipų elementų kaip DIV-ų ar pastraipų. Erdvė jungia mūsų 2 paprastus selektoriai, taikant visas css ir garbanotieji petnešų - H1 žymeles, kurios gyvena viduje su id = "Rob" elemento. Tiesiog įtikinti jus, kad tai veikia, aš pakeisti šrifto spalvą balta, atnaujinimo, ir, atrodo, Rob antraštės balta. 

Visi šiame darbe yra parodyti, kad taikant 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ų į kitą failą apskritai. 

Įtraukti šį naują failą CSS šiame dokumente aš tiesiog naudoti HTML link tag. Čia aš sakau, kad aš susiejimas išoriniame stilių lape REL atributas, ir nurodant kelią iki failo, su mano href atributo. Dabar mano HTML žymėjimas ir CSS organizuojami gražiai visiškai atskirus failus, beveik visada yra projektuotojai nori dirbti su HTML ir CSS. 

Tuo atveju, jei jums įdomu, paprastas selektoriai ID selektoriai ir TAG selektoriai, kaip tie, ką tik pamačiau taip pat pasirinkdami elementus su tam tikrą klasę, klasės selektoriai atributas selektoriai kitų savybių, pavyzdžiui, tipo elementus, pasirinkdami = "Radijas" radijo mygtuką sąnaudas, ir pseudoselectors, pavyzdžiui, užveskite pelės žymeklį ir sutelkti nurodant stilius, kai sąveika patinka miłej per elemento atsirasti. 

Bendrieji combinators tarpus visiems vaikams ir kableliais atskirti selektoriai. Kitiems, jums gali susidurti tik tiesioginių vaikų rodyklę, visiems broliai ir seserys, kurie įvyksta po elemento tildė, ir pliuso ženklą už 1 broliai ir seserys, kad ateina iš karto po to, kai elemento. 

Derinant šias selektoriai ir combinators, galite išplėsti stiliaus asortimentą galite pasiekti nurodytą puslapį ir rašyti CSS efektyviau. Tik su pora eilučių CSS, kuriuos matote man rašyti čia, Galiu greitai padaryti kažką panašaus į tai, kaip kažką panašaus į tai išvaizdą. 

Aš esu Juozapas, ir tai yra CS50. 

[CS50.TV] 

Uh, kur man pradėti? Leiskite man padaryti, kad be - [juokiasi] Gerai. Pridėti Leiskite man pakeisti, kad formuluotę. Ooh. Atsiprašau.