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

Danes bomo govorili o CSS ali Cascading Style Sheets. 

Torej, kaj točno je CSS? No, da bi prekinil dolgoročno CSS navzdol na 2 dela: Kaskadno in Style Sheets. Kaskadno je malo bolj zapletena, in to je nekaj, kar bomo kritje v drugem videu. Ampak za začetek, Style Sheets zelo veliko namigov, na kaj CSS počne. Dodaja, sloge HTML spletne strani, spreminjajo, kako spletna stran izgleda estetsko. To pomeni vse od pisave za besedila na pozicioniranje vsebine na strani za druge kul stvari, kot da bi vogale škatle zaokroženo ali dodajanje sence v besedilo. Lahko se celo narediti nore stvari, kot da se stvari animirati na zaslonu. 

Torej, kako uporabiti CSS v HTML? Vzemite to slaba usmerjeno spletno stran sem napisal. Če Rob je bilo videti na tem mestu prav zdaj, bi mu verjetno rekel nekaj takega, "Wow! Moj uvod izgleda grozno. Joseph, si grozno oblikovalec." "Uporaba pisavo privzetih časov? Helvetica je toliko bolje." 

Torej, kaj bi bilo najlažje uporabljati styling Rob želi? Najbolj očiten način, veliko ljudi najprej napisal CSS je dati tisto, čemur pravimo izjave slog desno samega elementa uporabi HTML slog atribut. Izjava slog zajema le elementa HTML je CSS lastnine želimo spremeniti sledi dvopičju novo vrednost premoženja in podpičjem na koncu. Na primer, recimo Rob želi črno obrobo uvodu. Najprej smo dal slog atribut Rob je div tukaj nato znotraj narekovajev dal CSS izjavo: "Mejni: 1px solid black;" 1 pixel nanaša na širino meje, trdna nanaša na slog meje in barva na koncu ugotovi, kakšne barve meji je. 

Če želimo več slogov na element, pišejo te izjave v zaporedju. Na primer, če Rob želi njegovo besedilo glave v Helvetica z modrim ozadjem in več prostora okoli besedila, lahko to storimo: style = "font-family: Helvetica, background-color: blue; padding: 5px;" Zadnji podpičjem pravzaprav ni obvezno, vendar pa ljudje ponavadi vodijo v zaradi skladnosti. 

Bomo prihranili pojasnjujejo nekatere hladnejših in bolj zapletena CSS lastnosti za drugo video. Če imate kaj v mislih, samo Googling želeni učinek sledi CSS bo verjetno dal precej dobre rezultate. Kul stvar je, da je precej široka CSS, tako da so možnosti, če je kaj želite storiti - v razumnih mejah - CSS verjetno lahko to storite. Temu pravimo vrste styling inline styling. Slog element je tudi v skladu z začetno oznako. 

Za ljudi, ki resnično želijo, da se organizirajo, boste morda začeli že malo jezen, kako grdo je vse to izgleda. Predstavljajte si, če bi morali to storiti za vsak element na strani, plus zdaj vaš HTML in CSS so vsi pomešani in nered. Bruto, kajne? Če želite to popraviti, ljudje sčasoma začeli lov za ločevanje svojo HTML oznake iz njihove CSS styling s pomočjo nekaj, kar ti CSS selektorji. CSS selektorji se uporabljajo za izbiro elementov, za katere se uporabljajo izjave. Selektor skupaj s seznamom CSS izjav se pogosto omenja kot pravilo CSS. Ta pravila bi dal med odpiranje in zapiranje oznake HTML slog, pogosto v glavi dokumenta. 

To je veliko lažje videti s primerom, zato začnimo z ustvarjanjem preprosto CSS pravilo. Prvič, kaj je dal slog oznake v glavi del našega HTML. Naprej, selektor. Mi bomo začeli z eno od najpreprostejših selektorji, hash simbol, ki izbere element HTML, s svojo osebno lastnost. V tem primeru bomo izbrati div, ki predstavlja uvod Rob je ki jih vnesete pripono znaka sledi div na ID, Rob. Zdaj izjave. Dodamo odprte in blizu naramnice in premik naše prejšnje izjave o inline Rob je div znotraj teh naramnic, osveževanje in, kul, Rob je intro ima še vedno črne obrobe okrog njega minus grdo inline grdost. 

Zdaj, kaj če bi želeli, da izberete h1 notranjost Rob je intro? Morda si mislite, "Dajva ID, na njej in nato premakniti naše prejšnje sloge." Da deluje, ampak CSS ima druge načine, kar omogoča, da izberete elemente s tisto, čemur pravimo combinators mešati preprostih selektorjev. Na primer, presledek znak, ki se uporablja kot Combinator navesti vse primere 1. selektor, ki živijo znotraj drugega selektor. To se sliši veliko bolj zapletena, kot je v resnici. Tukaj je primer. Bomo vnesite # oropal, presledek, in mu slediti z h1, en preprost selektor sklical selektor oznako, da izbere vrste elementov kot divs ali odstavki. Prostor združuje naše 2 preprostih selektorjev, uporabi vse izjave CSS in zavite oklepaje do H1 tags, ki živijo znotraj elementa z id = "rob". Samo, da vas prepričali, da deluje, bom pa spremeniti barvo pisave v belo, osveževanja, in poglej, glava Rob je sedaj bela. 

Vse to delo dokazuje, da s pomočjo pravil namesto inline slogov bomo lahko dobili veliko čistejši kodo. V bistvu, če ta stil blok se začne že malo velika, Lahko celo vleči te sloge ven v drugo datoteko skupaj. 

Da bi vključili to novo datoteko kot CSS v tem dokumentu, bom uporabite HTML je link tag. Tukaj jo bom povedal, da sem povezavo v zunanji slogi, rel atribut, in opredeljuje pot do datoteke z mojim href atribut. Zdaj so moje HTML oznake in CSS lepo organiziran v povsem ločenih datotekah, , ki je skoraj vedno tako oblikovalci raje dela s HTML in CSS. 

V primeru, da ste se spraševala, preproste selektorji vključujejo osebne selektorjev in tag selektorji, kot tiste, ki jih pravkar videli kot tudi razreda selektor za izbiro elemente z določeno skupino, atributov selektor za izbiro elementov, ki jih druge lastnosti, kot so type = "radio" radijskih vhodov gumb in pseudoselectors kot lebdenje in se osredotočiti za določitev styling, ko interakcije všeč miško preleti element pojavi. 

Skupne combinators vključujejo presledke za vse otroke in vejice za ločevanje selektorjev. Drugi lahko naletite tudi na puščico za samo neposredne otroke, Tilda za vse brate in sestre, ki se pojavijo po elementu, in plus znak za 1 sorodstveni, ki prihaja neposredno po element. 

Z združitvijo teh selektorjev in combinators, lahko razširili paleto lahko doseže na neki spletni strani za styling in pisati CSS bolj učinkovito. Z le nekaj vrstic CSS Vidiš me tipkanje tu Jaz lahko hitro narediti kaj takega izgledal nekako takole. 

Jaz sem Jožef, in to je CS50. 

[CS50.TV] 

Uh, kje naj začnem? Dovolite mi, da to ne - [smeh] Ok. Dodaj - Naj spremenijo to besedilo. Ooh. Žal mi je.