[Prehrávanie hudby] 

DOUG LLOYD: Tak poďme ešte jeden Video hovoriť o ďalší jeden jazyk. Tentoraz budeme hovoriť o CSS. Takže CSS, čo je skratka pre Kaskádové štýly, je iný jazyk používame pri vytváraní webových stránok. Premýšľajte o tom takto. Pokiaľ je HTML je to, čo používame zorganizovať Obsah chceme dať na našej stránke, CSS je nástroj, ktorý sme všeobecne používajú prispôsobiť, ako naše webové stránky vyzerajú, a ako užívateľské skúsenosti naozaj je, komunikovať s našich webových stránkach. 

Podobne ako HTML, CSS je nie je programovací jazyk. To nemá logiku. Nemá premenné. To nemá žiadny druh, ktorý prietok súvisiace veci, ktoré robí C. Je to jazyk, styling. A jeho syntaxe je celkom jednoduché, a práve popisuje ako prvky nášho stránky majú určitý HTML prvky by mali byť zmenené. Za týmto účelom, ak nemáte napriek tomu sledoval naše video na HTML, alebo sú oboznámení s HTML Všeobecne platí, že môže chcieť, aby sa na to pozrieť Prvý, pretože táto diskusia o CSS bude závisieť na určitá znalosť HTML. 

Tak tu je naozaj jednoduchý CSS štýlov. Dokonca aj keď ste nikdy naprogramovaný s CSS predtým, Som si istý, môžete zistiť, presne to, čo to robí stylesheet. Čo to robí? No, na tele nášho webu strana, všetko medzi značky BODY na našich HTML, a to nastaví farba tejto stránky na modrom pozadí. No, je to veľmi jednoduché štýlov. Je to vlastne veľmi ľudský priateľský jazyk CSS. Takže aj keď ste nikdy používal to predtým, pravdepodobne mohol hádať, čo to urobil. V skutočnosti, ak sme naložili stránku, kde tento stylesheet bol zasadený nejako, farba pozadia našej stránke by byť modrej, a nie štandardné bielu. 

Tak ako sme sa stavať štýlov? Tak po prvé, musíme identifikovať volič. V poslednom príklade, že volič bolo telo. Potom máme otvorený zložená zátvorka, a my sme chystá začať definovanie stylesheet pre tento volič. Medzi zložených zátvoriek, my stačí mať zoznam kľúčových párov hodnôt. Dvojica predchádzajúca hodnota bola farba pozadia modrej bodkočiarka, ale my sme mohli robiť viac a viac z nich. Tie by mohli mať niekoľko vecí, použitie k tomu, že tag, voliča telo. Každý z nich je oddelený bodkočiarka, a nazývame každý z nich vyhlásenie, vyhlásenie CSS. Keď sme hotoví so všetkými styling my chcete použiť na konkrétnu značku, my len mať zatváracie kučeravé rovnátka ukončiť štýlov, a my sme urobili definovanie štýlov pre túto konkrétnu volič. 

Aké sú niektoré bežné CSS vlastnosti? No, možno budete chcieť dať rámček okolo niečoho. Takže môžete povedať, cezhraničnej, že by sa váš kľúč, a potom sa vaše hodnoty by bolo, čo štýl, farba a šírka Chcete, aby to bolo. Takže štýl by mohla byť pevná čiara, bodkovaná čiara, prerušovaná čiara, hrebeň linka, čo by bolo vlnovka. Možno, že budete chcieť mať modrý alebo čierny alebo zelený. Možno chcete, aby to bolo 1 alebo 2 alebo 10 pixelov. Môžete určiť všetky tie veci. Možno chcete nastaviť pozadie farba vašej stránky určitým spôsobom. Už sme videli, že nastavenie pozadí tela byť modré. 

Potom môžete použiť kľúčové slovo, takže CSS má určité farby ktoré sú postavené do neho, modrá, zelená, čierna, veľmi jednoduché farby poznáme. Ale môžete tiež určiť akýkoľvek Farba hex, že by ste chceli. Pripomeňme, že farby môžu byť identifikované sadou troch čísel hex od 0 do 255, RG a B, na červená, zelená a modrá zložka. A tak môžeme určiť, ľubovoľnej farby chceme by, namiesto použitia modré alebo zelené alebo čierne, použitím libru a potom šesť číslic hex, a že nám dá farba šesť číslice. Tak to je farba pozadia. 

Máme tiež popredí farba, čo je zvyčajne bude text stránky. A vy ste mohli podobne urobiť s kľúčovým slovom a alebo šesťmiestne hexadecimálne. Takže môžete zadať akúkoľvek farbu si Chcete pre text vašej stránky proti konkrétnemu farba pozadia, hore. Môžete tiež zmeniť a vysporiadať sa s písmom, a spôsob, akým textom je vykreslený na stránke. 

Takže si môžete zmeniť veľkosť písma. Môžete použiť kľúčové slová, ako je extra, Veľmi malé, alebo xx malé, alebo stredné, veľký, a tak ďalej. Môžete použiť pevné body, 10 bod, veľkosť 12, a tak ďalej. Môžete použiť percenta, 80%, 20%, kde 100% je predvolené písmo veľkosť, ktorý je zvyčajne bude bolo niečo ako 11 alebo 12 bodov. Alebo môžete dokonca založiť ho z poslednej veľkosti písma. Ak ste práve niečo napísal a viete, čo chcete, je pre to, aby bol menší, ale neviete presne, čo veľkosť, ktorú chcem, aby to bolo, dobre, môžete len povedať, veľkosť písma menšie. A bude vychádzať z toho, len hore, to je veľkosť písma. A môžete získať menšie alebo väčšie. Takže je tu veľa rôznych spôsoby, ako určiť veľkosť písma. 

Môžete tiež určiť, čo Rodina písma chcete. Ak máte určitý názov, je tu spôsob, ako v CSS-- nebudeme o tom hovoriť here-- definovať veľmi špecifický písmo a vložiť ho do svojich stránok. Môžete tiež použiť generické názvy. Je tu veľa bezpečné webové fonty ktoré sú vopred definované v CSS. A ak ste používateľom spoločnosti Microsoft Kanceláriu v posledných 20 rokoch, ste pravdepodobne oboznámení s mnoho z týchto webových bezpečných písiem Už, Times New Roman, Arial, Courier New, Gruzínsko, Tahoma, Verdana, a tak ďalej. Tí, ktorí sú považované za bezpečné webové fonty. A vlastne, súčasťou dôvod, prečo oni prišli byť mala byť použitá, aby sa web-- každú stránku mal prístup k týmto predvolenú sadu písiem s rôznymi pätkami, a to všetko font veci nebudeme dostať do, ale títo sú zvyčajne dostupné v CSS, , Aj keď nie inak definovať písma. A konečne, môžete zarovnať text, namiesto toho to byť tým, že v predvolenom nastavení, zladiť doľava, mohol by ste porovnajte ju doprava, alebo môžete zarovnať to na stred, alebo odôvodnené tak, že zasiahla oba okraje. Takže to sú všetky možnosti, ktoré môžete použiť zmeniť to, čo text vyzerá, a ako sa to zobrazí na vašej stránke. 

Vaše voliča nie musí byť iba tagy. Už skôr sme videli telo značky volič a volič tag vyzerá rovnako ako to. Môžete pomenovať značku, a potom vás definovať štýlov pre túto značku. Ale môžete tiež urobiť niečo volal selektor ID. Voličom ID vyzerá dosť podobné. Ale nevšimol, že teraz som nepoužívajú tag HTML, som pomocou, v tomto prípade, #unique, alebo hash jedinečný. Ak si spomínate z nášho video na HTML, hovorili sme o tom, ako tagy môžu mať atribúty. 

A jeden atribút, ktorý sa vzťahuje na skoro všetky HTML tagy, ale nehovorili sme o tom, je niečo, čo nazýva tag ID. Takže tento konkrétny CSS by platí len pre HTML tagu, ktorý má veľmi špecifická ID, ktoré ste vymenoval. Takže ak máte niekde v kóde, niekde v súbore HTML, tag a vami zadať ako atribút k tomuto tagu, ID rovná unikátny, toto najmä stylesheet Tu sa bude vzťahovať len medzi že značka s ID jedinečný. 

Môžete si tiež urobiť niečo volal volič triedy. Takže okrem toho, že ID atribúty, môžete tiež pridať atribút triedy do HTML tagy. A ak používate atribút triedy, to môže byť použitá na viac značiek. Takže ak máte niekoľko vecí, ktoré sú podobné, možno chcete povedať, open tag bla, bla, bla, bla, trieda sa rovná študentov. A potom sa tento konkrétny stylesheet by sa vzťahovala na každý tag, ktorého trieda študentov. V tomto prípade by sme nastaviť farbu pozadia na žltú, a my by sme nastaviť priehľadnosť, čo je tag sme nemali hovoriť, ale len spoločnosti s tým, ako priehľadné je niečo, na 70%, v tomto prípade. 

Je tu dve možnosti, písanie štýly. Môžete napísať im priamo do kódu HTML umiestnením štýly medzi tagy štýlu. A tie štýl značky ísť dovnútra Hlava tagy vaše webové stránky. Snáď len výhodnejší spôsob, ako robiť to je napísať samostatný súbor CSS, a potom ho prepojiť do vášho dokument pomocou odkazov tagy. Link tagy, opäť, sú sa líši od hypertextových odkazov, Ak si spomínate z nášho videa HTML. A odkaz tagy sú, ako sme vytiahnuť do samostatných súborov. Je to niečo ako ekvivalent #include pre webové programovanie. 

Takže poďme sa pozrieť na table.HTML. Ak si spomínate z nášho HTML video, som ukázal príklad veľmi jednoduché násobenie tabuľka, ktorá vyzerala dosť škaredý, a možno tam je spôsob, aby to lepšie CSS, aby to skutočne vyzerať viac ako násobenie stôl, alebo niečo že nie je len zlepené so žiadnym skutočným rozdelením medzi riadky a stĺpce. Takže poďme cez hlavu na CS50 IDE, a pozrite sa na to, ako CSS môže, tak nejako, štípnout to, čo sme začali s skôr, a urobiť z neho niečo oveľa lepšie. 

Takže sme v CS50 IDE teraz, a ak je neznáme, Dáme do toho tabuľka, ktorá HTML stránka. Table.HTML v podstate len definuje obsah štandardu A multiple-- to malo byť násobenie štyroch štyrmi stôl. Je to celkom jednoduché. A my by sme si, že by vyzerajú celkom dobre organizovaná. Ale v skutočnosti, keď sme náhľadu na túto stránku, vidíme, že je to trochu škaredé, že jo? Jasne máme riadkov a stĺpcov tu. Existuje nejaký oddelenia. Ale nie je to zmysluplné oddelenia. Nie sme v skutočnosti dostať príliš veľa informácií tu. A nie je medzi žiadne oddelenie riadkov a stĺpcov, pokiaľ ide horizontálnych alebo vertikálnych pravidiel. Mohli by sme, aby to vyzerať trochu lepšie. Takže poďme skúsiť. Takže budem tu uzavrieť túto záložku. A budem zavriem table.HTML, a ja mám inú verziu tu volal table2.HTML. Budeme otvoriť, že až. Telo stránky je skoro rovnaké, ale ja som zmenený trochu hore. A ja budem posúvať tady. Všimnite si, že tento čas, ja som pomocou vložených značiek štýl. Otvoril som tag štýl, a ja som teraz definovanie CSS štýlov len vnútri z toho. Mám zoznam štýlov, ktorý hovorí, stôl. To je môj výber tag. Nebudem používať bodku alebo hash, ktoré by som robil, keby som bol pomocou ID alebo selektor triedy. Mám selektora tagov here-- tabuľky. Tento štýl sa chystá sa vzťahujú na všetky tagu tabuľky. Zrejme som chcel dať jeden pixelu, pevný modrý okraj, Vnútri môjho stola. To znie, ako by to asi pomôcť situácii, že jo? Budeme mať veci vyzerajú oveľa lepšie. Tak to je v poriadku. Štylisticky, práve som vložené môj štýlov tu. Je to iste prijateľný spôsob, ako to urobiť. Poďme sa pozrieť, ako to vyzerá. Takže ja pôjdem späť dole, a Budem vám zobraziť náhľad table2.HTML. No, to nie je presne to, čo som chcel, ale to je presne to, čo sme žiadali. Povedali sme, že tento štýl je bude vzťahovať k nášmu stolu. Naša tabuľka má teraz jeden pixel široký, pevný modrý rámček okolo neho. Nie sme v skutočnosti dostať na bunky tabuľky. Sme len na to pri stole. Takže CSS pracoval. Je aplikovaná stylesheet k nášmu stolu. Ale nie úplne robiť to, čo sme chceli, aby to robiť. Ako sa dostaneme k tomu to, čo chceme, aby to urobil? 

Dobre, poďme sa pozrieť na jeden viac verzia tohto v table3.HTML. Takže ja som jednoducho ísť zavrieť tieto karty. Chystám sa vrátiť sem k môjmu súbor strom, a otvoriť table3.HTML. Opäť platí, že to bude vyzerať pekne podobný tu na začiatku. Ale oznámenia, tentoraz, namiesto použitia zoznam štýlov vložené priamo tam, Idem spojiť v štýlov pomocou značky link. Takže som zrejme prepojenie v štýlov volal tables.CSS, a to dobre rovná stylesheet len ​​means-- dobre, Čo je tento súbor vo vzťahu k tomu, čo Som doing-- je štýlov, že som použitím mojej stránke. Takže či naozaj chcete vidieť, čo Ja robím s CSS tu, Musím ísť, že otvorený table.CSS súboru rovnako. Tak sme sa vrátim sem Znovu k nášmu súboru stromu. Tam je table.CSS. Budeme pop otvorené. Teraz vidíme trochu CSS. Zdá sa, že mám pár veci tu deje. Zrejme Chcem dať päť pixelu, pevný červený okraj, okolo môjho stola. Už vieme, že, čo sa deje jednoducho ísť na obvode. Videli sme, že v table2.HTML. S každým riadkom I zrejme chcete zadať že výška riadku je 50 pixelov. Takže pre každý riadok, pamätajte že to, čo robí tag tr, Robím to 50 pixelov. 

Nakoniec, ja mám tento komentár. A to je to, ako robíme pripomienky v CSS. Je to veľmi podobné chytiť blok komentáre syntax lomítko hviezdu. Všetok text, ktorý chcete. Nie je lomítko lomítko hoci v CSS. Pri krátkych vložené komentáre, my máme použiť tento určitý formát sem. Vyzerá to, že robím Veľa vecí v mojich td tagy. Nezabudnite td tagy alebo stolík Údaje, ktoré sú naozaj len stĺpce vnútro naše rady a zrejme pre každý kus dát v mojej tabuľke, chcem nastaviť farbu pozadia, aby byť čierne, farba byť biely, farba je farba popredia. Takže to bude text mojej stránke. Chcem veľký font, 22 bod písmo, a ja chcem to byť z rodiny fontov, Georgia. Takže ja nebudem majú predvolené písmo. Chystám sa určiť, Gruzínsko, ktorý je jedným z tých bezpečnej webovej fonty že sme nevideli. Chcem tiež text, ktorý bude zarovnaný centrálne, v strede poľa, Nechcem, aby sa doľava zarovnané alebo doprava zarovnaný. A Chcem šírky stĺpca sa na 50 pixelov, rovnako. Poďme sa pozrieť na ako to vyzerá, a zistiť, či je to možné zlepšenia. Takže ja idem na table3.HTML, ktorý Spomeňte si, zahŕňa table.CSS ako odkaz, a my náhľadu. To je oveľa lepšie, že jo? To je vlastne začína vyzerať viac ako násobilku. Mám ten červený rámček okolo môjho stola, ale teraz Tiež som spresnil, že každý riadok je 50 pixelov, alebo je to 50 pixelov tall-- výhovorka me-- každý stĺpec je 50 pixelov. Dáta v každom stĺpci, a to iba dáta, má čierne pozadie. Takže to je dôvod, prečo tí, biele čiary sú tam. Vzhľadom k tomu, priestor v medzi všetkými z týchto buniek, nie je to v pohraničnej samo o sebe, je to len Som vyplnenie iba vo bunky, ktoré v skutočnosti činí hranica tabuľky, ktoré zrejme existujú po celú dobu, to bol len tenké biele čiary. Teraz sú viditeľné. Teraz sa pop off na obrazovke. A tak to je veľmi jednoduchý stylesheet, že som sa aplikuje, a teraz môj stôl vyzerá veľa viac ako štyri štyrmi násobilka, miesto len neusporiadané neporiadok, kde Všetko je prehľadne riadkov a stĺpcov, ale nie mimoriadne dobre organizovaná. Sme naozaj len poškriabaniu povrchu o tom, čo môžete robiť s CSS sem. Našťastie dokumentácie CSS je veľmi jednoduché. Budete používať niekoľko jeho atribúty, pomerne často. Tie, ktoré sme hovorili o skôr v tomto videu. Existuje niekoľko, ktoré vás pravdepodobne nebude používať vôbec. A to je v poriadku, taky. Ale viem, že je tu kopa dokumentácie vonku. Takže aj keď sme nemali pokryť všetko, ste iste nie odišiel na vlastnú päsť. Ale CSS je naozaj zábava experimentovať s. A ja by som silne doporučuji hrať sa s vašej webovej stránky, a uvidíte, ako môžete urobiť je vyzerať a cítiť sa zlepšiť užívateľa zážitok z návštevy svojej stránky. Som Doug Lloyd. To je CS50.