[Musika jotzen] ALLISON BUCHHOLTZ-AU: Beraz ari gara, funtsean, besterik joan zuk rundown bat emateko CSS, ezagutzen dugulako ez zela estalita atal guztietan. Eta benetan ziur egin nahi dugu guys dute tresna hau zure eskura, gaitasuna egin duelako zure webgune askoz prettier begiratu. 

Eta webgune batek eraikitzen ari bada, orduan seguruenik nahiko egin nahi duzun. Esan nahi dut, ez duzu behar, baina litzaidake proposatzen dut. [Barreak] Erabiltzaile erabili nahi badituzu, baliteke apur bat [INAUDIBLE] egin nahi. Beraz, saiatu eta soilik eman joan oinarrizko tresna batzuk eta ulermena, eta, beraz, noiz joan duzun eta zauden CSS buruz gauza ikertzen, ez da huskeriak osatzeko, CSS bezalako batzuetan izan. 

TOMAS Reimers: Bai. Allison nahiko ondo esan. Beraz, lehenengo gauza dugu asmatzen dut da, zer CSS hasi behar dute? Beraz CSS awesome. CSS 

ALLISON BUCHHOLTZ-AU: Hori da Gure mintegi baten izena. 

TOMAS Reimers: Bai. Benetan garrantzitsua da hori hori ulertzea, ondoren, arabera. Zuk bakarrik kentzen baduzu, inork Gauza, awesome bada CSS hori da. Bi da CSS standak Cascading Style Sheets. Beraz bere core, CSS estilo-orri bat, zentzua Web orri bat estilo aukera ematen du. Eta gero, zer esan nahi duen, da a style gehitzeko modu zure webgune. Beraz style arabera, dena esan nahi dugu hori ez structural-- beraz, kolore bezala gauzak, hondo irudiak, mugak, bezala, padding, marjinak. Egingo buruz hitz egin dugu zer hori guztia pixka bat esan nahi du. 

Beraz, besterik ez dugu joan aurretik, eta inauguratu horiek ireki gedit, bai. Beraz, hau index.html da. Eta hau main.css da. Beraz main.css ezer ez du. ALLISON BUCHHOLTZ-AU: No style orain arte. TOMAS Reimers: Bat ere ez. Eta ikusiko duzun bezala, da gune benetan itsusiak. ALLISON BUCHHOLTZ-AU: besterik ez arrunta. TOMAS Reimers: Bai. Bai, ez da itsusi, besterik minimalista da. Eta gero, hara index.html behar dugu. Eta, beraz, azkar bat HTML, Allison laburpena, besterik orriaren buruz hitz egin nahi duzu? 

ALLISON BUCHHOLTZ-AU: Bai. Beraz, jakina, gure HTML daukagu Etiketa, besterik izenak HTML fitxategia. Gure goiburua daukagu ​​hemen, CSS-rekin Awesomeness, eta horrek atzera egin baduzu. Non dago hori? 

TOMAS Reimers: Oh. Bai, ikusi ahal izango duzu. ALLISON BUCHHOLTZ-AU: Eta goiburua nabarituko fitxa hau goiburua eskubidea sortu da hemen. Eta gero, "Kaixo, mundua!" da hori besterik ez dugula testua webean erakusteak orria, horrek is-- atzera jo. Atzera. Zein besterik gabe, gure gorputza da testu arrunta hemen. Gainera, gauza bat nabarituko, hemen begiratuz gero, Tomas pizten up horiek bi gure diapositiba batetik. Beraz, betiere guztia duzu horietako hiru, fina zara. Nahi dute edozein ordena, ezin dira izan. Zer da garrantzitsuena da hori soilik hiru gauza horietako bakoitzean behar duzu. 

TOMAS Reimers: Cool. Gehitu doc ​​mota bat? ALLISON BUCHHOLTZ-AU: Bai. TOMAS Reimers: Bai. Cool. ALLISON BUCHHOLTZ-AU: Dirudienez, Nire Mics gustuko ez me. TOMAS Reimers: Oh, ematen diguten sec bat besterik ez Allison aldatzen du berriz bere mic. Beraz, bai. Beraz, gure horria behar dugu. OK mota da. Ez dugu askoz. Aski dugu funtsean testua. Estilo-orri ditugu. Izenburua daukagu. Beraz, bare-boned Osagai web orri bat egiteko. 

Beraz, hortik aurrera, dezagun zer CSS buruz hitz eta zer itxura eta hori guztia da. Beraz aurrerantzean -bere for ALLISON BUCHHOLTZ-AU: Diapositibak bueltatu. TOMAS Reimers: diapositibak bueltatu. Eta Allison hartu baino gehiago. 

ALLISON BUCHHOLTZ-AU: Woo. OK. Zure CSS fitxategian Beraz, izan zaren joan Gauza horiek asko selectors izeneko. Hori izango da besterik izan du Zure CSS fitxategia oinarria. Besterik izango da asko eta horiek asko. Beraz hautatzaileak. Hau anatomia orokorra besterik ez da. To bidez joan goaz adibideak, bada delako inoiz guys duzu nire atalean ikusitako, sentitzen dut abstraktuan bezala gauzak ez benetan zentzurik. Beti adibideetan ikusten laguntzen du. 

Beraz hautatzaileak batzuk ditugu. Hori identifikatzailea batzuk izango estiloa aplikatu nahi duguna dira. Eta gero, edozein izan dezakegu arauak eta balioak ezarri. Beraz, hori ikusi ahal izango duzu Selectors gorputzaren antzeko zerbait izan liteke, edo P paragrafo, edo goiburu, edo dena delakoa, edozein dela ere zure HTML tags izan nahi duzu. 

Beraz, kasu honetan, gorputz behar dugu. Eta arau batzuk ditugu, horrek dagokio zer da zure estiloa aplikatzen da. Beraz, kasu honetan, ez dugu atzeko kolore eta letra-pisua. Beraz, hau aldatu egingo da ezer atzeko edozein gorputz gure HTML fitxategiaren etiketa barruan. Eta hori ematen joan Balio hori argi urdina. 

Beraz, egin joan hondo urdin argia. Eta gero, gorputzaren barruan ezer da letraren bat lodia izan da. Beraz, besterik ez da joan lodia gure testu guztiak. Eta hau hautatzaileak besterik ez da. Baina oso horietako asko izan dezakezu. Eta erakusteko goaz gisa geroago, pixka bat nola sartu gehiago obrak eta adibide gehiago ez dagoela. Ezer gehitu nahi al duzu? 

TOMAS Reimers: N. Allison lortu. Besterik ez gara moztu batekin joan Adibidez hemen gure adibide gunean. Hargatik benetan hartu hau. Perfektua da. Naiz, beraz, kopiatu eta itsatsi joan eskubide hori gure main.css fitxategi batean. Eta ez dut gorde egingo da. Eta, ondoren, exekutatu egingo dugu. Beraz Alboko ohar, bat frustrating gauza gehienak da, ez baduzu fitxategi bat gordetzeko, eta orduan, bezala, berriro orria, eta bezala, zergatik ez da aldaketa gertatzen ari da? Gertatzen da. Beraz, hemen ikusi genuen egin dugula gure Web orri bat hondo urdin argia eta zenbait testu bolded. 

Halaber, aipatu behar dut, baduzu guys ezer buruzko galderak egiten ari gara, jar zaitez Gurekin gelditu eta galdetu guri doan. Erabat prest gaude galdera eremura. 

ALLISON BUCHHOLTZ-AU: Jakina, ekin CSS, dena bera gainean eraikitzen. Beraz, gauza bat ez bada zentzurik orain, dugu ez nahi duten geroago Bog behera. 

TOMAS Reimers: Hargatik nolako disekzionatzen hau. Beraz, hasi nahi duzun hautatzaileak hemen? 

ALLISON BUCHHOLTZ-AU: Bai. Lehenago esan dizudan bezala, gorputz besterik gabe, gure hautatzailea da hemen. Beraz, atzera baino gehiago joan badugu gure index-- ah da. 

TOMAS Reimers: Zein itxita besterik ez dut. Give me bigarren bat. Beraz File, Open, index.html. ALLISON BUCHHOLTZ-AU: Cool. Beraz, hemen nabarituko duzu, dugu gorputz etiketa hauek izan, ezta? Beraz hautatzaileak besterik dagokio etiketa hori buruz hitz egiten ari gara. Beraz gorputza hemen. Beraz, zer esaten ari gara, everything-- daiteke atzera egin dugu? Nahi dut, izan dut bezalako ukitu pantaila. Hainbeste freskoago genuke izango. 

Beraz, ezer horiek barruan body etiketarik, ikusi dugun besterik, bezala, testua zen, eta, oro har, gorputzaren , bezala, atzealdean aipatzen. Al duzu inoiz nahi bada atzeko aldatzeko, hori gorputzaren etiketa bat izango da. Just arau horiek aplikatu ditu. 

Beraz, joan ginen index.html and-- benetan, daiteke zerbait egin behar dugu gorputzaren kanpoaldean? Bagenu, bezala, oin bat edo zerbait, ez litzateke hau aplikatuko. Baina barruan ezer gorputza tags va eragin erakunde horrek hautatzaileak hori egin dugu. Beraz idatzi bazenitu beste zerbait han 

TOMAS Reimers: dezagun disko etxean. Beraz, bada div-- bat izan genuen, beraz, hori besterik gabe, beste etiketa izan dezakezu. Ixteko noa. Edo egin dezagun hau paragrafo baten. Beraz p paragrafoan nabarmentzen. Eta paragrafo horren barruan. Eta gero, esan dut, "hau da, testu". Cool. Eta gero Arau horrek egin nuen ordez gorputzaren paragrafo bat. Ikusiko duzu nola bakarrik aplikatzen da berriki osatutako paragrafoan, eskuinera, Ez gauza osoa. Ez duela zentzurik? 

ALLISON BUCHHOLTZ-AU: Beraz, hau gorputz guztia, baina orain, gure hautatzaileak besterik paragrafoa dagokio. Beraz, besterik ez dugu ausarta eta urdina Atal espezifiko horretarako, hau gauza bakarra delako hori p etiketa barruan artean. 

TOMAS Reimers: ordenatzeko Ez duela zentzurik ren gauzak nola enkapsulatu beste gauza batzuk? ALLISON BUCHHOLTZ-AU: Era berean, besterik , esan bezala, eta modu onenetako bat benetan CSS eroso besterik ez da egin behar hau bezalako gauzak, Saiatu it out. Oso erraza da zerbait idatzi out, hit freskatu, eta ikusi zer gertatzen den. Eta CS gehienak bezala, esperimentazioa ahal sarritan a askoz hobea ekar intuitiboa ulertzeko. Are gehiago, besterik gabe, gurekin baino, bezala, hitz egiten. 

TOMAS Reimers: Absolutely % 100 puntu horretan adosteko. Beraz, hau itzuli badugu, has gaitezen dissecting zehazki zer bi horiek egin. Beraz honetako bi arau behar dugu. Beraz, lehen bat atzeko kolorea da. Eta hori ezarri dugu ikusten duzun balio bat, urdin argia berdina. 

Beraz CSS ere, CSS moduko oso nola buruz solteak kolorea lehenetsia adierazten bazaizu onartzen. Beraz, horiek defini dezakezu izenaren arabera. Ere zerbait egin dezakezu bezala "gorria". Eta atzera egin ondoren, hau dugu, ikusiko duzu atzealde hori gorria da. Ere lor daiteke really-- duzu uste dut polit hau sormen dezakezu, ezin dituzu? 

ALLISON BUCHHOLTZ-AU: I Uste hex erabil dezakezu. Ezin duzu? 

TOMAS Reimers: Bai. Beraz hex erabil dezakezu. Baina pentsatzen dut izen-jakintsua. Oraindik ez al dago? ALLISON BUCHHOLTZ-AU: Batzuk nahiko egin dezakezu. Nahiko askoz kolore gehienak bezala duzula bezalako izen dezake, uste dut izokina bat da. 

TOMAS Reimers: botako saiatu izokina gaude. ALLISON BUCHHOLTZ-AU: I Uste chartreuse ez da. TOMAS Reimers: Bai. Ikusi? Beraz, nahiko sormen dezakezu. 

ALLISON BUCHHOLTZ-AU: You nahiko sormen lor ditzaketen. Atsegin dut, duzun pentsatzeko kolore-izena, seguruenik han. Benetan duzu fina nahi bada Xehetasun, hex joan zaitezke. 

TOMAS Reimers: Bai. Beraz hamaseitarrean. Gogoratzen duzu guys gero itzuli honetan zure pset zaharretik, irudia berreskuratu, you guys aurre izan hex balio hauekin. Eta nolako zer dela laburpena, hex bertan gordetako hiru balio ditu. Beraz, bi zatituko taldeetan da. Lehenengo biak ordezkatzen balio gorria. Bigarrena adierazten berdea balioa. Eta azkena da urdina? 

Beraz FF gertatzen den adierazten hamaseitarra 255. Beraz 255 gorria, 255 behar duzu berdea, eta 0 urdina. Eta balioak 0 eta 255 bitartekoak dira. 

Ikusleak: Eskuin. Beraz, funtsean, bilatu genezake Edozein kolore nahi dugu Interneten, eta identifikatzeko benetan ezagunak kolore-espektro konbinazio, eta orduan jarri ahal izan dugu? ALLISON BUCHHOLTZ-AU: Zehazki. Beraz kontrol osoa nahiko askoz duzu koloreen gainean CSS barruan nahi duzun. Ari buruz hitz egingo dugu atzeko irudiak geroago? Edo ez da hori egin nahi dugu? 

TOMAS Reimers: Bai. Absolutely. Beraz, lehenengo, besterik ez dela erakutsi gorria eta berdea horia da. Eta batzuk behar duzu hau aurkitzeko laguntzeko, zuk can Google zerbait bezala "kolore-hautatzailea". ALLISON BUCHHOLTZ-AU: Oh, ez da hain ona. Maite Color Picker. 

TOMAS Reimers: colorpicker.com adibide ona da. Eta hemen, ikusiko duzu behar duzula Full Photoshop-antzeko kolore-hautatzailea. 

ALLISON BUCHHOLTZ-AU: mm-HM. Era berean, cool gauza zara kolore eskemak sortzen ahal ez duzula behar eta beraz, bezala, kolore kirrinka. TOMAS Reimers: Eta gero hemen hex balio hemen. Beraz, beti Interneten ere aurki dezakezu, funtsean lekuetatik hex balioa lortzeko. Ez da hori besterik ordenatzeko, bezala, dugu munduaren koloreak ikusiko zenbakietan. It gehiago online joan garela eta begiratu zer kolore nahi dugu, eta ondoren kopurua behera hartzeko. Besterik gabe, benetan erraza bat delako Gauza erreferentzia egiteko modu CS ere. 

ALLISON BUCHHOLTZ-AU: Eta orduan, also-- Gunearen izen zehatza ahaztu dut. Baina ez da behin betiko, I uste, Adobe zerbait duten kolore eskemak sortzen zuretzat, hau da, benetan cool, duzulako definitely-- batzuetan, gogorra irudikatu, oh, kolore hau erabili nahi dut, bada, zer inork erabilgarria beste izan liteke beste nonbait erabiltzeko nire gunean izateko, bezala, polita da eta kohesionatua. 

TOMAS Reimers: Allison-en buruz hitz egiten Adobe banan Kuler deitu, uste dut. Da K-U-L-E-R. ALLISON BUCHHOLTZ-AU: Baietz uste dut. Nahiko ziur dena naiz. 

TOMAS Reimers: Nire gogoko ditu Beti izan kolore eskema diseinatzailea. 

ALLISON BUCHHOLTZ-AU: Ooh. 

TOMAS Reimers: Zein da gaur egun 

ALLISON BUCHHOLTZ-AU: Ah, hori ederra da. 

TOMAS Reimers: Eta zuk funtsean, esan daiteke, bezala, Hiru kolore nahi dut, bata bestearen ondoan. Eta gero, egin dezagun zerbait polita utzi. Eta gero, adibide bat lortu ahal izango duzu zer esan liteke itxura. Eta gero, gainetik pasatzean edozein bada horiek, hex balioa ematen dio. 

Beraz, modu erraz bat bezala hasten kolore eskemak pentsatzen edo zer kolore webgune batean ondo joan liteke elkarrekin. Hori delako harrigarriro izan daiteke uste duzun bezala hautatzeko, ez baita erraza. Eta gero, beste gauza cool Nik beti gune honi buruz aurkitutako da hit duzu Adibideak bada, egingo erakutsi zer webgune bat adibidez baliteke beste kolore eskema hori erabiliz itxura. Dena den. 

CSS-aren benetako bueltatu. ALLISON BUCHHOLTZ-AU: Baina, jakina, dugu ezagutzen erreferentzia horiek erabilgarri izan daiteke. TOMAS Reimers: Ez, betiko lagungarria izan daiteke. Beraz, bigarren araua, Allison? 

ALLISON BUCHHOLTZ-AU: Bai. Bigarren araua besterik ez da gure letra dagokion. Beraz letraren besterik ez mota gertatuko zen pisua litzateke izan besterik nahi baduzu, bezala, normal edo, bezala, tipoak meheagoa, edo kasu honetan, bezala, lodia. Ahaztu dut. Zein da zuk nahi izanez gero, ez da hobeto esanda baino, bezala, normal meheagoa izan dadin? TOMAS Reimers: ez dut benetan ezagutzen ez meheagoa bat bada. ALLISON BUCHHOLTZ-AU: I ahaztu. Beraz letraren normalean dugu besterik lodia erabili. Benetan lortzeko sartu nahi baduzu da, ari gara erakusteko joan. W3Schools desberdina guztiak ditu Gauza letra duzu egin dezake. Baina, batez ere, inoiz nahi baduzu font buruz ezer aldatu behar, beti izango da, bezala, letra-zerbait. Beraz, letra-familia atsegin egingo da bazaude Benetako mota aldatzeko nahian. Font-style baduzu izango da izan dadin, etzana bezala nahi, edo etzana edo whatnot. Edo are font-color, bada hori aldatu nahi izan dugu. 

TOMAS Reimers: Yup. Beraz, hori alda daiteke. Eta nolako besterik ez laburpena orain, dezakezu orain ikusi hautatzaileak dugula hemen. Kizkur giltza hauek ditugu. Eta gero, arau daukagu puntu eta komak mugatzen du. Ez duela zentzurik? Bai? Cool. Beraz, hori da good-- bada 

ALLISON BUCHHOLTZ-AU: Back. TOMAS Reimers: Hitz egin dezagun zehazki zer nolako hautatzaileen buruz daukagun. 'Oraintxe dugu Causa Ordena besterik erakutsi etiketak. Baina zuk guys da sinesgarri ikus zezakeen. Esan bi paragrafo duzu orri bat eta zuk style gai izan nahi Bat baina ez bestea, ez besterik yourself mugatu nahi Benetako HTML ezberdinak erabili dute etiketa horiek estilo ezberdinak emateko. 

Beraz, hiru oinarrizko daukagu Selectors mota. ALLISON BUCHHOLTZ-AU: Bai. Beraz, etiketa behar dugu, hau da, zer dugu buruz oraintxe hizketan. Beraz, hori da mota zure gorputza edo p bezala. Eta gero klasea izan dugu, hau da, denean definitzen dugu gure CSS fitxategia ere, beti dot egingo da, edozein dela ere Zure taldearen izena, izan nahi duzun. Eta hori gauza bat baino gehiago egon daitezke. 

Esan bost paragrafo duzu eta horietako hiru bi bera styled behar dira, Klase bat aplikatuko litzateke, zeuk erabaki. Eta hori besterik bidea egiten dugun da. Ematen dizugu adibide bat non hau benetan erakusten du. Baina izan duzun etiketa batzuk agian bada p, ondoren, idatzi nahi duzun, class edozein dela klase berdinen bertan aplikatu nahi duzun. Nahi dugu, beraz, edozein klase Selectors parrafo partida hau aplikatzeko, Besterik ezin dugu hau atsegin idatzi. Noski, adibide bat dela uste dut hormigoizko askoz gehiago egingo. 

Beste bat daukagun id da, hau adierazteko dugu hash bat, edo libera, edo hashtag batera. TOMAS Reimers: Octothorpe. ALLISON BUCHHOLTZ-AU: Octothorpe. Lan egiten duen, gehiegi. Eta hau benetan berezia izan behar du. Besterik dute aplikatu beharko zure orrian, gauza bat. Beraz, paragrafo zehatz bat ala, edo zerrenda bateko elementu batzuk, edo dena delakoa, hau berezia izan behar du. Eta modu berean besterik ez dugu Esan, bezala, class = "class1 class2" hau besterik ezin dena delakoa daukagun id izan. TOMAS Reimers: Bai. Hargatik betiko hitz-ren Adibide hemen buruz. Eta besterik ez dut murgiltze joan zuzen kodea sartu. Hargatik begiratu gure HTML at. Eta, beraz, oraintxe paragrafo bat dugu. Honek testua. Besterik ez naiz aldatzeko joan da. "Hau testu 1. dago" Eta gero ari gara joan dute bat "Hau testu 2. dago" 

ALLISON BUCHHOLTZ-AU: bigarren bat. TOMAS Reimers: Yup. Beraz, gaur egun dugun "Hau da, testu 2," ezta? Eta ari gara dugun freskatuz gero ikusteko joan orria, zer ari gara aurkitzeko joan da botako Oraindik dugu find-- ALLISON BUCHHOLTZ-AU: Ooh. TOMAS Reimers: Bai. A "Hau da aurkitu goaz Testu 1, "eta" Hau testu 2. dago " 

ALLISON BUCHHOLTZ-AU: Eta out kolore horia eder. 

TOMAS Reimers: Eta ikusiko duzu Oraintxe dela gure hautatzaileak, bertan p en aplikatzen da, edo paragrafo, eragiten, biak, biak betetzen delako Baldintza biak p etiketa bat Oraindik dutela. Zentzu guztira egiten du. Beraz, galdera da, bai, zer nahi izanez gero, besterik ez genuen lortu? Beraz, zehazki bezalakoa Allison zela esanez, hori egin beste bi modu ditugu. To id batekin hasiko naiz. 

ALLISON BUCHHOLTZ-AU: Hasteko id Dezagun. 

TOMAS Reimers: Eta biak horien atributuak dira. Beraz atributu HTML existitzen. Eta zer dira da gehitu duzula zerbait Etiketa zein barrutik marka urrun. Beraz Hainbat atributu izan dezakezu. Bai? 

ALLISON BUCHHOLTZ-AU: nintzen, joan erraitea, zure Adibidez batetik pset 7, zuk edozein saiatu izanez lerrokatu zentrora gauzak, zuk erabili izan liteke "Testu ALIGN =". Eta seguruenik nabaritu duzu zentratua izan beharko Zure testu edo zure nabigazio-barran. Beraz, besterik gabe, gainera, atributu bat ezagutzen izatea. TOMAS Reimers: Badira sorta bat da of egozten duten ikusiko duzu. Bai. 7 pset erreferentzia onak bezala. Id daukagu. Ere ahal duzu klasea, hau bezalako gauzak. Etiketa bakar batek atributu ugari izan ditzake. Beraz id hasita, dezagun asmoa dugu Nahi id bat gertatuko ez dakit izatea. Egingo da berezia deitu dugu inork horregatik, ez gara lodia egiteko, eta azpimarratu, eta edozein dela ere. ALLISON BUCHHOLTZ-AU: Da gonna be super bereziak. TOMAS Reimers: Beraz, hau Bat, id berezia dugu. Bide Beraz, hautatzeko, ondoren, da main.css ere, p etiketa bat behar baino, #special egin duzu, OK? Eta hori hautatzen id bereziak dituzten gauza. Ez du hori egiteko zentzu guztiontzat? IKUSLEEN: Bai. TOMAS Reimers: Cool. Beraz, orain, atzera egin dugu bada, ikusiko dugu whoops. Bai. Ikusiko dugu hori hautatzen soilik id berezia duena. Bai? Soinuak cool. Bai. 

IKUSLEEN: zerbait badutela bai klase eta id baten egozten? 

TOMAS Reimers: Bai. Ikusleak: OK. Eta gero, zer gertatzen da, ondoren ematen bada it CSS gatazka duten arau batzuk? TOMAS Reimers: Absolutely. Betiko goaz horri buruz hitz egin. Beraz, zehazki zer lortzean ari zaren at, ere izan dezakezu klaseak. Hargatik asmoa nuen hiru paragrafo eta biok Lehenengo style nahi bi, baina ez hirugarrena. Beno, zure lehenengo ideia, ondo egon daiteke, I Besterik ezin eman bigarren bat id bat. Baina ezin duzu, id bat delako, zehazki bezalako Allison zela esanez, bakarra izan du. 

Beraz ordez id bat, zer duzu erabili ahal izango da klase bat erabili ahal izango duzu. Eta klase bat zer den ahalbidetzen egin behar duzun da, funtsean, esan, hau talde baten zati gisa dagokio. Kasu honetan, gure taldearen dago Berezia izeneko. Eta zer ari gara, ondoren egin behar da to baizik libra baino esaten dugu, dot erabiltzeko goaz. OK? Eta konturatu kiloko eta dot dituen fitxategi barruan existitzen, HTML barruan. ALLISON BUCHHOLTZ-AU: Bai. Bereizketa garrantzitsua. 

TOMAS Reimers: daukat Hainbeste borroka izan zuen, hash jarri dut HTML delako eta orduan besterik sentitu ergelak denbora luzez. Ikusi nola biak aukeratuko du klase hori dituztenak? Cool. 

Orain, gauza bat baino gehiago klaseak izan dezake. Demagun lehenengoa egin nahi nuen bi horien hondo baten eta bigarrena bi izan letra-urdinaren kolorea. OK. Egia esan, ez dakit zergatik I litzaidake hori egin nahi, baina I can. 

ALLISON BUCHHOLTZ-AU: Agian ez gomendagarria da zure web. Baina gure helburuetarako, egin egingo. 

TOMAS Reimers: ez da Kolore-eskema ona. ALLISON BUCHHOLTZ-AU: Beno, horia eta urdina nire batxilergoko koloreak dira. Ez dakit, baina. TOMAS Reimers: Allison-en altua eskolako kolore eskema handia izan zuen. [Barreak] Orduan, zer deitu ahal izango dugu hau da Dezagun deitzen hau bereziak beraz daukagu eta Pretty behar dugu. I, azaldu dutenez, erabili duzu askoz ere izen deskriptibo. ALLISON BUCHHOLTZ-AU: Bai, nuke dei hau, bezala horia edo urdina. 

TOMAS Reimers: Ez gaude benetako web bat benetan egiten, eta horregatik ez gara hori egiten. Baina benetan baduzu benetako web gunea, zuk izan dezake, bezala, artikulu goiburua, Artikulu edukia, lehen hitza, horrelako gauzak, eta horrek aukera ematen askoz gehiago deskriptiboa izan behar duzu. Hauek dira benetan besterik aldagai bezala. Dute modu bat, non egon beharko izendatu , egin dezakezu, atsegin bai, esaterako. Perfect. 

Beraz atzeko kolorea. Eta gero ari gara, beraz, esaten joan modu kolorea aldatzeko besterik "kolorea" da. Eta ari gara egiten urdina egiteko. Hori da cool. Beraz, gaur egun dugun Lehen bi izan berezia. Hurrengo norberaren joan dute "class = polita". ALLISON BUCHHOLTZ-AU: Eta gero dituzu "nahiko" gehitzeko erdikoa nahi. TOMAS Reimers: Yup. Eta gero, erdialdera, gehitzeko "nahiko", zer gertatzen espazio bat besterik ez duzu. Beraz class atributua zuriunez bereizitako zerrenda bat da Klase guztien Etiketa hori aplikatuko. OK? Ez da bat hori daukan bezalako izeneko klase bereziren bat "Berezia, espazioa, nahiko". Dagokio bi classes-- da berezia eta polita da. Bai? Cool. 

Eta gero, begiratuz gero at zer gertatzen den, ez gara lehena duela ikusteko joan hondo horia, testu beltza. Bigarren one-- 

ALLISON BUCHHOLTZ-AU: --has lodia Testu urdina hondo horia. Eta gure azken bat besterik ez du egin Testu urdin hori esleitzen den ere. 

TOMAS Reimers: Cool? Nola Selectors lan? Awesome. 

ALLISON BUCHHOLTZ-AU: zer egin nahi dugu gatazkari buruz hitz egiteko, gaur egun, gero? 

TOMAS Reimers: Beraz, bai. Absolutely. Beraz, zer duzu bada gertatzen gatazka bat izan, ezta? Dezagun asmoa lehena Zerbait ditu abian, atsegin ALLISON BUCHHOLTZ-AU: Beharbada Alde hori aldatzen atzealde? TOMAS Reimers: Bai. Beraz, egin egingo "nahiko" izokina atzealdean aldatu. ALLISON BUCHHOLTZ-AU: Oraindik besterik duzu koloreak handia gaur, Tomas. TOMAS Reimers: Bai. Aurkitu dut delako I can izokina erabili benetako kolore gisa. Beraz, soilik ari gara hori egin behar. Uste dut, gainera Sunset benetako kolore bat da. Ikusleak: Sunset benetako kolore bat da? ALLISON BUCHHOLTZ-AU: Dezagun saiatu. TOMAS Reimers: demo honen ondoren badaezpada gora messes delako, Ez dut nahi izango arazketa da. Beraz, badakigu izokina benetako kolore bat da. Beraz, asmatzen duen zer gertatuko da? 

ALLISON BUCHHOLTZ-AU: edozein ideia? 

IKUSLEEN: [INAUDIBLE]. 

TOMAS Reimers: Bai. Beraz, lortu zehazki eskubidea da duzu. Funtsean, hartzen du Azken arau hori eman zitzaion. 

ALLISON BUCHHOLTZ-AU: Beraz, hau da non Kaskadako eragina sartu da. 

TOMAS Reimers: Beraz, gogoratu nola egiten dugu Kaskadako estilo-orriak zuela? Beraz, arabera, mota esan nahi dugu arau-sorta bat dugula bata bestearen gainean aplikatuko zaie, eta halaber zuten elkar gainidatz dezake. 

ALLISON BUCHHOLTZ-AU: Beraz edozein dela ren behealdean edozein dela ere goialdean da jaramonik egingo. Arau hori guztiz izan duzu negate zerbait aldez aurretik. Hori da, gainera, zergatik izan nahi duzu ibili bazara Sorozabal, beraz, ez arauak sortzen ari dela Zu besterik erabat gainidazteko duzu. 

TOMAS Reimers: Edo agian nahi arau gainidazteko. 

ALLISON BUCHHOLTZ-AU: Edo agian egin nahi duzu. Bai. 

TOMAS Reimers: Itxura bat duzu Klase horrek gauzak gehien aplikatzen, baina demagun aldatu nahi duzu atzeko kolore gorri eta letra gehienetan lodia pisua Gauzak, baina, batez, bakarra atzeko kolorea nahi duzun gorria dela, baina beste guztiek nahi duzu propietate, zerbait egin izan bezalako "font-weight = normal" zein ondoren desegin litzateke aldaketa lodia dagoela. Bai? Berriz ere, modurik onena, uste dut Allison esan, besterik landu da. 

ALLISON BUCHHOLTZ-AU Esperimentazio. 

TOMAS Reimers: Praktika, praktikan, praktika, eta esperimentua. Uste jende asko ezagutzen dut CSS besterik etxebizitza-eta-check asko da Egunaren amaieran, non bada zerbait bezala egin nahi duzula, gorabeherako ideia bat behar duzu, baina oraindik seguruenik behar duzun probatzeko ziurtatu egin Badakizu zer itxura. 

IKUSLEEN: aplikatuz ari zaren Bat baino gehiago paragrafo berean baino edo atal, egiten du axola zer jaso ahal izango dituzu idatzi komatxo sartu? 

TOMAS Reimers: Ez, ez guztietan. 

ALLISON BUCHHOLTZ-AU: Zer axola Zure CSS estilo orria barruan ordena. IKUSLEEN: Ezin izan da galdera errepikatu duzu? TOMAS Reimers: Oh. ALLISON BUCHHOLTZ-AU: epean klasea, emanez Oraindik klaseak HTML zerbait da, ez du horrek ordena Oraindik dute axola du? Ez du ordena axola. Zer axola hurrenkera Zure CSS barruan class Selectors, Zure estilo orri barruan. 

TOMAS Reimers: Sound ona? 

ALLISON BUCHHOLTZ-AU: Lovely. 

TOMAS Reimers: Eta gero zaie jarraitzeko goaz ALLISON BUCHHOLTZ-AU: Zer hurrengo dugu? Ahaztu dut. Oh, besterik ez dugu adibide. Baina nolako egin ditugun. Egin dugu adibide unean. 

TOMAS Reimers: iritsi gara Selectors konbinatu laster. 

ALLISON BUCHHOLTZ-AU: Oh, Selectors konbinatu lortuko dugu. TOMAS Reimers: Beraz batzuk adibide da daukagun # Dog-- libera, edo hashtag, edo octothorpe, edo dena zorrotz aurrerantzean -bere deitu nahi duzun. 

ALLISON BUCHHOLTZ-AU: Sharp txakurra. 

TOMAS Reimers: .pets Ondoren duzu. Zerbait txakur id bat du, zakur bat bakarrik orriko da. Zerbait ID bat katu, ez dago katu bakarra da. Orriko maskotak ugari gerta daitezke. Horregatik eman klaseak dugula. P adibide bat daukazu. Eta gero, bat eta beraz, Azken adibide, eta horrek zerbait ez dugu buruz hitz egin da, da, zer gertatzen denean horiek konbinatzen. Beraz p.pets. 

Beraz, horretarako, goazen atzera joan kodea eta aurkeztu beste bat bai. Beraz, hemen atzera. 

ALLISON BUCHHOLTZ-AU: I sentitzen da hau really-- bezalako bezalako adibide bidez bila benetan modu honetan ikasteko. Beraz, zer egiten ari gara. 

TOMAS Reimers: Hargatik asmoa dugu bakarrik testua 2, eskuineko hautatu nahi? Beraz, behin betiko ezin dugu hori egin id batekin. Beno, hori batekin egin izan dugu id, baina ez id bat izan. Gehitu bat izan dut, baina dezagun asmoa baina ez dut nahi inork gehitzeko edo dagoeneko beste zerbait du. Ezin dut egin duten horrekin. Etiketa ez da behin betiko berezia da, ezta? Eta ez klasekoa da. Baina gauza horiek konbinatu ahal izango duzu. Demagun zerbait egin nahi dugu horrek bakarrik gauza aplikatzen bertan klase berezi dute eta bertan klasea nahiko dute. 

Beraz, zer egin dezakezu main.css dago, esan dezakezu, utzi ezabatu lehen hau. Horiek konbinatu ahal izango duzu. Beraz .special egin dezakezu. Ez da lekurik. Just .special.pretty. Zer esan nahi duen zerbait hau da, bai bereziak eta politak. Ez duela zentzurik? Eta hemen badugu, zer den ikusteko zaren da arau hori bakarrik aplikatzen bigarren bat, ditu horietako bi. Eta hori egin dezakezu gauza asko egiteko. Demagun dezakezu itxurak bakarrik nahi nuen klaseko zein polita izan gauza egin eta zein paragrafo etiketa bat ere badaude. Beraz p.pretty. Dezagun asmoa izan nuen Zerbait etiketa gorputzaren gainean nahiko. OK? Dut hau exekutatu eta ezin dut Ikusten dela bakarrik zein diren gauzei aplikatzen joan klase nahiko paragrafoak. Eta horiek konbinatu ahal izango duzu, Funtsean, askotan bezala, nahi duzun bezala. Beraz, besterik gabe jarri duzu elkarrekin. Ez duela zentzurik? ALLISON BUCHHOLTZ-AU: Beraz hau motatako da erabilgarria denean, Tomas zen lehenago esaten, agian, web oso konplikatuak bat behar duzu, eta dagoeneko asko duzu arau horiek idatzitako, eta besterik behar bi konbinatu aurretik. Ordez Like osotasunean idazten hautatzaileak berri eta han aldatzen, besterik konbinatu dezakezu horiek non gainjartzen. 

TOMAS Reimers: Edo duzu Batzuetan out-- aurkitu dezake ez klase bat bertan egiten bezalako letra-kolorea urdina, eta ez dago beste klase da bertan hondo urdinaren egiten du. Eta hori besterik ez du funtzionatuko. Beraz, kasu berezi bat idazterakoan, non, atsegin baina biak badu, zertan ari zaren egin egingo da zu joan blue gerizpean honetan bat egin eta beste urdin gerizpean honetan bat. Eskuin? 

ALLISON BUCHHOLTZ-AU: Good Salbuespenak mota horiek egiteko. TOMAS Reimers: Beraz arazo pentsatzen denean horiek konbinatzen sor ditzake. Cool. Beraz, gure aurkezpen itzuli. ALLISON BUCHHOLTZ-AU: Ia ez gara. TOMAS Reimers: Eta konektatzen utzi dio. ALLISON BUCHHOLTZ-AU: Oh, ez. ALLISON BUCHHOLTZ-AU: CS at bulegoan, internet jaisten. Oh, ironia. 

TOMAS Reimers: Beraz, zorionez, ahal dugu Internet gabe aurkeztuko, uste dut, Diapositibak guztiak ditugu hemen delako. Hargatik hitz buruz etiketa-harremana. ALLISON BUCHHOLTZ-AU: Eskuin. Beraz, mota horretako joan Tomas zer esan off, hau besterik beste egin behar den bidea da. Beraz guraso batzuk ditugu umea hautatzailea batekin hautatzaileak. Beraz, hemen adibide honetan, batzuk dugu Klase nabigazio-barrako bat, klasean botoiarekin gorputza. Ah. 

TOMAS Reimers: Oh, barkatu. 

ALLISON BUCHHOLTZ-AU: Eta Funtsean, horrek esan nahi du ume guztiek hautatu da, atsegin Selectors mota horiek guztiak, Guraso hautatzaileak honen barruan. Eta horiek dira bakarrak nik inoiz aplikatzeko behar. Ez dakit, bada modu hobea izan gertatuko TOMAS Reimers: Beraz dut asmatzeko modua pentsatzeko honi buruz, nola aurretik gogoratu Ordena gustatzen batera jarri ditugu. Eta gero, elementu bat esan nahi du datorrenaren horiek guztiak. Zer da hau esaten da, I nahi dena etortzeko duzu some-- nahi dut barruan hautatzaileak bat aurkitu duzu. Eta gero, horren barruan, nahi dut Gauza berriak etortzeko duzu. Eskuin? Beraz CSS ere, guztiei buruz ordenatzeko elementu horiek etortzeko gai izatea. Eta etor dastatu ahal izango dituzu beste elementu batzuk barruan elementuak. 

Beraz, benetan dezagun adibide bat, eta hori argitu egingo dela uste dugu. Hargatik asmoa berezia izan dugu, nahiko berezia, edozein. Eta gero, esteka bat dugu, OK? Beraz, gogoratu, bat lotura bat da. Ez da edozein lekutan joan behar. Eta ari gara egiten emateko joan Klase link, asmatzen dut. Dezagun eman du klase ideia bat eman dit. ALLISON BUCHHOLTZ-AU: Cool. TOMAS Reimers: dezagun Coo-- joan da klase nahiko. Zergatik ez? 

ALLISON BUCHHOLTZ-AU: OK. TOMAS Reimers: Beraz oraintxe gauza politak hondoan egiteko joan urdina, atzeko kolorea izokina. Hori zentzua. Eta this-- egiten badugu 

ALLISON BUCHHOLTZ-AU: Ez testua gehitu nahi duzun beraz Hiperesteka benetan erakusten sortu? TOMAS Reimers: That dei ona izango litzateke. ALLISON BUCHHOLTZ-AU: 'Sortzailea eskubidea orain ari gara asmorik ezer lortuko. TOMAS Reimers: Beraz, hau lotura bat da. "Hau link bat da." Oh, eta hau da, joan beste lotura bat izan. Dezagun eman klasea "cool". Arrazoi duzu. Cool. Beraz, oraintxe ari gara, hau hartzen joan. Bat bota goaz. Beste bat daukagu Etiketa bereziak, eta baita ere dugu dira nahiko etiketan bat izan da. Eta oraintxe zer ari gara joan egiten da ari gara cool-- egiteko joan zer egin nahi dugu? ALLISON BUCHHOLTZ-AU: Ezin handiagoa egin dugu? TOMAS Reimers: Dezagun ertza emango. ALLISON BUCHHOLTZ-AU: mugaldean genezake. TOMAS Reimers: Bai. Beraz, zerbait egin behar da bezala, mugako is-- eta gara hori azaltzeko guztiak bigarren bat egingo da. Da gaur egun For 

ALLISON BUCHHOLTZ-AU: kutxa eredua. TOMAS Reimers: Baina, oraingoz, gaude besterik ez da muga bat emateko. Beraz, zer esan nahi duen Oraindik esteka horiek ikusteko. Eta ari dutela ikusiko duzu , bezala, mugak itsusi beltz horiek, eta horrek cool da. 

ALLISON BUCHHOLTZ-AU: Gure web hain polita da. 

TOMAS Reimers: Bai. Gure web awesome. Beraz loturak bi hauek dira, eta agertzen dira. Orain dezagun asmoa dut hori egin ahal izateko bakarrik nahi ez zen zerbait barruan bada bertan izokina atzeko modukoa izan da. Beraz, gogoratu, honek izokina atzeko bat du, da klase nahiko delako. 

Baina hori bakarrik hoztu esan nahi dugu zein bereziak, ez klasean klasean dira polita, mugako hori izan behar. Beno, zer egin dezakezu zuk esan daiteke, .special, espazioa, .cool. Eta zer da hori egiten, noiz uste duzu Horri buruz, da, funtsean esaten, OK, aurkituko me guztia datorrenean hori berezia. Ondoren etiketa horiek barruan, aurkituko hori cool dit dena. ALLISON BUCHHOLTZ-AU: Beraz, beste era hori ona honi buruz pentsatzen izan daiteke, itzuli egingo C, da besterik esparrua ideia bezala. Beraz, batzuk duzu hautatzaileak, direnak bezala Nik dugun izan dira lan honen aurretik, zure web osoa, zure HTML guztiak Zure esparruaren barruan badago, ezta? Baina horiek ditugu guraso-haur harremanak, balitz bezala behera non estutzen ari da Leku jakin batera bilatzen ari zaren, balitz bezala, bezala, barruan bilatzen ari gara funtzio zehatz bat ordez gure fitxategi osoak. Ikusleak: Kontuan, So, litzateke garrantzia dute, changed-- bagenu ALLISON BUCHHOLTZ-AU: ordenak? Ikusleak: --the CSS klase , .cool espaziora, .special? ALLISON BUCHHOLTZ-AU: Bai, ondoren, hori Esan, esparrua da litzateke duela cool guztia, eta orduan zer bytes begiratu Esan nahi dut, bezala, kasu honetan, Ez dut uste aldatu dute litzateke. 

TOMAS Reimers: esan zuen badugu, zer? Sentitzen dugu. 

ALLISON BUCHHOLTZ-AU: badiogu esparrua hoztu eta gero begiratu gauza berezia daudelarik, bera izango litzateke, benetan. 

TOMAS Reimers: Beraz, ez litzateke. 

ALLISON BUCHHOLTZ-AU: Ez litzateke? Oh, oh ondo. Oker nago. 

TOMAS Reimers: Beraz, arrazoia akats ohikoa desberdina da dela oraintxe bakarrik Esteka cool, ezta? Nire galdera asmatzen dut you guys da, zer orrialde honetan dago .cool parekatzen? Badira bi etiketa hemen, ezta? Zein da honen eta hau da. Biak cool datoz bat. Ezer ez gehiago. Beraz, esan baduzu, .cool, espazioa, .special, zer zaren esan behar da joan, tags barruan, zer da berezia? ALLISON BUCHHOLTZ-AU: Hm. Hori zer hobeto esanda eskubidea. Besterik ez zerbait hemen bezala delako. 

TOMAS Reimers: Beraz, ez da ezer aukeratuko du. 

ALLISON BUCHHOLTZ-AU: berriz bereziak, horiek tags hemen barruan gaude. 

TOMAS Reimers: dutenek eta horiek. Ikusleak: OK. Beraz, aurrera egin duen etiketa horiek barra? 

TOMAS Reimers: Bai. Ez duela zentzurik? Nola da funtsean esparrua mugatu nahian. ALLISON BUCHHOLTZ-AU: Bai. Nik uste dut hori ziurrenik modurik errazena da pentsatzen. 

TOMAS Reimers: Beraz, hau aurkitu dugu, eta aurkitu dugu hau bai parekatzen bereziak. Eta gero, galdetzen ari gara barruan mutil hauek, zer da cool? Eta hau, hau, cool barruan. Alde horren barruan, ez da ezer cool. Beraz, hau geratzen etiketa bakarra da. 

ALLISON BUCHHOLTZ-AU: Berriz cool besterik bat etiketa hauek ez barruan dago. TOMAS Reimers: Zehazki. Eta zer berezi horiek barruan? Ezer ez. Orain, zer egingo diot dago espazio ez, Zer da cool eta special-- galdetzen ari zaren edo zer polita eta berezia da, ezta? Esaten baduzu .special.pretty, hori da .pretty.special berdina. 

Zer espazioa kendu delako eskatuz, noiz .special esan duzu, , galdetzen ari zaren OK, zeintzuk dira berezia? Eta gero horiek, eta horrek direnak ere nahiko dira, bertan bera da, gramatikalki, galdetuz bezala, zer da polita, eta, ondoren, horiek, zer ere berezia? Eskuin? Aldea da zer zer da barruan. Ikusleak: OK. TOMAS Reimers: Bai. Awesome. Beraz, hau jakinda, orduan 

ALLISON BUCHHOLTZ-AU: gure azken uste dut gauza da (FANCY British azentu IN) kutxa eredua. 

TOMAS Reimers: jakinarazi box-- [Chuckles] Modu I love Allison esaten duen. Beraz kutxa eredua gauza. 

ALLISON BUCHHOLTZ-AU: Just dute koadroa, zure kutxa eredua izango naiz. TOMAS Reimers: Hargatik hitz hori buruz. Beraz, oraintxe asko gastatu dugu Denboraren Selectors buruz hitz egiten. Orain, you guys dira ziurrenik, bezala, selectors-- badakizu maisu, nola zehazki hautatu eduki duten zure pantailan manipulatu nahi duzun. 

Beraz, galdera da, nola zehazki daiteke manipulatu duzu? Beraz oinarrizkoenak asmatzen dut hori pentsatzen modu da, bai, zer CSS elementu bat da? Denbora asko pasa dugu buruz hitz egiten, zer etiketa bat da, edo zer da oinarrizkoenak Etiketa bat ordezkaritza? 

Pentsatu modu ona da hau da, zer forma izokina da? Zer forma da, bezala, izokin-koloreko atzealde? 

Ikusleak: laukizuzen bat da. 

TOMAS Reimers: laukizuzen bat da, ezta? 

ALLISON BUCHHOLTZ-AU: Ez al zen trikimailu galdera bat. [Barreak] 

TOMAS Reimers: Not nahian engainatu mutil honek berandu. Beraz, laukizuzena izan dugu. Eta Etiketa p bat da, ezta? Beraz, gurekin onak ematen Sinesmen paragrafoa dagoela laukizuzen gisa irudikatzen, at nabigatzailea adimena, gutxienez bertan hau da. 

ALLISON BUCHHOLTZ-AU: Esan nahi dut, Nabigatzaile normalean angeluzuzena, beraz, zentzuzkoa da. 

TOMAS Reimers: Ideia hemen CSS barruan etiketa guztietan dagoela dira laukizuzen bat bezala irudikatzen. Eta karratu bakoitzean lau ditu zatiak CSS arabera, OK? Benetako edukia daukazu. Hori da, non testuaren datza. 

ALLISON BUCHHOLTZ-AU: Agian zure argazkia. 

TOMAS Reimers: Bai. Padding daukazu, hau da, besterik zuri espazio mota batzuk. Ondoren mugan bat duzu. Eta gero, marjina behar duzu, eta horrek kanpo espazio zuria da. Beraz, ez du zentzurik edonork, beraz gara Horretaz berba egin bigarren bat egingo da. Beraz, hemen, zer egin behar dugu joan ez da ari gara DIV batzuk sortzeko, OK da? Barkatu, berriz, I 

ALLISON BUCHHOLTZ-AU: gustatzen sentitzen dut cute irudi bat jarri behar dugu. 

TOMAS Reimers: behin betiko behar dugu. 

ALLISON BUCHHOLTZ-AU: Denek bezala sentitzen dut a mesede egin diezaioke cute argazki, da guztia. 

TOMAS Reimers: Ezin dugu batetik a-- onura guztiak 

IKUSLEEN: Bai, ziur. TOMAS Reimers: OK, cool. Beraz cute bat jarri behar dugu nonbait argazkia. ALLISON BUCHHOLTZ-AU: bat bezala sentitzen dut cute bunny erabilgarri izan daiteke oraintxe. TOMAS Reimers: Sure. ALLISON BUCHHOLTZ-AU: aste bukaeran. Zerbait adorab-- 

TOMAS Reimers: Nola kitten bout? 

ALLISON BUCHHOLTZ-AU: Kitten bat lan egiten du, gehiegi. 

TOMAS Reimers: Cool, zeren ez dagoela egiteko gune bat da. Honez PlaceKitten izeneko. ALLISON BUCHHOLTZ-AU: Hori handia. TOMAS Reimers: Bai. ALLISON BUCHHOLTZ-AU: Just for, bezala, placeholder zure webgunean irudiak. TOMAS Reimers: mm-HM. Ez da, gainera PlacePuppy. Eta han PlaceBacon da. 

ALLISON BUCHHOLTZ-AU: PlaceBacon? Benetan? 

TOMAS Reimers: Oh, ez dugu Interneterako sarbidea dute hemen. 

ALLISON BUCHHOLTZ-AU: [GROANS] Tragic. TOMAS Reimers: Bestela, You guys erakutsi nahi dut irudiak nola jarri zure webgunean. Hau lortzen saiatzeko goaz lan joan behar dugu aurretik. Baina, oraingoz, besterik ez gara koloreak ere hitz egin ondoren joan. Kittens-- argazkiak jarri nahi dugu 

ALLISON BUCHHOLTZ-AU: egin genuen. 

TOMAS Reimers: internet --the en oraingoz behera izatea. Beraz, bi DIV dugu, eta ari gara Horietako bi ids emateko. Deitu goaz "Lehen" eta "bigarren". Beraz id = "lehen". Eta ari gara horiek bi kolore emateko. Beraz, nola ez zerbait aukeratu dugu of "lehenengo" id batekin? ALLISON BUCHHOLTZ-AU: Dot edo hash? Ikusleak: Sharp. TOMAS Reimers: Sharp, perfektua. Sharp, hash, edozein dela ere badugu 

ALLISON BUCHHOLTZ-AU: Gauza asko deitzeko. 

TOMAS Reimers: OK. Den hashtag finkatu goaz, eta hori zer ari gara batera joango gara. OK? 

ALLISON BUCHHOLTZ-AU: Hashtag. 

TOMAS Reimers: Beraz hashtag lehen. 

ALLISON BUCHHOLTZ-AU: Beraz mintegia egin txiokatzen dezakezu hashtag CSS, hashtag cool. TOMAS Reimers: Hashtag Awesomeness. ALLISON BUCHHOLTZ-AU: Bai, Hashtag Awesomeness. TOMAS Reimers: OK. Beraz, "lehen" eta "bigarren". Beraz, lehenengo, izan goaz atzeko kolore gorria. ALLISON BUCHHOLTZ-AU: Uh, bi puntu. TOMAS Reimers: Yup. ALLISON BUCHHOLTZ-AU: Zure spot-checker izango naiz. TOMAS Reimers: Allison en got me. Blue-- Aurrekariak koloretan 

TOMAS Reimers: Purple! 

TOMAS Reimers: Purple. ALLISON BUCHHOLTZ-AU: Bai. Purple nire gogoko kolorea, eta oraindik ez dugu erabiliko da. 

TOMAS Reimers: Violet. ALLISON BUCHHOLTZ-AU: Violet. Lan egiten duen. 

TOMAS Reimers: Beraz gara bi DIV izan da. Erabat hutsik egon ari dira. Ziurrenik testu batzuk izan behar ditugu. Beraz, "lehen" izango da "Kaixo". Eta "bigarren" esango 

ALLISON BUCHHOLTZ-AU: Agurra. 

Ikusleak: - "MUNDUKO." Kaixo, agur. ALLISON BUCHHOLTZ-AU: ikusi nuen Kontzertu horiek beste astean. TOMAS Reimers: Betagarri? ALLISON BUCHHOLTZ-AU: reals For. Oraindik ez dute handia dela. Ez dut gogoko. 

TOMAS Reimers: Badugu "Hello" eta "agur". Eta berriro ere, CSS besterik ez da awesome, gure koloreak aitortzen delako. Ez da beharrezkoa, nahiz eta kezkatu existitzen dutela. Dute zerikusia. 

ALLISON BUCHHOLTZ-AU: dute existitzen. 

TOMAS Reimers: Beraz CSS uste dut 255 hitzak kolore buruz hitz egiteko. Kanpotik duzu kolore bat pentsatu ahal bada 255 horiek, bezala, harrituta izango naiz. ALLISON BUCHHOLTZ-AU: Bai. You guys izan dezake, uste dut besterik etorriko eskuinera ondoren. 

TOMAS Reimers: Beraz, hemen, ikusiko duzu bi kutxak daukagu eskuineko beste bakoitzean, eskuin gainean? HELLO eta agurtuko. 

ALLISON BUCHHOLTZ-AU: Badira arteko espazioa ez da. Zu besterik smooshed dute bata bestearen gainean. 

TOMAS Reimers: Beraz, lehenengo gauza Buruz hitz egin behar dugula uste dut da utzi ere esaten ren bai. Beraz CSS kutxak moduko gisa irudikatzen horiek. Eta kutxak bezala, eduki dute. Eta eduki oraintxe da Ordena HELLO edo AGUR eta kito. OK? 

Beraz, lehenengo gauza bat duzu egin ahal izango da padding gehitu ditzakezu. Padding dio espazioa zenbat alde bakoitzean utzi beharko luke. Beraz, demagun esan nahi dut Alde bakoitzean 10 pixel. Eta disekzionatu egingo dut bigarren batean. ALLISON BUCHHOLTZ-AU: Gauza horiek guztiak hemen izango dira, batez ere, joan pixeletan Mintegiaren osorako. Du ez duela ikusten ari zara bezalako tarte, ezta? Beraz, zer ez duzula hemen ikusi da hor padding moduko ikusezina alde bakoitzean, eta horrek dio, hala ere, OK, zure content-- kutxa duzu 

ALLISON BUCHHOLTZ-AU: Egin nahi duzu besterik tira ikuskatu elementua? 

TOMAS Reimers: Bai, hori ideia ona da. ALLISON BUCHHOLTZ-AU: Era berean, aurkitu dut ikuskatu elementua duten modu ona da irudikatu nahi zerbait bada joan oker, zerbait ustekabeko gertatzen den, tags ikuskatzen eta ikusten zer bezalako overwritten lagungarria da da. 

TOMAS Reimers: Beraz, ez nago ziur you guys kolore hau ikus daiteke. Can duzu? Ikusiko duzu padding honetan ertzean moduko gainean. Eta gero, benetako ikusten duzu Urdinez eduki, ezta? Beraz, hori oso kutxa eredua oinarriak. Eduki behar duzu. Ondoren padding duzu. 

IKUSLEEN: Zergatik ez duzu besterik -etxe barrutik kutxa erabili 

ALLISON BUCHHOLTZ-AU: Eskuin. Besterik hautatzen delako elementua oraintxe. 

TOMAS Reimers: Yup. Beste gauza. Hargatik hitz hori buruz padding komando bigarren bat. Beraz CSS, neurketetan Behar unitate bat izatea. Beraz, lehenengo zenbatekoa duzu. Beraz, kasu honetan, esan dugu 10. Eta gero, hurrengo bat dugu esan pixel, px da. Izan ditzakezu Beste direnak dira zentimetro, hazbeteko bezalako gauzak. Honakoa egin dezakezu gauzak gustatzen, zer da 10 hazbeteko? Eta barregarria izango da. 

ALLISON BUCHHOLTZ-AU: Oh, mutil. 

Ikusleak: Tira. 

TOMAS ETA ALLISON: Bai. TOMAS Reimers: Beraz, padding guztiak. Atzera joan pixel noa. 

ALLISON BUCHHOLTZ-AU: pixelak joera, izan, atsegin estandarra. Noiz begiratu webgune asko duzu, gehienbat dute pixel batean lan egiteko. TOMAS Reimers: Beraz zu ikusteko dut bai pixels-- ikusten duzu beste batzuk da em, hau da em da letra-altuera berdina , orain erabiltzen ari zaren. 

ALLISON BUCHHOLTZ-AU: Mm. TOMAS Reimers: modu ona da esatea, bezala, askoz espazioa nire letra-nahi dut hartzen da. ALLISON BUCHHOLTZ-AU: Ez da ezagutzen. Egunero zerbait berria ikasten duzu. TOMAS Reimers: Badira bat CS neurketak asko. Horiek begiratzen up proposatzen dut. Zure kasu guztietarako, uste dut pixel nahikoa izaten da. Eta aldi berean ari dira zer den ikusteko zaren Adibide gehienak online egin ere. Beraz dugu utziko pixel at. 

Ere egin dezakezu, beraz, esaten behar dut padding multzo bigungarria guztiak. Ere zerbait egin ditzakezu; "Padding-top" besterik set-- ra ALLISON BUCHHOLTZ-AU: Beharbada Gure "HELLO" lortu dugu. TOMAS Reimers: --to besterik ezarri du padding goian eta kito orrian. Beraz, lau komandoak padding-top dira, padding-behean, padding-ezker, eta betegarria-eskuin. 

ALLISON BUCHHOLTZ-AU: Just like koadro bat espero. 

TOMAS Reimers: Bai. Ezer ez da gehiegi crazy han. Ez duela zentzurik? Beraz, padding da. Guztiak ezarri noa bigungarria 10 itzuli. Eta ondoren, naiz mugitu mugatik joan. 

Beraz, zer mugan dago mugan bitxi komando bat. Hiru gauza moduko izaten ditu aldi berean. Beraz lehena da zein handia duzu Nahi neurri gisa izango da. Berriz ere, soilik dut pixel erabiliz. Eta azken gauza I gehitu behar neurketak Gauza bat da bertan ez du unitate bat behar da 0. Da benetan okerra 0 emateko unitatea, 0 0 hazbeteko zehar delako, pixel, zentimetro, edozein. It guztiak esan nahi du, besterik gabe, 0 da, ezta? Beraz, lehenengo da neurketa ematen dizu. 

Ondoren, estilo ematen dizute. Beraz, ez dut esan nahi du "ona". Eta egingo zer esan nahi duen hitz egiten dugu. Eta gero, azkenik, kolore bat emango dizu. Beraz, ez dut esan du "beltza". Eta horiek dira dugu gauza guztiak orain arte ikusi, estiloa izan ezik, baina egingo dela buruz hitz egingo dugu. Beraz neurketak guys ikusi dute, eta koloreak ikusten duzun. Eta zer gertatzen da hau lortuko dugu bere inguruan nice ertz beltz, ezta? Zaudete ikusten nola egin dugu? 

IKUSLEEN: Bai. 

TOMAS Reimers: Cool. Beraz, zer da hori? Beraz, lehenik eta, pixel bat da. Hori da auto-agerikoa da nahikoa, ezta? Atsegin dut, pixel bat lodi da. Edo pixel bat izango litzateke, baina ez dut handitutako, beraz, pixka bat gehiago da Hori baino. 

ALLISON BUCHHOLTZ-AU: Eta hemengo barregarria bereizmen TV honetan. 

TOMAS Reimers: Bai. Handiago egiteko ahal izango duzu, txikiagoak, edozein. Beraz, hemen bi-pixel mugan bat da. Ikusiko duzu birritan da lodi gisa. Duzu Hurrengoa gauza kolorea da. Hori ez da interesgarria. Ez dut hitz egingo Horri buruz, benetan. 

ALLISON BUCHHOLTZ-AU: Baina estiloa besterik gabe, apur bat interesgarria izan daiteke. 

TOMAS Reimers: Bai. Beraz, estilo, badaude batzuk ere bai I erabili ohi ikusi. Lehen norberaren solidoa, batek hurrengo han-hemenka, eta norberaren azken marratxodun. Eta hemen zipriztindua. Ikusiko duzu eta ari dira, puntu sorta bat, ezta? A modu ona lortzeko moduko mugan polit bat joan, marrak nahiko popular ere daude. 

ALLISON BUCHHOLTZ-AU: Eta gero, jakina, ez naiz ziur daude ugari beste estilo hori eskuratu ahal izango duzu. Eta multzo handia dugu zaudete amaieran loturak mota horretako peruse eta gehiago cool CSS begiratu. 

TOMAS Reimers: Eta gero azken gauza, ez gara to buruz hitz egingo kutxa ereduak benetako azkar. Oh, eta, ondoren, mugan, zehazki padding bezala, ere izan dezakezu bezalako gauzak border-ezker, border-eskuin, ertz-top, border-behean, baimendu duzu Mugan jakin batean lortzeko. Beraz, hemen besterik mugan geratzen definitutako dago. Ba al du zentzua? 

ALLISON BUCHHOLTZ-AU: cool bat da gauzak nabarmentzeko edo gehitu elementu desberdinen arteko lerroak. TOMAS Reimers: Absolutely. Beraz, gure mugan dago. Eta norberaren azken marjina. Margin en bezala padding izan ezik, ez da within-- ALLISON BUCHHOLTZ-AU: Da Zure elementua inguruan ez baina osoa inguruan benetan kutxa garela ikusten ditudan. 

TOMAS Reimers: Bai. Allison primeran esan. Ez da, bezala, zure barruan elementu, koadro osoa inguratzen da. Horrelako gauzak esan atzealde ez da aplikatuko. Eta, batez ere, esaten du bezala, ez dut ezer nahi Niretzat askoz espazio honetan. Beraz, hemen bezala daukagun 10 pixel marjina. Beraz, ez da ezer 10 pixel barruan me ondoan izan behar du. Hori moduko bere Espazio baina mota ez. Beraz, hori oso kutxa eredua oinarriak. Ez duela zentzurik? Cool, cool. ALLISON BUCHHOLTZ-AU: Awesome. Beraz, orain dugu uste dut besterik Gure baliabideak cool dute mutilak gara hartu duzu Oso azkar bidez. Eta ondo, egia esan dugu, ez internet dugula oraindik? 

TOMAS Reimers: Dezagun ikusten dut up-- ireki bada let me ikusi besterik ez badut internet azkar lor daiteke Allison ezer azaltzen digu Allison buruz hitz egin nahi du. ALLISON BUCHHOLTZ-AU: Beraz, funtsean ez dut Badakizu zer gehiago puntu honetan esan dezaket. Zenbait Baina horiek baliabide benetan ona. Hauek direnak direla Tomas eta erabili dut eta egia esan dugun Elementu honentzat Prep erabiltzen. W3Schools bat duzula mutilak aurretik ikusi behar. Gomendatzen dugu batentzat CSS gauza asko. Badakit I gomendatuko Nire atal denbora guztian. 

Gauza handia bat egiten dela aukera ematen dizu CSS nahastea mota eta ikusi aldaketak berehala honetan, bezala, bi leiho Ikusteko duela. Beraz, ez duzu kezkatu Zeure web orri ezartzeko, edo ostalari konfiguratzeko zure Tresnaren tokiko eta tokiko ostalari, eta gauzak lan hori guztia lortzean. Da barneratua orriaren barruan eskuinera. 

Eta apur horiek ditu ikasgai ahal duzun joan bidez ikasteko Selectors buruz gehiago, edo manipulatzeko buruz ikasteko zure letra-tipoa, edo atzeko bat, edo irudi bat. Eta horiek behar duzu emaitzak berehalako duzula ez dute inolako egin PReP beste lan. Beraz, I love W3Schools. It primerako da. Da lan? 

TOMAS Reimers: Bai. Ez, ez da. Ez saiatu nahi duzu eta berrabiarazi nire ordenagailuan? Edo ez egun nahi dugu 

ALLISON BUCHHOLTZ-AU: Esan nahi dut, bai, hau ere izango konektatuta. Diapositibak guztiak online izango da. Beraz, besterik gabe gomendatzen dut horiek egiten. 

Hau handia bezain Cheat orri bat bezala. Besterik ez oinarrizko guztien It komandoak duzula. Handia da zaudenean lehen ez hasi zure webgunean. Agian ez duzu delako den guztia sartu nahi benetako nitty gritty diseinu-heavy stuff. Besterik formateatu modu bat behar duzu duten mota horretako zentzua eta borondatea momentuz egin. Eta zuk benetan nahi izanez gero bertara sartu, badakit hau da, bezala, bat Tomas gogokoena erreferentziak. Hura erabiltzen ari gara, PReP, eta primerako da. Mozillaren garatzailea da. 

TOMAS Reimers: Beraz Mozilla dira pertsonak egiten du Firefox. Eta beren sustatzailearen egin besterik ez da erreferentzia, eta horrek nire ustez awesome. Eta zoragarria dauka baliabideen zerrenda. Beraz egun ditugun 

ALLISON BUCHHOLTZ-AU: Eta gero, azken nota da saiatzen ari zaren denean Zure web diseinatzeko, Gauza inspirazio marrazteko uste duzu direla nahiko. Elementua aztertzeak, iturburu-kodea ikuskatzeko super lagungarria izan daiteke irudikatu nahian Egin zure web nola style. 

Askotan, onena bezala sentitzen dut horrela, esperimentazioa, gainera, besterik ez da begiratzen hori nahiko dira gauzak. Aurkitu dut da benetan gogorra besterik ez motatako gauzak diseinatzen zure kabuz, batez ere hasieran. Beraz, mesedez, begiratu webgune begira gozatzen duzula. Irudikatu zer egiten erakargarria dituzu. Eta gero sentitzen free saiatu eta errepikatzeko. 

TOMAS Reimers: Eskuin. Webgune bezalako Nahiz hau bezalako, ikusi ahal izango duzu ez da, zalantzarik goialdean div bat. Eta gero barruan div beste duzu hemen, CSS Awesomeness da. Eta gero loturen sorta bat duzu hemen. Benetan besterik ez, ikuskatu bada elementuak, ordenatzeko dezakezu hasteko, zer egin webguneak ikusteko itxura, eta nola egin dezaket dut birsortzeko duten nahi izanez gero. Ez duela zentzurik? Beraz, hiru minutu geratzen besterik ez dugu. Beraz, galdera? Horietako edozein? Bai. 

Ikusleak: kolorea da rectangle, nola egiten duzun baldin ez baduzu nahi da orri osoa igaro liteke Egin dituzun bakarrik zeharkatuz joan orriaren erdia edo testua besterik? 

TOMAS Reimers: Bai, erabat. Beraz ikus dezagun egia esan. Bi ideia daukat. Beraz, lehenik eta, zuk halaber portzentaiak erabili ahal izango. 

IKUSLEEN: Benetan? 

ALLISON BUCHHOLTZ-AU: Beraz, zerbait bilatuko kokatzea erlatiboa da. Zerbait da, guk ez iritsi sartu astirik, baina zerbait dut betiko egiaztapena you guys gomendatzen. 

TOMAS Reimers: Beraz portzentaiak. Eta ikusi nola egin genuen zabalera% 50 besterik ez da? ALLISON BUCHHOLTZ-AU: badituzu benetan pixel kopurua ezagutzen, zehazkiago dezakezu horrela. Inguruan fiddle dezakezu berarekin. Baina% 50. Gure nabigatzailean tamainaz aldatu bagenu, txikiagotu litzateke. 

TOMAS Reimers: Beno, funtsean% 50 oraintxe, uste dut. % 50 da, eta, ondoren, marjina Izan da gehitu. CSS quirks asko ditu. Beraz, oraintxe da hau Orrialdearen zabalera% 50. Baina gogoan izan 10 duzula pixel kendu alde bakoitzean. Beraz ziren kontra dagoela imajinatzen baduzu Ezkerretik nabigatzailea ertzean, orduan% 50 bezala bilatuko litzateke. Berriz ere, esan bezala, CSS, ahal etxebizitza-eta-check asko izango. Atsegin dut, uste duzu zerbait Modu batera portatzen da joan, baina erabat beste modu batean jokatzen du. 

ALLISON BUCHHOLTZ-AU: Eta besterik ez duzu smarter, eta besterik ez duzu hobea da intuizio batera mugitu ahala. 

TOMAS Reimers: Eta okerragoa eta okerragoa lortzen. Beraz, benetan da lasterketa bat. 

ALLISON BUCHHOLTZ-AU: Hori da, super pozgarria. CSS gustatzen horiek nahi dugu. 

TOMAS Reimers: CSS awesome. Gogoan izan. Beste galdera? 

ALLISON BUCHHOLTZ-AU: Gauza bat. Beste ezer? Cool. 

TOMAS Reimers: Awesome. 

ALLISON BUCHHOLTZ-AU: Beno, baduzu guys edozein zalantza geroago, ohiko bakoitzeko eskuragarri beti gaude. Baliteke zuk batzuk ikusi digu azken proiektu eta hackathon at betiko. 

TOMAS Reimers: Absolutely. Eta azokan. 

ALLISON BUCHHOLTZ-AU: Eta azokan. Oh. 

TOMAS Reimers: Aurrera begiratu nahi Zure awesome-- guztia ikusita 

ALLISON BUCHHOLTZ-AU: Ikusiko dugu zure awesome webgune guztiak ederra izango da. TOMAS Reimers: Beti izango duzu ikusi, bezala, web orrialdeak nor izan, bezala, CSS ona eta gero ez zuten saiatu CSS egin bezala. ALLISON BUCHHOLTZ-AU: Era berean, beste gauza, gauza bat gehiago begiratu sartu Bootstrapping da. Beraz Bootstrap handia da. 

TOMAS Reimers: Googlek zuk bada 

ALLISON BUCHHOLTZ-AU: Google da. It primerako da. Love it duzu. Eta orain bat duzula CSS ulertzeko oinarrizko, zentzu askoz gehiago egingo du. Awesome. Eskerrik asko, mutilak. 

TOMAS Reimers: Eskerrik asko hainbeste.