[Powered by Google Translate] [CSS] [Joseph Ong - Universitatea Harvard] [Acest lucru este CS50. - CS50.TV] 

Astăzi vom vorbi despre CSS sau Cascading Style Sheets. 

Deci, exact ceea ce este CSS? Ei bine, hai să rupă termen CSS jos în 2 părți: Cascading Style Sheets și. Cascadă este un pic mai complex, si e ceva ce vom acoperi într-un alt film. Dar pentru început, Style Sheets indicii foarte mult la ceea ce face CSS. Aceasta adaugă la stiluri HTML al unei pagini web, schimbarea modului pagina web punct de vedere estetic arata. Acest lucru înseamnă totul, de la fontul textului la poziționarea conținutului de pe pagina la alte lucruri interesante, cum ar fi efectuarea colțurile rotunjite-o cutie sau adăugarea de umbre la text. Puteți face chiar și lucruri nebunești ca face lucrurile anima pe ecran. 

Deci, cum putem folosi CSS cu HTML? Luați acest site săracă cu aspect am scris. În cazul în care s-au Rob sa se uite la acest site chiar acum, el ar spune, probabil, ceva de genul, "Wow introducerea mea arată! Groaznic. Joseph, ești un designer de îngrozitor." "Utilizarea fontul Helvetica Times implicit este? Atât de mult mai bine." 

Deci, ceea ce ar putea fi mai simplu mod de a aplica Coafura Rob vrea? Loturile cele mai evidente modul de oameni au scris inițial CSS a fost de a pune ceea ce noi numim declarații de stil chiar în elementul în sine folosind atributul style HTML. O declarație de stil pur și simplu constă în proprietatea elementului HTML CSS vrem să se schimbe urmată de două puncte, urmat de noua valoare a proprietății și punct și virgulă la sfârșitul anului. De exemplu, să presupunem că Rob vrea un chenar negru în jurul valorii de introducerea sa. Am pus prima atributul de stil pe div lui Rob aici apoi în interiorul ghilimele duble pus o declarație de CSS: "Frontieră: 1px solid black;" Pixel 1 se referă la lățimea de frontieră, solide se referă la stilul de frontieră, și culoarea de la sfârșitul determină ce culoare de frontieră este. 

Dacă vrem mai multe stiluri de pe un element, scrie aceste declarații în ordine. De exemplu, în cazul în care Rob vrea textul său antet, în Helvetica, cu un fundal albastru și mai mult spațiu în jurul textului, putem face acest lucru: style = "font-family: Helvetica; culoare de fundal: albastru; padding: 5px;" Punct și virgulă Ultima este de fapt opțional, dar oamenii păstrează, de obicei, într-de dragul consecvenței lui. 

Vom salva explică unele din proprietățile mai rece și mai complexe CSS pentru un alt videoclip. Dacă aveți ceva în minte, Googling doar efectul dorit, urmat de CSS probabil, va da rezultate destul de bune. Lucru cool este faptul că este destul de larg CSS, deci sansele sunt, dacă este ceva ce vrei să faci - în termen de motiv - CSS poate face, probabil,. Noi numim acest tip de styling Coafura linie. Stilul element este, de asemenea, în conformitate cu tag-ul de start. 

Pentru oameni care într-adevăr place să fie organizate, s-ar putea începe obtinerea un pic enervat la modul murdar toate astea pare. Imaginați-vă dacă ați avut de a face acest lucru pentru fiecare element de pe pagină, plus acum codul HTML și CSS sunt toate amestecate și aglomerat. Brută, corect? Pentru a remedia această problemă, oamenii au început în cele din urmă de capturare pentru a separa lor HTML markup de la designul lor CSS, prin utilizarea ceva numit selectoare CSS. Selectoare CSS sunt utilizate pentru a alege elementele de care declarațiile sunt aplicate. Un selector combinat cu o listă de declarații CSS este adesea menționată ca o regulă CSS. Aceste norme vor fi puse între tag-uri deschise și aproape de stil HTML, de multe ori în capul documentului. 

E mult mai ușor pentru a vedea un exemplu, Deci hai să începem prin crearea unui simplu regulă CSS. În primul rând, hai să punem etichete de stil în partea de capul nostru HTML. În continuare, selectorul. Vom începe prin utilizarea unuia dintre cele mai simple selectoare, simbol hash, care selectează un element HTML prin atributul ID-ul său. În acest caz, vom selecta div care reprezintă introducerea lui Rob prin tastarea simbolul hash, urmat de ID-ul div lui, Rob. Acum declarațiile. Am adăuga bretele deschise și închideți și schimbe declarațiile anterioare noastre in linie pe div lui Rob în interiorul acestor paranteze, de reîmprospătare, și, rece, intro Rob are încă un chenar negru în jurul valorii de minus aceasta linie urâțenia murdar. 

Acum, dacă ne-am dorit pentru a selecta interiorul H1 de intro lui Rob? Ai putea crede că, "Să punem un ID de pe ea și apoi mutați stilurile noastre anterioare." Care funcționează, dar CSS are alte modalități de a vă permite să selectați elemente prin utilizarea ceea ce noi numim combinatoare pentru a amesteca selectoare simple. De exemplu, un caracter spațiu poate fi folosit ca un combinator pentru a specifica toate instanțele de 1 selector care trăiesc în interiorul unui alt selector. Asta sună mult mai complicat decât este de fapt. Iată un exemplu. Vom tastați # jefui, adăugați un spațiu, și urmați-l cu un H1, un alt selector simplu numit un selector de etichetă care selectează tipurile de elemente ca divs sau paragrafe. Spațiu combina cele 2 Selectoare simple, aplicarea tuturor declarațiilor CSS și acolade pentru tag-uri h1, care traiesc in interiorul elementului cu id = "Rob". Doar pentru a vă convinge că funcționează, voi schimba culoarea fontului la alb, de reîmprospătare, și, uite, antetul lui Rob este acum alb. 

Toate aceste lucrări se duce pentru a arăta că prin utilizarea de reguli, în loc de stiluri inline putem obține codul mult mai curat. De fapt, în cazul în care acest bloc în stil incepe sa ia un pic de mare, Eu pot trage chiar si aceste stiluri afară într-un fișier cu totul diferit. 

Pentru a include acest fișier nou ca CSS în acest document voi folosi doar link-ul tag-ul HTML lui. Aici eu o spun ca am legarea într-o foaie de stil extern, atributul rel, și specificând calea către fișierul cu atributul href mea. Acum mi marcaj HTML si CSS sunt organizate frumos în fișiere complet separate, care este aproape întotdeauna calea designeri prefera lucrul cu HTML si CSS. 

In cazul in care te intrebi, selectoarele de simple, includ selectoare de identitate Selectoare și tag-ul, cum ar fi cele pe care le-am văzut precum și selectoarelor de clasă pentru selectarea elementelor cu o anumită clasă, selectroi atributelor pentru selectarea elementelor de alte atribute, cum ar fi type = "radio" pentru intrări buton radio, cum ar fi mutați și pseudoselectors și să se concentreze Coafura pentru specificarea atunci când interacțiunile place mouse deasupra unui element produce. 

Cele combinatoare comune includ spații pentru toți copiii și virgule pentru a distinge selectoare. Alții s-ar putea întâlni includă săgeata pentru copii directe numai, tilda pentru toti fratii care apar după elementul, și semnul plus pentru frate 1, care vine imediat după elementul. 

Prin combinarea acestor Selectoare și combinatoare, puteți extinde gama de styling ce se poate realiza pe o anumită pagină web și de a scrie CSS mai eficient. Cu doar câteva linii de CSS pe care le vedeți aici ma tastarea, Eu pot face rapid ceva de genul asta arata ca ceva de genul asta. 

Eu sunt Iosif, și acest lucru este CS50. 

[CS50.TV] 

Uh, unde sa incep? Lasă-mă să fac asta fără a - [rade] Ok. Adauga un - Lasă-mă să schimbe această formulare. Ooh. Scuze.