[MUSIC JOC] 

DOUG LLOYD: Așa că haideți să o mai video pentru a vorbi despre o singură limbă mai mult. De data aceasta vom vorbi despre CSS. Deci CSS, care este prescurtarea de la Cascading Style Sheets, este o altă limbă folosim atunci când se construiește site-uri web. Gandeste-te ca aceasta. Daca HTML este ceea ce vom folosi pentru a organiza conținut dorim pentru a pune pe pagina noastră, CSS este un instrument pe care le folosim, în general, pentru a personaliza modul în care arata site-urile noastre, și modul în care experiența utilizatorului într-adevăr este, interacționează cu site-ul nostru. 

Similar cu HTML, CSS este nu un limbaj de programare. Ea nu are logică. Ea nu are variabile. Ea nu are nici un fel de care flux lucruri legate de faptul ca C nu. Este o limbă styling. Și sintaxa sa este destul de simplu, și doar descrie cum elementele noastre Pagina au anumite HTML Elementele trebuie modificată. În acest scop, în cazul în care nu ați făcut vizionat încă videoclipul nostru pe HTML, sau nu sunt familiarizati cu HTML În general, ar putea dori să aruncăm o privire la care în primul rând, pentru că această discuție de CSS va depinde de unele cunoștințe de HTML. 

Deci, aici e un adevărat simplu stylesheet CSS. Chiar dacă nu ați mai programate cu CSS înainte, Sunt destul de sigur vă puteți da seama exact ceea ce face această foaie de stil. Ce face? Ei bine, aplicat pe corpul nostru web pagină, totul între tag-uri de corp pe HTML nostru, și-l stabilește culoare de fundal a paginii de albastru. Ei bine, e un stylesheet foarte simplu. Este de fapt foarte uman limbă prietenos, CSS. Deci, chiar dacă nu ați mai folosit înainte, probabil ar putea ghici ce a făcut asta. De fapt, dacă ne-am încărcat o pagină, în cazul în care acest foaie de stil a fost încorporat într-un fel, culoarea de fundal a paginii noastre ar fie albastru, și nu standard alb. 

Deci, cum putem construi de stil? Ei bine în primul rând, trebuie să ne identifica un selector. În ultimul exemplu, care a fost selector corp. Apoi, avem un dialog deschis bretele buclat, iar noi suntem O să înceapă definirea stylesheet pentru selector. În între acolade, am doar o listă de perechi de valori-cheie. Perechea valoare precedent a fost fundal de culoare albastru și virgulă, dar am putea face mai mult și mai mult de acestea. Ai putea avea mai multe lucruri aplicarea pentru că tag-ul, acest organism selector. Fiecare dintre ele este separată printr-o punct și virgulă, iar noi numim fiecare dintre ele o declarație, o declarație CSS. Când am terminat cu toate WE styling doresc să se aplice ca tag-ul special, avem doar o buclat de închidere bretele pentru a termina foaia de stil, si am terminat definirea de stil pentru că selector special. 

Care sunt unele proprietăți comune CSS? Ei bine, poate că doriți să puneți un chenar în jurul ceva. Astfel încât să puteți spune, de frontieră, care ar fi cheia dvs., și apoi valorile ar fi, ce stil, culoare, și lățimea vrei sa fie. Deci, stilul ar putea fi un solid linie, o linie punctată, o linie punctată, o linie creasta, ceea ce ar fi linie ondulată. Poate vrei să-l aibă fi albastru sau negru sau verde. Poate vrei sa fie 1 sau 2 sau 10 de pixeli lățime. Puteți specifica toate aceste lucruri. Poate doriți să setați fundalul culoarea paginii într-un mod special. Am văzut deja că, stabilirea de fond a organismului de a fi albastru. 

Apoi, puteți utiliza un cuvânt cheie, astfel CSS are anumite culori care sunt construite în ea, albastru, verde, negru, un foarte simplu de culori pe care le cunoaștem. Dar puteți specifica, de asemenea, orice hex de culoare pe care doriți. Reamintim că culorile pot fi identificate printr-un set de trei cifre hex la 0 la 255, rg și B, au componentă roșu, verde și albastru. Și astfel încât să putem specifica orice culoare ne-o dorim de, loc de a folosi albastru sau verde sau negru, folosind lire și apoi șase cifre de hex, și care ne-ar da culoarea șase cifre. Deci, asta e culoarea de fundal. 

Avem, de asemenea prim-plan culoare, care este de obicei va fi textul paginii. Și ați putea face în mod similar ca cu cuvânt cheie și sau șase cifre hex. Astfel încât să puteți specifica orice culoare doresc pentru textul paginii împotriva unui anumit culoare de fundal, deasupra. Asemenea, puteți schimba și să se ocupe cu font, și modul în care textul este redat pe pagina. 

Astfel încât să puteți schimba dimensiunea fontului. Puteți folosi cuvinte-cheie, cum ar fi în plus, foarte mic, sau xx mici, sau mijlocii, mare, și așa mai departe. Puteți folosi puncte fixe, 10 punct, punctul 12, și așa mai departe. Puteți folosi procente, 80%, 20%, în cazul în care 100% este fontul implicit Dimensiunea, care este de obicei va fi ceva de genul 11 ​​sau 12 puncte. Sau puteți chiar baza pe din cel mai recent dimensiunea fontului. Dacă ai scris ceva și știi ceea ce vrei este pentru ca acesta să fie mai mici, dar nu știu exact ce dimensiune vrea sa fie, bine, vă pot spune doar, dimensiunea font mai mic. Și se va baza off de la, doar deasupra, e dimensiunea fontului. Și puteți obține mai mici sau mai mari. Deci, există o mulțime de diferite moduri de a specifica dimensiunea fontului. 

Puteți specifica, de asemenea, ceea ce Familia de fonturi vrei. Dacă aveți un anumit nume, există o modalitate în CSS-- nu vom să vorbească despre asta here-- pentru a defini un foarte specific font și încorpora în pagina ta. Puteți utiliza, de asemenea denumiri generice. Există o mulțime de fonturi web sigure care sunt pre-definite în CSS. Și dacă sunteți un utilizator de Microsoft Birou în ultimii 20 de ani, esti, probabil, familiarizat cu o mulțime de aceste fonturi web sigure deja, Times New Roman, Arial, Courier New, Georgia, Tahoma, Verdana, si asa mai departe. Acestea sunt considerate toate fonturile web sigure. Și, de fapt, o parte din motiv pentru care a ajuns să fie a fost să fie folosit pentru a face web-- fiecare pagină au avut acces la acest set de fonturi implicit cu diverse serif-uri, si toate acestea chestii font nu vom intra în, dar acestea sunt de obicei accesibile în CSS-ul, chiar dacă nu în caz contrar defini fonturile. În cele din urmă, puteți alinia textul, în loc de a fi, în mod implicit, aliniat la stânga, ai putea aliniați-l la dreapta, sau ai putea alinia centrat, sau justificat astfel încât să lovit ambele margini. Deci, acestea sunt toate optiunile care le puteți utiliza pentru a schimba ceea ce textul arata ca, și modul în care este afișat pe pagina ta. 

Selectoare tale nu trebuie să fie Tags. Am văzut anterior o etichetă organism selector, și selectorul tag arata exact ca asta. Tu numi tag-ul, și apoi defini un stylesheet pentru acea etichetă. Dar puteți face, de asemenea, ceva numit un selector ID. Un selector ID arata destul de similare. Dar observați, că acum nu mă folosind un tag HTML, eu sunt, folosind, în acest caz, #unique, sau hash unic. Dacă vă amintiți de la noastre video pe HTML, am vorbit despre modul în care tag-uri pot avea atribute. 

Și un atribut care se aplică pentru destul de mult toate etichetele HTML, dar nu am vorbi despre asta, este ceva numit un tag ID. Deci, acest special CSS ar se aplică numai tag HTML care are un foarte specific de identitate, pe care le-ați numit. Deci, dacă aveți pe undeva în codul dvs., undeva în fișierul dvs. HTML, o etichetă și specifica ca un atribut pentru că tag-ul, ID este egal unic, acest special stylesheet aici se vor aplica numai în între că tag-ul cu ID-ul de unic. 

Puteți face, de asemenea, ceva numit un selector de clasă. Deci, în afară de a avea ID atribute, puteți, de asemenea adăuga un atribut de clasa a tag-uri HTML. Și atunci când utilizați un atribut de clasă, acesta poate fi aplicat la mai multe etichete. Deci, dacă aveți mai multe lucruri pe care sunt similare, poate vrei să spui, tag deschis bla, bla, bla, bla, clasa egal de studenți. Și apoi acest special stylesheet-ar aplica pentru fiecare tag a căror clasă este de studenți. În acest caz, vom seta culoarea de fundal la galben, si am stabilit opacitate, care este o etichetă nu am vorbi despre, ci doar se ocupă cu modul transparent ceva este, la 70%, în acest caz. 

Există două opțiuni pentru scris de stil. Aveți posibilitatea să le scrie direct în HTML prin plasarea de foi de stil între tag-uri de stil. Și aceste etichete de stil merge în interiorul etichetele capul paginii web. Poate mai preferat mod de a face este de a scrie un fișier .css separat, și apoi link-ul în ta document folosind tag-uri link-ul. Tag-uri Link, din nou, sunt diferit de hyperlink-uri, dacă vă amintiți de la video noastră de HTML. Și tag-uri link-ul sunt modul în care trage în fișiere separate. Se fel de echivalentul a #include pentru programare web. 

Deci, haideți să aruncăm o privire la table.HTML. Dacă vă amintiți de la noastre Film HTML, am arătat un exemplu de o foarte multiplicare simplu tabel care arata destul de urât, și poate nu e un mod de a face mai bine cu CSS, pentru a face să arate de fapt mai mult ca o multiplicare masă, sau ceva care nu este doar lipite cu nici o diviziune reală între rândurile și coloanele. Deci, haideți să peste cap de la CS50 IDE, și să ia o privire la modul în care pot CSS, un fel de, tweak ceea ce am început cu înainte, și de a face ceva mult mai bine. 

Deci suntem în CS50 IDE acum, și în cazul în care nefamiliare, vom trage în această tabel care pagina HTML. Table.HTML practic doar definește conținutul de un multiple-- trebuia sa fie un tabel de multiplicare patru de patru. E destul de simplu. Și noi ar putea crede că aceasta ar arata destul de bine organizat. Dar, de fapt, atunci când am examina această pagină, vom vedea că e un fel de urât, nu? În mod clar, avem rânduri și coloane de aici. Există un fel de separare. Dar nu este o separare semnificativ. Nu ne obtinerea de fapt prea multe informații aici. Și nu există nici o separare între rânduri și coloane în ceea ce privește a normelor orizontale sau verticale. Probabil am putea face acest lucru uite un pic mai bine. Deci, hai să încercăm. Deci, am de gând să închidă această filă aici. Și am de gând să închidă table.HTML mea, și am o alta versiune aici numit table2.HTML. Vom deschide în sus. Corpul paginii este destul de mult la fel, dar m-am schimbat o pic la partea de sus. Și voi derula în sus aici. Observați că de data asta, eu sunt folosind tag-uri de stil integrate. Am deschis o etichetă stil, și eu sunt acum definind o foaie de stil CSS doar în interiorul de ea. Am o foaie de stil care spune, de masă. Asta e selector meu tag. Eu nu sunt, folosind punct sau hash, pe care aș face dacă aș a fost folosind un ID sau un selector de clasă. Am un tabel here-- selector tag. Acest stil este de gând să se aplică fiecare tag masă. Se pare că vreau să pun un pixel larg, de frontieră albastru, interior masa mea. Asta sună ca ar probabil ajuta situația, nu? Vom avea lucrurile arata mult mai bine. Deci acest lucru este bine. Stilistic, am doar încorporat stylesheet meu aici. Este cu siguranță un mod acceptabil de a face acest lucru. Să vedem ce arata asta ca. Așa că o să mă întorc aici, și Voi va examina table2.HTML meu. Ei bine, asta nu e chiar ceea ce am vrut, dar este exact ceea ce am cerut. Am spus că acest stil este O să se aplice la masa noastră. Masa noastră are acum un pixel unul largă de frontieră, solid albastru în jurul ei. Nu ne obtinerea de fapt la celulele de masă. Noi doar obtinerea la masa. Deci, CSS lucrat. Ea a aplicat o stylesheet la masa noastră. Dar nu prea face ceea ce ne-am dorit să facem. Cum ajungem să facem ceea ce vrem să facem? 

Ei bine, haideți să aruncăm o privire la o mai versiune de acest lucru în table3.HTML. Așa că am de gând să închidă doar aceste file. Mă duc să mă întorc aici pentru a-mi copac dosar, și să deschidă table3.HTML. Din nou, o să se uite destul de similară aici la început. Dar notificare, de data aceasta, în loc să utilizați o foaie de stiluri încorporate chiar acolo, Am de gând să link în stylesheet folosind tag-ul link-ul. Deci, eu sunt aparent leagă într-un stylesheet numit tables.CSS, și acest bine este egal stylesheet doar înseamnă: de bine, ceea ce este acest fisier relativ la ceea ce Sunt doing-- este un stylesheet că eu sunt folosind pentru pagina mea. Deci, dacă eu chiar vreau să văd ce Fac cu CSS aici, Am nevoie pentru a merge deschis care fișier table.CSS, de asemenea. Deci ne întoarcem aici din nou în copac noastre fișier. Nu e table.CSS. Vom pop deschise. Acum vedem un pic de CSS. Aparent, am un cuplu de lucruri se întâmplă aici. Se pare că vreau să pun o perioada de cinci pixel larg, chenar roșu solid, în jurul valorii de masa mea. Știm deja că se întâmplă pentru a merge doar pe perimetrul. Am văzut că în table2.HTML. Cu fiecare rând, am aparent doriți să specificați că înălțimea rând este de 50 de pixeli mare. Deci, pentru fiecare rând, amintiți-vă asta e ceea ce face tag-ul tr, Fac o 50 de pixeli mare. 

În cele din urmă, am acest comentariu. Și acest lucru este modul în care vom face comentarii în CSS. Este foarte similar cu profite bloc Comentariile sintaxă stele slash. Tot textul pe care doriți. Nu e nici o bară oblică slash, deși în CSS. Pentru scurte comentarii inline, avem pentru a utiliza acest format special aici. Se pare că fac o mulțime de lucruri în Tag-urile mele TD. Amintiți-vă etichete TD, sau de masă date, care de fapt sunt doar coloanele din interiorul rânduri noastre, și aparent pentru fiecare bucată de date în masa mea, vreau pentru a seta culoarea de fundal a fie negru, culoarea sa fie de culoare albă, Culoarea este culoarea prim-plan. Deci, aceasta va fi textul pagina mea. Vreau font mare, 22 punctul font, și vreau să fie din familia de fonturi, Georgia. Deci, eu nu am de gând să au fontul implicit. Am de gând să se precizeze Georgia, care este una dintre acele fonturi web sigure pe care le-am văzut înainte. Vreau textul meu să fie aliniate central, in mijlocul careului, Nu vreau să fie lăsat aliniat sau aliniat dreapta. Și vreau lățime meu coloană să fie de 50 de pixeli lățime, de asemenea. Să aruncăm o privire la ceea ce arata ca acest, și a vedea dacă acest lucru este, poate, o îmbunătățire. Deci, am de gând să merg la table3.HTML, care Reamintim, include table.CSS ca o legătură, și vom examina. Asta e mult mai bine, nu? Aceasta este de fapt începe să arate o mai mult ca un tabel de multiplicare. Am că chenar roșu în jurul valorii de masa mea, dar acum Am de asemenea, au specificat că fiecare rând este de 50 de pixeli lățime, sau este de 50 de pixeli tall-- scuză mine-- fiecare coloană este de 50 pixeli lățime. Datele din fiecare coloană, și numai datele, are un fundal negru. Deci, de aceea cei linii albe sunt acolo. Deoarece spațiul în între toate aceste celule, nu este o frontieră în și de sine, e doar Sunt de umplere numai în Celulele, care de fapt face granițele tabel, care aparent exista tot timpul, ea a fost linii albe doar subțiri. Acum sunt vizibile. Acum, ei pop de pe pe ecran. Și astfel încât acesta este un foarte simplu stylesheet care le-am aplicat, și acum masa mea arata mult mai mult ca un tabel patru de către patru multiplicare, în loc de o mizerie doar amestecate, în cazul în care totul este în mod clar rânduri și coloane, dar nu super-bine organizat. Suntem într-adevăr zgarieturi doar suprafata de ceea ce se poate face cu CSS aici. Din fericire documentația CSS este destul de simplă. Vei folosi mai multe dintre sale atribute, destul de frecvent. Cei despre care am vorbit mai devreme în acest videoclip. Există mai multe pe care le probabil, nu va folosi toate. Și asta e bine, de asemenea. Dar doar știu, că există o mulțime de documentare acolo. Deci, chiar dacă nu am acoperi totul, cu siguranță nu ești lăsat pe cont propriu. Dar CSS este foarte distractiv de a experimenta cu. Și v-aș încuraja puternic sa te joci cu paginile dvs. de web, și a vedea cum le puteți face arata si se simt de a îmbunătăți utilizator Experiența pe pagina ta. Sunt Doug Lloyd. Acest lucru este CS50.