[Musika jotzen] 

DOUG LLOYD: Beraz, dezagun bat gehiago Bideo den hizkuntza bat gehiago hitz egitea. Oraingoan CSS buruz hitz egingo dugu. Beraz, CSS, hau da, labur Kaskadako estilo-orriak, Erabiltzen ditugun beste hizkuntza da webgune eraikitzeko. Horri buruz uste dute hau. HTML badago zer antolatzeko erabiltzen dugu Edukira gure orrian jarri nahi dugu, CSS, oro har, erabiltzen ditugun tresna da Gure webguneak nola begiratu pertsonalizatzeko, zenbat eta erabiltzailearen esperientzia benetan da, gure web elkarreraginean. 

HTML antzekoa, CSS da Ez programazio hizkuntza bat. Ez du logika dute. Ez du zertan aldagaiak. Ez du inolako duten moduko dute Hori C egiten lotutako gauzak bere osotasunean. Da Sorozabal hizkuntza bat. Eta bere sintaxia da nahiko simple, eta besterik deskribatzen nola elementu gure Orri dute HTML zenbait elementu aldatu egin behar da. Hori dela eta, ez baldin baduzu oraindik gainbegiratu gure erakutsiko bideoa, edo Ohituta daude HTML oro har, you duten begirada bat hartu nahi dezake Lehenengo, CSS eztabaida hau delako da araberakoak joan HTML ezagutza batzuk. 

Hortaz, hona hemen benetan bat simple CSS estilo-orrian. Nik inoiz ez baduzu ere CSS programatu aurretik, Nahiko ziur nago irudikatu ahal izango dituzu zehazki zer stylesheet du horrek. Zer egiten du? Beno, gure web gorputzean aplikatutako orrialdea, body etiketarik arteko guztia gure erakutsiko da, eta bertan ezartzen du hondo urdin kolorea emateko orria hartako. Beno, estilo-orrian, oso erraza da. Egia esan, oso giza lagunarteko hizkuntza, CSS. Beraz, inoiz ez duzun erabiliko da, nahiz eta aurretik, zer esan zenuen, ziurrenik asmatzen. Izan ere, orri batean, non kargatuta badugu estilo-orri hau nolabait sartuta, hondo gure orria kolorea litzateke urdina, eta ez zuri-estandarra izan. 

Beraz, nola ez estilo-eraikiko dugu? Beno lehen, behar dugu hautatzailea identifikatzeko. Azken batean, adibidez, hautatzaileak duten gorputza zen. Ondoren ireki bat daukagu kizkur giltza, eta ez gara definituz hasiko joan hautatzaileak duten estilo. Kizkur giltza artean, guk besterik gako bikote zerrenda bat. Aurreko balio bikotea izan zen background color semicolon urdina, baina gero eta gehiago dira horiek egin ahal izan genuen. Hainbat gauza aplikatuz izan dezakezu Etiketa hori, hautatzaileak gorputza horretara. Horietako bakoitzak da batez bereizita puntu eta koma, eta horietako bakoitzarentzako deitzen dugun deklarazio bat, CSS deklarazio bat. When Sorozabal dugun guztia egiten ari garen etiketa jakin hori aplikatu nahi, besterik ez dugu kizkur ixteko bat giltza stylesheet amaiera emateko, eta egin gaude stylesheet definitzeko hautatzaileak jakin horretarako. 

Zer dira komun CSS propietate batzuk? Beno, agian jarri nahi al duzu Zerbait ertz batean. Beraz, esan daiteke, mugan, Hori da zure gakoa izango litzateke, eta, ondoren, zure baloreak izango litzateke, zer estilo, kolore, eta zabalera izan nahi duzu. Beraz, estilo sendo bat izan daiteke lerroa, puntuz, lerro bat, ridge lerro bat, wavy lerroa izango litzateke. Agian izan nahi al duzu urdina edo beltza edo berdea izan. Agian izan nahi duzu 1 edo 2 edo 10 pixel zabalera. Gauza horiek guztiak zehatz dezakezu. Agian bigarren mailan ezarri nahi duzula Zure orria kolorea modu jakin batean. Dagoeneko ikusi dugu, ezarpen Gorputzaren hondo urdina izango. 

Ondoren gakoa hitz bat erabili ahal izango dituzu, beraz CSS zenbait kolore ditu direla barneratzen, urdina, berdea, beltzak, kolore oso erraz jakin dugu. Baina, era berean, edozein zehaztu daiteke hex kolore hori gustatuko litzaidake. Berreskuratu duten koloreak identifikatu Hiru hex zenbaki multzo batek 0 eta 255, rg eta b, egin nahi osagai gorria, berdea eta urdina. Eta beraz, zehaztu ahal izango dugu Edozein kolore nahi dugu, ordez urdin edo berde edo beltza erabiliz, libra erabiliz eta, ondoren, sei hex zenbakiak, eta gaituen luke Sei digitu kolorea. Beraz, hori hondo kolorea da. 

Horrez gain, bat lehen planoan kolorea, ohi da zure orrian testua izango da. Eta, era berean, ezin duzu hori egin gako-hitza eta edo sei digitu hamaseitar batera. Beraz, edozein kolore zehatz dezakezu zuk zure orrian testua Nahi jakin baten aurka atzeko kolorea eman gainetik. Zuk ere alda daiteke eta landu letra, eta modu testuarekin da orrialdean Errendatutako. 

Beraz, zure letra-tamaina alda dezakezu. Gako hitz, hala nola estra gisa erabili ahal izango dituzu, Aparteko txikiak, edo xx txiki edo ertain, handiak, eta abar. Puntu finko erabili ahal izango duzu, 10 Puntu, 12 puntu, eta abar. Portzentajeak,% 80,% 20 erabili ahal izango duzu, non% 100 tipo lehenetsia da tamaina, hau da, normalean joan 11 edo 12 puntu antzeko zerbait izan. Edo are oinarritzeko da off berrienetakoa letra-tamaina. Duzu zerbait idatzi bada besterik, eta badakizu nahi duzuna da hura txikiagoa izan behar du, baina ez dakizu zehazki zer tamaina dituzu Nahi izan, bai, esan dezaket ez da zuk, letra-tamaina txikiagoa. Eta egingo du off oinarritzeko da, besterik goian, letra-tamaina da. Eta txikiagoa edo handiagoa eskuratu ahal izango duzu. Beraz, ez dago desberdin asko da Modu letra-tamaina zehazteko. 

Zer ere zehatz daiteke tipo familia nahi duzun. Zehatz bat baldin baduzu izena, han ere modu bat CSS ez dugu horri buruz hitz egingo font oso zehatz bat definitzeko hemen eta kapsula zure orrian sartu. Izen generikoak ere erabili daiteke. Badira web seguru tipoak asko da direla CSS aurrez definitutako. Eta zu Microsoft erabiltzailea bazara Bulegoa, azken 20 urteotan, Oraindik ezagutzen seguruenik Web seguru tipo hauek asko Dagoeneko, Times New Roman, Arial, El Correo Berria, Georgia, Tahoma, Verdana, eta abar. Horiek guztiak ez dira kontuan hartzen web tipoak seguru. Eta egia esan, zati arrazoia izan zen dute zen erabili ahal izateko web-- egiteko orrialde bakoitzean izan ordaintzeari sarbidea tipoak ezarri hainbat serifs, eta hori guztia letra-ondasunak ezin izango dugu sartu, baina horiek izan ohi dira Zure CSS eskuragarria, Hala ez balitz, are you Besterik tipoak definitzeko. Azkenik, testu lerrokatu ahal izango duzu, ordez hura izateagatik, besterik ezean, lerrokatzea ezkerrera, ezin izan duzu lerrokatu eskuinean, edo lerrokatu ezin duzu zentratua, edo justifikatu, beraz, bai marjinak jo egin zuen. Beraz, horiek dira aukera guztiak erabili ahal izango duzu Zein da zure testu itxura alda, eta nola zure orrian bistaratzen den. 

Zure Selectors ez etiketa bakarra izan behar. Aurretik gorputzaren etiketa bat ikusi dugu hautatzaileak, eta tag hautatzaileak ez begiratu besterik gabe. Etiketa bat izendatzeko duzu, eta, ondoren, definitzeko etiketa horretarako, estilo-orrian. Baina, aldi berean, zerbait egin dezakezu ID hautatzaileak izenekoa. ID hautatzaile nahiko antzekoa dela. Baina, adi, orain ez dut erabiltzen HTML etiketa duten, erabiltzen dut kasu honetan, #unique, edo hash berezia. Gogoratzen baduzu gure Bideo HTML on solasean etiketa atributu izan ditzakeen buruz. 

Eta aitortu bat aplikatzen Nahiko askoz HTML etiketa guztiei, baina ez genuen horri buruz hitz egiteko, ID etiketa bat izeneko zerbait da. Beraz CSS jakin hau litzateke HTML etiketa duela ez aplikatzea ID oso zehatz bat, izendatu dituzula. Beraz, nonbait baldin baduzu Zure kodea, nonbait Zure HTML fitxategia, etiketa bat eta zuk ere Etiketa duten ezaugarri bat bezala zehaztu, Identifikazio berezia berdin, hau stylesheet bereziki hemen izango bakarrik aplikatuko arteko berezia NAN etiketa hori. 

Halaber, zerbait egin dezakezu klase hautatzaile bat deitzen. Beraz edukitzeaz gain ID egozten, halaber, ahal duzun Klase atributu bat gehitu HTML etiketa den. Eta noiz class atributu bat erabiliz gero, bertan hainbat etiketa aplikatu ahal izateko. Beraz, hainbat gauza izanez gero, diren antzeko, agian, esan nahi duzun, Etiketa open blah, blah, blah, blah, klaseko ikasle berdin. Eta gero, bereziki honetan stylesheet aplikatuko litzateke Etiketa bakoitzean zeinen klasea egoera. Kasu honetan, ezar genuke hondo kolorea horia da, eta opakotasuna ezarri genuen, eta horrek Etiketa bat ez genuen hitz egin da, Baina nola gardena jorratzen zerbait da,% 70, kasu honetan. 

Bi aukera There idatziz egindako estilo. Horietako idatzi ditzakezu zuzenean zure HTML sartu estilo jarriz style etiketa artean. Eta estilo etiketa horien barruan joan burua zure web etiketa. Agian gehiago hobetsia bidea egin Aparteko .css fitxategi bat idatzi behar da, eta gero lotzeko sartu zure link etiketa erabiliz dokumentatzeko. Link etiketa, berriz ere, badira hiperestekak desberdinak, Gogora gure bideo batetik bada HTML batekin. Eta lotura tags dira nola fitxategi desberdinetan tira. Ordena da baliokidea bezalako web programazioa # besteak beste. 

Beraz, dezagun table.HTML begirada bat. Gogoratzen baduzu gure HTML bideo, erakutsi dut oso baten adibidea biderketa sinple mahai hori nahiko begiratu itsusiak, eta agian ez da modu bat hobea batera egiteko CSS, benetan itxura egiteko biderketa bat bezala gehiago mahaia, edo zerbait Hori ez da, besterik gabe, itsatsita elkarrekin Benetako zatiketa gabe errenkada eta zutabeen arteko. Hargatik buru izateko CS50 IDE, eta begirada bat nola CSS daiteke, ordenatu, pentsatzen at zer hasi dugu aurretik, eta horregatik da zerbait hobeagoa. 

Beraz, ez gara CS50 IDE orain, eta lanik izanez gero, tira sortu dugu honetan HTML orri hori mahai. Table.HTML funtsean besterik edukiak definitzen multiple-- bat suposatzen zuena izan lau bider lau biderketa taula bat. Nahiko erraza da. Eta horixe bai garela pentsatuko luke begiratu nahiko ongi antolatua. Baina, hain zuzen ere, orri hau aurreikusteko dugu, ikusiko dugu itsusia mota, eskubidea dela? Bistan denez, lerro eta zutabe daukagu ​​hemen. Bereizketa nolabaiteko han. Baina ez da bereizketa esanguratsu bat. Ez benetan ari garen gehiegi informazioa hemen. Eta ez da arteko bereizketa ez errenkada eta zutabe dagokionez arau horizontala edo bertikala. Ziurrenik ezin dugu egin hau Pixka bat itxura hobea. Hargatik saiatu. Beraz, ez dut fitxa hau ixteko gertatzen da hemen. Eta ez dut nire table.HTML itxi egingo da, eta beste bertsio bat daukat hemen table2.HTML deitzen. Hori zabalduko dugu eman. Orriaren gorputzaren da Nahiko askoz ere gauza bera, baina aldatu dut bat goialdean pixka. Eta korrituko dut hemen. Oharra Une honetan, ez naiz kapsulatutako style etiketa erabiliz. Style etiketa bat ireki dut, eta orain naiz besterik barruan CSS estilo-definitzeko hura. Stylesheet dioen mahai daukat,. Hori da nire tag hautatzaileak da. Ez dut dot edo hash erabiliz, bertan izango nuke egiten badut NAN edo klase hautatzaile bat erabiltzen zen. Etiketa hautatzaileak hemen mahai bat daukat. Estilo hori joan mahai etiketa guztietan aplikatzen dira. Antza denez, beste bat jarri nahi dut Pixel zabala, mugako urdin, Nire mahai barruan. Soinuak seguru bezala egoerari lagunduko du, ezta? Izan goaz Gauza asko hobeto begiratu. Beraz, hori gauza ederra da. Estilistikoki, besterik ez dut Nire stylesheet kapsulatutako hemen. Zalantzarik gabe bat onargarria modu da egin behar. Ea zer itxura hau du utzi. Beraz, atzera jo dut behera hemen, eta Dut nire table2.HTML aurreikusteko egingo. Beno, hori ez da nahiko zer nahi nuen, baina zehazki zer galdetu genion da. Estilo hori ez dela esan dugu gure mahaira aplikatu joan. Gure mahaia orain inork pixel dauka , sendo urdina ertz zabal. Ez benetan ari garen taulako gelaxka batean. Mahaian besterik gara ari. Beraz CSS lan egin zuen. Aplikatzen ditu bati Gure mahai estilo. Baina ez da nahiko egin zer egin nahi izan dugu. Zelan egin lortuko dugu zer egin nahi dugu? 

Beno, utz ditzagun a one more at honen bertsio table3.HTML ere. Beraz, ez dut besterik fitxa horiek itxi egingo da. Baino gehiago atzera egin hemen noa nire artxibatzen zuhaitza, eta ireki table3.HTML. Berriz ere, itxura polita da joan antzeko hemen hasieran. Baina oharra ere, oraingo honetan, ordez erabiliz bertan murgildurik estilo-, Ra batean lotzen noa stylesheet link etiketa erabiliz. Beraz, ez dut itxuraz batean lotuz stylesheet tables.CSS deitzen, eta baita hau berdinen stylesheet besterik bai esan nahi du, zer fitxategia erlatiboa hau da, zer Doing-- estilo-naiz naiz Nire orria erabiliz. Beraz, benetan nahi izanez gero, zein den ikusi nahi CSS batera egiten ari naiz hemen, Irekita dagoela joan behar dut table.CSS artxibatzen baita. Beraz, atzera jo beharko dugu hemen baino Berriro gure fitxategia zuhaitza da. Ez da, table.CSS. Dela aterako dugu irekita. Orain CSS apur bat ikusten ari gara. Antza denez, pare bat daukat Gauza da hemen. Itxuraz bost bat jarri nahi dut Pixel zabala, mendel gorri solidoa, Nire mahai inguruan. Dagoeneko badakigu hori dela joan besterik perimetroa joan. Hori ikusi dugu table2.HTML ere. Ilara bakoitzean, I itxuraz den zehaztu nahi Ilara altuera duten 50 pixel altua da. Beraz, ilara bakoitzean, gogoratu hori da tr etiketa duenaren, 50 pixel altua egiten ari naiz. 

Azkenik, iruzkin hori daukat. Eta hau da, CSS iruzkinak nola egin dugu. Oso antzekoa da bloke aprobetxa dezagun iruzkinak sintaxia barra Star. Nahi duzun testua guztiak. Ez dago barra barra arren CSS ere. Iruzkin labur baterako, ez dugu formatu zehatz honetan erabiltzeko hemen. Atsegin dut bat egiten ari naiz Badirudi Nire td etiketa ere gauza asko. Gogoratu td etiketa, edo taula datuak, eta hori benetan besterik ez dira barrutik zutabeen gure ilara, eta, antza denez, Datu pieza bakoitzeko nire taulan, nahi dut hondo kolorea ezartzeko izan beltzak, kolore zuria izan behar, kolorea Aurreko planoko kolorea da. Beraz, hau izango da Orri nire testua. Font big, 22 nahi dut font seinalatu, eta nahi dut font familiako izango da, Georgia. Beraz, ez dut joan tipo lehenetsia dute. Georgia, zehaztu noa bertan da web seguru tipoak horietakoa Hori ikusi dugu aurretik. Nire testu lerrokatzea nahi dut erdialdetik, kutxa erdian, Ez dut nahi utzi behar da lerrokatzea edo eskuinera lerrokatuta. Eta nire zutabe nahi dut 50 pixel zabala izan baita. Ikus dezagun begirada bat hau zer itxura, eta ikus hau da, agian, bada hobekuntza bat. Beraz, ez dut nahi table3.HTML, joango gara bertan oroitzapen, barne hartzen table.CSS lotura bat bezala, eta egiten dugu aurreikusteko egingo. Hori asko hobeto, ezta? Hau da, benetan bat begiratzen hasi Asko gehiago biderketa taula bat bezalakoa. Ertz-gorriarekin duten I Nire mahai inguruan, baina orain Halaber dut zehaztu Ilara bakoitzak 50 pixel zabal, edo tall-- aitzakia 50 pixel da Zutabe bakoitzaren Niretzat da 50 pixel zabalera. Zutabe bakoitzaren datuak, eta bakarrik Datuak, hondo beltz bat dauka. Beraz, horregatik horiek lerro zuri daude. Espazioa delako zelulak horien guztien artean, ez da muga bat eta bera, besterik ez da Naiz bakarrik baliatuz zelulak, benetan mahai mugetan, hace bertan itxuraz existitzen zuten guztiek batera, lerro zuri besterik argala zen. Orain ikusgai daudela. Orain off irekiko dute pantailan. Eta, beraz, hau da, oso erraza da stylesheet aplikatu dut, eta orain nire mahai asko itxura gehiago bezala lau bider lau biderketa taula bat, ordez, besterik jumbled nahaspila bat, non Dena dela, argi eta garbi lerro eta zutabe, baina ez super ondo antolatuta. Benetan ari gara azalera scratching zer CSS hemen egin dezakezu. Zorionez CSS dokumentazioa nahiko erraza da. Hainbat erabili dituzu bere egozten, nahiko maiz. Direnak hitz egin dugu Bideo honetan lehenago. Hainbat zarela Ziurrenik ez erabiltzea guztiak. Eta hori da isuna, gehiegi. Baina besterik ez dakit, ez dagoela da bat dokumentazio asko daude. Beraz, nahiz eta ez genuen guztia estaltzeko, Zu zalantzarik ez zure kabuz utzi. Baina CSS benetan dibertigarria den esperimentua. Eta biziki nuke animatzen zaituztegu inguruan play zure web orrialde, eta ikusi nola egin ahal izango duzu begiratu eta erabiltzaileak hobetzeko sentitzen Zure orrira esperientzia. Naiz Doug Lloyd. Hau CS50 da.