[Powered by Google Translate] [CSS] [Joseph Ong - Università ta 'Harvard] [Dan huwa CS50. - CS50.TV] 

Illum aħna ser tkun jitkellem dwar CSS jew Cascading Style Sheets. 

Allura x'inhi eżattament CSS? Ukoll, ejja break-CSS terminu isfel fis-2 partijiet: Cascading Style Sheets u. Cascading huwa ftit aktar kumplessa, u huwa xi ħaġa li aħna ser ikopru b'mod ieħor video. Iżda biex nibdew, Style Sheets ideat ħafna ħafna fil dak CSS ma. Hija żżid stili għall-HTML ta 'paġna web, jinbidlu kif il-web page estetikament jistenna. Dan ifisser kollox mill-font tat-test għall-ippożizzjonar tal-kontenut fuq il-paġna għal affarijiet jibred oħra bħal jagħmlu l-irkejjen ta 'kaxxa tond jew li żżid dellijiet għat-test. Tista 'anki tagħmel affarijiet crazy simili tagħmel affarijiet janimaw fuq l-iskrin. 

Allura kif nistgħu jużaw CSS ma HTML? Ħu dan is-sit foqra li tħares I biss kiteb. Jekk Rob kellhom ħarsa lejn dan is-sit dritt issa, huwa d probabbilment ngħid xi ħaġa simili, "Ara naqra! Introduzzjoni tiegħi jistenna terribbli. Joseph, int disinjatur orribbli." "Uża l-font Times default? Helvetica huwa tant aħjar." 

Allura dak li jista 'jkun l-eħfef mod biex japplikaw l-grafika Rob trid? Il-lottijiet aktar mod ovvju ta 'nies inizjalment kiteb CSS kien li tpoġġi nsejħu dikjarazzjonijiet stil dritt fl-element innifsu jużaw l-attribut istil HTML. Dikjarazzjoni stil tikkonsisti sempliċement proprjetà CSS l-element HTML s irridu li jibdlu segwit minn punt doppju segwit mill-valur il-ġdid tal-proprjetà u ta 'semikowlin fl-aħħar. Per eżempju, ejja ngħidu Rob jixtieq b'bordura sewda madwar introduzzjoni tiegħu. Aħna l-ewwel tpoġġi l-attribut stil fuq div Rob s hawn imbagħad ġewwa kwotazzjonijiet doppja tpoġġi dikjarazzjoni CSS: "Fruntiera: iswed solidu 1px;" Il-pixel 1 jirreferi għall-wisa 'tal-fruntiera, il solidu tirreferi għall-istil tal-fruntiera, u l-kulur fl-aħħar jiddetermina liema kulur il-fruntiera huwa. 

Jekk irridu stili multipli fuq element, jiktbu dawn id-dikjarazzjonijiet fis-sekwenza. Per eżempju, jekk Rob trid header test tiegħu Helvetica bi sfond blu u aktar spazju madwar it-test, nistgħu nagħmlu dan: stil = "font-familja: Helvetica; isfond bil-kulur: blu; ikkuttunar: 5px;" Il-virgola aħħar huwa attwalment obbligatorja, iżda in-nies normalment jżommha fil f'ġieħ il-konsistenza tal. 

Aħna ser tiffranka tispjega xi wħud mill-proprjetajiet CSS jkessaħ u aktar kumplessi għall-ieħor video. Jekk għandek xi ħaġa f'moħħu, biss Googling-effett li trid segwit minn CSS probabilment se jagħtuk riżultati pjuttost tajba. Il-ħaġa jibred hija li CSS huwa pjuttost wiesgħa, hekk odds huma jekk hemm xi ħaġa li trid tagħmel - fi żmien raġuni - CSS tista 'probabbilment jagħmlu dan. Aħna nsejħu dan it-tip ta 'grafika grafika inline. L-istil element huwa, ukoll, f'konformità mal-tag bidu. 

Għal folks li verament jixtieq li jiġu organizzati, inti tista 'tibda jkollna ftit peeved lejn kif messy dan kollu jistenna. Immaġina jekk inti kellha tagħmel dan għal kull element fuq il-paġna, plus issa HTML tiegħek u CSS huma kollha intermixed u cluttered. Gross, id-dritt? Biex tissolva din, in-nies eventwalment bdew qbid fuq separazzjoni HTML Markup tagħhom minn grafika CSS tagħhom billi jużaw xi ħaġa imsejħa seletturi CSS. Seletturi CSS huma użati biex jagħżlu l-elementi li d-dikjarazzjonijiet huma applikati. A selettur flimkien ma 'lista ta' dikjarazzjonijiet CSS huwa spiss imsejjaħ bħala regola CSS. Dawn ir-regoli se jitpoġġew bejn tags miftuħa u qrib stil HTML, spiss fil-kap tad-dokument. 

Huwa ħafna aktar faċli biex tara b'eżempju, hekk ejja nibdew bil-ħolqien ta 'regola CSS sempliċi. L-ewwel, ejja tpoġġi tags stil fit-taqsima kap ta HTML tagħna. Sussegwentement, is-selettur. Aħna ser tibda off billi juża waħda mill-seletturi sempliċi, is-simbolu hash, li jagħżel element HTML billi attribut ID tiegħu. F'dan il-każ aħna ser jagħżlu l-div li tirrappreżenta l-introduzzjoni Rob s billi jittajpja-simbolu hash segwit minn ID tal-div, il Rob. Issa d-dikjarazzjonijiet. Aħna żid braces miftuħa u mill-qrib u neqilbu dikjarazzjonijiet inline tagħna qabel fuq div Rob s ġewwa ta 'dawn ċingi, jġedded, u, berred, intro Rob s għad għandu bordura sewda madwaru nieqes l-kruha inline messy. 

Issa, dak li jekk ridna li jagħżlu l-ġewwa h1 ta intro Rob tal-? Għandek mnejn taħseb, "Ejja tpoġġi ID fuqha u mbagħad jimxu stili preċedenti tagħna." Li jaħdem, iżda CSS għandha modi oħra ta 'kiri inti tagħżel elementi billi tuża dak li nsejħu combinators biex tħallat seletturi sempliċi. Per eżempju, il-karattru whitespace jista 'jintuża bħala combinator tispeċifika l-każijiet ta '1 selettur li jgħixu ġewwa ta' ieħor selettur. Ħsejjes li ħafna aktar ikkumplikata milli fil-fatt hu. Hawn eżempju. Aħna se tip # Rob, żid spazju, u jimxi ma 'h1, ieħor selettur sempliċi tissejjaħ selettur tikketta li tagħżel it-tipi ta 'elementi bħal divs jew il-paragrafi. L-ispazju jgħaqqad 2 seletturi tagħna sempliċi, japplika d-dikjarazzjonijiet kollha CSS u l-braces kaboċċi għall h1 tags li jgħixu ġewwa tal-element bl id = "Rob". Just biex tikkonvinċi lilek li taħdem, jien ser jibdlu l-kulur tat-tipa għall-abjad, jġedded, u, ħarsa, header Rob hija issa abjad. 

Kollha ta 'dan ix-xogħol l-elementi juru li bl-użu regoli minflok stili inline nistgħu nibdew kodiċi ħafna aktar nodfa. Fil-fatt, jekk din il-blokka istil jibda jkollna ftit kbira, I jistgħu anki iġbed dawn l-istili barra fil-fajl differenti għal kollox. 

Biex tinkludi dan il-fajl ġdid kif CSS f'dan id-dokument jien ser biss użu tag link HTML s. Hawnhekk jien javżak minnu li jien jgħaqqdu fi folja stil estern, l-attribut rel, u jispeċifika il-passaġġ għall-fajl ma attribut href tiegħi. Issa HTML Markup tiegħi u CSS huma organizzati nicely fil-fajls kompletament separati, li huwa kważi dejjem il-mod disinjaturi jippreferu jaħdmu ma HTML u CSS. 

Fil-każ li int mintix, il seletturi sempliċi jinkludu seletturi ID u seletturi tag bħal dawk aħna biss raw kif ukoll seletturi klassi għall-għażla elementi li għandhom ċerta klassi, attribut seletturi għall-għażla elementi minn attributi oħra bħall tip = "radju" għal inputs buttuna tar-radju, u pseudoselectors bħall imbagħad jerġgħu u tiffoka biex jispeċifika grafika meta interazzjonijiet simili mousing fuq element jseħħu. 

Il combinators komuni jinkludu whitespace għat-tfal kollha u virgoli li ssir distinzjoni seletturi. Oħrajn inti tista 'tiltaqa' tinkludi l-vleġġa għat-tfal diretti biss, l-tilde għall-aħwa li jseħħu wara l-element, u s-sinjal plus għall-aħwa 1 li ġejja minnufih wara l-element. 

Billi tgħaqqad dawn seletturi u combinators, inti tista 'twessa' l-firxa ta 'grafika inti tista' tikseb fuq paġna web partikolari u jiktbu CSS aktar effiċjenti. Bil biss ftit linji ta 'CSS tara lili ittajpjar hawn, I tista 'malajr jagħmlu xi ħaġa bħal din look like xi ħaġa bħal din. 

Jien Joseph, u dan huwa CS50. 

[CS50.TV] 

Uh, fejn nista tibda? Let me tagħmel dan mingħajr - [laughs] Okay. Żid - Let me jibdlu din kliem. Ooh. Jiddispjacini.