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

Ma fogunk beszélni CSS vagy Cascading Style Sheets. 

Szóval, mi is pontosan a CSS? Nos, akkor megtörje a kifejezést CSS le 2 részből áll: Cascading Style Sheets és. Cascading egy kicsit bonyolultabb, és ez olyasmi, amit majd terjed egy másik videó. De a kezdők, Style Sheets nagyon utal, amit CSS csinál. Hozzáteszi, a stílusokat a HTML egy weboldal, megváltoztatása, hogy a weboldal esztétikailag néz ki. Ez azt jelenti, mindent a betűtípust, a szöveg, hogy a helymeghatározás a tartalom az oldalon egyéb jó dolgok, mint hogy a sarkait egy doboz lekerekített vagy hozzáadása árnyékok szöveget. Ön még nem őrült dolgok, mint a dolgok animálni a képernyőn. 

Szóval hogyan lehet használni CSS a HTML? Fogd ezt a szegény külsejű Szótár írtam. Ha Rob volt, hogy nézd meg ezen az oldalon most, ő talán mond valamit, mint, "Wow! My bevezetése szörnyen néz ki. Joseph, te egy szörnyű designer." "Az alapértelmezett betűtípus Times? Helvetica sokkal jobb." 

Szóval, mi lenne a legegyszerűbb módja, hogy alkalmazza a stílus Rob akar? A legkézenfekvőbb módja sok ember eredetileg írt CSS az volt, hogy mit nevezünk stílus nyilatkozatokat közvetlenül az elem önmagában a HTML stílus attribútum. A stílus nyilatkozatot csak áll a HTML elem CSS tulajdonság szeretnénk változtatni kettőspont követ, majd az új, az ingatlan értékét és a pontosvessző a végén. Például, mondjuk Rob akar egy fekete keret körül a bevezetés. Először helyezze a stílus attribútum Rob div ide akkor idézőjelek véget CSS nyilatkozat: "Border: 1px solid black;" Az 1 pixel szélességére utal a határ, a szilárd utal a stílus a határ és a színe a végén határozza meg, mi a határ a színe. 

Ha azt akarjuk, több stílus egy elemet, írj ezen nyilatkozatok sorrendben. Például, ha akarja, hogy a fejléc Rob szöveget Helvetica, a kék háttér és több hely körül a szöveg, akkor tegye a következőket: style = "font-family: Helvetica, background-color: blue; padding: 5px;" Az utolsó pontosvessző valójában kötelező, de az emberek általában tartsa a következetesség kedvéért. 

Majd mentse elmagyarázza néhány hűvösebb és bonyolultabb CSS tulajdonságok egy másik videó. Ha van valami szem előtt, csak Googling a kívánt hatást, majd CSS valószínűleg Önnek elég jó eredményeket. A fontos dolog az, hogy a CSS elég széles, tehát esély, ha van valami, amit akarok - az ésszerűség határain belül - CSS, valószínűleg csinálni. Hívjuk ezt a fajta stílus inline stílus. Az elem stílus, nos, összhangban a start tag. 

Az emberek, akik igazán szeret kell szervezni, talán kezd egy kicsit peeved, hogy hogyan néz ki ez az egész mocskos. Képzeld el, ha kellett csinálni ezt minden eleme az oldalon, plusz most a HTML és a CSS mind összekeverve és zsúfolt. Gross, ugye? Ennek kiküszöböléséhez, az emberek végül kezdték fogását be elválasztó a HTML markup a saját CSS styling segítségével egy úgynevezett CSS választók. CSS szelektorok használják választani elemek, amelyekhez a nyilatkozatokat alkalmaznak. A választó kombinált listáját CSS nyilatkozatok gyakran nevezik CSS szabályt. Ezeket a szabályokat kerülne a nyílt és szoros HTML stílus címkéket, gyakran a fejét a dokumentumot. 

Ez sokkal könnyebb látni például, úgyhogy kezdjük létrehozásával egy egyszerű CSS szabályt. Először is, tegyük stílusa tag a fejrész a HTML. Ezután a választó. Kezdjük segítségével az egyik legegyszerűbb választók, a hash jelkép, amely kiválaszt egy HTML elem által attribútum. Ebben az esetben mi válasszuk ki a div képviselő Rob bemutatása beírja a hash jel követi div azonosítóját, Rob. Most a nyilatkozatok. Mi hozzá nyitott és zárt zárójelek és változtatják korábbi inline nyilatkozatokat Rob div Ezen belül nadrágtartó, frissítési, , és hűvös, Rob intro még fekete szegély körül mínusz a rendetlen inline csúnyaság. 

Nos, mi van, ha azt akartuk, hogy kiválassza a h1 belsejében Rob intro? Azt hihetnénk, hogy: "Mondjuk egy azonosítót rá, majd helyezze a korábbi stílusokat." Ez működik, de a CSS más módon bérbeadás kiválasztott elemek segítségével hívjuk combinators keverni egyszerű választók. Például egy whitespace karakter használható kombinátor határozza meg minden esetben 1-választó, hogy él benne egy másik választó. Ez úgy hangzik, sokkal bonyolultabb, mint amilyen valójában. Íme egy példa. Mi írjuk # rabolni, adjunk hozzá egy szóközt, és kövesse azt egy h1, Egy másik egyszerű szelektor úgynevezett tag választó, amely kiválasztja típusú elemek mint divs vagy bekezdést. A tér egyesíti a 2 egyszerű szelektor alkalmazásával minden CSS nyilatkozatok és a kapcsos zárójelek a h1 tag, hogy él benne az elem id = "rabolni". Csak meggyőzni, hogy működik, én változtatni a színét a fehér, frissítési, és íme, Rob fejléc most fehér. 

Mindez a munka azt mutatja, hogy segítségével szabályai helyett a beágyazott stílusok tudnánk sokkal tisztább kódot. Sőt, ha ez a stílus mondat kezd egy kicsit nagy, Én is húzni ezeket a stílusokat ki egy másik fájl összesen. 

Fel ezt az új fájlt CSS jelen dokumentumban fogom csak használni HTML link tag. Itt mondom azt, hogy én vagyok összekapcsolása egy külső stíluslap a rel attribútumot, és pontosan meghatározza a fájl elérési útját az én href attribútum. Most a HTML jelölőnyelv és CSS szerveznek szépen teljesen külön fájlokban, ami majdnem mindig így tervezők inkább dolgozik HTML és CSS. 

Ha kíváncsi, az egyszerű szelektorok közé ID szelektorok és tag választók, mint az általunk most láttam valamint class szelektor kiválasztásának elemek egy bizonyos osztályban, attribútum szelektorok kiválasztásának elemek más attribútumok, például type = "radio" rádió gomb bemenetek és pseudoselectors mint lebeg, és fókuszáljon megadásához styling amikor kölcsönhatások szeretek mousing felett elem fordul elő. 

A közös combinators tartalmazza whitespace minden gyermek számára és vesszőket megkülönböztetni választók. Mások akkor találkozhat tartalmazza a nyíl a közvetlen gyermek csak A tilde összes testvérek után előforduló elem, és a plusz jel az 1 testvér, ami után azonnal az elemet. 

Ezek egyesítésével választók és combinators, akkor szélesítése stílus érhet el egy adott weboldal és írjunk CSS hatékonyabban. Csak egy pár sornyi CSS látsz engem gépelés itt, Én gyorsan, hogy valami ilyesmit néz ki valami, mint ez. 

Én vagyok József, és ez CS50. 

[CS50.TV] 

Uh, hol is kezdjem? Hadd csináljam, hogy nélküle - [nevet] Oké. Hozzáadása - Hadd változtatni megfogalmazás. Ooh. Bocsánat.