[Glazbom] 

Doug LLOYD: Pa neka je još jedan Video govoriti o još jednom jeziku. Ovaj put ćemo razgovarati o CSS. Dakle CSS, što je kratica za Cascading Style Sheets, je još jedan jezik koristimo kod gradnje web stranice. Razmislite o tome kao što je ovaj. Ako HTML je ono što ćemo koristiti za organizaciju Sadržaj želimo staviti na našoj stranici, CSS je alat koji se uglavnom koriste prilagoditi kako naše web stranice izgledaju, i kako je korisničko iskustvo stvarno je, u interakciji s naše web stranice. 

Slično HTML, CSS Ne programski jezik. To nema logike. To ne mora varijable. To ne imati bilo kakve da teku u vezi stvari koje ne C. To je jezik styling. I njegova sintaksa je lijepa jednostavno, i samo opisuje kako su elementi našeg Stranica imaju određenu HTML elemente treba mijenjati. U tom smislu, ako niste Još je gledala naš video na HTML, ili su upoznati s HTML općenito, te svibanj želite pogledati kako Prvo, jer je ova rasprava o CSS će ovisiti o neko znanje o HTML-u. 

Dakle, ovdje je stvarno Jednostavan CSS stylesheet. Čak i ako ste nikada programiran s CSS prije, Prilično sam siguran da mogu shvatiti upravo ono što ovaj stylesheet radi. Što to radi? Pa, primjenjuju na tijelo naše web stranica, sve što je između tijela oznake na našem HTML, i to postavlja Boja pozadine toj stranici u plavo. Pa, to je vrlo jednostavan stilovima. To je zapravo vrlo humani prijateljski jezik, CSS. Dakle, čak i ako nikada niste koristili prije, vjerojatno bi mogao pogoditi što je to učinio. U stvari, ako mi učita stranicu, gdje ovaj stylesheet je ugrađen nekako, boja pozadine naše stranice bi biti plava, a ne standardni bijela. 

Pa kako ćemo graditi stylesheet? Pa prvo, moramo identificirati selektor. U zadnjem primjeru, da je selektor bio tijelu. Onda smo otvoreni kovrčava braće, a mi smo će početi definiranja stylesheet za taj odabir. Između vitičastih zagrada, mi samo popis ključnih parova vrijednosti. Prethodna vrijednost Par je Boja pozadine plava točka i zarez, ali smo mogli učiniti više i više njih. Možete imati više stvari primjene toj oznaci, te mjenjača tijelu. Svaki od njih je odvojen točka-zarez, a mi nazivamo svaki od njih izjava, CSS izjava. Kada ste gotovi sa svim styling mi Želite se prijaviti na toj oznaci, imamo samo zatvaranje kovrčavu brace završiti stilovima, a mi smo učinili definiranje stilovima za tu određenu izbornika. 

Koje su neke zajedničke osobine CSS? Pa, možda želite staviti obrub oko nečega. Tako da mogu reći, granice, da će biti vaš ključ, a zatim vaše vrijednosti će biti, što stil, boja i širina što želite da bude. Tako je stil mogao biti solidan crta, isprekidana crta, isprekidana linija, greben linija, koja će biti valovita crta. Možda želite imati biti plava ili crna ili zelena. Možda želite da bude 1 ili 2 ili 10 piksela. Možete navesti sve te stvari. Možda želite postaviti pozadinu Boja vaše stranice na određeni način. Već smo vidjeli da, podešavanje Pozadina tijela biti plava. 

Tada možete koristiti ključnu riječ, tako CSS ima određene boje koje su ugrađene u njega, plava, zelena, crni, vrlo jednostavan boje znamo. Ali, također možete odrediti bilo hex boja koje želite. Podsjetimo da boje mogu identificirati skupom tri hex brojeva od 0 do 255, RG i B, crvene, zelene i plave komponente. I tako možemo odrediti bilo koje boje želimo strane, umjesto korištenja plave ili zelene ili crne, pomoću funta, a potom šest znamenke hex, i da će nam dati boja šest znamenkasti. Tako da je boja pozadine. 

Također imamo prvom planu boje, što je obično će biti tekst na stranici. A ti isto tako može učiniti s ključnim riječ i ili šest znamenki hex. Dakle, možete odrediti bilo koju boju si Želite za tekst na stranici protiv određenog boja pozadine, gore iznad. Također možete promijeniti i nositi s fontom, a način na tekst je donesena na stranici. 

Dakle, možete promijeniti veličinu fonta. Možete koristiti ključne riječi kao što su extra, extra mala ili xx male, srednje ili, velika, i tako dalje. Možete koristiti fiksne točke, 10 točka, točka 12, i tako dalje. Možete koristiti postotke, 80%, 20%, gdje je 100% je zadani font veličine, što se obično događa da biti nešto poput 11 ili 12 bodova. Ili čak možete ga temeljiti off od najnovijeg veličinu fonta. Ako ste upravo napisao nešto i znate ono što želite je da bude manja, ali ne znate točno što vam veličina želite da bude, dobro, možete samo reći, veličina slova manja. I to će se temeljiti off, Samo iznad, to je veličina fonta. A možete dobiti manji ili veći. Dakle, postoji mnogo različitih načina da odredite veličinu fonta. 

Također možete odrediti što Obitelj fontova želite. Ako imate određeni Ime, postoji način na CSS-- nećemo o tome razgovarati here-- definirati vrlo specifičan font i ugraditi u svoje stranice. Također možete koristiti generičke nazive. Postoji mnogo web sigurnih fontova koji su unaprijed definirani u CSS. A ako ste korisnik Microsoft Ured je u posljednjih 20 godina, vjerojatno ste upoznati s puno tih web sigurne fontove Već, Times New Roman, Arial, Courier New, Gruziju, Tahoma, Verdana, i tako dalje. Oni su svi smatraju weba fontove. I zapravo, dio Razlog su došli da se je da se koristi kako bi web-- svaku stranicu je pristup ovom defaultu skup fontova s različitim serifs, i sve to Font stvari nećemo ući, ali to su obično dostupan u vašoj CSS, čak i ako ne inače definirati fontove. Konačno, možete poravnati tekst, umjesto da ga se, po defaultu, usklađen u lijevo, što bi poravnajte ga na desno, ili ste mogli uskladiti to centrirano ili opravdano da je udario obje margine. Dakle, to su sve opcije koje možete koristiti promijeniti ono što vaš tekst izgleda, i kako je prikazano na stranici. 

Vaša selektora ne moraju biti samo oznake. Mi smo ranije vidjeli tijelo oznaku Selektor i selektor oznake izgleda kao da je. Vi naziv oznaku, a zatim vam definirati stilovima za tu oznaku. Ali, također možete učiniti nešto naziva selektor ID. Selektor osobna izgleda prilično slično. Ali primijetite da sada ne koristim HTML tag, ja sam koristeći, u ovom slučaju, #unique ili hash jedinstven. Ako se sjećate iz naše Video na HTML, razgovarali smo o tome kako oznake može imati atribute. 

A jedan atribut koji se odnosi da ljepušan velik dio sve HTML oznake, ali nismo razgovarali o tome, nešto što se zove osobna oznaka. Dakle, ovaj CSS bih primjenjuju se samo u HTML tag koji ima vrlo specifičan ID, koji ste nazvali. Dakle, ako imate negdje u kodu, negdje u HTML datoteke, oznake i vama odrediti kao atribut na tu oznaku, ID jednako jedinstven, ovaj Posebno stylesheet Ovdje će se primjenjivati ​​samo između da oznaka s ID jedinstven. 

Također možete nešto učiniti naziva selektor klase. Dakle, osim što ID atributa, također možete dodavanje klasa atribut HTML tagova. A kada koristite klase atribut, može se primijeniti na više oznaka. Dakle, ako imate nekoliko stvari koje su slične, možda želite reći, Otvoreno Tag bla, bla, bla, bla, klasa jednaka studente. A onda je ovaj stylesheet će primjenjivati svakom oznakom čija klasa je studentima. U ovom slučaju, mi bismo postaviti Boja pozadine u žutu, i mi bismo postavili neprozirnosti, koji je oznaka nismo razgovarali o tome, ali samo bavi kako prozirno nešto, do 70%, u ovom slučaju. 

Postoje dvije opcije za pisanje stylesheet. Možete ih napisati izravno u HTML stavljanjem stylesheet između stilu tagova. A ti stil oznake otići unutar glava oznake vaše web stranice. Možda više preferirani način za napraviti je napisati zaseban .css datoteku, a zatim ga povezati u vaš dokumentirati pomoću vezi oznaka. Link oznake, opet su razlikuje od hiperveza, ako sjetiti iz našeg videa HTML. I link oznake su kako povucite u zasebnim datotekama. To je vrsta kao ekvivalent #include za web programiranje. 

Tako ćemo pogledati table.HTML. Ako se sjećate iz naše HTML video sam pokazao primjer vrlo jednostavno množenje stol koji je izgledao prilično ružni, a možda postoji način kako bi se bolje CSS, kako bi to zapravo izgleda više kao množenje stol, ili nešto da nije samo zaglavi zajedno bez stvarne podjele između redaka i stupaca. Pa neka je nad glavom CS50 IDE, i pogledati kako CSS može, nekako, štipanje ono što smo započeli s prije, i učiniti ga nešto puno bolje. 

Tako smo u CS50 IDE sada, a ako nepoznate, ćemo povući se u to tablicu koja HTML stranice. Table.HTML osnovi Samo definira sadržaj se od multiple-- što je trebao biti četiri od četiri tablica množenja. To je prilično jednostavan. I mislim da bi to bi izgleda prilično dobro organiziran. Ali, u stvari, kada smo pregledali ovu stranicu, vidimo da je to vrsta ružno, zar ne? Očito imamo retke i stupce ovdje. Postoji neka vrsta odvojenosti. Ali to nema smisla odvajanje. Nećemo zapravo uzimajući previše informacija ovdje. I nema razdvajanja između redovi i stupci u smislu horizontalnih ili vertikalnih propisa. Mi vjerojatno mogao napraviti ovaj pogledajte malo bolje. Dakle, pokušajmo. Tako ću zatvoriti ovu karticu ovdje. I ja ću zatvoriti moj table.HTML, i imam još jednu verziju ovdje zove table2.HTML. Otvorit ćemo to. Tijelo stranici ljepušan velik dio isti, ali sam promijenio malo na vrhu. A ja ću pronaći ovdje. Obavijest da je ovaj put, ja sam pomoću ugrađene stil oznake. Ja sam otvorio stil oznaku, a ja sam sada definiranje CSS stylesheet samo unutar od toga. Imam stilovima koji kaže, stol. To je moj odabir oznaka. Ja ne koristite točku ili mljeveno meso, što bih raditi ako sam je pomoću ID ili odabir klase. Imam mjenjača oznaka here-- stol. Ovaj stil će primjenjuju se na svaki stol oznaku. Očigledno želim staviti jedan Pixel široki, plavi granice, u mojim stolom. To zvuči kao da bi vjerojatno pomoći situaciji, zar ne? Mi ćemo imati stvari izgledaju puno bolje. Dakle, to je u redu. Stilski, upravo sam ugrađeni moj stilovima ovdje. To je svakako prihvatljiv način to učiniti. Idemo vidjeti kako to izgleda. Dakle, ja ću se vratiti ovamo, i Ja ću se pregledati moju table2.HTML. Pa, to nije baš ono što sam htjela, ali to je upravo ono što smo tražili. Rekli smo da je ovaj stil je će se primjenjivati ​​na našem stolu. Naš stol sada ima jedan piksel široka, plavi obrub oko njega. Nećemo zapravo uzimajući stolom stanica. Mi smo samo dobivanje na stolu. Tako CSS radio. To je primijenjena stylesheet našem stolu. No, nije baš to ono što smo htjeli to učiniti. Kako ćemo dobiti to učiniti ono što želite to učiniti? 

Pa, neka je pogledati još jednog verzija to table3.HTML. Tako Samo ću zatvoriti ove kartice. Idem se vratiti ovamo na moj file stabla, i otvoriti table3.HTML. Opet, to će izgledati lijepo Sličan ovdje na početku. Ali obavijest, ovaj put, umjesto korištenja stylesheet ugrađen pravo tamo, Idem povezati u stylesheet pomoću veze oznaku. Tako sam očito povezuje u stylesheet zove tables.CSS, i to je dobro jednak stylesheet samo means-- dobro, Što je ova datoteka odnosu na ono što Ja sam doing-- je stylesheet da sam koristite za moju stranicu. Dakle, ako sam stvarno želite vidjeti što Radim s CSS ovdje Moram ići otvoreno da table.CSS datoteke kao dobro. Tako ćemo se vratiti ovamo Ponovno našem datoteke stabla. Postoji table.CSS. Mi ćemo ga pop otvorena. Mi smo sada vidim malo CSS. Očigledno, imam par stvari događa ovdje. Ja očito žele staviti pet Pixel široke, čvrste crvene granice, oko moje stola. Mi već znamo da to ide samo ići na perimetru. Vidjeli smo da je u table2.HTML. Sa svakom redu, ja očito žele odrediti da visina red je 50 piksela visine. Dakle, za svaki red, ne zaboravite to je ono što tr oznaka radi, Ja sam što je 50 piksela visine. 

Na kraju, ja imam ovaj komentar. A to je kako ćemo napraviti komentare u CSS. To je vrlo slično iskoriste blok komentari sintaksa udarac zvijezda. Sve tekst koji želite. Nema slash slash iako u CSS. Za kratko inline komentare, imamo koristiti ovu posebnu formatu ovdje. Izgleda radim puno stvari u mom TD tagova. Zapamti td oznake ili stol Podaci koji su stvarno samo stupci unutar mjesta naši redovi, i očito za svaki komad podataka u mom stolu, ja želim postaviti boju pozadine na biti crna, boja biti bijela, boja je prednja boja. Dakle, to će biti tekst na stranici. Želim velika slova, 22 veličina slova, a ja želim da bude u font obitelji, Gruzija. Dakle, ja ne idem na ima zadani font. Idem odrediti Gruziju, što je jedan od onih sigurnih web fontova kako smo vidjeli prije. Želim da moj tekst biti usklađeni centralno, u sredini kutije, Ne želim da se ostavi poravnati ili desno usklađeni. I želim svoju širinu stupca da se 50 piksela kao dobro. Idemo pogledati kako to izgleda, i vidjeti ako je to možda poboljšanje. Tako ću ići table3.HTML, koji Podsjetimo, uključuje table.CSS kao vezu, a mi ćemo ga pregledati. To je puno bolje, zar ne? To je zapravo počinje izgledati Mnogo više kao tablica množenja. Imam taj crveni obrub oko mog stola, ali se sada Također sam odredio da svaki redak je širine 50 piksela, ili da je 50 piksela tall-- isprika me-- svaki stupac je širine 50 piksela. Podaci u svakom stupcu, a samo podataka, ima crnu pozadinu. Dakle, to je razlog zašto oni bijele crte su tu. Budući da je prostor u između svih tih stanica, to nije granica u po sebi, to je samo Ja punjenje samo u stanice, što zapravo čini granice tablice, koje očito je postojao cijelo vrijeme, to je samo tanke bijele linije. Sada su vidljivi. Sada oni pop off na zaslonu. I tako to je vrlo jednostavan stylesheet da sam primijeniti, a sada mi je stol izgleda puno više kao četiri od četiri tablica množenja, umjesto samo zbrkan nered, gdje sve je jasno redaka i stupaca, ali ne super dobro organizirana. Mi smo zapravo samo grebanje površine što možete učiniti s CSS ovdje. Srećom CSS dokumentacija je prilično jednostavan. Vi ćete koristiti nekoliko svojih atributa, prilično često. Oni razgovarali smo o ranije u ovom videu. Postoji nekoliko koje vas vjerojatno neće koristiti sve. I to je u redu, previše. Ali samo znam da postoji Puno dokumentacije vani. Dakle, čak i ako nismo pokriti sve, ti sigurno ne ostavi na svoju vlastitu. Ali CSS stvarno zabavno eksperimentirati s. I jako bih vas potaknuti poigrati sa svojim web stranicama, i vidjeti kako možete napraviti ih izgledati i osjećati poboljšanje korisnika iskustvo posjetiti vašu stranicu. Ja sam Doug Lloyd. Ovo je CS50.