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

Dnes budeme hovoriť o CSS alebo kaskádových štýlov. 

Takže čo presne je CSS? Dobre, poďme rozbiť termín CSS dole do 2 častí: Kaskádové a štýlov. Cascading je trochu zložitejšie, a to je niečo, čo budeme pokrývať v inom videu. Ale pre začiatok, Style Sheets veľakrát rady na to, čo robí CSS. Dodáva štýlov HTML z webovej stránky, menia, ako webová stránka esteticky vyzerá. To znamená, že všetko, čo od písma textu na umiestnenie obsahu na stránke na ďalšie super veci, ako je sprístupnenie rohy zaoblené krabice alebo pridávanie tieňov do textu. Môžete dokonca robiť šialené veci, ako je robiť veci animovať na obrazovke. 

Tak ako sme sa používať CSS s HTML? Využite tejto zlej vyzerajúce stránky som napísal. Ak Rob mali pozerať sa na tomto mieste hneď teraz, najskôr povedal niečo ako, "Wow! Môj úvod vyzerá strašne. Joseph, si strašne designer." "Použitie predvoleného písma Times? Helvetica je tak oveľa lepšie." 

Takže to, čo by mohlo byť najjednoduchší spôsob, ako použiť styling Rob chce? Najviditeľnejšie spôsob veľa ľudí, ktorí pôvodne napísal CSS bola dať to, čo nazývame štýl vyhlásenie priamo v prvku samotnom pomocou HTML atribút style. Štýl vyhlásenie spočíva iba v prvku HTML majetku CSS chceme zmeniť dvojbodku nasleduje nové hodnoty majetku a bodkočiarku na konci. Napríklad, povedzme, že Rob chce čierny okraj okolo jeho úvode. Najprv sme dať atribút style na div Robertov tu potom vnútri úvodzoviek dať vyhlásenie CSS: "Border: 1px solid black;" The 1 pixel odkazuje na šírku hranice, pevná odkazuje na štýl hranice, a farba na konci určuje, aké na hranici je farba. 

Ak chceme viac štýlov na prvku, napíšte týchto vyhlásení v tomto poradí. Napríklad, ak Rob chce, aby jeho text hlavičky v Helvetica s modrým pozadím a priestor okolo textu, môžeme to urobiť: style = "font-family: Helvetica, background-color: blue; padding: 5px;" Posledný bodkočiarka je vlastne nepovinné, ale ľudia obvykle udržiavať ju v za účelom udržania súladu. 

Zachránime popisujúcim chladnejšie a zložitejšie vlastností CSS ďalšie videá. Ak máte niečo na mysli, len Googling na efekt, ktorý chcete nasleduje CSS bude pravdepodobne vám celkom dobré výsledky. Super vec je, že CSS je celkom široká, takže šance sú, ak je niečo, čo chcete robiť - v rozumných medziach - CSS je možné pravdepodobne to. Hovoríme tento druh styling inline štýl. Element štýl je dobre, v súlade s počiatočnou značku. 

Pre ľudí, ktorí naozaj chceli byť organizovaná, môžete začať sa trochu namrzene, ako chaotický to všetko vyzerá. Predstavte si, keby ste mali urobiť pre každý prvok na stránke, a teraz si HTML a CSS sú miešané a preplnená. Gross, nie? Ak chcete tento problém vyriešiť, ľudia nakoniec začali lov na oddelení ich značky HTML z ich štýlu CSS pomocou tzv CSS selektory. CSS selektory sú používané pre výber prvkov, ktoré vyhlásení sú použité. Volič v kombinácii so zoznamom vyhlásenie CSS je často odvolával sa na ako pravidlo CSS. Tieto pravidlá by sa dal medzi otvorenými a zavrieť HTML tagov, často v hlavičke dokumentu. 

Je to oveľa jednoduchšie vidieť príklad, takže poďme začať vytvorením jednoduché pravidlo CSS. Po prvé, poďme dať tagov v hlavovej časti nášho HTML. Ďalej, výber. Začneme vypnúť pomocou jedného z najjednoduchších selektorov, hash symbol, ktoré vyberie HTML element podľa jeho atribút ID. V tomto prípade budeme vyberte div, že predstavuje Rob je zavedenie zadaním hash symbol nasleduje div, je ID, rob. Teraz vyhlásenie. Pridáme otvorené a detailné rovnátka a posunúť naše skoršie vložené vyhlásenie o div Robertov vnútri týchto zátvoriek, obnoviť, a, pohodový, Rob intro stále má čierny okraj okolo neho mínus chaotický inline škaredosťou. 

Teraz, čo keby sme chceli, vyberte h1 vnútro intro Rob? Možno si myslíte, "Poďme dať ID na neho a potom sa presunúť naše skoršie štýly." To funguje, ale CSS má iné spôsoby, ako nechať vybrať prvky pomocou toho, čo nazývame kombinátory miešať jednoduché selektorov. Napríklad, môžu znak medzera byť použitý ako Combinator určiť všetky inštancie 1 voliča, ktorí žijú vo vnútri iného voliča. To znie oveľa komplikovanejšie, než to v skutočnosti je. Tu je príklad. Budeme písať # okradnúť, pridajte medzeru, a sledovať ho s H1, ďalšie jednoduchý výber tzv tagov volič, ktorý vyberie typy prvkov ako tagov Div či odseku. Priestor kombinuje naše 2 jednoduchých selektorov, použitia všetkých CSS deklarácie a zložené zátvorky na H1 tagov, ktoré žijú vo vnútri prvku s id = "rob". Len sa vás presvedčiť, že to funguje, budem zmeniť farbu písma na bielu, obnoviť, a pozrite sa, Rob záhlaví je teraz biele. 

Všetky tieto práce dokazuje, že pomocou pravidiel miesto inline štýlov môžeme dostať oveľa čistejšie kód. V skutočnosti, ak tento štýl blok začína stále trochu veľká, Ja si dokonca vytiahnuť tieto štýly sa do iného súboru úplne. 

Ak chcete zahrnúť tento nový súbor ako CSS v tomto dokumente, ktorý som si len použiť HTML je link tag. Tu Hovorím to, že som prepojenie v externej šablóne štýlov, rel atribút, a zadaním cesty k súboru s mojím atribútu href. Teraz môj HTML značky a CSS sú organizované pekne v kompletne samostatných súboroch, ktorá je takmer vždy cesta návrhári preferujú prácu s HTML a CSS. 

V prípade, že ste premýšľal, že jednoduché selektory patrí ID selektorov a selektory tagov, ako tie, ktoré sme práve videli rovnako ako trieda selektory pre výber prvkov s určitou triedu, atribútov selektory pre výber prvkov iných atribútov, ako je type = "radio" vstupov prepínač a pseudoselectors ako vznášať a zamerať sa pre určenie štýl, kedy interakcie radi myšou nad element dôjsť. 

Spoločné kombinátory sú prázdne pre všetky deti a čiarky rozlišovať selektorov. Iní sa môžu vyskytnúť zahŕňať šípku pre priame deti iba, vlnovka pre všetky súrodencov, ktoré sa vyskytujú po prvku, a znamienko plus pre 1 súrodencov, ktorý nasleduje bezprostredne po prvku. 

Kombináciou týchto selektory a kombinátory, môžete rozšíriť škálu štýlu, môžete dosiahnuť na danej webovej stránke a písať CSS efektívnejšie. Stačí len pár riadkov CSS vidíte ma písanie tu, I môže rýchlo urobiť niečo ako tento pohľad ako niečo ako toto. 

Som Joseph, a to je CS50. 

[CS50.TV] 

Uh, kde mám začať? Dovoľte mi, aby som to urobil bez - [smiech] Dobre. Pridať - Nechaj ma zmeniť túto formuláciu. Ooh. Prepáčte.