[Powered by Google Translate] [CSS] [Joseph Ong - Harvard University] [To je CS50. - CS50.TV] 

Dnes budeme mluvit o CSS nebo kaskádových stylů. 

Takže co přesně je CSS? Dobře, pojďme rozbít termín CSS dolů do 2 částí: Kaskádové a stylů. Cascading je trochu složitější, a to je něco, co budeme pokrývat v jiném videu. Ale pro začátek, Style Sheets mockrát rady na to, co dělá CSS. Dodává stylů do HTML webové stránky, mění, jak webové stránky esteticky vypadá. To znamená, že vše, co od písma textu k umístění obsahu na stránce na další super věci, jako je zpřístupnění rohy zaoblené krabice nebo přidávání stínů do textu. Můžete dokonce dělat šílené věci, jako je dělat věci animovat na obrazovce. 

Tak jak jsme se používat CSS s HTML? Využijte této špatné vypadající stránky jsem napsal. Pokud Rob měli dívat se na tomto místě hned teď, nejspíš řekl něco jako, "Wow! Můj úvod vypadá strašně. Joseph, jsi strašně designer." "Použití výchozího písma Times? Helvetica je tak mnohem lepší." 

Takže to, co by mohlo být nejjednodušší způsob, jak použít styling Rob chce? Nejviditelnější způsob spousta lidí, kteří původně napsal CSS byla dát to, co nazýváme styl prohlášení přímo v prvku samotném pomocí HTML atribut style. Styl prohlášení spočívá pouze v prvku HTML majetku CSS chceme změnit dvojtečku následuje nové hodnoty majetku a středník na konci. Například, řekněme, že Rob chce černý okraj kolem jeho úvodu. Nejprve jsme dát atribut style na div Robertův zde pak uvnitř uvozovek dát prohlášení CSS: "Border: 1px solid black;" The 1 pixel odkazuje na šířku hranice, pevná odkazuje na styl hranice, a barva na konci určuje, jaké na hranici je barva. 

Pokud chceme více stylů na prvku, napište těchto prohlášení v tomto pořadí. Například, pokud Rob chce, aby jeho text záhlaví v Helvetica s modrým pozadím a prostor kolem textu, můžeme to udělat: style = "font-family: Helvetica, background-color: blue; padding: 5px;" Poslední středník je vlastně nepovinné, ale lidé obvykle udržovat ji v za účelem udržení souladu. 

Zachráníme popisujícím chladnější a složitější vlastností CSS další videa. Pokud máte něco na mysli, jen Googling na efekt, který chcete následuje CSS bude pravděpodobně vám docela dobré výsledky. Super věc je, že CSS je docela široká, takže šance jsou, pokud je něco, co chcete dělat - v rozumných mezích - CSS lze pravděpodobně to. Říkáme tento druh styling inline styl. Element styl je dobře, v souladu s počáteční značku. 

Pro lidi, kteří opravdu chtěli být organizována, můžete začít se trochu rozmrzele, jak chaotický to všechno vypadá. Představte si, kdyby jste měli udělat pro každý prvek na stránce, a teď si HTML a CSS jsou míchány a přeplněná. Gross, ne? Chcete-li tento problém vyřešit, lidé nakonec začali lov na oddělení jejich značky HTML z jejich stylu CSS pomocí tzv. CSS selektory. CSS selektory jsou používány pro výběr prvků, které prohlášení jsou použity. Volič v kombinaci se seznamem prohlášení CSS je často odkazoval se na jako pravidlo CSS. Tato pravidla by se dal mezi otevřenými a zavřít HTML tagů, často v hlavičce dokumentu. 

Je to mnohem jednodušší vidět příklad, takže pojďme začít vytvořením jednoduché pravidlo CSS. Za prvé, pojďme dát tagů v hlavové části našeho HTML. Dále, výběr. Začneme vypnout pomocí jednoho z nejjednodušších selektorů, hash symbol, které vybere HTML element podle jeho atribut ID. V tomto případě budeme vyberte div, že představuje Rob je zavedení zadáním hash symbol následuje div, je ID, rob. Nyní prohlášení. Přidáme otevřené a detailní rovnátka a posunout naše dřívější vložené prohlášení o div Robertův uvnitř těchto závorek, obnovit, a, pohodový, Rob intro stále má černý okraj kolem něj minus chaotický inline ošklivostí. 

Teď, co kdybychom chtěli, vyberte h1 vnitřek intro Rob? Možná si myslíte, "Pojďme dát ID na něj a pak se přesunout naše dřívější styly." To funguje, ale CSS má jiné způsoby, jak nechat vybrat prvky pomocí toho, co nazýváme kombinátory míchat jednoduché selektorů. Například, mohou znak mezera být použit jako Combinator určit všechny instance 1 voliče, kteří žijí uvnitř jiného voliče. To zní mnohem komplikovanější, než to ve skutečnosti je. Zde je příklad. Budeme psát # okrást, přidejte mezeru, a sledovat jej s H1, další jednoduchý výběr tzv. tagů volič, který vybere typy prvků jako tagů Div či odstavce. Prostor kombinuje naše 2 jednoduchých selektorů, použití všech CSS deklarace a složené závorky na H1 tagů, které žijí uvnitř prvku s id = "rob". Jen se vás přesvědčit, že to funguje, budu změnit barvu písma na bílou, obnovit, a podívejte se, Rob záhlaví je nyní bílé. 

Všechny tyto práce dokazuje, že pomocí pravidel místo inline stylů můžeme dostat mnohem čistší kód. Ve skutečnosti, pokud tento styl blok začíná stále trochu velká, Já si dokonce vytáhnout tyto styly se do jiného souboru úplně. 

Chcete-li zahrnout tento nový soubor jako CSS v tomto dokumentu, který jsem si jen použít HTML je link tag. Zde Říkám to, že jsem propojení v externí šabloně stylů, rel atribut, a zadáním cesty k souboru s mým atributu href. Teď můj HTML značky a CSS jsou organizovány pěkně v kompletně samostatných souborech, která je téměř vždy cesta návrháři preferují práci s HTML a CSS. 

V případě, že jste přemýšlel, že jednoduché selektory patří ID selektorů a selektory tagů, jako ty, které jsme právě viděli stejně jako třída selektory pro výběr prvků s určitou třídu, atributů selektory pro výběr prvků jiných atributů, jako je type = "radio" vstupů přepínač a pseudoselectors jako vznášet a zaměřit se pro určení styl, kdy interakce rádi myší nad element dojít. 

Společné kombinátory jsou prázdné pro všechny děti a čárky rozlišovat selektorů. Jiní se mohou vyskytnout zahrnovat šipku pro přímé děti pouze, vlnovka pro všechny sourozenců, které se vyskytují po prvku, a znaménko plus pro 1 sourozence, který je dodáván ihned po prvku. 

Kombinací těchto selektory a kombinátory, můžete rozšířit škálu stylu, můžete dosáhnout na dané webové stránce a psát CSS efektivněji. Stačí jen pár řádků CSS vidíte mě psaní zde, I může rychle udělat něco jako tento pohled jako něco jako toto. 

Jsem Joseph, a to je CS50. 

[CS50.TV] 

Uh, kde mám začít? Dovolte mi, abych to udělal bez - [smích] Dobře. Přidat - Nech mě změnit tuto formulaci. Ooh. Promiňte.