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

Leo tutaweza kuwa na kuzungumza kuhusu CSS au kuachia Style Sheets. 

Basi nini hasa ni CSS? Naam, hebu kuvunja CSS mfupi chini katika sehemu 2: Kuachia na mashuka Sinema. 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 ya ukurasa wa mtandao, mabadiliko ya jinsi ya ukurasa wa mtandao aesthetically inaonekana. Hii ina maana kila kitu kutoka font Nakala na nafasi ya yaliyomo kwenye ukurasa na mambo mengine ya baridi kama kufanya 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? Kuchukua tovuti hii maskini-kuangalia mimi tu aliandika. Kama Rob walikuwa kuangalia tovuti hii sasa hivi, yeye d pengine kusema kitu kama, "Wow kuanzishwa wangu! Inaonekana kutisha. Yusufu, wewe ni designer kubwa." "Kwa kutumia Times default font Helvetica? Ni bora zaidi." 

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

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

Tutaweza kuokoa kueleza baadhi ya mali ya baridi na ngumu zaidi CSS kwa ajili ya video mwingine. Kama una kitu katika akili, tu googling athari unataka ikifuatiwa na CSS pengine kukupa matokeo 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, katika mstari na tag mwanzo. 

Kwa folks ambao kwa kweli kama kuwa na utaratibu, unaweza kuanza kupata kidogo peeved saa jinsi messy hii yote inaonekana. Kufikiria kama alikuwa na kufanya hili kwa ajili ya kila kipengele kwenye ukurasa, pamoja sasa HTML yako na CSS wote ni kuchanganyikana na vitu vingi. Jumla, 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 mambo ambayo maazimio ni kutumiwa. selector pamoja na orodha ya matamko CSS ni mara nyingi hujulikana kama utawala CSS. Sheria hizi atafukuzwa kati ya vitambulisho 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 vitambulisho mtindo katika sehemu ya kichwa cha HTML yetu. Ijayo, selector. Tutaweza kuanza mbali 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 kwa kuandika alama hash ikifuatiwa na ID div wa, kuwaibia. Sasa maazimio. Sisi kuongeza braces wazi na karibu na kuhama maazimio yetu mapema inline juu div Rob ndani ya braces haya, kunawirisha, na, baridi, Rob intro bado ina mpaka nyeusi kuzunguka bala messy ubaya inline. 

Sasa, nini kama sisi alitaka kuchagua ndani h1 ya intro Rob? Unaweza kufikiri, "Hebu kuweka ID juu yake na kisha kuondoka mitindo yetu mapema." Kwamba kazi, lakini CSS ana njia nyingine ya kuruhusu kuchagua mambo kwa kutumia kile tunachokiita combinators kuchanganya selectors rahisi. Kwa mfano, tabia whitespace inaweza kutumika kama Combinator kutaja matukio yote ya 1 selector kwamba kuishi ndani ya selector mwingine. Inaonekana kuwa ngumu zaidi kuliko mengi 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 vitambulisho h1 kwamba kuishi ndani ya kipengele na id = "kuwaibia". Tu kuwashawishi kwamba ni kazi, mimi itabidi mabadiliko ya rangi font nyeupe, kunawirisha, na, tazama, header Rob sasa ni nyeupe. 

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

Ni pamoja na faili hii mpya kama CSS katika hati hii mimi itabidi kutumia kiungo cha HTML tag. Hapa mimi nina kuwaambia ni kwamba mimi nina kuunganisha katika karatasi ya nje style, sifa rel, na kubainisha njia ya faili na href sifa yangu. Sasa wangu ghafi HTML na CSS ni kupangwa vizuri katika mafaili tofauti kabisa, ambayo ni karibu daima njia wabunifu wanapendelea kufanya kazi na HTML na CSS. 

Katika kesi wewe wanashangaa, selectors rahisi ni pamoja na ID selectors na tag selectors kama wale sisi tu kuona pamoja kama darasa selectors kwa ajili ya 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 ajili ya kubainisha styling wakati mwingiliano like mousing juu ya kipengele kutokea. 

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

Kwa kuchanganya selectors hizi na combinators, unaweza kupanua mbalimbali ya styling unaweza kufikia kwenye ukurasa aliyopewa mtandao na kuandika CSS kwa ufanisi zaidi. Na michache tu ya mistari ya CSS 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, ambapo mimi kuanza? Hebu kufanya hivyo bila - [anacheka] Sawa. Kuongeza - Hebu mimi kubadili kwamba maneno. Ooh. Sorry.