[Music kucheza] 

DOUG LLOYD: Basi hebu kuchukua moja zaidi video kuzungumza kuhusu lugha moja zaidi. Wakati huu tutaweza majadiliano juu CSS. Hivyo CSS, ambayo ni fupi kwa Kuachia Style Sheets, ni mwingine tunatumia lugha wakati ujenzi wa Nje. Fikiria kuhusu hilo kama hii. Kama HTML ni nini sisi kutumia ili kuandaa yaliyomo tunataka kuweka kwenye ukurasa wetu, CSS ni chombo kwamba sisi ujumla kutumia Customize jinsi tovuti yetu kuangalia, na jinsi uzoefu user kwa kweli ni, mazungumzo na tovuti yetu. 

Sawa na HTML, CSS ni si lugha ya programu. Haina mantiki. Haina vigezo. Haina aina yoyote ya kwamba kati yake mambo yanayohusiana kwamba C gani. Ni lugha styling. Na syntax yake ni mzuri rahisi, na inaeleza tu jinsi mambo ya yetu ukurasa na HTML fulani mambo lazima iliyopita. Ili kufikia lengo hilo, kama una si lakini kuangalia video wetu juu ya HTML, au ni unfamiliar na HTML kwa ujumla, wewe kutaka tuangalie kwamba kwanza, kwa sababu hii mjadala wa CSS ni kwenda hutegemea baadhi ya ujuzi wa HTML. 

Hivyo hapa ni kweli rahisi CSS XSLT. Hata kama wewe sijawahi iliyowekwa na CSS kabla, Mimi nina uhakika pretty unaweza kufikiri nini hasa XSLT hii haina. Je, ni nini? Naam, kutumika kwa mwili wa mtandao wetu ukurasa, kila kitu kati ya vitambulisho mwili juu ya HTML yetu, na unaweka rangi ya asili ya kwamba ukurasa wa bluu. Naam, ni XSLT rahisi sana. Ni kweli binadamu sana lugha ya kirafiki, CSS. Hivyo hata kama wewe sijawahi kutumika hivyo kabla, pengine inaweza nadhani nini kwamba alifanya. Kwa kweli, kama sisi kubeba ukurasa, ambapo XSLT hii ilikuwa iliyoingia kwa kiasi fulani, rangi ya asili ya ukurasa wetu ingekuwa kuwa bluu, na si kiwango nyeupe. 

Hivyo ni jinsi gani sisi kujenga stylesheets? Vizuri kwanza, inabidi kutambua selector. Katika mfano wa mwisho, kwamba selector ilikuwa mwili. Basi tuna wazi curly brace, na tuko kwenda kuanza kufafanua XSLT kwa kuwa selector. Katika kati ya braces curly, sisi tu kuwa na orodha ya thamani jozi ufunguo. Jozi uliopita thamani alikuwa rangi ya asili ya bluu semicolon, lakini tunaweza kufanya zaidi na zaidi ya hayo. Unaweza kuwa na mambo mbalimbali kutumia kwa kuwa tag, kwamba selector mwili. Kila mmoja wao ni kutengwa kwa semicolon, na tunatoa wito kila mmoja wao tamko, CSS tamko hilo. Wakati sisi ni kosa kwa kila styling sisi unataka kuomba kwa tag fulani, sisi tu curly kufunga wanakabiliwa na kumaliza XSLT, na sisi ni kosa kufafanua XSLT kwa kuwa selector fulani. 

Ni tabia ya baadhi ya kawaida CSS nini? Naam, labda unataka kuweka mpaka karibu kitu. Hivyo unaweza kusema, mpaka, kwamba itakuwa ufunguo wako, na kisha maadili yako itakuwa, nini mtindo, rangi, na upana wewe unataka kuwa ni. Hivyo mtindo inaweza kuwa imara mstari, mstari wa doti, line dashed, mgongo mstari, ambayo itakuwa ni WAVY line. Labda unataka kuwa ni kuwa bluu au nyeusi au kijani. Labda unataka kuwa 1 au 2 au 10 saizi mbalimbali. Unaweza kutaja mambo hayo yote. Labda unataka kuweka historia rangi ya ukurasa wako katika njia fulani. Sisi tayari kuona kwamba, kuweka asili ya mwili kuwa bluu. 

Basi unaweza kutumia neno muhimu, hivyo CSS ina rangi fulani ambazo kujengwa ndani yake, bluu, kijani, nyeusi, rangi rahisi sana tunajua. Lakini unaweza pia kutaja yoyote hex rangi kwamba Ningependa. Kumbuka kwamba rangi yanaweza kutambuliwa na seti ya namba tatu hex 0-255, rg na b, nyekundu, kijani, na bluu sehemu. Na ili tuweze kutaja alama yoyote tunataka kwa, badala ya kutumia rangi ya bluu au kijani au nyeusi, kutumia chupa na kisha sita ya hex, na kwamba atatupa sita tarakimu rangi. Hivyo hiyo ni rangi ya asili. 

Sisi pia kuwa foreground rangi, ambayo ni kawaida kwenda kuwa maandishi ya ukurasa wako. Na unaweza vile vile kufanya hivyo kwa neno muhimu na au sita tarakimu hex. Hivyo unaweza kutaja alama yoyote wanataka kwa maandishi ya ukurasa wako dhidi fulani rangi ya asili, hadi hapo juu. Unaweza pia mabadiliko na kukabiliana kwa maandishi, na njia asilia inavyosema juu ya ukurasa. 

Hivyo unaweza kubadilisha ukubwa wa herufi yako. Unaweza kutumia maneno muhimu, kama vile ziada, ziada ndogo, au xx ndogo, au wa kati, kubwa, na kadhalika. Unaweza kutumia fasta pointi, 10 uhakika, 12 hatua, na kadhalika. Unaweza kutumia asilimia, 80%, 20%, ambapo 100% ni herufi chaguo-msingi ukubwa, ambayo ni kawaida ya kwenda kuwa kitu kama 11 au 12 pointi. Au unaweza hata msingi ni mbali ya hivi karibuni ukubwa wa herufi. Kama wewe tu aliandika kitu na unajua nini unataka ni kwa kuwa ni ndogo, lakini wewe sijui nini hasa ukubwa wewe unataka kuwa, vizuri, unaweza kusema tu, ukubwa wa herufi ndogo. Na itakuwa msingi mbali ya, tu juu juu, ni ukubwa wa herufi. Na unaweza kupata ndogo au kubwa. Hivyo kuna mengi ya tofauti njia ya kutaja ukubwa wa herufi. 

Unaweza pia bayana nini font familia unataka. Kama una hasa jina, kuna njia katika CSS-- sisi siyo kwenda kuzungumza kuhusu suala hilo here-- kufafanua herufi maalum sana na kuiweka katika ukurasa wako. Unaweza pia kutumia majina ya kurefusha maisha. Kuna mengi ya mtandao fonts salama ambazo kabla ya kuelezwa katika CSS. Na kama wewe ni mtumiaji wa Microsoft Ofisi katika miaka 20 iliyopita, wewe pengine ukoo na mengi ya haya mtandao fonts salama Tayari, Times New Roman, Arial, Courier Mpya, Illinois, Tahoma, Verdana, na kadhalika. Wale wote ni kuchukuliwa mtandao fonts salama. Na kwa kweli, sehemu ya sababu wao alikuja kuwa ilikuwa kutumiwa kufanya web-- kila ukurasa alikuwa upatikanaji wa chaguo-msingi huu seti ya fonts na serifs mbalimbali, na haya yote mambo herufi sisi si kupata katika, lakini hizi ni kawaida kupatikana katika CSS yako, hata kama huna vinginevyo kufafanua fonts. Mwisho, unaweza align maandishi yako, badala ya kuwa, kwa default, na kompyuta kwa upande wa kushoto, ungeweza align na haki, au unaweza align ni unaozingatia, au waadilifu ili hit pembezoni zote mbili. Basi hizo chaguzi zote unaweza kutumia kubadili kile maandishi yako inaonekana kama, na jinsi gani kuonyeshwa kwenye ukurasa wako. 

Selectors yako hawana kuwa vitambulisho tu. Sisi hapo awali aliona tag mwili selector, na tag selector haina kuangalia kama hiyo. Wewe jina tag, na kisha kufafanua XSLT kwa tag kwamba. Lakini pia unaweza kufanya kitu aitwaye ID selector. ID selector inaonekana pretty sawa. Lakini taarifa kwamba sasa mimi si kutumia HTML tag, mimi nina kutumia, katika kesi hii, #unique, au hash kipekee. Kama unakumbuka kutoka wetu video juu ya HTML, sisi aliyesema kuhusu jinsi ya vitambulisho wanaweza kuwa na sifa. 

Na sifa moja ambayo inatumika kwa pretty much wote tags, lakini hatukuwa kuzungumzia suala hilo, ni kitu kinachoitwa ID tag. Hivyo CSS hii hasa ingekuwa kuomba tu kwa tag HTML ambayo ina ID maalum sana, kwamba umefanya jina. Hivyo kama una mahali fulani katika kanuni yako, mahali fulani katika HTML faili yako, tag na wewe kutaja kama sifa kwa tag kwamba, ID sawa na ya kipekee, hii XSLT fulani hapa tu kuomba katika kati ya kwamba tag na kitambulisho cha kipekee. 

Unaweza pia kufanya kitu aitwaye darasa selector. Hivyo pamoja na kuwa na ID sifa, unaweza pia kuongeza darasa sifa kwa HTML. Na wakati matumizi ya darasani sifa, inaweza kutumika kwa vitambulisho mbalimbali. Hivyo kama una mambo kadhaa ambayo ni sawa, labda unataka kusema, tag wazi blah, blah, blah, blah, darasa ni sawa na wanafunzi. Na kisha hii hasa XSLT bila kuomba kwa kila tag ambao darasani ni wanafunzi. Katika kesi hiyo, tunatarajia kuweka rangi ya asili na njano, na tunatarajia kuweka opacity, ambayo ni tag hatukuwa kuzungumzia, lakini tu inahusika na jinsi uwazi kitu ni, 70%, katika kesi hii. 

Kuna chaguzi mbili kwa kuandika stylesheets. Unaweza kuandika yao moja kwa moja kwenye HTML yako kwa kuweka stylesheets katika kati ya vitambulisho style. Na vitambulisho wale style kwenda ndani ya vitambulisho mkuu wa mtandao ukurasa wako. Njia labda zaidi kuliko kufanya ni kuandika tofauti css faili, na kisha kuunganisha ndani yako hati kutumia vitambulisho kiungo. Vitambulisho kiungo, tena, ni tofauti na viungo, kama unakumbuka kutoka sehemu yetu HTML. Na vitambulisho kiungo ni jinsi sisi kuvuta katika files tofauti. Ni aina ya kama sawa na # Pamoja kwa programu ya mtandao. 

Basi hebu tuangalie table.HTML. Kama unakumbuka kutoka wetu HTML video, mimi ilionyesha Mfano wa sana kuzidisha rahisi meza kwamba inaonekana pretty mbaya, na labda kuna njia ya kufanya vizuri na CSS, kwa kufanya hivyo kweli kuangalia zaidi kama kuzidisha meza, au kitu kwamba si tu kukwama kwa pamoja na hakuna mgawanyiko halisi kati ya safu na nguzo. Basi hebu kichwa juu ya CS50 IDE, na tuangalie jinsi CSS wanaweza, aina ya, tweak nini sisi ilianza na kabla, na kufanya hivyo kitu mengi zaidi. 

Hivyo tuko katika CS50 IDE sasa, na kama usio wa kawaida, tutaweza kuvuta up katika hii meza kwamba HTML ukurasa. Table.HTML kimsingi tu amefafanua yaliyomo ya multiple-- ilitakiwa kuwa nne na nne kuzidisha meza. Ni pretty moja kwa moja. Na sisi kudhani kuwa ingekuwa kuangalia pretty vizuri utaratibu. Lakini kwa kweli, wakati sisi hakikisho ukurasa huu, tunaona kwamba ni aina ya sura mbaya, sawa? Ni wazi tuna safu na nguzo hapa. Kuna aina fulani ya kujitenga. Lakini siyo kujitenga maana. Sisi siyo kweli kupata sana habari hapa. Na hakuna mgawanyo kati ya safu na nguzo katika suala ya usawa au wima sheria. Tunaweza pengine kufanya hii kuangalia kidogo bora. Basi hebu jaribu. Hivyo nina kwenda kuifunga tabo hii hapa. Na mimi nina kwenda kuifunga table.HTML yangu, na nina toleo mwingine hapa aitwaye table2.HTML. Tutaweza kufungua kwamba up. Mwili wa ukurasa ni pretty kiasi sawa, lakini nimekuwa iliyopita kidogo juu. Na mimi itabidi kitabu juu hapa. Taarifa kwamba wakati huu, mimi nina kutumia iliyoingia vitambulisho style. Nimekuwa kufunguliwa tag style, na mimi nina sasa kufafanua CSS XSLT tu ndani yake. Nina XSLT kwamba anasema, meza. Hiyo ni tag yangu selector. Mimi si kutumia nukta au hash, ambayo napenda kufanya kama mimi Ilikuwa kwa kutumia ID au tabaka selector. Nina tag selector here-- meza. Style hii ni kwenda kuomba kila tag meza. Inavyoonekana nataka kuweka moja pixel pana, mpaka imara bluu, ndani ya meza yangu. Hii inaonekana kama ingekuwa pengine kusaidia hali hiyo, haki? Tunakwenda kuwa na mambo kuangalia mengi zaidi. Hivyo hii ni faini. Stylistically, nimekuwa tu iliyoingia XSLT yangu humu. Ni hakika njia inayofaa ya kufanya hivyo. Hebu kuona nini hii inaonekana kama. Hivyo nitakwenda nyuma chini hapa, na Mimi itabidi itakuwa preview table2.HTML yangu. Naam, hiyo ni si kabisa nini nilitaka, lakini ni nini hasa sisi aliuliza kwa. Sisi alisema kuwa mtindo huu ni kwenda kuomba meza yetu. Meza yetu ya sasa ina pixel moja pana, imara bluu mpaka kuzunguka. Sisi siyo kweli kupata katika seli meza. Sisi ni kupata tu mezani. Hivyo CSS kazi. Ni ina kutumika XSLT kwa meza yetu. Lakini haikuweza kufanya kile sisi alitaka kufanya. Je, sisi kupata kufanya nini tunataka kufanya? 

Naam, hebu tuangalie moja zaidi toleo la hii katika table3.HTML. Hivyo mimi nina kwenda tu karibu tabo hizi. Mimi nina kwenda nyuma zaidi ya hapa kwa wangu faili mti, na kufungua table3.HTML. Tena, ni kwenda kuangalia pretty sawa hapa mwanzoni. Lakini sikia, wakati huu, badala ya kutumia XSLT iliyoingia haki katika huko, Mimi nina kwenda kuunganisha katika XSLT kwa kutumia tag kiungo. Hivyo mimi nina inaonekana kuunganisha katika XSLT aitwaye tables.CSS, na vizuri hii ni sawa na XSLT tu means-- vizuri, ni kitu gani faili jamaa na kile Mimi nina doing-- ni XSLT kwamba mimi nina kutumia kwa ukurasa wangu. Hivyo kama mimi kwa kweli wanataka kuona nini Mimi nina kufanya na CSS hapa, Mimi haja ya kwenda wazi kwamba table.CSS faili vilevile. Hivyo tutaweza kwenda nyuma zaidi ya hapa tena kwa faili mti wetu. Kuna table.CSS. Tutaweza pop ni wazi. Sasa sisi ni kuona kidogo ya CSS. Inavyoonekana, mimi kuwa wanandoa mambo kinachoendelea hapa. Mimi inaonekana wanataka kuweka tano pixel pana, mpaka imara nyekundu, karibu na meza yangu. Sisi tayari kujua kwamba hiyo ni kwenda tu kwenda kwenye mzunguko. Tuliona kwamba katika table2.HTML. Kwa kila mstari, mimi inaonekana wanataka bayana kuwa mstari urefu ni 50 saizi kubwa. Hivyo kwa kila mstari, kukumbuka hilo ndilo tr tag gani, Mimi na kuifanya 50 saizi kubwa. 

Mwisho, nina maoni hii. Na hii ni jinsi sisi kufanya maoni katika CSS. Ni sawa na kumtia kuzuia maoni syntax kufyeka nyota. Nakala unataka wote. Hakuna kufyeka kufyeka ni ingawa katika CSS. Kwa maoni short inline, tuna kutumia muundo huu hasa hapa. Inaonekana kama mimi nina kufanya mambo mengi katika vitambulisho yangu td. Kumbuka vitambulisho td, au meza data, ambayo kwa kweli ni tu nguzo ndani ya safu yetu, na inaonekana kwa kila kipande cha data katika meza yangu, nataka kuweka rangi ya asili kwa kuwa nyeusi, rangi kuwa nyeupe, rangi ni foreground rangi. Hivyo hii ni kwenda kuwa Nakala ya ukurasa wangu. Nataka herufi kubwa, 22 uhakika wa herufi, na mimi nataka kuwa ni ya font familia, Georgia. Hivyo mimi si kwenda kwa na herufi chaguo-msingi. Mimi nina kwenda kutaja Illinois, ambayo ni mmoja wa wale mtandao fonts salama kwamba tumeona kabla. Nataka maandishi yangu kuwa na kompyuta serikali kuu, katikati ya sanduku, Sitaki hilo kuachwa kompyuta au kulia na kompyuta. Na mimi nataka safu yangu upana kuwa 50 saizi mbalimbali kama vile. Hebu tuangalie nini hii inaonekana kama, na kuona kama hii ni labda kuboresha. Hivyo mimi nina kwenda kwa table3.HTML, ambayo wanakumbuka, ni pamoja na table.CSS kama kiungo, na tutaweza hakikisho hilo. Hiyo ni mengi zaidi, sawa? Hii ni kweli mapya ya kuangalia mengi zaidi kama meza kuzidisha. Nina mpaka kuwa nyekundu karibu na meza yangu lakini sasa Mimi pia kuwa maalum kwamba kila mstari ni 50 saizi mbalimbali, au ni 50 saizi tall-- kisingizio ME kila safu ni 50 saizi mbalimbali. Data katika kila safu, na tu data, ina historia nyeusi. Hivyo ndiyo sababu wale mistari nyeupe ni pale. Kwa sababu nafasi katika kati ya yote ya seli hizo, siyo mpaka katika na wenyewe, ni tu Mimi tu kujaza seli, ambayo kwa kweli hufanya mipaka ya meza, ambayo inaonekana hawakuwa zipo wote pamoja, ni alikuwa mwembamba tu nyeupe mistari. Sasa wao uko wazi. Sasa wao pop mbali kwenye screen. Na hivyo hii ni rahisi sana XSLT kwamba nimepata kutumika, na sasa meza yangu inaonekana mengi zaidi kama nne na nne kuzidisha meza, badala ya fujo tu jumbled, ambapo kila kitu ni wazi safu na nguzo, lakini si super kupangwa vizuri. Sisi ni kweli tu scratching ya uso ya nini unaweza kufanya na CSS hapa. Kwa bahati nzuri CSS nyaraka ni pretty moja kwa moja. Itabidi kutumia kadhaa ya wake sifa, haki mara nyingi. Ndio kuongelea mapema katika video hii. Kuna mambo kadhaa kwamba pengine si kutumia wote. Na hiyo ni nzuri, pia. Lakini tu kujua kwamba kuna mengi ya nyaraka huko nje. Hivyo hata kama hatukuwa kufunika kila kitu, wewe ni hakika si wa kushoto juu yako mwenyewe. Lakini CSS ni kweli na furaha kufanya majaribio ya. Na napenda sana moyo kucheza karibu na mtandao kurasa yako, na kuona ni jinsi gani wanaweza kufanya nao kuangalia na kujisikia ya kuboresha user uzoefu wa kutembelea ukurasa wako. Mimi nina Doug Lloyd. Hii ni CS50.