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

Dnes budeme hovořit 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í: Cascading Style Sheets a. Kaskádové je trochu složitější, a to je něco, co budeme zabývat v dalším videu. Ale pro začátek, Style Sheets mnohokrát naráží na to, co dělá CSS. Dodává stylů HTML z webové stránky, Změnu způsobu webová stránka vypadá esteticky. To znamená, že vše, co od písma textu k umístění obsahu na stránce do jiných vychytávek, 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 chudé vypadající stránky jsem napsal. Pokud Rob se podívali na tomto místě právě teď, nejspíš by řekl něco jako: "Wow! Úvodu vypadá strašně. Joseph, jsi hrozně designer". "Použití výchozí písmo Times? Helvetica je tak mnohem lepší." 

Takže to, co by mohlo být nejjednodušší způsob, jak aplikovat styl Rob chce? Nejběžnější způsob, spousta lidí, kteří původně napsal CSS měl dát to, co nazýváme styl prohlášení přímo na samotný prvek pomocí HTML atributu style. Styl prohlášení spočívá pouze v elementu HTML majetku CSS chceme změnit následované dvojtečkou následuje nové hodnoty majetku a středník na konci. Například, řekněme, že Rob chce černé ohraničení kolem jeho úvodu. Nejprve jsme dát atribut style na div Rob zde pak v uvozovkách dát prohlášení CSS: "Border: 1px solid black;" 1 pixel se odkazuje na šířku okraje, pevná látka se odkazuje na styl hranice, a barva na konci určuje, jaké hranice je barva. 

Chceme-li více stylů na prvku, napsat tato prohlášení v pořadí. Například, pokud chce, aby jeho Rob textu záhlaví v Helvetica s modrým pozadím a více prostoru okolo textu, můžeme udělat toto: style = "font-family: Helvetica, background-color: blue; padding: 5px;" Poslední středník je vlastně volitelný, ale lidé obvykle udržovat ji v pro konzistenci své. 

Necháme si vysvětlit některé z chladnějších a složitější vlastností CSS Pro další video. Pokud máte něco na mysli, jen Googling požadovaný efekt následovaný CSS bude pravděpodobně vám docela dobré výsledky. Super věc je, že CSS je velmi široká, takže šance jsou, pokud existuje něco, co chcete dělat - v rozumných mezích - CSS lze pravděpodobně udělat. Nazýváme tento druh styling inline styl. Prvek styl je dobře, v souladu s počáteční značku. 

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

Je to mnohem jednodušší vidět příklad, Tak začněme tím, že vytvoří jednoduché pravidlo CSS. Za prvé, pojďme dát tagů v hlavové části našeho HTML. Dále selektor. 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, který představuje Robertův úvod zadáním hash symbolem uveden div v ID, Robe. Nyní prohlášení. Přidáme otevření a zavření závorky a posunout své dřívější prohlášení o inline div Rob uvnitř těchto závorek, obnovit, a cool, Rob intro ještě má černé ohraničení kolem něj minus chaotický inline ošklivosti. 

A teď, co kdybychom chtěli zvolit h1 vnitřek intro Rob? Můžete si myslet, "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 si vyberete prvky pomocí toho, co nazýváme Kombinátory míchat jednoduché selektory. Například, může znak mezery, použít jako combinator určit všechny instance 1 voliče, kteří žijí uvnitř jiného voliče. To zní mnohem komplikovanější, než ve skutečnosti je. Zde je příklad. Budeme psát # okrást přidat mezeru, a sledovat jej s h1, další jednoduchý volič tzv. selektoru tagů, které vybere typy prvků jako tagy Div nebo odstavců. Prostor kombinuje naše dvě jednoduché selektory, použití všech CSS prohlášení a složené závorky na H1 značky, které žijí uvnitř prvku s id = "rob". Jen přesvědčit vás, že to funguje, změním barvu písma na bílou, obnovit, a pohleďme, Rob záhlaví je nyní bílá. 

Všechny práce dokazuje, že pomocí pravidel namísto inline styly 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 dohromady. 

Chcete-li zahrnout tento nový soubor jako CSS v tomto dokumentu budu používat HTML je link tag. Zde Říkám to, že jsem propojení v externím seznamu stylů, na atribut rel, a zadáním cesty k souboru s mým atributu href. Teď můj značky HTML a CSS jsou organizovány pěkně ve zcela samostatných souborech, což je téměř vždy přednost způsob, jak konstruktéři pracovat s HTML a CSS. 

V případě, že jste přemýšlel, že jednoduché selektory jsou selektory ID a selektory tagů, jako jsou ty, které jsme právě viděli, , jakož i třídy selektory pro výběr prvků s určitou skupinou atribut selektory pro výběr prvků jiných atributů, jako je type = "radio" vstupů přepínač a pseudoselectors jako vznášet se a soustředit se pro určení styling když interakce rád kurzoru nad prvek dojít. 

Společné Kombinátory obsahovat mezery pro všechny děti a čárky rozlišovat selektorů. Ostatní se můžete setkat zahrnovat šipky pro přímé dětí pouze, vlnovka pro všechny sourozence, které se vyskytují po prvku, a znaménko plus pro 1 sourozence, který přichází bezprostředně po prvku. 

Kombinací těchto selektory a Kombinátory, můžete rozšířit rozsah styling můžete dosáhnout na dané webové stránce a psát CSS efektivněji. Stačí jen několik řádků CSS Vidíš mě psát sem, Můžu rychle udělat něco takového vypadají jako něco takového. 

Já jsem Josef a toto je CS50. 

[CS50.TV] 

Uh, kde mám začít? Nech mě to udělat, aniž by - [smích] jo. Přidat - Dovolte mi změnit tento údaj. Ooh. Promiňte.