[Zenelejátszási] 

DOUG LLOYD: Szóval vessünk még egy videó beszélni még egy nyelvet. Ezúttal fogunk beszélni a CSS. Szóval CSS, ami rövid Cascading Style Sheets, egy másik általunk használt nyelv ha építési honlapokon. Gondolj bele, mint ez. Ha HTML, amit arra használunk, hogy megszervezze a tartalmat akarjuk helyezni az oldalunkon, CSS az az eszköz, amit általában használni szabni, hogyan weboldalaink nézni, és hogy a felhasználói élmény igazán van, kölcsönhatásban áll a honlapon. 

Hasonló a HTML, CSS nem egy programozási nyelv. Nem kell logika. Nem rendelkezik változók. Nem rendelkezik semmiféle, hogy flow kapcsolatos dolgokat, hogy a C-nek. Ez egy stílus nyelven. És a szintaxis elég egyszerű, és csak leírja hogyan az elemek a mi Oldal bizonyos HTML elemek módosítani kell. E célból, ha nem Még nézte a videót HTML, vagy nem ismerik a HTML általában, akkor érdemes, hogy egy pillantást, hogy Először is, mert ez a vita a CSS fog függ Egyes HTML tudás. 

Tehát itt egy igazán egyszerű CSS stíluslap. Még ha soha nem programozott CSS előtt, Biztos vagyok benne, hogy kitaláljuk, Pontosan mi ez a stíluslap nem. Mit csinal? Nos, alkalmazva a test honlapunk oldal, mindent a test címkék A HTML, és ez határozza meg a háttérszíne az oldalra, hogy kék. Nos, ez egy nagyon egyszerű stíluslap. Ez valójában nagyon is emberi barát nyelv, CSS. Tehát akkor is, ha soha nem használt előtt, akkor valószínűleg sejtette, hogy ez mit csinált. Sőt, ha betöltve egy oldalt, ahol a Az XSLT stíluslap volt ágyazva valahogy, A háttér színe oldalunkat lenne lehet kék, és nem a szokásos fehér. 

Szóval hogyan lehet építeni stíluslapok? Hát először is, van, hogy azonosítani a választó. Az utolsó példa, hogy szelektor volt testet. Aztán ott van egy nyitott kapcsos zárójel, és mi vagyunk fog kezdeni meghatározó stíluslapot, hogy választó. A kettő között a kapcsos zárójelek, mi Van egy listát a legfontosabb érték párokat. Az előző érték páros volt háttér színe kék pontosvessző, de nem tudtunk többet és többet ilyen. Lehet, hogy több dolgot alkalmazása az, hogy a tag, hogy kiválasztó szerv. Mindegyikük van elválasztva pontosvessző, és felhívjuk minden egyikük nyilatkozatot, a CSS nyilatkozatot. Amikor végeztünk az összes stílus vagyunk kívánja alkalmazni, hogy az adott tag, már csak egy záró kapcsos zárójel, hogy vessen véget a stíluslapot, és már készen is vagyunk meghatározó stíluslap az adott választó. 

Melyek a közös CSS tulajdonságok? Nos, talán szeretné tenni A határ körül valami. Szóval lehet mondani, határ, ez lenne a legfontosabb, majd az értékeket lenne, milyen stílusban, színben, és szélessége azt szeretné, hogy legyen. Tehát a stílus lehet egy szilárd vonal, szaggatott vonal, szaggatott vonal, egy gerinc vonal, ami hullámos vonal. Talán azt szeretné, hogy ez kék vagy fekete vagy zöld. Lehet, hogy szeretné, hogy legyen 1 vagy 2, vagy 10 pixel széles. Megadhatja az összes ilyen dolgokat. Talán szeretné beállítani a háttérben színe az oldal egy bizonyos módon. Már látta, hogy beállítása háttérben a test, hogy kék. 

Akkor tudod használni a kulcsszó, így CSS vannak bizonyos színek hogy épülnek bele, kék, zöld, fekete, egy nagyon egyszerű színek tudjuk. De akkor is meg minden hexadecimális szín, amit szeretne. Emlékezzünk vissza, hogy a színek lehet azonosítani egy sor három hexa számok 0-255, RG és b, a piros, zöld, és kék komponenst. És így tudjuk meg minden szín akarunk által, ahelyett, hogy a kék vagy zöld vagy fekete, a font, majd hat számjegy a hexadecimális, és hogy adna nekünk A hat számjegyű színét. Szóval ez a háttér színét. 

Mi is az előtérben szín, ami rendszerint lesz a szöveg az oldal. És hasonlóképpen erre A kulcsszó és vagy hat számjegyű hexadecimális. Szóval lehet határozni minden szín szeretné, hogy a szöveg az oldal, ellen egy adott háttérszínt, fönt. Azt is megváltoztathatja, és foglalkozik A betűtípus és a szöveg milyen módon teszi meg az oldalon. 

Szóval meg tudod változtatni a betűméretet. Használhatja kulcsszavak, mint az extra, extra kicsi, vagy xx kis, vagy közepes, nagy, és így tovább. Használhatja fix pont, 10 pont, 12 pont, és így tovább. Használhatja százalékos, 80%, 20%, ahol 100% az alapértelmezett betűtípus méret, amely általában megy olyasmi lehet, 11, vagy 12 pontot. Vagy akár meg is alapozza le A legújabb betűméretet. Ha csak írt valamit és tudod, mit szeretne, hogy legyen kisebb, de nem tudom pontosan, milyen méretű szeretné, hogy legyen, nos, akkor csak annyit, betűméret kisebb. És ez alapozza majd ki a, Csak fönt, ez betűméret. És akkor kap kisebb-nagyobb. Tehát van egy csomó más meg lehet adni betűméretet. 

Azt is meghatározza, hogy milyen Font család szeretne. Ha egy adott nevet, van rá mód, a CSS-- nem fogunk beszélni róla here-- meghatározni egy nagyon speciális betűtípussal és embed be az oldal. Ön is használja a generikus neveket. Van egy csomó web biztonságos betűtípusok amelyek előre meghatározott CSS. És ha a felhasználó a Microsoft Irodai az elmúlt 20 évben, Ön valószínűleg ismeri Sok ilyen internetes biztonságos betűtípusok Már, Times New Roman, Arial, Courier New Georgia, Tahoma, Verdana, stb. Ezek mind tekinthető biztonságos webes betűtípusok. És valóban, része a okból jöttek kell volt, hogy kell használni, hogy web-- minden oldalon hozzáfért az alapértelmezett betűkészletek különböző serifs, és mindezt font cucc nem fogunk bejutni, de ezek általában kérhető a CSS, akkor is, ha nem különben határozza meg a betűtípusok. Végül, lehet igazítani a szöveget, ahelyett hogy alapértelmezés szerint rendezi balra, akkor igazítsa a jobb, vagy ha lehet középre igazítva, vagy indokolt annak érdekében, hogy elérje a két árrés. Szóval ezek mind lehetőség segítségével megváltoztatni, amit a szöveg néz ki, és hogyan is jelenik meg az oldalon. 

Az Ön szelektor nem kell címkék csak. Korábban láttam egy body tag választó, és Címkeválasztó nem úgy néznek ki, mint ezt. Az Ön neve egy címkét, és akkor határozza meg a stíluslapot, hogy a tag. De akkor is csinálni valamit nevezzük ID szelektor. Egy ID szelektor néz ki, szép hasonló. De észre, hogy most nem használom egy HTML tag, én vagyok a, ebben az esetben, #unique, vagy hash egyedülálló. Ha felidézzük a mi video HTML, beszélgettünk hogyan címkék lehetnek tulajdonságaik. 

És egy attribútum, amely érvényes hogy elég sok minden HTML, de mi nem beszélünk róla, van egy úgynevezett azonosító címke. Tehát ez különösen CSS lenne csak a HTML tag, amely Egy nagyon speciális azonosító, hogy már elemzi. Tehát ha van valahol a kódban, valahol a HTML fájlt, egy tag és Adjon meg egy attribútumot, hogy a tag, ID megegyezik egyedi, ez Különösen stíluslap Itt csak akkor alkalmazzák között hogy a tag az ID egyedi. 

Azt is tenni valamit úgynevezett osztályszelektor. Tehát mellett, amelynek ID attribútumok, akkor is adjunk hozzá egy class attribútumot HTML. És ha használja a class attribútum, ez lehet alkalmazni, hogy a többszörös címkéket. Tehát ha van néhány dolog, hasonlóak, talán azt akarod mondani, nyitott tag bla, bla, bla, bla, osztály megegyezik a diákok. És akkor az adott stíluslap kellene alkalmazni minden tag, akinek osztály diákok. Ebben az esetben, mi volna meg a háttérszínt sárga, és mi volna állítani homály, amely egy tag nem beszéltünk arról, de csak foglalkozik, hogy mennyire átlátszó valami, 70% -os, a jelen esetben. 

Van két lehetőség írásban stíluslapok. Írhatsz őket Közvetlenül a HTML azáltal, hogy a stíluslapok között szerű tag. És azok szerű tag bemenni a a fej címkék közé a weboldal. A talán előnyösebb módja ez, hogy írjon egy külön .css, majd ezt linkelni be a dokumentumot linket tag. Link címkék, ismét van eltér hivatkozások, ha visszahívja a videónkat HTML. És Link címkék hogyan húzza külön fájlokban. Ez a fajta, mint az egyenértékű Az #include webes programozási. 

Szóval vessünk egy pillantást table.HTML. Ha felidézzük a mi HTML videó, megmutattam egy példa a nagyon egyszerű szorzás táblázatot, hogy nézett ki elég csúnya, és talán van oly módon, hogy jobbá tegyük az CSS, hogy ez valóban meg Több mint egy szorzás asztal, vagy valami hogy nem csak összeragadt nincs tényleges felosztás között a sorok és az oszlopok. Tehát legyen a feje fölött, hogy CS50 IDE, és vess egy pillantást hogy milyen CSS, egyfajta, csípés ahonnan indultunk előtt, és ez valami sokkal jobb. 

Így vagyunk CS50 IDE Most, ha ismeretlen, akkor húzza fel ezen a táblázatot, hogy a HTML oldalon. Table.HTML alapvetően Csak határozza meg a tartalmát Egy multiple-- azt hittem, hogy egy négyszer négy szorzótábla. Ez elég egyértelmű. És azt gondolom, hogy ez lenne Csinos jól szervezett. De valójában, amikor előnézeti ez az oldal, azt látjuk, hogy ez a fajta csúnya, nem igaz? Egyértelműen van sorok és oszlopok itt. Van valami szétválasztása. De ez nem egy értelmes szétválasztása. Nem vagyunk valójában egyre Túl sok információ itt. És nincs szétválasztását A sorok és oszlopok tekintetében A vízszintes vagy függőleges szabályokat. Mi valószínűleg képes ezt meg egy kicsit jobban. Úgyhogy próbáljuk. Így fogok zárni ezt lapon fel ide. És fogok becsukom a table.HTML, és van egy másik verzió itt nevű table2.HTML. Majd nyissa hogy akár. A szervezetben az oldal van nagyjából ugyanaz, de én változott kicsit a tetején. És én lépjünk fel ide. Figyeljük meg, hogy ebben az időben, én vagyok A beágyazott tag-eket. Már nyitotta stílust tag, és én vagyok most meghatározó CSS ​​stíluslap csak belül belőle. Nekem van egy stíluslap, amely azt mondja, asztal. Ez az én Címkeválasztó. Nem használok pont vagy hash, amit tenne, ha volt a személyi igazolvány vagy egy osztály választó. Van egy Címkeválasztó here-- asztalra. Ez a stílus fog alkalmazni minden asztalra tag. Úgy látszik, azt akarom, hogy egy pixel széles, tömör kék határokon, belsejében az én asztalom. Ez úgy hangzik, mintha ez valószínűleg A helyzet megoldására, ugye? Fogunk van a dolgok sokkal jobban néz ki. Szóval ez rendben van. Stílusában, Épp most beágyazott én XSLT itt. Ez minden bizonnyal egy elfogadható módon kell csinálni. Lássuk, mi ez néz ki. Úgyhogy megyek ide vissza, és Majd lesz előnézeti én table2.HTML. Nos, ez nem egészen így akartam, de ez pontosan mit kértünk. Azt mondtuk, hogy ez a stílus fog alkalmazni az asztalunkhoz. A táblázat most már van egy pixel széles, kék színű határ körül. Nem vagyunk valójában egyre Az asztalnál sejteket. Mi csak most az asztalnál. Tehát CSS dolgozott. Az általa alkalmazott egy stíluslap az asztalunkhoz. De nem elég csinálni amit szerettünk volna csinálni. Hogyan jutunk, hogy nem amit szeretnél csinálni? 

Nos, vessünk egy pillantást egy több változata ennek a table3.HTML. Szóval én csak fog bezárni ezeket a lapokat. Én megyek vissza ide, hogy én fájlszerkezetet, és megnyitja table3.HTML. Ismét úgy fog kinézni, elég Hasonló elején itt. De észre, ebben az időben, ahelyett, hogy a stíluslapot beágyazódnak ott, Megyek összekapcsolni a stíluslap használatával link tag. Úgyhogy nyilván összekötő egy stylesheet nevű tables.CSS, és ez is megegyezik stíluslap csak means-- is, mi ez a fájl képest, amit Én doing-- egy stíluslapot vagyok segítségével az oldalam. Tehát, ha azt szeretné, hogy mi Csinálok a CSS itt, El kell menni a nyílt, hogy table.CSS fájlt is. Szóval megyünk vissza ide vissza a mi fájlszerkezetet. Van table.CSS. Majd pop nyitva. Most látjuk, egy kicsit a CSS-t. Úgy tűnik, van egy pár A dolog folyik itt. Azt nyilván szeretnénk, hogy egy öt pixel széles, tömör piros szegéllyel, körül az én asztalom. Azt már tudjuk, hogy ez fog hogy csak menjen a kerület. Láttuk, hogy a table2.HTML. Minden sorral I nyilván szeretné határozni hogy a sor magassága 50 pixel magas. Tehát minden sorban, ne feledje, ez az, amit a tr tag igen, Én így 50 pixel magas. 

Végül, én ezt a megjegyzést. És ez hogyan tegyék meg észrevételeiket a CSS-t. Ez nagyon hasonlít, hogy megragadják blokk kommentek szintaxis perjel csillag. Minden a kívánt szöveget. Nincs perjel perjel bár CSS. Rövid inline kommentek, van hogy ezt a bizonyos formátumban itt. Úgy néz ki, csinálok egy csomó dolog az én td címkék. Emlékezz td címkék vagy asztalra adatokat, amelyek valóban csak Az oszlopok belsejében sorainkban, és látszólag minden egyes adatot az én asztal, azt akarom, hogy a háttér színét, hogy fekete, a szín a fehér, szín előtér színét. Tehát ez lesz A szöveg oldalam. Azt akarom, nagy font, 22 pont font, és azt akarom, hogy legyen a betűtípus család, Georgia. Szóval nem fogok az alapértelmezett betűtípust. Megyek adja Grúzia, amely egyike azoknak a web biztonságos betűtípusok hogy már látott. Azt akarom, hogy a szöveget összhangba kell hozni központilag, a közepén a doboz, Nem akarom, hogy maradjon vonalban vagy jobbra igazítva. És szeretném, ha a oszlop szélessége hogy 50 pixel széles is. Vessünk egy pillantást mi ez úgy néz ki, mint, és nézd meg, ez talán javulás. Így fogok menni table3.HTML, amely Emlékezzünk, magában table.CSS mint egy linket, és mi az megtekinthető. Ez sokkal jobb, igaz? Ez valójában kezdi meg a sokkal több, mint egy szorzótábla. Van, hogy a piros szegéllyel körül a táblát, de most Azt is meghatározták, hogy minden sor 50 pixel széles, vagy ez 50 pixel tall-- mentség me-- minden oszlop 50 pixel széles. Az adatokat az egyes oszlopok, és csak Az adatok, van egy fekete háttér. Szóval ezért ezeket fehér vonalak vannak. Mivel a tér között minden, e sejtek, ez nem egy határ és önmagában, ez csak Én csak kitölti a sejtek, amelyek ténylegesen teszi a határok az asztalra, ami nyilván létezett végig, hogy csak vékony fehér vonalak. Most ők láthatók. Most már elsül a képernyőn. És így ez egy nagyon egyszerű stíluslap, hogy én már alkalmazott, és most én asztalomnál néz ki sokkal több, mint egy négyszer négy szorzótábla, helyett csak zagyva rendetlenség, ahol mindent egyértelműen sorok és oszlopok, de nem szuper jól szervezett. Mi tényleg csak a felszínt mit lehet csinálni a CSS itt. Szerencsére a CSS dokumentáció elég egyértelmű. Majd használja annak több tulajdonítja, elég gyakran. Az is beszéltünk korábban ez a videó. Számos hogy valószínűleg nem fogja használni az összes. És ez rendben is. De csak azt tudom, hogy van egy Sok dokumentáció odakint. Így még ha mi nem terjed ki mindenre, te biztosan nem hagyja egyedül. De a CSS igazán szórakoztató kísérletezni. És azt javasoljuk, a játék körül a weboldalakat, és látom, hogy tudod, hogy azok megjelenését segíti a felhasználót tapasztalatok látogató az oldalon. Én Doug Lloyd. Ez CS50.