[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 2 dijela: Cascading Style Sheets i. Kaskadno je malo složenija, i to je nešto što ćemo pokriti u drugom videu. No, za početak, Style Sheets jako puno aludira na ono što čini CSS. Ona dodaje stilove na HTML web stranice, Promjenom web stranica estetski izgleda. To znači da sve što je od fonta teksta na pozicioniranju sadržaja na stranici na druge cool stvari kao što uglovima kutije zaobljeni ili dodavanje sjene teksta. Možete čak i lude stvari kao što bi stvari animirati na zaslonu. 

Pa kako ćemo koristiti CSS s HTML? Iskoristite ovo loše 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. Josip, ti si užasno dizajner." "Koristeći zadani font Times? Helvetica je tako puno bolje." 

Dakle, ono što bi moglo biti najjednostavniji način primijeniti stil Rob želi? Najočitiji način puno ljudi u početku pisao CSS je 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 nakon čega slijedi debelog crijeva kao i novo vrijednosti imovine i zarez. Na primjer, recimo Rob želi crni obrub oko njegova uvođenja. Mi smo prvi put stavili stil atribut na Rob je div ovdje onda unutar dvostrukih navodnika stavi CSS izjavu: "Border: 1px solid black;" 1 piksel se odnosi na širinu granice, čvrsto se odnosi na stil granice, i boju na kraju određuje što granice u boji je. 

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

Spremit ćemo objasniti neke od hladnjaka i složenije CSS svojstva za još jedan video. Ako imate nešto na umu, jednostavno Googling željeni efekt slijedi CSS Vjerojatno će vam dati prilično dobre rezultate. Super 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. Pozivamo ovu vrstu styling inline styling. Element stil, dobro, u skladu s početnom oznakom. 

Za ljudi koji stvarno vole biti organizirani, možda ćete početi dobivanje malo zlovoljan, na koliko je to sve izgleda neuredno. Zamislite, ako ste imali to učiniti za svaki element na stranici, plus sada vaš HTML i CSS su svi izmiješani i zamućen. Bruto, zar ne? Da biste riješili problem, ljudi na kraju počeo lov na odvajanje svoj HTML markup iz njihove CSS stylinga 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 biti među otvaranje i zatvaranje HTML tagova stilu, Često u glavi dokumenta. 

To je puno lakše vidjeti na primjeru, pa krenimo stvaranjem jednostavnih CSS pravilo. Prvo, neka je stavi stil oznake na glavi dio našeg HTML. Zatim je selektor. Počet ćemo s pomoću jednog od najjednostavnijih selektora, mljeveno meso simbol, koji odabire HTML elementa svojoj ID atributa. U tom slučaju mi ​​ćemo odabrati div koji predstavlja Rob je uvođenje upisivanjem ljestve simbol zatim DIV-a ID, Rob. Sada su izjave. Mi dodati otvaranje i zatvaranje aparatić i pomak naše ranije inline deklaracije o Rob je div unutar tih aparatića, osvježi, i, cool, Rob je intro uvijek ima crni obrub oko njega minus neredu inline ružnoće. 

Sada, što ako smo htjeli odabrati h1 unutrašnjost Rob je uvod? Vi možda mislite, "Ajmo ID na njemu, a zatim premjestiti svoje ranije stilove." To radi, ali CSS ima druge načine omogućujući vam da odaberete elemente pomoću onoga što nazivamo combinators miješati jednostavnih selektora. Na primjer, razmak znakova može se koristiti kao kombinator navesti sve instance jednog selektora koji žive unutar druge selektor. To zvuči puno kompliciranije nego što zapravo jest. Evo primjera. Mi ćemo upisati # opljačkati, dodavanje razmaka, i slijedite ga s H1, još jedan jednostavan odabir naziva oznaku izbornik koji odabire vrsta elemenata kao divs ili odlomaka. Prostor kombinira naše dvije jednostavne selektora, primjeni sve CSS deklaracije i kovrčava aparatić za H1 oznaka koji žive unutar tog elementa s 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 bijeli. 

Sve ovo djelo pokazuje da pomoću pravila umjesto inline stilova možemo dobiti puno čišći kod. U stvari, ako je ovaj stil blok počinje uzimajući malo velika, Ja čak mogu izvući iz tih stilova u drugu datoteku uopce. 

Da su ovu novu sliku kao CSS u ovom dokumentu samo ću koristiti HTML-a oznaku vezu. Evo ja sam to reći da sam povezivanja u listu vanjskog stila, na rel atribut, i određivanja puta do datoteke s mojim href atributa. Sada moja HTML markup i CSS organiziraju se lijepo u potpunosti zasebne datoteke, što je gotovo uvijek način dizajneri preferiraju rad s HTML i CSS. 

U slučaju da se pitate, jednostavna selektori su ID selektora i tag selektora poput onih koje smo upravo vidjeli kao i klase selektora za odabir elemenata s određene klase, atribut selektora za odabir elemente drugim atributima kao što su tipa = "radio" za radio gumba ulaza, i pseudoselectors poput lebdjeti i usredotočiti za specificiranje interakcija sviđa stil kada miša preko jednog elementa dogoditi. 

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

Kombinacijom ovih 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 vidite tipkati ovdje, Ja brzo napraviti nešto poput ovoga izgledati nešto poput ovoga. 

Ja sam Josip, a ovo je CS50. 

[CS50.TV] 

Uh, gdje početi? Dopustite mi da to ne - [smijeh] Ok. Dodajte - Dopustite mi da promijenite tekst. Ooh. Žao nam je.