[Powered by Google Translate] [CSS] [Josip Ong - Sveučilište Harvard] [Ovo je CS50. - CS50.TV] 

Danas ćemo govoriti o CSS ili Cascading Style Sheets. 

Dakle, točno ono što je CSS? Pa, neka je razbiti pojam CSS dolje u dva dijela: Cascading Style Sheets i. Kaskadno je malo složeniji, a to je nešto što ćemo pokriti u drugom videu. No, za početak, Style Sheets jako puno savjeti na ono što CSS čini. Ona dodaje stilova HTML web stranice, mijenja način web stranica estetski izgleda. To znači sve od fonta teksta u pozicioniranju sadržaja na stranici drugim cool stvari poput izrade kutove kutije zaobljeni ili dodavanje sjene teksta. Možete čak napraviti lude stvari kao što bi stvari animirati na zaslonu. 

Pa kako ćemo koristiti CSS s HTML? Uzmi ovaj siromašni izgleda stranice sam napisao. Ako Rob bili na pogledati na ovim stranicama upravo sada, vjerojatno bih reći nešto poput, "Wow! Moj uvod izgleda užasno. Joseph, ti si grozna dizajner." "Korištenje font zadani Times? Helvetica je tako puno bolje." 

Dakle, ono što bi moglo biti najjednostavniji način primijeniti styling Rob želi? Najočitiji način puno ljudi u početku pisao CSS bio staviti ono što mi zovemo stil deklaracije pravo u elementu sam pomoću HTML stil atribut. Stil izjavu jednostavno sastoji od HTML element je CSS imovine želimo promijeniti slijedi dvotočka slijedi nove vrijednosti imovine i zarez. Na primjer, recimo da je Rob želi crnog obruba oko njegova uvođenja. Mi smo prvi put stavili stil atribut na Rob je div ovdje onda unutar dvostrukih navodnika staviti CSS izjavu: "Border: 1px solid black;" S 1 piksela se odnosi na širinu granice, čvrste odnosi na stil granice i boja na kraju određuje što granici je boja. 

Ako želimo više stilova na element, pišem ove deklaracije u nizu. Na primjer, ako je Rob želi svoj header tekst u Helvetica s plavoj pozadini i više prostora oko teksta, možemo to učiniti: style = "font-obitelj: Helvetica, pozadine-boja: plava, padding: 5px;" Posljednji zarez je zapravo opcionalno, ali ljudi obično ga držati u za dosljednost miloga. 

Mi ćemo uštedjeti objašnjavajući neke od hladnjaka i složeniji CSS svojstvima za drugi video. Ako imate nešto na umu, samo Googling učinak želite slijede CSS vjerojatno će vam dati prilično dobre rezultate. Cool stvar je da CSS je prilično široka, tako da su šanse ako postoji nešto što želite učiniti - u roku od razloga - CSS vjerojatno može to učiniti. Zovemo ovu vrstu styling inline stil. Element stil je, dobro, u skladu s početnom oznakom. 

Za ljudi koji stvarno vole biti organizirana, možda ćete početi dobivanje malo zlovoljan u tome neredu to sve izgleda. Zamislite da ste morali to učiniti za svaki element na stranici, plus sada HTML i CSS su svi izmiješani i zatrpan. Bruto, zar ne? Da biste to popravili, ljudi s vremenom počeli lov na odvajanje svoj HTML oznake iz svog CSS styling pomoću nešto što se zove CSS selektora. CSS selektora koriste odabrati elemente na koje se primjenjuju deklaracije. Selektor kombinaciji s popisom CSS deklaracija se često naziva CSS pravilo. Ova pravila će se staviti između otvoriti i zatvoriti HTML tagova stilu, često u glavi dokumenta. 

To je puno lakše vidjeti s, primjerice, pa krenimo stvaranjem jednostavnih CSS pravilo. Prvo, neka je stavi stil oznake u glavu dijelu naše HTML. Dalje, selektor. Mi ćemo krenuti putem jedne od najjednostavnijih selektora, mljeveno meso simbol, koje odabire HTML elementa po svojoj ID atribut. U tom slučaju ćemo odabrati div koji predstavlja Rob je uvođenje upisivanjem ljestve simbol slijedi DIV-a ID, Rob. Sada deklaracije. Mi dodati otvoriti i zatvoriti aparatić i guraju svoje ranije izjave o inline Rob je div unutar tih zagrada, osvježi, i, cool, Rob je uvod uvijek ima crni obrub oko nje minus neuredan inline ružnoće. 

Sada, što ako smo htjeli da odaberete h1 unutrašnjost Rob je uvod? Vi možda mislite, "Ajmo ID na njemu, a zatim premjestiti naše ranije stilove." To funkcionira, ali CSS ima i druge načine omogućujući vam da odaberete elemente pomoću ono što mi zovemo combinators miješati jednostavne selektora. Na primjer, razmak znakova može se koristiti kao Combinator navesti sve instance jednog selektora koji žive unutar drugog selektora. To zvuči puno složeniji nego što zapravo jest. Evo primjer. Mi ćemo upisati # opljačkati, dodati prostor, i slijedite ga s H1, još jedan jednostavan odabir naziva tag selektor koji odabire vrsta elemenata kao divs ili odlomaka. Prostor kombinira naše dvije jednostavne selektora, primjenjujući sve CSS deklaracije i kovrčava aparatić za H1 oznake koje žive unutar elementa sa id = "opljačkati". Samo da vas uvjeriti da to radi, ja ću promijeniti boju fonta na bijelo, osvježavanja, i, izgleda, Rob je header je sada bijela. 

Sve ovom radu pokazuje da pomoću pravila umjesto inline stilova možemo dobiti mnogo čišći kod. U stvari, ako je to stil blok počinje uzimajući malo velik, Ja čak mogu povući tih stilova van u drugu datoteku uopce. 

Da su ovu novu sliku kao CSS u ovom dokumentu ja ću samo koristiti HTML-a oznaku vezi. Evo ja sam ga reći da sam povezivanja u listu vanjskog stila, na rel atribut, i određivanja puta do datoteke s mojim href atribut. Sada moja HTML oznake i CSS su organizirali lijepo u potpunosti zasebnim datotekama, koji je gotovo uvijek način dizajneri vole raditi s HTML i CSS. 

U slučaju da se pitate, jednostavne selektora uključuju osobne selektora i oznake selektora poput onih koje smo upravo vidjeli kao i klasa selektora za odabir elemenata s određenom razredu, atribut selektora za odabir elemente drugim atributima poput type = "radio" za radio gumb ulaza i pseudoselectors kao što lebde i usredotočiti za specificiranje styling kada interakcije sviđa mousing preko elementa dogoditi. 

Zajedničke combinators uključuju razmak za svu djecu i zarezi razlikovati selektora. Drugi možete susresti uključuju strelicu za usmjeravanje djece samo, tilda za sve braće i sestara koji se javljaju nakon elementa, i znak plus za 1. polubrat koji dolazi odmah nakon elementa. 

Kombinirajući ove selektora i combinators, možete proširiti raspon styling možete postići na određenoj web stranici i pisati CSS učinkovitije. Sa samo nekoliko redaka CSS me vidiš tipkati ovdje, Ja mogu brzo napraviti nešto poput ovoga izgledaju ovako nešto. 

Ja sam Josip, a ovo je CS50. 

[CS50.TV] 

Uh, gdje ću početi? Dopustite mi da to ne - [smijeh] Ok. Dodaj - Dopustite mi promijeniti taj tekst. Ooh. Oprostite.