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

Ma lesz szó CSS ​​vagy Cascading Style Sheets. 

Tehát mi is pontosan az a CSS? Nos, megtöri a kifejezés CSS le a 2 részből áll: Cascading Style Sheets és. Cascading egy kicsit bonyolultabb, és ez olyasmi, amit majd fedezni egy másik videó. De a kezdők, stíluslapok nagyon tippeket, hogy mit csinál CSS. Hozzáteszi, a stílusokat a HTML-egy weboldal, változó, hogy a weboldal esztétikailag látszik. Ez azt jelenti, mindent a font a szöveg elhelyezése a tartalom az oldalon más jó dolgot, mint például a sarkok egy doboz lekerekített vagy hozzáadása árnyékok a szöveget. Ön még nem őrült dolgokat, mint a dolgok animálni a képernyőn. 

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

Akkor mi lehet a legegyszerűbb módja annak, hogy alkalmazza a stílus Rob akar? A legkézenfekvőbb módja sok ember először írt CSS az volt, hogy mit nevezünk stílus nyilatkozatokat közvetlenül az elem is a HTML style attribútum. A stílus nyilatkozat pusztán a HTML elem CSS tulajdonság meg akarjuk változtatni kettőspont követi majd az új az ingatlan értéke és a pontosvessző a végén. Például, tegyük fel, hogy Rob akar fekete szegély körül a bevezetés. Először tegye a stílus attribútum Rob div itt akkor idézőjelek hogy egy 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 elem összerakható nyilatkozatok sorrendben. Például, ha azt akarja, hogy Rob fejléc szövegét Helvetica egy 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ő tulajdonképpen 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 Google használatának a kívánt hatást, majd CSS valószínűleg kapsz elég jó eredménnyel. A jó dolog az, hogy a CSS elég széles, így esély van, ha van valami, amit akarsz - 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, jó, összhangban a kezdő tag. 

Az emberek, akik igazán szeretik, ha szervezett, lehet kezdeni, hogy egy kicsit zabos, hogy milyen ez az egész úgy néz ki, rendetlen. Képzeld el, ha kellett, hogy ezt minden eleme az oldalon, és most a HTML és a CSS mind összekeverve és zsúfolt. Gross, igaz? A javításhoz, az emberek előbb-utóbb kezdtek kifogása, hogy elválassza egymástól a HTML markup a saját CSS stílus segítségével úgynevezett CSS választók. CSS szelektor használják választani elemek, amelyekhez a nyilatkozatokat alkalmazzák. A választó kombinált listáját CSS nyilatkozatok gyakran nevezik a CSS szabályt. Ezeket a szabályokat kell tenni a nyílt és szoros HTML tag-eket, gyakran a fejét a dokumentumot. 

Sokkal könnyebb, hogy egy példát, úgyhogy kezdjük létrehozásával egy egyszerű CSS szabályt. Először is, tegyük stílusát címkéket 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 szimbólum, amely kiválasztja a HTML elemet az ID attribútum. Ebben az esetben akkor válassza ki a div képviselő Rob bemutatása beírja a hash szimbólumot, majd a div azonosítóját, rabolni. Most a nyilatkozatok. Mi hozzá a nyílt és szoros merevítések és megváltoztassák a korábbi inline nyilatkozatok Rob div Ezen belül nadrágtartó, frissíteni, és hűvös, Rob intro még egy fekete szegély körül mínusz a rendetlen inline csúnyaság. 

Nos, mi van, ha azt akartuk, hogy válassza ki a H1 belső Rob intro? Azt hihetnénk, hogy "Mondjuk egy azonosítót, és toljuk a korábbi stílusokat." Ez működik, de CSS más módon bérlet kiválasztott elemek segítségével hívjuk combinators keverni egyszerű választók. Például egy térközkarakter lehet használni, mint egy kombinátor megadni 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 is írja # rabolni, egy szóköz, és kövesse azt a H1, Egy másik egyszerű választó úgynevezett tag szelektor, amely kiválasztja jellegű elemek mint divs és szakaszokra. A tér egyesíti a 2 egyszerű szelektor alkalmazásával minden CSS nyilatkozatok és a zárójelek H1 címkék él benne az elem id = "rabolni". Csak meggyőzni, hogy ez működik, én változtatni a színét, hogy fehér, frissítési, és íme, Rob fejléc már fehér. 

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

Hogy ezt az új fájlt CSS jelen dokumentumban én csak a HTML link tag. Itt mondom, hogy én vagyok az összekötő külső stíluslap a rel attribútum, és meghatározza a fájl elérési útját az én href attribútummal. 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 dolgozni HTML és CSS. 

Abban az esetben, ha kíváncsi, az egyszerű választók közé ID szelektor és a tag választók, mint az általunk most láttam valamint osztály szelektor kiválasztásához elemeket egy bizonyos osztályban, attribútum szelektor kiválasztásához elemeket más tulajdonságok, mint a type = "radio" rádió gomb bemenet, és pseudoselectors mint lebeg, és fókuszáljon megadására stílus, ha tetszik interakciók mousing át egy elemet fel. 

A közös combinators tartalmaz whitespace minden gyermek és vesszőket megkülönböztetni választók. Mások akkor találkozhat is a nyíl a közvetlen gyermekek csak A tilde összes testvérek után keletkező elem, és a plusz jel a 1 testvér, ami után az elem. 

Ezek egyesítésével választók és combinators, lehet szélesíteni a különböző stílus lehet elérni egy adott weboldalon írni és CSS hatékonyabban. Csak egy pár sornyi CSS látsz engem gépelés itt, Én gyorsan, hogy ilyesmit néz ki valami ilyesmi. 

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

[CS50.TV] 

Uh, hol is kezdjem? Hadd csinálni anélkül, hogy - [nevet] Oké. Hozzáadása - Hadd változtatni megfogalmazás. Ó. Bocsánat.