[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 sa rupe termenul CSS jos în 2 părți: Cascading Style Sheets și. Cascadă este un pic mai complex, și este ceva ce vom acoperi într-un alt film. Dar, pentru început, Style Sheets indicii foarte mult la ceea ce face CSS. Se adaugă stiluri de HTML a unei pagini web, schimba modul în care pagina de web arată punct de vedere estetic. Acest lucru înseamnă totul, de la fontul textului la poziționarea conținutului pe pagina la alte lucruri interesante, cum ar fi a face colțurile o cutie rotunjite sau adăugarea de umbre la text. Puteți face chiar lucruri nebun ca face lucrurile anima pe ecran. 

Deci, cum putem folosi CSS cu HTML? Ia acest site saraci cu aspect am scris. Dacă Rob fi să se uite la acest site chiar acum, el ar spune, probabil, ceva de genul, "Wow! Introducere meu arată groaznic. Joseph, ești un designer de groaznic." "Utilizarea implicită a fontului Times? Helvetica este atât de mult mai bine." 

Deci, ceea ce ar putea fi cel mai simplu mod de a aplica stilul Rob vrea? Cele mai evidente o mulțime modalitate de oameni au scris inițial CSS a fost de a pune ceea ce noi numim declarații de stil chiar în elementul de sine folosind atributul style HTML. O declarație de stil pur și simplu constă în CSS proprietate elementului HTML lui vrem să schimbăm urmată de două puncte, urmată de noua valoare a proprietății și o virgulă la sfârșitul. De exemplu, să spunem că Rob vrea un chenar negru în jurul introducerea sa. Am pus prima atributul stilul pe div Rob aici apoi în interiorul ghilimele duble pune o declarație CSS: "Border: 1px solid negru;" 1 pixel se referă la lățimea de frontieră, solid se referă la stilul de frontieră, și de culoare de la sfârșitul determina ceea ce este culoarea de frontieră. 

Dacă vrem mai multe stiluri de pe un element, scrie aceste declarații în ordine. De exemplu, dacă Rob vrea antet textul său în Helvetica, cu un fundal albastru și mai mult spațiu în jurul textului, putem face acest lucru: style = "font-family: Helvetica, background-color: blue; padding: 5px;" Ultimul punct și virgulă este de fapt opțională, dar oamenii, de obicei, păstrați-l în scopul asigurării coeren ei. 

Vom salva explica unele dintre cele mai reci și mai complexe proprietăți CSS pentru un alt videoclip. Dacă aveți ceva în minte, cu Google doar efectul dorit, urmat de CSS vă va da, probabil, rezultate destul de bune. Lucrul interesant este faptul că CSS este destul de larg, deci șansele sunt, dacă există ceva ce vrei sa faci - în termen de motiv - CSS poate, probabil, o face. Noi numim acest tip de styling stil inline. Stilul element este, de asemenea, în conformitate cu tag-ul de start. 

Pentru cei care doresc cu adevărat să fie organizate, s-ar putea începe cam scos din sărite la modul murdar toate acestea arata. Imaginați-vă dacă ați avut de a face acest lucru pentru fiecare element de pe pagină, plus acum HTML și CSS sunt toate amestecate și aglomerat. Gross, dreapta? Pentru a remedia acest lucru, în cele din urmă oamenii au început de capturare cu privire la separarea lor HTML markup de la stilul lor de CSS, prin utilizarea ceva numit selectoare CSS. Selectoare CSS sunt utilizate pentru a alege elemente la care sunt aplicate declarații. Un selector combinat cu o listă de declarații CSS este adesea menționată ca o regulă CSS. Aceste norme ar fi pus între tag-urile stilului deschise și aproape HTML, de multe ori în capul documentului. 

Este mult mai ușor pentru a vedea cu un exemplu, Să începem prin a crea o regulă simplă CSS. În primul rând, să punem etichete de stil în secțiunea capul HTML noastre. Apoi, selectorul. Vom începe prin utilizarea unul dintre cele mai simple selectoare, simbol hash, care selectează un element HTML cu atributul său de identitate. În acest caz, vom selecta div care reprezinta introducerea lui Rob prin tastarea simbolul diez urmat de ID-ul div lui, Rob. Acum declarațiile. Am adăuga bretele deschise și aproape și schimbe declarațiile noastre anterioare în linie pe div Rob în interiorul acestor acolade, refresh, si, rece, intro Rob are încă un chenar negru în jurul ei minus urâțenia linie murdar. 

Acum, dacă am vrut pentru a selecta h1 interiorul intro lui Rob? Ai putea crede că, "Să punem o identitate pe ea și apoi mutați stilurile noastre anterioare." Care funcționează, dar CSS are alte moduri de a permițându-vă să selectați elemente folosind ceea ce noi numim combinatoare pentru a amesteca selectoare simplu. De exemplu, un caracter spațiu poate fi folosit ca un combinator pentru a specifica toate instanțele de 1 selector că în interiorul unui alt selector trăiesc. Asta sună mult mai complicat decât este în realitate. Iată un exemplu. Vom tip # jefui, adăugați un spațiu, și urmați-l cu un H1, un alt selector simplu numit un selector etichetă care selectează tipurile de elemente cum ar fi divs sau paragrafe. Spațiul combina cele 2 selectoare simplu, aplicând toate declarațiile CSS și acolade pentru H1 tag-uri care traiesc in interiorul elementului cu id = "Rob". Doar pentru a vă convinge că funcționează, voi schimba culoarea fontului la alb, refresh, și, uite, antetul lui Rob este acum alb. 

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

Pentru a include acest nou dosar, CSS în acest document voi folosi doar link-ul tag-ul HTML lui. Aici eu o spun că am legătură într-o foaie de stil extern, atributul rel, și specificând calea către fișierul cu atributul meu href. Acum mi HTML markup si CSS sunt organizate frumos în imagini complet diferite, care este aproape întotdeauna modul în care designerii preferă să lucreze cu HTML și CSS. 

În caz că vă întrebați, selectorii sunt simple și selectoare de identitate și selectoare tag-ul, cum ar fi cele tocmai am văzut precum și selectorii de clasa pentru selectarea elementelor cu o anumită clasă, selectoare atribut pentru selectarea elementelor de alte atribute, cum ar fi de tip = "radio" pentru intrări buton radio, și pseudoselectors cum ar fi hover și să se concentreze pentru specificarea stil atunci când interacțiunile place mouse-ului deasupra unui element produce. 

Comune combinatoare includ spații pentru toți copiii și virgule pentru a distinge selectoare. Alții s-ar putea întâlni include săgeată doar pentru copii directe, tilda pentru toti fratii care apar după elementul, iar semnul plus pentru 1 sibling care vine imediat după elementul. 

Prin combinarea acestor selectoare și combinatoare, se poate extinde gama de styling puteți obține de la o anumită pagină web și scrie CSS mai eficient. Cu doar câteva linii de CSS mă vezi tastarea aici, Eu pot face rapid ceva de genul asta arata ca ceva de genul asta. 

Eu sunt Iosif, iar acest lucru este CS50. 

[CS50.TV] 

Uh, unde sa incep? Lasă-mă să fac asta fără - [râde] Bine. Adăugați o - Lasă-mă să schimbe această formulare. Ooh. Scuze.