[Mūzikas atskaņošanai] 

Doug LLOYD: Tātad pieņemsim vēl viens video runāt par vēl vienu valodu. Šoreiz mēs runājam par CSS. Tātad CSS, kas ir īss Kaskādes Style Sheets, cita valoda mēs izmantojam kad būvējot mājas lapas. Padomā par to, kā šis. Ja HTML ir tas, ko mēs izmantojam, lai organizētu saturu mēs vēlamies likt mūsu lapā, CSS ir instruments, kas mums parasti izmanto pielāgot to, kā mūsu mājas lapas izskatās, un cik lietotāja pieredzi patiešām ir, mijiedarbojas ar mūsu mājas lapā. 

Līdzīgi kā HTML, CSS ir nav programmēšanas valoda. Tas nav loģiski. Tas nav mainīgie. Tai nav nekāda veida, kas plūsmas, kas saistītas lietas, C dara. Tas ir stils valoda. Un tās sintakse ir diezgan vienkāršs, un tikai apraksta kā pret mūsu lapa ir zināma HTML elementi būtu jāgroza. Tālab, ja jums nav Pagaidām noskatījos mūsu video par HTML, vai ir svešs ar HTML vispār, jums varat apskatīt, kas pirmkārt, tāpēc, ka šī diskusija CSS gatavojas atkarīgs no dažas zināšanas par HTML. 

Tātad, šeit ir patiešām vienkāršs CSS stilu. Pat ja jūs nekad neesmu programmēt ar CSS pirms, Es esmu diezgan pārliecināts, ka jūs varat izrēķināt tieši tas, ko šis stilu dara. Ko tas dara? Nu, ko uz šo ķermeni mūsu mājas lapa, viss starp ķermeņa tagiem mūsu HTML, un tā nosaka fona krāsa šīs lapas uz zilu. Nu, tas ir ļoti vienkāršs stilu. Tas ir tiešām ļoti cilvēks draudzīgi valoda, CSS. Tātad, pat ja jūs nekad neesmu lietojis to pirms, jūs, iespējams, varētu uzminēt, kas tas bija. Patiesībā, ja mēs ielādes lapu, kur šis stilu tika iestrādāta kaut kā, fona krāsa mūsu lapā būtu būt zila, un nav standarta balta. 

Tātad, kā mēs veidot stilu? Nu, pirmkārt, mums ir identificēt selektoru. Pēdējā piemēram, ka selektors bija ķermenis. Tad mums ir atvērts cirtaini lencēm, un mēs esam gatavojas sākt definējot stylesheet šim selektoru. Starp cirtaini lencēm, mēs vienkārši ir saraksts ar galveno vērtību pārus. Iepriekšējā vērtība pāris bija fona krāsa zila semikols, bet mēs varētu darīt vairāk un vairāk no tiem. Jūs varētu būt vairāki lietas, piemērojot uz šo atzīmi, šajā selektora organismā. Katrs no tiem ir atdalītas ar semikols, un mēs aicinām katru no tām deklarācija, CSS deklarācija. Kad mēs esam darījuši visu ieveidošanas mēs vēlas pieteikties uz šo konkrēto tag, mums vienkārši ir noslēguma cirtaini lencēm, lai izbeigtu stilu, un mēs esam darījuši definēt stilu par konkrēto selektoru. 

Kas ir dažas kopējas CSS īpašības? Nu, varbūt jūs vēlaties, lai robežu ap kaut ko. Tātad jūs varat teikt, robeža, tas būtu jūsu atslēga, un tad jūsu vērtības būtu, kāda stila, krāsu, un platums jūs vēlaties, lai to. Tātad stils varētu būt ciets line, punktota līnija, pārtrauktu līniju, vagas līnija, kas būtu viļņota līnija. Varbūt jūs vēlaties, lai to būt zilā vai melnā vai zaļā krāsā. Varbūt jūs vēlaties, lai to 1 vai 2 vai 10 pikseļi plats. Jūs varat norādīt visas šīs lietas. Varbūt jūs vēlaties, lai uzstādītu fona krāsu jūsu lapu kādā konkrētā veidā. Mēs jau redzējām, ka, iestatot fona struktūru, kas būs zilā krāsā. 

Tad jūs varat izmantot atslēgas vārdu, tik CSS ir noteiktas krāsas kas ir iebūvēti tā, zils, zaļš, melns, ļoti vienkāršs krāsas mēs zinām. Bet jūs varat arī norādīt jebkuru hex krāsu, ka jūs vēlaties. Atgādināt, ka krāsas var identificēt ar virkni trīs heksadecimālskaitļus no 0 līdz 255, RG un B, sarkans, zaļš, zils un sastāvdaļa. Un tā mēs varam norādīt jebkura krāsa mēs gribam, ko, nevis izmantojot zila vai zaļa vai melna, izmantojot mārciņu un pēc tam sešus cipari hex, un kas varētu dot mums sešu ciparu krāsa. Tātad tas ir fona krāsu. 

Mums ir arī jaunās zināšanas krāsa, kas ir parasti būs tekstu jūsu lapā. Un jūs varētu līdzīgi darīt ar atslēgas vārdu un vai sešciparu hex. Tātad jūs varat norādīt jebkuru krāsu jūs vēlaties, lai tekstu jūsu lapā pret konkrētu fona krāsa, augšā. Jūs varat arī mainīt un risināt ar fontu, un to, kā teksts tiek padarīti lapā. 

Tātad jūs varat mainīt savu fonta lielumu. Jūs varat izmantot atslēgas vārdus, piemēram, papildus, extra mazs, vai xx maza, vai vidēja, liels, un tā tālāk. Jūs varat izmantot fiksētus punktus, 10 punkts, 12. punkts, un tā tālāk. Jūs varat izmantot procentus, 80%, 20%, kur 100% ir noklusējuma fonts lielums, kas parasti notiek, lai kaut kas līdzīgs 11 vai 12 punktiem. Vai jūs pat varat pamatot to off no pēdējās fonta lielumu. Ja jūs tikko rakstīja kaut ko, un jūs zināt ko jūs vēlaties, ir, lai tas būtu mazāks, bet jūs nezināt, ko tieši izmērs Tev vēlaties, lai to, labi, jūs varat vienkārši pateikt, fonta izmērs mazāks. Un tas būs jāpamato nost no, tikai augšas, tas ir fonta izmērs. Un jūs varat saņemt mazāku vai lielāku. Tātad tur ir daudz dažādi veidi, lai norādītu burtu lielumu. 

Varat arī norādīt, ko fontu ģimene jūs vēlaties. Ja jums ir īpaši vārds, tur ir veids, CSS-- mēs nebrauksim, lai runātu par to here-- definēt ļoti īpašu fontu un iegult to savā lapā. Jūs varat arī izmantot sugas nosaukumiem. Tur ir daudz tīmekļa drošas fontus kas ir iepriekš noteikti CSS. Un, ja esat lietotājs Microsoft Office pēdējo 20 gadu laikā, Jūs, iespējams, iepazinies ar daudz no šīm tīmekļa drošas fontiem jau, Times New Roman, Arial, Courier New, Gruzija, Tahoma, Verdana, un tā tālāk. Tie tiek uzskatīti web drošas fontus. Un tiešām, daļa no iemesls, viņi kļuva tika, ko izmanto, lai padarītu web-- katru lapu bija piekļuve šai noklusējuma noteikt fontu ar dažādiem serifs, un tas viss fonts sīkumi mums nebūs iekļuvuši, bet tie parasti pieejamu savā CSS, pat tad, ja jums nav pretējā gadījumā noteikt fontus. Visbeidzot, jūs varat pielāgot savu tekstu, tā vietā, lai tas ir, pēc noklusējuma, jāsaskaņo pa kreisi, jūs varētu saskaņot to pa labi, vai jūs varētu saskaņot to centrēts, vai pamatots, lai tas skāra gan peļņu. Tātad tie ir visas iespējas, jūs varat izmantot mainīt to, ko jūsu teksta izskatās, un kā tas ir redzams uz jūsu lapu. 

Jūsu selektori nav jābūt tikai tagus. Mēs jau iepriekš redzējām ķermeņa tag selektors, un tag selektors izskatās tieši tāpat. Jūs nosaukums tag, un tad jūs definēt stilu šim tag. Bet jūs varat arī darīt kaut ko sauc par ID selektoru. ID selektors izskatās diezgan līdzīgi. Bet paziņo, ka tagad es neesmu, izmantojot HTML tag, es esmu, izmantojot, šajā gadījumā, #unique vai hash unikāls. Ja jūs atceraties no mūsu video uz HTML, mēs runājām par to, kā tagus var būt atribūti. 

Un viens atribūts, kas attiecas diezgan daudz visiem HTML tagiem, bet mēs neesam par to runāt, ir kaut kas ko sauc par ID tag. Tātad šis īpaši CSS būtu attiecas tikai uz HTML tagu, kas ir ļoti specifisks ID, ka esat nosaukts. Tātad, ja jums ir kaut kur Jūsu kodu, kaut kur Jūsu HTML failu, birku un jums norādīt kā atribūts uz šo frāzi, ID vienāds unikāls, tas īpaši stilu šeit attieksies tikai starp ka tag ar ID unikāls. 

Jūs varat arī darīt kaut ko sauc klases selektoru. Tā papildus tam ID atribūti, varat arī pievienot klases atribūtu HTML tagus. Un, kad jūs izmantojat klases atribūtu, to var piemērot vairākiem tagiem. Tātad, ja jums ir vairākas lietas, kas ir līdzīgi, varbūt jūs vēlaties teikt, open tag blah, blah, blah, blah, klase vienāds studentus. Un tad tas īpaši stilu attiektos katram tag kura klase ir studenti. Šajā gadījumā, mēs gribētu iestatīt fona krāsa dzeltena, un mēs gribētu noteikt necaurredzamību, kas ir tag mēs nerunājām par, bet tikai nodarbojas ar to, kā caurspīdīgs kaut kas ir, līdz 70%, kas šajā gadījumā. 

Ir divas iespējas rakstīšanas stilu. Jūs varat rakstīt tos tieši jūsu HTML ievietojot stilu starp stila tagiem. Un tie stila tags iet iekšā galvu tagus jūsu mājas lapā. Varbūt vairāk vēlamais veids, kā to izdarīt tas ir rakstīt atsevišķu .CSS failu, un pēc tam saistīt to savā dokumentu, izmantojot saiti tagus. Link tags, atkal, ir atšķiras no hipersaites, Ja jūs atceraties no mūsu video HTML. Un saite tagi ir, kā mēs ieraut atsevišķos failos. Tas kārtot līdzīgu ekvivalentu Šis #include web programmēšanu. 

Tātad, pieņemsim to apskatīt table.HTML. Ja jūs atceraties no mūsu HTML video, es parādīja piemērs ļoti vienkāršs pavairošana Tabulā, kas izskatījās diezgan neglīts, un varbūt tur ir veids, kā padarīt to labāk ar CSS, lai tā tiešām izskatās vairāk kā reizināšanas galda, vai kaut kas kas ir ne tikai iestrēdzis kopā bez faktisko sadalījumu starp rindām un kolonnām. Tātad pieņemsim dodies uz CS50 IDE, un to apskatīt pie kā CSS var kārtot, kniebiens ko mēs sākām ar pirms, un dara to kaut kas daudz labāks. 

Tātad mēs esam CS50 IDE tagad, un, ja svešs, mēs uzvilkt šajā Tabulā, kas HTML lapas. Table.HTML būtībā tikai definē saturu kādas multiple-- tā bija jābūt četru līdz četru reizināšanas tabulu. Tas ir diezgan vienkārši. Un mēs varētu domāt, ka tas izskatās diezgan labi organizēta. Bet patiesībā, ja mēs priekšskatīt šo lapu, mēs redzam, ka tas ir sava veida neglīts, vai ne? Protams, mēs ir rindas un kolonnas šeit. Ir daži no atdalīšanas veida. Bet tas nav nozīmīgs atdalīšana. Mēs esam ne faktiski kļūst pārāk daudz informācijas šeit. Un tur nav nodalīšana rindas un kolonnas ziņā Horizontālo vai vertikālo noteikumiem. Mēs varētu droši veikt šo izskatās mazliet labāk. Tātad pamēģināsim. Tāpēc es esmu gatavojas slēgt šo cilni šeit. Un es esmu gatavojas slēgt savu table.HTML, un man ir cits versija šeit sauc table2.HTML. Mēs atvērt, ka līdz. Ķermenis lapas ir diezgan daudz to pašu, bet es esmu mainījušies mazliet augšpusē. Un es ņemšu ritinātu šeit. Ievērojiet, ka šoreiz, es esmu Izmantojot iegulto stila tagus. Esmu atvērts stila tagu, un es esmu tagad definēt CSS stilu tikai iekšpusē no tā. Man ir stilu, kas saka, galdu. Tas ir mans tag selektors. Es neesmu, izmantojot dot vai hašišu, ko es varētu darīt, ja es bija, izmantojot ID vai klases selektoru. Man ir tag selektora here-- tabulu. Šis stils ir gatavojas attiecas uz katru galda tag. Acīmredzot es gribu likt vienu pixel plata, cieta zils robežu, iekšā mana galda. Tas izklausās tā, iespējams, palīdzēt šo situāciju, vai ne? Mēs ejam, lai būtu lietas izskatās daudz labāk. Tātad tas ir labi. Stilistiski, es esmu tikai iestrādāta manu stilu šeit. Tas noteikti ir pieņemams veids, kā to darīt. Let 's redzēt, kā tas izskatās. Tāpēc es iešu atpakaļ uz leju šeit, un Es būs preview manu table2.HTML. Nu, tas nav gluži tas, ko es gribēju, bet tas ir tieši tas, ko mēs lūdzām. Mēs teicām, ka šis stils ir gatavojas pieteikties uz mūsu galda. Mūsu tabula šobrīd ir viena pikseli plata, cieta zila apmale ap to. Mēs esam ne faktiski kļūst pie galda šūnām. Mēs esam tikai iegūt pie galda. Tātad CSS strādāja. Tā ir piemērota stilu uz mūsu galda. Bet nav gluži darīt tas, ko mēs vēlējāmies to darīt. Kā mēs nokļūt darīt ko mēs gribam to darīt? 

Nu, pieņemsim to apskatīt vairāk vienā versija to table3.HTML. Tāpēc es esmu tikai gatavojas slēgt šīs cilnes. Es iešu atpakaļ pār šeit, lai mana failu koku, un atvērt table3.HTML. Atkal, tas notiek, lai izskatās diezgan Līdzīga šeit sākumā. Bet paziņojums, šoreiz, nevis izmantojot stilu iestrādāta tiesības tur, Es esmu gatavojas saiti stilu, izmantojot saiti tagu. Tāpēc es esmu acīmredzot saistot ar stilu sauc tables.CSS, un tas arī ir vienāds stilu tikko means-- labi, kāda ir šo failu, salīdzinot ar to, ko Es esmu doing-- ir stilu, kas es esmu izmantojot manu lapu. Tātad, ja es tiešām gribu redzēt, ko Es esmu dara ar CSS šeit, Man vajag, lai iet open ka table.CSS failu, kā arī. Tātad mēs iet atpakaļ vairāk nekā šeit atkal mūsu failu koku. Tur ir table.CSS. Mēs pop to atvērtu. Tagad mēs redzam mazliet par CSS. Acīmredzot, man ir pāris lietas notiek šeit. Es acīmredzot gribu likt piecas pixel plata, cieta sarkanā robeža, ap mana galda. Mēs jau zinām, ka tas notiek tikai iet uz perimetru. Mēs redzējām, ka table2.HTML. Ar katru rindu, es acīmredzot vēlas norādīt ka rindas augstums ir 50 pikseļus augsts. Tātad par katru kārtas, atcerieties tas ko tr tag dara, Es esmu padarot to 50 pikseļus augsts. 

Visbeidzot, man ir šo komentāru. Un tas ir tas, kā mēs komentārus CSS. Tas ir ļoti līdzīgs sagrābt bloku komentāri sintakse slash zvaigžņu. Visu tekstu vēlaties. Nav slash slash lai gan CSS. Attiecībā uz īstermiņa inline komentārus, mums ir izmantot šo konkrēto formātu šeit. Izskatās, ka es esmu dara lietas manā td tagus daudz. Atcerēties td tagus, vai galda dati, kas patiešām ir tikai kolonnas iekšpusē Mūsu rindas, un acīmredzot par katru gabalu datu jo mana galda, es gribu lai uzstādītu fona krāsu melns, kamēr krāsa ir balta, krāsa ir priekšplāna krāsu. Tātad tas būs teksts manu lapu. Es gribu liels fontu, 22 punkts fontu, un es gribu ka tas ir no fontu saimes, Gruzija. Tāpēc es neesmu gatavojas ir noklusējuma fontu. Es esmu gatavojas, lai norādītu Gruzijai, kas ir viena no tām tīmekļa drošas fontus ka mēs esam redzējuši iepriekš. Es vēlos, lai mana teksts ir jāsaskaņo centralizēti, vidū kastes, Es nevēlos, lai to pa kreisi jāsaskaņo vai pa labi jāsaskaņo. Un es gribu savu kolonnu platumu jābūt 50 pikseļus plats, kā arī. Pieņemsim to apskatīt ko tas izskatās, un redzēt, ja tas ir iespējams, ir uzlabojums. Tāpēc es iešu uz table3.HTML, kas Atsaukt, ietver table.CSS kā saite, un mēs apskatīt to. Tas ir daudz labāk, vai ne? Tas tiešām sāk izskatīties vairāk kā reizināšanas tabulu daudz. Man ir šī sarkanā robeža ap mana galda, bet tagad Man arī ir norādīts, ka Katrā rindā ir 50 pikseļi plats, vai tas ir 50 pikseļi tall-- attaisnojums me-- katra kolonna ir 50 pikseļus plats. Katras kolonnas datus, un tikai dati, ir melna fona. Tātad, tāpēc tie baltas līnijas ir tur. Tā kā telpa starp visām šīm šūnām, tas nav robeža un pati par sevi, tā ir tikai Es esmu tikai aizpildot šūnas, kas faktiski padara robežas tabulas, kas acīmredzot pastāv visi kopā, to bija tikai plānas baltas līnijas. Tagad viņi ir redzami. Tagad tie pop off uz ekrāna. Un tā tas ir ļoti vienkāršs stilu, ka es esmu piemērots, un tagad mana galda izskatās daudz vairāk, piemēram, četru līdz četru reizināšanas tabulu, tā vietā, lai vienkārši jumbled putru, kur viss ir skaidri rindas un kolonnas, bet ne super labi organizēta. Mēs esam tiešām tikai nesaskrāpē virsmas par to, ko jūs varat darīt ar CSS šeit. Par laimi CSS dokumentācija ir diezgan vienkārši. Jūs izmantojat vairākas tās atribūti, diezgan bieži. Tiem, mēs runājām par iepriekš šajā video. Ir vairāki, kas jums droši vien neizmantos visu. Un tas ir labi, too. Bet tikai zinu, ka tur ir Dokumentācijas daudz kas tur. Tātad, pat ja mēs nesedza visu, jūs, protams, ne pa kreisi, par savu. Bet CSS ir patiešām jautri eksperimentēt ar. Un es būtu ļoti iesakām spēlēt aptuveni ar jūsu mājas lapu, un redzēt, kā jūs varat padarīt tos izskatīties un justies, lai uzlabotu lietotāju pieredze apmeklē jūsu lapu. Es esmu Doug Lloyd. Tas ir CS50.