[Přehrávání hudby] 

DOUG LLOYD: Tak pojďme ještě jeden Video mluvit o další jeden jazyk. Tentokrát budeme mluvit o CSS. Takže CSS, což je zkratka pro Kaskádové styly, je jiný jazyk používáme při vytváření webových stránek. Přemýšlejte o tom takhle. Pokud je HTML je to, co používáme zorganizovat Obsah chceme dát na naší stránce, CSS je nástroj, který jsme obecně používají přizpůsobit, jak naše webové stránky vypadají, a jak uživatelské zkušenosti opravdu je, komunikovat s našich webových stránkách. 

Podobně jako HTML, CSS je není programovací jazyk. To nemá logiku. Nemá proměnné. To nemá žádný druh, který průtok související věci, které dělá C. Je to jazyk, styling. A jeho syntaxe je docela jednoduché, a právě popisuje jak prvky našeho stránky mají určitý HTML prvky by měly být změněny. Za tímto účelem, pokud nemáte přesto sledoval naše video na HTML, nebo jsou obeznámeni s HTML Obecně platí, že může chtít, aby se na to podívat První, protože tato diskuze o CSS bude záviset na určitá znalost HTML. 

Tak tady je opravdu jednoduchý CSS stylů. Dokonce i když jste nikdy naprogramovaný s CSS předtím, Jsem si jistý, můžete zjistit, přesně to, co to dělá stylesheet. Co to dělá? No, na těle našeho webu strana, všechno mezi značky BODY na našich HTML, a to nastaví barva této stránky na modrém pozadí. No, je to velmi jednoduché stylů. Je to vlastně velmi lidský přátelský jazyk CSS. Takže i když jste nikdy používal to předtím, pravděpodobně mohl hádat, co to udělal. Ve skutečnosti, pokud jsme naložili stránku, kde tento stylesheet byl zasazen nějak, barva pozadí naší stránce by být modré, a ne standardní bílou. 

Tak jak jsme se stavět stylů? Tak zaprvé, musíme identifikovat volič. V posledním příkladu, že volič bylo tělo. Pak máme otevřený složená závorka, a my jsme chystá zahájit definování stylesheet pro tento volič. Mezi složených závorek, my stačí mít seznam klíčových párů hodnot. Dvojice předchozí hodnota byla barva pozadí modré středník, ale my jsme mohli dělat více a více z nich. Ty by mohly mít několik věcí, použití k tomu, že tag, voliče tělo. Každý z nich je oddělen středník, a nazýváme každý z nich prohlášení, prohlášení CSS. Když jsme hotovi se všemi styling my chcete použít na konkrétní značku, my jen mít zavírací kudrnaté rovnátka ukončit stylů, a my jsme udělali definování stylů pro tuto konkrétní volič. 

Jaké jsou některé běžné CSS vlastnosti? No, možná budete chtít dát rámeček kolem něčeho. Takže můžete říct, přeshraniční, že by se váš klíč, a pak se vaše hodnoty by bylo, co styl, barva a šířka Chcete, aby to bylo. Takže styl by mohla být pevná čára, tečkovaná čára, přerušovaná čára, hřeben linka, což by bylo vlnovka. Možná, že budete chtít mít modrý nebo černý nebo zelený. Možná chcete, aby to bylo 1 nebo 2 nebo 10 pixelů. Můžete určit všechny ty věci. Možná chcete nastavit pozadí barva vaší stránky určitým způsobem. Už jsme viděli, že nastavení pozadí těla být modré. 

Pak můžete použít klíčové slovo, takže CSS má určité barvy které jsou postaveny do něj, modrá, zelená, černá, velmi jednoduché barvy známe. Ale můžete také určit jakýkoliv Barva hex, že byste chtěli. Připomeňme, že barvy mohou být identifikovány sadou tří čísel hex od 0 do 255, RG a B, na červená, zelená a modrá složka. A tak můžeme určit, libovolné barvy chceme by, namísto použití modré nebo zelené nebo černé, použitím libru a poté šest číslic hex, a že nám dá barva šest číslice. Tak to je barva pozadí. 

Máme také popředí barva, což je obvykle bude text stránky. A vy jste mohli podobně udělat s klíčovým slovem a nebo šestimístné hexadecimální. Takže můžete zadat jakoukoli barvu si Chcete pro text vaší stránky proti konkrétnímu barva pozadí, nahoře. Můžete také změnit a vypořádat se s písmem, a způsob, jakým textem je vykreslen na stránce. 

Takže si můžete změnit velikost písma. Můžete použít klíčová slova, jako je extra, Velmi malé, nebo xx malé, nebo střední, velký, a tak dále. Můžete použít pevné body, 10 bod, velikost 12, a tak dále. Můžete použít procenta, 80%, 20%, kde 100% je výchozí písmo velikost, který je obvykle bude bylo něco jako 11 nebo 12 bodů. Nebo můžete dokonce založit ho z poslední velikosti písma. Pokud jste právě něco napsal a víte, co chcete, je pro to, aby byl menší, ale nevíte přesně, co velikost, kterou chci, aby to bylo, dobře, můžete jen říci, velikost písma menší. A bude vycházet z toho, jen nahoře, to je velikost písma. A můžete získat menší nebo větší. Takže je tu mnoho různých způsoby, jak určit velikost písma. 

Můžete také určit, co Rodina písma chcete. Pokud máte určitý název, je tu způsob, jak v CSS-- nebudeme o tom mluvit here-- definovat velmi specifický písmo a vložit jej do svých stránek. Můžete také použít generické názvy. Je tu spousta bezpečné webové fonty které jsou předem definovány v CSS. A pokud jste uživatelem společnosti Microsoft Kancelář v posledních 20 letech, jste pravděpodobně obeznámeni s mnoho z těchto webových bezpečných písem Již, Times New Roman, Arial, Courier New, Gruzie, Tahoma, Verdana, a tak dále. Ti, kteří jsou považovány za bezpečné webové fonty. A vlastně, součástí důvod, proč oni přišli být měla být použita, aby se web-- každou stránku měl přístup k těmto výchozí sadu písem s různými patkami, a to vše font věci nebudeme dostat do, ale tito jsou obvykle dostupné v CSS, , i když ne jinak definovat písma. A konečně, můžete zarovnat text, místo toho to být tím, že ve výchozím nastavení, sladit doleva, mohl byste srovnejte ji doprava, nebo můžete zarovnat to na střed, nebo odůvodněno tak, že zasáhla oba okraje. Takže to jsou všechny možnosti, které můžete použít změnit to, co text vypadá, a jak se to zobrazí na vaší stránce. 

Vaše voliče ne musí být pouze tagy. Již dříve jsme viděli tělo značky volič a volič tag vypadá stejně jako to. Můžete pojmenovat značku, a pak vás definovat stylů pro tuto značku. Ale můžete také udělat něco volal selektor ID. Voličem ID vypadá dost podobné. Ale nevšiml, že teď jsem nepoužívají tag HTML, jsem pomocí, v tomto případě, #unique, nebo hash jedinečný. Pokud si vzpomínáte z našeho video na HTML, mluvili jsme o tom, jak tagy mohou mít atributy. 

A jeden atribut, který se vztahuje na skoro všechny HTML tagy, ale nemluvili jsme o tom, je něco, co nazývá tag ID. Takže tento konkrétní CSS by platí pouze pro HTML tagu, který má velmi specifická ID, které jste jmenoval. Takže pokud máte někde v kódu, někde v souboru HTML, tag a vámi zadat jako atribut k tomuto tagu, ID rovná unikátní, toto zejména stylesheet Zde se bude vztahovat pouze mezi že značka s ID jedinečný. 

Můžete si také udělat něco volal volič třídy. Takže kromě toho, že ID atributy, můžete také přidat atribut třídy do HTML tagy. A pokud používáte atribut třídy, to může být použita na více značek. Takže pokud máte několik věcí, které jsou podobné, možná chcete říct, open tag bla, bla, bla, bla, třída se rovná studentů. A pak se tento konkrétní stylesheet by se vztahovala na každý tag, jehož třída studentů. V tomto případě bychom nastavit barvu pozadí na žlutou, a my bychom nastavit průhlednost, což je tag jsme neměli mluvit, ale jen společnosti s tím, jak průhledné je něco, na 70%, v tomto případě. 

Je tu dvě možnosti, psaní styly. Můžete napsat jim přímo do kódu HTML umístěním styly mezi tagy stylu. A ty styl značky jít dovnitř Hlava tagy vaše webové stránky. Snad pouze výhodnější způsob, jak dělat to je napsat samostatný soubor CSS, a poté jej propojit do vašeho dokument pomocí odkazů tagy. Link tagy, opět, jsou se liší od hypertextových odkazů, Pokud si vzpomínáte z našeho videa HTML. A odkaz tagy jsou, jak jsme vytáhnout do samostatných souborů. Je to něco jako ekvivalent #include pro webové programování. 

Takže pojďme se podívat na table.HTML. Pokud si vzpomínáte z našeho HTML video, jsem ukázal příklad velmi jednoduché násobení tabulka, která vypadala dost ošklivý, a možná tam je způsob, aby to lépe CSS, aby to skutečně vypadat víc jako násobení stůl, nebo něco že není jen slepené s žádným skutečným rozdělením mezi řádky a sloupce. Takže pojďme přes hlavu na CS50 IDE, a podívejte se na to, jak CSS může, tak nějak, štípnout to, co jsme začali s dříve, a učinit z něj něco mnohem lepšího. 

Takže jsme v CS50 IDE teď, a je-li neznámé, Dáme do toho tabulka, která HTML stránka. Table.HTML v podstatě jen definuje obsah standardu A multiple-- to mělo být násobení čtyř čtyřmi stůl. Je to docela jednoduché. A my bychom si, že by vypadají docela dobře organizovaná. Ale ve skutečnosti, když jsme náhledu na tuto stránku, vidíme, že je to trochu ošklivé, že jo? Jasně máme řádků a sloupců zde. Existuje nějaký oddělení. Ale není to smysluplné oddělení. Nejsme ve skutečnosti dostat příliš mnoho informací zde. A není mezi žádné oddělení řádků a sloupců, pokud jde horizontálních nebo vertikálních pravidel. Mohli bychom, aby to vypadat trochu lépe. Takže pojďme zkusit. Takže budu tady uzavřít tuto záložku. A budu zavřu table.HTML, a já mám jinou verzi zde volal table2.HTML. Budeme otevřít, že až. Tělo stránky je skoro stejné, ale já jsem změněn trochu nahoře. A já budu posouvat tady. Všimněte si, že tento čas, já jsem pomocí vložených značek styl. Otevřel jsem tag styl, a já jsem teď definování CSS stylů jen uvnitř z toho. Mám seznam stylů, který říká, stůl. To je můj výběr tag. Nebudu používat tečku nebo hash, které bych dělal, kdybych byl pomocí ID nebo selektor třídy. Mám selektoru tagů here-- tabulky. Tento styl se chystá se vztahují na všechny tagu tabulky. Zřejmě jsem chtěl dát jeden pixelu, pevný modrý okraj, Uvnitř mého stolu. To zní, jako by to asi pomoci situaci, že jo? Budeme mít věci vypadají mnohem lépe. Tak to je v pořádku. Stylisticky, právě jsem vložené můj stylů zde. Je to jistě přijatelný způsob, jak to udělat. Pojďme se podívat, jak to vypadá. Takže já půjdu zpátky dolů, a Budu vám zobrazit náhled table2.HTML. No, to není přesně to, co jsem chtěl, ale to je přesně to, co jsme žádali. Řekli jsme, že tento styl je bude vztahovat k našemu stolu. Naše tabulka má nyní jeden pixel široký, pevný modrý rámeček kolem něj. Nejsme ve skutečnosti dostat na buňky tabulky. Jsme jen na to u stolu. Takže CSS pracoval. Je aplikována stylesheet k našemu stolu. Ale ne zcela dělat to, co jsme chtěli, aby to dělat. Jak se dostaneme k tomu to, co chceme, aby to udělal? 

Dobře, pojďme se podívat na jeden více verze tohoto v table3.HTML. Takže já jsem prostě jít zavřít tyto karty. Chystám se vrátit sem k mému soubor strom, a otevřít table3.HTML. Opět platí, že to bude vypadat pěkně podobný zde na začátku. Ale oznámení, tentokrát, namísto použití seznam stylů vložené přímo tam, Jdu spojit v stylů pomocí značky link. Takže jsem zřejmě propojení v stylů volal tables.CSS, a to dobře rovná stylesheet jen means-- dobře, Co je tento soubor ve vztahu k tomu, co Jsem doing-- je stylů, že jsem použitím mé stránce. Takže jestli opravdu chcete vidět, co Já dělám s CSS tady, Musím jít, že otevřený table.CSS souboru stejně. Tak jsme se vrátím sem Znovu k našemu souboru stromu. Tam je table.CSS. Budeme pop otevřené. Nyní vidíme trochu CSS. Zdá se, že mám pár věci tady děje. Zřejmě Chci dát pět pixelu, pevný červený okraj, kolem mého stolu. Již víme, že, co se děje prostě jít na obvodu. Viděli jsme, že v table2.HTML. S každým řádkem I zřejmě chcete zadat že výška řádku je 50 pixelů. Takže pro každý řádek, pamatujte že to, co dělá tag tr, Dělám to 50 pixelů. 

Nakonec, já mám tento komentář. A to je to, jak děláme připomínky v CSS. Je to velmi podobné chytit blok komentáře syntax lomítko hvězdu. Veškerý text, který chcete. Není lomítko lomítko ačkoli v CSS. U krátkých vložené komentáře, my máme použít tento určitý formát sem. Vypadá to, že dělám Spousta věcí v mých td tagy. Nezapomeňte td tagy nebo stolek Údaje, které jsou opravdu jen sloupce vnitřek naše řady a zřejmě pro každý kus dat v mé tabulce, chci nastavit barvu pozadí, aby být černé, barva být bílý, barva je barva popředí. Takže to bude text mé stránce. Chci velký font, 22 bod písmo, a já chci to být z rodiny fontů, Georgia. Takže já nebudu mají výchozí písmo. Chystám se určit, Gruzie, který je jedním z těch bezpečné webové fonty že jsme neviděli. Chci také text, který bude zarovnán centrálně, ve středu pole, Nechci, aby se doleva zarovnány nebo doprava zarovnán. A Chci šířky sloupce se na 50 pixelů, stejně. Pojďme se podívat na jak to vypadá, a zjistit, jestli je to možná zlepšení. Takže já jdu na table3.HTML, který Vzpomeňte si, zahrnuje table.CSS jako odkaz, a my náhledu. To je mnohem lepší, že jo? To je vlastně začíná vypadat víc jako násobilku. Mám ten červený rámeček kolem mého stolu, ale teď Také jsem upřesnil, že každý řádek je 50 pixelů, nebo je to 50 pixelů tall-- výmluva me-- každý sloupec je 50 pixelů. Data v každém sloupci, a to pouze data, má černé pozadí. Takže to je důvod, proč ti, bílé čáry jsou tam. Vzhledem k tomu, prostor v mezi všemi z těchto buněk, není to v pohraniční samo o sobě, je to jen Jsem vyplnění pouze ve buňky, které ve skutečnosti činí hranice tabulky, které zřejmě existují po celou dobu, to byl jen tenké bílé čáry. Nyní jsou viditelné. Teď se pop off na obrazovce. A tak to je velmi jednoduchý stylesheet, že jsem se aplikuje, a teď můj stůl vypadá hodně více jako čtyři čtyřmi násobilka, místo jen neuspořádané nepořádek, kde Vše je přehledně řádků a sloupců, ale ne mimořádně dobře organizovaná. Jsme opravdu jen poškrábání povrchu o tom, co můžete dělat s CSS sem. Naštěstí dokumentace CSS je velice jednoduché. Budete používat několik jeho atributy, poměrně často. Ty, které jsme mluvili o dříve v tomto videu. Existuje několik, které vás pravděpodobně nebude používat vůbec. A to je v pořádku, taky. Ale vím, že je tu spousta dokumentace venku. Takže i když jsme neměli pokrýt všechno, jste jistě ne odešel na vlastní pěst. Ale CSS je opravdu zábava experimentovat s. A já bych silně doporučuji hrát si s vaší webové stránky, a uvidíte, jak můžete udělat je vypadat a cítit se zlepšit uživatele zážitek z návštěvy své stránky. Jsem Doug Lloyd. To je CS50.