[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í: Cascading Style Sheets a Kaskádové je trochu zložitejšie, a to je niečo, čo budeme zaoberať v ďalšom videu. Ale pre začiatok, Style Sheets mnohokrát naráža na to, čo robí CSS. Dodáva štýlov HTML z webovej stránky, Zmenu spôsobu webová stránka vyzerá esteticky. To znamená, že všetko, čo od písma textu k umiestnenie obsahu na stránke do iných vychytávok, ako je prístup na 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 chudobnej vyzerajúce stránky som napísal. Ak Rob sa pozreli na tomto mieste práve teraz, asi by povedal niečo ako: "Wow! Úvodu vyzerá strašne. Joseph, si hrozne designer". "Použitie predvolené písmo Times? Helvetica je tak oveľa lepšie." 

Takže to, čo by mohlo byť najjednoduchší spôsob, ako aplikovať štýl Rob chce? Najbežnejší spôsob, veľa ľudí, ktorí pôvodne napísal CSS mal dať to, čo nazývame štýl vyhlásenie priamo na samotný prvok pomocou HTML atribútu style. Štýl vyhlásenie spočíva iba v elemente HTML majetku CSS chceme zmeniť nasledované dvojbodkou nasleduje nové hodnoty majetku a bodkočiarku na konci. Napríklad, povedzme, že Rob chce čierne ohraničenie okolo jeho úvode. Najprv sme dať atribút style na div Rob tu potom v úvodzovkách dať vyhlásení CSS: "Border: 1px solid black;" 1 pixel sa odkazuje na šírku okraja, pevná látka sa odkazuje na štýl hranice, a farba na konci určuje, aké hranice je farba. 

Ak chceme viac štýlov na prvku, napísať tieto vyhlásenia v poradí. Napríklad, ak chce, aby jeho Rob textu hlavičky v Helvetica s modrým pozadím a viac priestoru okolo textu, môžeme urobiť toto: style = "font-family: Helvetica, background-color: blue; padding: 5px;" Posledný bodkočiarka je vlastne voliteľný, ale ľudia obvykle udržiavať ju v pre konzistencii svoje. 

Necháme si vysvetliť niektoré z chladnejších a zložitejšie vlastností CSS Pre ďalšie video. Ak máte niečo na mysli, len Googling požadovaný efekt nasledovaný CSS bude pravdepodobne vám celkom dobré výsledky. Super vec je, že CSS je veľmi široká, takže šance sú, ak existuje niečo, čo chcete robiť - v rozumných medziach - CSS dá pravdepodobne urobiť. Nazývame tento druh styling inline štýl. Prvok štýl je dobre, v súlade s počiatočnou značku. 

Pre ľudí, ktorí naozaj chcú byť organizovaná, môžete začať už trochu naštvane, ako to všetko vyzerá chaotický. Predstavte si, že by 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 odstrániť, ľudia nakoniec začali chytať na oddelení svojej značky HTML z ich štýlu CSS pomocou tzv CSS selektory. CSS selektory sú používané pre výber prvkov, ktoré sú použité vyhlásenia. Volič v kombinácii so zoznamom vyhlásenie CSS je často odvolával sa na ako pravidlo CSS. Tieto pravidlá by sa dal medzi otvorenie a zatvorenie HTML tagov štýlu, často v hlavičke dokumentu. 

Je to oveľa jednoduchšie vidieť príklad, Tak začnime tým, že vytvoria jednoduché pravidlo CSS. Po prvé, poďme dať tagov v hlavovej časti nášho HTML. Ďalej selektor. 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, ktorý predstavuje Robertov úvod zadaním hash symbolom uvedený div v ID, Robe. Teraz vyhlásenie. Pridáme otvorenie a zatvorenie zátvorky a posunúť svoje skoršie vyhlásenie o inline div Rob vnútri týchto zátvoriek, obnoviť, a cool, Rob intro ešte má čierne ohraničenie okolo neho mínus chaotický inline škaredosti. 

A teraz, čo keby sme chceli zvoliť h1 vnútro intro Rob? Môžete si myslieť, "Poďme dať ID na neho a potom sa presunúť naše predchádzajúce štýly." To funguje, ale CSS má iné spôsoby, ako nechať si vyberiete prvky pomocou toho, čo nazývame Kombinátora miešať jednoduché selektory. Napríklad, môže znak medzery, použiť ako Combinator určiť všetky inštancie 1 voliča, ktorí žijú vo vnútri iného voliča. To znie omnoho komplikovanejšia, než v skutočnosti je. Tu je príklad. Budeme písať # okradnúť pridať medzeru, a sledovať ho s h1, ďalší jednoduchý volič tzv selektora tagov, ktoré vyberie typy prvkov ako tagy Div alebo odsekov. Priestor kombinuje naše dve jednoduché selektory, použitie všetkých CSS prehlásenie a zložené zátvorky na H1 značky, ktoré žijú vo vnútri prvku s id = "rob". Len presvedčiť vás, že to funguje, zmením farbu písma na bielu, obnoviť, a hľa, Rob záhlavie je teraz biela. 

Všetky práce dokazuje, že pomocou pravidiel namiesto inline štýly 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 dohromady. 

Ak chcete zahrnúť tento nový súbor ako CSS v tomto dokumente budem používať HTML je link tag. Tu Hovorím to, že som prepojenie v externom zozname štýlov, na atribút rel, a zadaním cesty k súboru s mojim atribútu href. Teraz môj značky HTML a CSS sú organizované pekne v úplne oddelených súboroch, čo je takmer vždy prednosť spôsob, ako konštruktéri pracovať s HTML a CSS. 

V prípade, že ste premýšľal, že jednoduché selektory sú selektory ID a selektory tagov, ako sú tie, ktoré sme práve videli, , Ako aj triedy selektory pre výber prvkov s určitou skupinou atribút selektory pre výber prvkov iných atribútov, ako je type = "radio" vstupov prepínač a pseudoselectors ako vznášať sa a sústrediť sa pre určenie styling keď interakcie rád kurzora nad prvok dôjsť. 

Spoločné kombinátor obsahovať medzery pre všetky deti a čiarky rozlišovať selektorov. Ostatní sa môžete stretnúť zahŕňať šípky pre priame detí iba, vlnovka pre všetky súrodencov, ktoré sa vyskytujú po prvku, a znamienko plus pre 1 súrodenca, ktorý prichádza bezprostredne po prvku. 

Kombináciou týchto selektory a Kombinátory, môžete rozšíriť rozsah styling môžete dosiahnuť na danej webovej stránke a písať CSS efektívnejšie. Stačí len niekoľko riadkov CSS Vidíš ma písať sem, Môžem rýchlo urobiť niečo také vyzerajú ako niečo takého. 

Ja som Jozef a toto je CS50. 

[CS50.TV] 

Uh, kde mám začať? Nechaj ma to urobiť bez toho, aby - [smiech] jo. Pridať - Dovoľte mi zmeniť tento údaj. Ooh. Prepáčte.