[Powered by Google Translate] [CSS] [Joseph Ong - Hārvarda] [Tas ir CS50. - CS50.TV] 

Šodien mēs runājam par CSS vai pakāpenisko Style Sheets. 

Tātad, kas īsti ir CSS? Nu, pieņemsim pauze terminu CSS leju 2 daļās: Kaskādes un Style Sheets. Kaskādes ir nedaudz sarežģītāka, un tas ir kaut mēs aptver citā video. Bet starteri, Style Sheets ļoti daudz mājieni par kādu CSS dara. Tā piebilst stilu, lai HTML tīmekļa lapas, mainot to, kā mājas lapā estētiski izskatās. Tas ir viss no fontu uz pozicionēšanas satura lapā uz citas labas lietas, piemēram, padarot stūriem noapaļotu kastē vai pievienojot ēnas, lai tekstu. Jūs pat varat darīt trakas lietas, piemēram, darīt lietas, rosināt uz ekrāna. 

Tātad, kā mēs izmantojam CSS ar HTML? Veikt šo nabadzīgo meklējat vietu es tikko rakstīja. Ja Robs bija skatīties šajā vietā šobrīd, viņš droši vien saka kaut ko līdzīgu, "Wow Mans ievads izskatās! Briesmīgi. Džozefs, tu esi šausmīgs dizainers." "Izmantojot noklusējuma Times fonts Helvetica ir? Tik daudz labāk." 

Tātad, kādi varētu būt vienkāršākais veids, kā piemērot dizainu Rob grib? Pašsaprotama veids daudziem cilvēkiem sākotnēji rakstīja CSS bija likt to, ko mēs saucam stila deklarācijas tiesības paša elementa izmantojot HTML stila atribūtu. Stils deklarācija vienkārši sastāv no HTML elementa CSS īpašuma mēs vēlamies mainīt seko kols seko jaunā īpašuma vērtības un semikolu beigās. Piemēram, pieņemsim, ka Robs grib melnu apmali ap viņa ieviešanu. Mēs vispirms nodot stila atribūtu aplaupīt s div šeit tad iekšpusē pēdiņas likt CSS deklarāciju: "Border: 1px solid black;" Gada 1 pikselis attiecas uz platuma robežas, cieto atsaucas uz stilu robežas, un beigās krāsa nosaka, kāda robežai krāsa ir. 

Ja mēs gribam vairākus stili par elementu, rakstīt šīs deklarācijas pēc kārtas. Piemēram, ja Robs grib savu galvenes tekstu Helvetica ar zilu fonu un vairāk vietas ap tekstu, mēs varam izdarīt: style = "font-family: Helvetica, fona krāsa: zila, polsterējumu: 5PX;" Pēdējais semikols ir faktiski obligāta, bet cilvēki parasti turēt to konsekvences labad. 

Mēs ietaupīt skaidrojot dažus no dzesētāja un sarežģītāka CSS īpašības citu video. Ja jums ir kaut kas prātā, tikai Googling efektu vēlaties seko CSS iespējams, jums ir diezgan labus rezultātus. Cool lieta ir tā, ka CSS ir diezgan plašs, tāpēc izredzes ir, ja ir kaut ko vēlaties darīt - robežās iemesla dēļ - CSS var droši darīt. Mēs saucam šāda veida stila inline stilu. Elements stils ir labi, saskaņā ar starta tag. 

Ļaudīm, kuri patiešām patīk organizēt, Jūs varētu sākt saņemt nedaudz peeved, kā netīrs tas viss izskatās. Iedomājieties, ja jums bija jādara katram elementam lapā, Plus tagad jūsu HTML un CSS visi maisījumos un pārblīvēta. Bruto, labi? Lai to labotu, cilvēki beidzot sāka iepatikusies, šķirojot HTML atzīmes no savas CSS stilu, izmantojot kaut ko sauc CSS selektori. CSS selektori tiek izmantots, lai izvēlētos elementus, kas deklarācijas tiek piemērotas. Selektors apvienojumā ar sarakstu CSS deklarāciju ir bieži sauc par CSS noteikums. Šie noteikumi būtu nodot starp atvērt un aizvērt HTML stila tagiem, bieži galvā dokumentu. 

Tas ir daudz vieglāk redzēt ar piemēru, Tāpēc sāksim, izveidojot vienkāršu CSS noteikums. Pirmkārt, pieņemsim likts stila tagus galvas sadaļā mūsu HTML. Nākamais, selektoru. Mēs sākt, izmantojot vienu no vienkāršākajiem šķirotāja, hash simbolu, kas izvēlas HTML elementu ar savu ID atribūtu. Šajā gadījumā mēs izvēlētos div kas pārstāv Rob s ieviešanu ierakstot hash simbolu kam seko DIV ID, aplaupīt. Tagad deklarācijas. Mēs pievienot atvērt un aizvērt bez lencēm un novirzīt mūsu agrāk inline deklarācijas par Rob s div iekšpusē šiem bikšturi, atsvaidzināt, un, atdzesē, Rob s intro joprojām ir melns ap to robežu mīnus netīrs inline neglītums. 

Tagad, kas notiks, ja mēs vēlējāmies, lai izvēlētos h1 iekšpusē Robs ir intro? Jūs varētu domāt, "Let 's likts ID par to un pēc tam pārvietot mūsu agrāk stilu." Tas darbojas, bet CSS ir citi veidi, ļaujot jums izvēlēties elementus izmantojot to, ko mēs saucam combinators samaisa vienkāršus selektori. Piemēram, atstarpes rakstzīmi var izmantot kā Combinator norādīt visus gadījumus 1 atlasītāju kas dzīvo iekšpusē citu selektoru. Tas izklausās daudz sarežģītāka, nekā tas patiesībā ir. Lūk piemērs. Mēs rakstīt # aplaupīt, pievienojiet atstarpi, un sekot to ar H1, vēl viens vienkāršs selektors sauc tag selektors kas izvēlas veidu elementiem piemēram divs vai punktu. Telpa apvieno mūsu 2 vienkāršu selektori, pieliekot visas CSS deklarācijas un cirtaini bikšturi līdz H1 tagus, kas dzīvo iekšā elementa ar id = "aplaupīt". Tikai, lai pārliecinātu jūs, ka tas darbojas, es ņemšu mainīt fonta krāsu uz baltu, atsvaidzināt, un, izskatās, Rob galvene tagad balts. 

Viss šis darbs jādara, lai pierādītu, ka, izmantojot normas vietā inline stilus mēs varam iegūt daudz tīrāku kodu. Faktiski, ja šis stils bloks sāk iegūt mazliet liels, Es varu pat izraut šos stilus ārā citu failu pavisam. 

Iekļaut šo jauno failu kā CSS šajā dokumentā es ņemšu tikai izmantot pieejams HTML saite tag. Šeit es esmu stāsta to, ka es esmu savieno ārējā stila lapas, rel atribūtu, un norādot ceļu uz failu ar manu href atribūtu. Tagad mans HTML atzīmes un CSS tiek organizētas labi pilnīgi atsevišķus failus, kas ir gandrīz vienmēr veids dizaineri dod priekšroku darbam ar HTML un CSS. 

Gadījumā, ja jūs domājām, vienkāršas selektori ietver ID selektori un tag selektori līdzīgi tiem, mēs tikko redzējām kā arī klases pārslēdzējiem atlasei elementus ar noteiktu klasi, atribūts selektori atlasei elementi ar citiem atribūtiem, piemēram, veids = "radio" radio pogu izejvielām, un pseudoselectors piemēram lidināties un koncentrēties lai precizētu stils kad mijiedarbība like mousing pār elementu notiek. 

Kopīgās combinators ietver atstarpes visiem bērniem un komatus atšķirt selektori. Citi jums var rasties arī uz bultiņas tiešo bērniem tikai, Tilde visiem brāļiem un māsām, kas notiek pēc elementa, un plus zīmi par 1 brāli, kas nāk uzreiz pēc elementa. 

Apvienojot šos šķirotāja un combinators, Jūs varat paplašināt klāstu stils jūs varat sasniegt attiecīgajā mājas lapā un rakstīt CSS efektīvāk. Tikai ar pāris rindiņas CSS redzat mani rakstīt šeit, Es var ātri izdarīt kaut kas līdzīgs šim izskatās kaut kas līdzīgs šim. 

Es esmu Jāzeps, un tas ir CS50. 

[CS50.TV] 

Uh, kur es varu sākt? Ļaujiet man darīt, ka bez - [smejas] Labi. Pievienot - Ļaujiet man mainīt šo formulējumu. Ooh. Žēl.