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

Danes bomo lahko govorimo o CSS ali Cascading Style Sheets. 

Torej, kaj točno je CSS? No, da bi prekinil čas CSS dol na 2 dela: Cascading Style Sheets in. Segmentov je malo bolj zapletena, in to je nekaj, kar bomo obdelali v drugem videu. Ampak za začetek, Style Sheets zelo veliko namigov, kaj počne CSS. Dodaja, sloge HTML spletne strani, spreminja, kako spletna stran izgleda estetsko. To pomeni, da vse, od pisave za besedila na postavitev vsebine na strani za druge kul stvari, kot bi kotičke zaokroženo polje ali dodajanje sence na besedila. Lahko se celo naredil nore stvari, kot da se stvari animirati na zaslonu. 

Torej, kako bomo uporabili CSS s HTML? Vzemite to slabo usmerjeno spletno stran sem napisal. Če Rob je bilo stanje na tem mestu zdaj, bi bil verjetno rekel nekaj podobnega, "Wow! Moj uvod izgleda grozno. Joseph, si grozno oblikovalec." "Uporaba privzete pisave Times je Helvetica? Toliko bolje." 

Torej, kaj bi bilo najenostavnejši način, da se uporablja styling Rob hoče? Najbolj očiten način veliko ljudi najprej napisal CSS je bila dana, kar imenujemo slog izjave prav v elementu samem z uporabo HTML slog atribut. Ime izjava zajema le premoženje elementa HTML je CSS želimo spremeniti sledi dvopičje sledi novo vrednost nepremičnine in podpičje na koncu. Na primer, recimo, da si želi Rob črno obrobo uvodu. Najprej smo dal slog atribut div Rob je tukaj potem znotraj narekovajev dal izjavo CSS: "Border: 1px solid black;" Za 1 pixel nanaša na širino meje, trdno se nanaša na slog meje, in barva na koncu določa, kaj meji je barva. 

Če želimo več slogov na element, pisanje teh izjav za drugo. Na primer, če želi svojo glavo Rob besedilo Helvetica z modrim ozadjem in več prostora okoli besedila, lahko to storimo: style = "font-family: Helvetica, barva ozadja: modra, podloga: 5PX;" Zadnje podpičje je pravzaprav obvezna, vendar pa ljudje ponavadi vodijo v zaradi skladnosti. 

Bomo prihranili pojasnjuje nekatere hladnejših in bolj zapletene lastnosti CSS za drugo video. Če imate kaj v mislih, samo Googling učinek, ki ga želite sledi CSS bo verjetno dal zelo dobre rezultate. Kul stvar je, da je dokaj širok in 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. Element stil je tudi v skladu z začetno oznako. 

Za ljudi, ki resnično želijo, da se organizirajo, Morda vam bodo začeli že malo peeved, 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 od njihovega stila z uporabo CSS CSS selektorji nekaj, kar ti. CSS selektorji se uporabljajo za izbiro elementov, za katere se uporabljajo izjave. Selektor skupaj s seznamom izjav CSS se pogosto omenja kot pravilo CSS. Ta pravila naj bi dal med odpiranje in zapiranje HTML slog oznak, pogosto v glavi dokumenta. 

To je veliko lažje videti s primerom, zato začnimo z vzpostavitvijo preprostih CSS pravilo. Najprej povejmo sloga oznake v glavi del našega HTML. Dalje, selektor. Mi bomo začeli z eno od najpreprostejših selektorji, hašiš simbola, ki izbere element HTML s svojo ID atribut. V tem primeru bomo izbrati div, ki predstavlja uvod v ROB ki jih vnesete pripono znaka, ki mu sledi ID div je, Rob. Zdaj izjave. Mi dodamo začetka in konca naramnic in prenos naše prejšnje izjave o inline div Rob je znotraj teh naramnic, osveževanje in, kul, Rob je intro vedno ima črno obrobo okoli njega, zmanjšano za grdo inline grdost. 

Zdaj, kaj če bi želeli, da izberete h1 notranjost uvodu je oropal? Morda si mislite: "Dajmo ID nanj in nato premakniti naše prejšnje sloge." To deluje, ampak CSS ima druge načine dajanja v najem izberete elemente s tisto, čemur pravimo combinators mešati preproste izbirnike. Na primer, lahko znak presledek se uporablja kot combinator navesti vse primere 1 selektor, ki živijo znotraj drugega selektorja. To se sliši veliko bolj zapletena, kot je v resnici. Tukaj je primer. Bomo vnesite # oropati, presledek, in mu slediti z h1, en preprost selektor imenovano oznako selektor, ki izbere vrste elementov kot divs ali odstavki. Prostor združuje naša 2 preprostih izbirnike, uporaba vseh CSS izjave in zavite oklepaje do H1 tags, ki živijo znotraj elementa z id = "rob". Samo prepričati, da to deluje, bom pa spremeniti barvo pisave v belo, osveževanja, in, glej, glava Rob je sedaj bela. 

Vso to delo dokazuje, da se z uporabo pravil, namesto inline sloge lahko dobimo veliko čistejši kodo. V bistvu, če ta stil blok se začne že malo veliko, Lahko celo potegniti ven te sloge v drugo datoteko skupaj. 

Če želite vključiti to novo datoteko kot CSS v tem dokumentu, se bom preprosto uporabite povezavo z oznako HTML. Tukaj sem ga povedal, da sem povezovanja v zunanji datoteki s slogi, z 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 delajo s HTML in CSS. 

V primeru, da ste se spraševala, preprosti izbirniki so osebne izbirnike 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" vhodov gumb, in pseudoselectors kot lebdenje in se osredotočiti za določitev sloga, ko interakcije všeč mousing nad element pojavi. 

Skupne combinators vključujejo presledke za vse otroke in vejice za ločevanje izbirnike. Drugi se lahko srečate tudi puščico za neposredne le otrokom, Tilda za vse brate in sestre, ki se pojavijo po element, in znak plus za 1 brat, ki prihaja neposredno po element. 

Z združitvijo teh selektorjev in combinators, lahko razširili paleto styling lahko doseže na neki spletni strani CSS in pisati bolj učinkovito. Z le nekaj vrstic CSS, ki jih vidite tukaj sem tipkanje, Lahko hitro, da kaj takega izgleda kot nekaj takega. 

Jaz sem Jožef, in to je CS50. 

[CS50.TV] 

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