[Powered by Google Translate] [CSS] [Joseph Ong - Chuo Kikuu cha Harvard] [Hii ni CS50. - CS50.TV] 

Leo tutaweza kuzungumzia CSS au kuachia Style Sheets. 

Basi nini hasa ni CSS? Naam, hebu kuvunja CSS mrefu chini katika sehemu 2: Kuachia na Style Sheets. Kuachia ni kidogo ngumu zaidi, na ni kitu tutaweza cover katika video nyingine. Lakini kwa starters, Sinema mashuka sana mwanga katika kile CSS gani. Inaongeza mitindo ya HTML wa mtandao ukurasa, kubadilisha jinsi ukurasa mtandao aesthetically inaonekana. Hii ina maana kila kitu kutoka font Nakala kwa nafasi ya yaliyomo kwenye ukurasa kwa mambo mengine ya baridi kama maamuzi pembe ya sanduku mviringo au kuongeza vivuli kwa maandishi. Unaweza hata kufanya mambo mambo kama kufanya mambo animate kwenye screen. 

Hivyo ni jinsi gani sisi kutumia CSS kwa HTML? Chukua tovuti hii maskini-kuangalia mimi tu aliandika. Kama Rob walikuwa kuangalia tovuti hii sasa hivi, yeye d pengine kusema kitu kama, "Wow utangulizi wangu! Inaonekana kutisha. Joseph, wewe ni designer kubwa." "Kutumia Times default font Helvetica? Ni hivyo bora zaidi." 

Basi nini inaweza kuwa njia rahisi ya kuomba styling Rob anataka? dhahiri zaidi njia ya kura ya watu awali aliandika CSS ilikuwa ni kuweka nini sisi kuwaita style maazimio haki katika kipengele yenyewe kutumia HTML style sifa. tamko style tu lina mali ya kipengele HTML wa CSS tunataka kubadili ikifuatiwa na koloni ikifuatiwa na thamani mpya ya mali na semicolon mwishoni. Kwa mfano, hebu kusema Rob anataka mpaka nyeusi karibu utangulizi wake. Sisi kwanza kuweka sifa style juu div Rob hapa kisha ndani ya quotes mbili kuweka tamko CSS: "Mpaka: 1px solid nyeusi;" Pixel 1 inahusu upana wa mpaka, imara inahusu mtindo wa mpaka, na Michezo mwishoni huamua nini rangi mpaka ni. 

Kama tunataka nyingi mitindo juu ya kipengele, kuandika maazimio haya katika mlolongo. Kwa mfano, kama anataka Rob header yake asilia katika Helvetica na background ya bluu na nafasi zaidi duniani asilia, tunaweza kufanya hivyo: style = "font-familia: Helvetica; background-color: blue; padding: 5px;" semicolon mwisho ni kweli lazima, lakini kwa kawaida watu kuitunza katika kwa ajili ya uthabiti. 

Tutaweza kueleza kuokoa baadhi ya mali baridi na ngumu zaidi CSS kwa ajili ya video nyingine. Kama una kitu katika akili, tu googling athari unataka ikifuatiwa na CSS pengine kukupa matokeo pretty nzuri. jambo zuri ni kwamba CSS ni pretty pana, hivyo ni tabia mbaya kama kuna kitu chochote unataka kufanya - ndani ya sababu - CSS pengine unaweza kufanya hivyo. Tunatoa wito aina hii ya styling styling inline. mtindo kipengele ni vizuri, sambamba na tag mwanzo. 

Kwa folks ambao kwa kweli kama kuwa na utaratibu, unaweza kuanza kupata kidogo peeved katika jinsi messy hii yote inaonekana. Hebu fikiria kama wewe alikuwa na kufanya hili kwa kila kipengele katika ukurasa, plus sasa HTML yako na CSS wote intermixed na cluttered. Jumla ya Pato la, haki? Ili kurekebisha hili, watu hatimaye ilianza kuambukizwa juu kwa kutenganisha yao HTML ghafi kutoka styling yao CSS kwa kutumia kitu kinachoitwa CSS selectors. Selectors CSS hutumiwa kuchagua vipengele ambayo maazimio ni kutumiwa. selector pamoja na orodha ya matamko CSS ni mara nyingi inajulikana kama utawala CSS. Sheria hizi atafukuzwa kati tags wazi na karibu HTML style, mara nyingi katika kichwa cha hati. 

Ni rahisi kuona kwa mfano, hivyo hebu kuanza kwa kujenga rahisi CSS utawala. Kwanza, hebu kuweka tags mtindo katika sehemu ya kichwa cha HTML yetu. Next, selector. Tutaweza kuanza kwa kutumia moja ya selectors rahisi, alama hash, ambayo kuchagua kipengele HTML na ID sifa yake. Katika kesi hii tutaweza kuchagua div kwamba inawakilisha kuanzishwa Rob ya kwa kuandika alama hash ikifuatiwa na ID div wa, kuwaibia. Sasa maazimio. Sisi kuongeza braces wazi na karibu na kuhama maazimio yetu mapema inline kwenye div Rob ya ndani ya braces haya, kuburudisha na, baridi, Rob wa intro bado ina mpaka nyeusi karibu yake minus messy ubaya inline. 

Sasa, nini kama sisi alitaka kuchagua ndani ya h1 ya intro Rob wa? Unaweza kufikiri, "Hebu kuweka ID juu yake na kisha kuondoka wetu mitindo mapema." Kwamba kazi, lakini CSS ana njia nyingine ya kuruhusu kuchagua vipengele kwa kutumia kile tunachokiita combinators kuchanganya selectors rahisi. Kwa mfano, tabia whitespace inaweza kutumika kama combinator kwa kutaja matukio yote ya 1 selector kwamba kuishi ndani ya selector mwingine. Kwamba inaonekana mengi ngumu zaidi kuliko ni kweli ni. Hapa ni mfano. Sisi aina # kuwaibia, kuongeza nafasi, na kufuata na h1, mwingine selector rahisi kuitwa selector tag kwamba kuchagua aina ya mambo ya kama divs au aya. nafasi unachanganya wetu 2 selectors rahisi, kutumia maazimio yote CSS na braces curly kwa tags h1 kwamba kuishi ndani ya kipengele na id = "rob". Tu kuwashawishi kwamba ni kazi, mimi itabidi kubadilisha rangi font kwa nyeupe, kuburudisha na tazama, header Rob ya sasa ni nyeupe. 

Yote ya kazi hii inakwenda kwa kuonyesha kwamba kwa kutumia sheria badala ya mitindo inline tunaweza kupata safi zaidi code. Kwa kweli, kama hii kuzuia mtindo kuanza kupata kidogo kubwa, Siwezi hata kuvuta mitindo haya nje katika faili tofauti kabisa. 

Pamoja na faili hii mpya kama CSS katika hati hii mimi itabidi kutumia kiungo HTML wa tag. Hapa nina kuwaambia, ni kwamba mimi nina kuunganisha katika karatasi ya nje style, sifa rel, na inayobainisha njia ya faili na href sifa zangu. Sasa yangu ghafi HTML na CSS ni kupangwa katika nicely files tofauti kabisa, ambayo ni karibu daima njia wabunifu wanapendelea kufanya kazi na HTML na CSS. 

Katika kesi wewe wanashangaa, selectors rahisi ni pamoja selectors ID na tag selectors kama wale sisi niliona tu kama vile darasa selectors kwa kuchagua vipengele na darasa fulani, sifa selectors kwa ajili ya kuchagua vipengele na sifa nyingine kama aina = "radio" kwa ajili ya pembejeo kifungo redio, na pseudoselectors kama hover na kuzingatia kwa inayobainisha styling wakati mwingiliano like kipanya juu ya kipengele kutokea. 

combinators ya kawaida ni pamoja whitespace kwa watoto wote na koma kutofautisha selectors. Wengine ni pamoja na unaweza kukutana na mshale kwa watoto moja kwa moja tu, tilde kwa ndugu wote kutokea baada ya kipengele, na ishara plus kwa sibling 1 kwamba anakuja mara moja baada ya kipengele. 

Kwa kuchanganya selectors hizi na combinators, unaweza kupanua mbalimbali ya styling unaweza kufikia juu ya ukurasa husika mtandao na kuandika CSS kwa ufanisi zaidi. Pamoja na michache tu ya mistari ya CSS wewe kuona mimi kuandika hapa, Siwezi haraka kufanya kitu kama hii kuangalia kama kitu kama hiki. 

Mimi nina Yusufu, na hii ni CS50. 

[CS50.TV] 

Uh, wapi mimi kuanza? Hebu kufanya hivyo bila - [atacheka] Sawa. Kuongeza - Hebu mimi kubadili kuwa maneno. Ooh. Sorry.