[Powered by Google Translate] [CSS] [Joseph Ong - Harvard University] [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 break terminu CSS sadalīt 2 daļās: Kaskādes un Style Sheets. Kaskādes ir nedaudz sarežģītāka, un tas ir kaut kas, mēs segtu citā video. Bet starteri, Style Sheets ir ļoti daudz mājieni par kādu CSS dara. Tā piebilst, stilu, lai HTML mājas lapā, mainot to, kā mājas lapa estētiski izskatās. Tas ir viss no fontu teksta uz pozicionēšanas saturu lapā citām atdzist lietas, piemēram, padarot stūriem noapaļotu ailē vai pievienot ēnas teksta. Jūs pat varat darīt trakas lietas, piemēram, darīt lietas, rosināt uz ekrāna. 

Tātad, kā mēs izmantot CSS ar HTML? Veikt šo nabadzīgo meklējat vietu, es tikai uzrakstīju. Ja Rob bija skatīties šajā vietā tieši tagad, viņš droši vien teikt kaut ko līdzīgu, "Wow Mana ieviešana izskatās! Briesmīgi. Joseph, 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 stils Rob grib? Pašsaprotama veids, kā daudzi cilvēki sākotnēji rakstīja CSS bija īstenot to, ko mēs saucam par stila deklarācijas tieši paša elementa izmantojot HTML stila atribūtu. Stils deklarācija vienkārši sastāv no HTML elementa CSS mantas mēs gribam mainīt , kam seko kols seko jaunā īpašuma vērtības un semikolu beigās. Piemēram, pieņemsim, ka Rob grib melnu apmali viņa ieviešanu. Mēs pirmo reizi izvirzīja stila atribūtu Rob div šeit tad iekšā pēdiņās likts CSS deklarāciju: "Border: 1px solid black;" 1 pikselis attiecas platums robežas, ciets attiecas uz stilu robežas, un beigās krāsu nosaka to, robežas krāsa ir. 

Ja mēs vēlamies vairākus stilus uz elementa, rakstīt šīs deklarācijas pēc kārtas. Piemēram, ja Rob grib savu galvenes tekstu Helvetica ar zilu fona un vairāk vietas ap tekstu, mēs varam izdarīt: style = "font-family: Helvetica, fona krāsu: zila, polsterējums: 5PX;" Pēdējais semikols ir faktiski obligāta, bet cilvēki parasti saglabā to konsekvences labad. 

Mēs saglabāsim skaidrojot dažus no dzesētāja un sarežģītākas 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 kas jūs vēlaties darīt - saprātīgi - CSS var droši darīt. Mēs to saucam par šāda veida stila inline stilu. Elements stils ir labi, saskaņā ar sākuma tagu. 

Attiecībā uz ļaudīm, kas patiešām patīk organizēt, Jūs varētu sākt saņemt mazliet peeved, kā netīrs tas viss izskatās. Iedomājieties, ja jums bija to darīt par katru elementu lapā, plus tagad jūsu HTML un CSS visi sajaukti un pārblīvēta. Gross, labi? Lai novērstu šo problēmu, cilvēki beidzot sāka iepatikusies šķirojot HTML atzīmes no savas CSS stilu, izmantojot kaut ko sauc par CSS selektoru. CSS selektori tiek izmantoti, lai izvēlētos elementus, uz kuriem deklarācijas tiek piemērotas. Selektors kopā ar sarakstu, CSS deklarāciju, ir bieži sauc par CSS likums. Šie noteikumi būtu nodot starp atvērt un aizvērt HTML stila tagus, bieži galvā dokumenta. 

Tas ir daudz vieglāk, lai redzētu, ar piemēru, tāpēc sāksim, izveidojot vienkāršu CSS normu. Pirmkārt, pieņemsim likts stila tagus galvas sadaļā mūsu HTML. Tālāk, 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 ieviešanu ierakstot hash simbolu seko div ID, aplaupīt. Tagad deklarācijas. Mēs pievienot atvērt un aizvērt bikšturi un novirzīt savus iepriekšējos inline deklarācijas par Rob div iekšpusē šiem bikšturi, atsvaidzināt, un, atdzesē, Rob intro joprojām ir melns ap to robežu mīnus netīrs inline neglītumu. 

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

Viss šis darbs jādara, lai pierādītu, ka, izmantojot noteikumus, nevis inline stiliem 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ā citā failā vispār. 

Lai iekļautu š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šķiem failiem, kas ir gandrīz vienmēr ir veids, dizaineri dod priekšroku darbam ar HTML un CSS. 

Gadījumā, ja jūs domājām, vienkāršas pārslēdzējiem ietver ID selektori un tag selektoru, piemēram, tiem, mēs tikko redzējām kā arī klases selektori izvēloties elementus ar noteiktu klasi, atribūts selektori izvēles elementi ar citiem atribūtiem, piemēram, type = "radio" radio pogu ieejas, un pseudoselectors piemēram, lidināties un koncentrēties lai precizētu stils, kad mijiedarbība, piemēram, novietojot kursoru virs elementa notiek. 

Kopīgie combinators ietver atstarpes visiem bērniem un komatus atšķirt selektori. Citi 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īme uz 1 sibling, kas nāk tūlīt pēc elementa. 

Apvienojot šos šķirotāja un combinators, Jūs varat paplašināt klāstu stilu, 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 darī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.