[Гуляе музыка] АЛЛИСОН Бухгольц-AU: Так Мы ў асноўным толькі збіраецца каб даць вам кароткае выклад з CSS, таму што мы ведаем, што ён не быў пакрыты ва ўсіх раздзелах. І мы сапраўды хочам, каб пераканацца, што вы хлопцы, ёсць гэты інструмент у вашым распараджэнні, таму што ён мае магчымасць рабіць Вашы сайты выглядаюць значна прыгажэй. І калі вы будуеце сайт, то Вы, верагодна, хочаце, каб зрабіць яго прыгожа. Я маю на ўвазе, вы не павінны, але я хацеў бы прапанаваць яго. [Смяецца] Калі вы хочаце, каб карыстальнікі, каб выкарыстоўваць яго, вы, магчыма, хочаце, каб зрабіць яго крыху [неразборліва]. Такім чынам, мы збіраемся, каб паспрабаваць даць вам толькі некаторыя асноўныя інструменты і разуменне, так што, калі вы выходзіце, і вы даследаванні рэчы пра CSS, гэта не поўнае трызненне, як CSS часам быць. Томас Реймерс: Так. Элісан сказаў, што гэта вельмі добра. Так што я думаю, першае, што мы павінны пачаць з таго, што CSS? Так CSS з'яўляецца дзіўным. CSS-- АЛЛИСОН Бухгольц-AU: Гэта Імя нашага семінара. Томас Реймерс: Так. Гэта вельмі важна, што Вы разумееце, што да таго часу. Калі вы толькі адняць адзін рэч, гэта тое, што CSS, калі дзіўным. Два гэта CSS азначае Каскадныя табліцы стыляў. Такім чынам, у сваёй аснове, CSS з'яўляецца ліст стылі, то яна дазваляе ўкладваць вэб-старонкі. І потым, што гэта азначае, што, гэта спосаб дадаць стыль Вашай вэб-сайтаў. Так па стылі, мы маем на ўвазе ўсё гэта не structural-- так такія рэчы, як колеру, фон, малюнка, межы, быццам бы, абіўка, Поля. Мы будзем казаць пра тое, што Усё гэта азначае, у няшмат. Такім чынам, мы проста пайшлі наперад і адкрыў абодва гэтыя ў Gedit. Так што гэта index.html. І гэта main.css. Так main.css не мае нічога. АЛЛИСОН Бухгольц-AU: Няма стыль да гэтага часу. Томас Реймерс: Не. І, як вы ўбачыце, што гэта сапраўды выродлівыя сайт. АЛЛИСОН Бухгольц-AU: Гэта проста. Томас Реймерс: Так. Так, гэта не пачварна, гэта проста мінімалізмам. А потым вось у нас ёсць index.html. І так хутка паўтарэнне HTML, Элісан, Вы хочаце, каб проста пагаварыць пра старонку? АЛЛИСОН Бухгольц-AU: Так. Так, відавочна, мы маем HTML тэг, які толькі імёны HTML файл. У нас ёсць загаловак тут, з дапамогай CSS Awesomeness, which-- калі вы вернецеся. Дзе гэта? Томас Реймерс: Ой. Так, вы можаце бачыць. АЛЛИСОН Бухгольц-AU: І звярніце ўвагу на загаловак гэта ўкладка загаловак прама тут. А потым "Hello, World!" з'яўляецца Тэкст, які мы толькі што адлюстравання на вэб- старонка, якая is-- вярнуцца. Таму. Што менавіта ў нашым арганізме here-- звычайны тэкст. Акрамя таго, адна справа звярніце ўвагу, калі вы паглядзіце тут, Томас перамыкаецца ўверх гэта два з нашага слайда. Так што, пакуль у вас ёсць усе тры з іх, ты ў парадку. Яны могуць быць у любым парадку, яны хочуць. Што самае важнае гэта ўсяго толькі ў вас ёсць кожная з гэтых трох рэчаў. Томас Реймерс: Круто. Дадаць тып дакумента? АЛЛИСОН Бухгольц-AU: Так. Томас Реймерс: Так. Крута. АЛЛИСОН Бухгольц-AU: Па-відаць, мае мікрафоны не любяць мяне. Томас Реймерс: О, дай нам хвілінку проста у той час як Элісан перамыкаецца з яе мікрафон. Так што так. Такім чынам, мы маем нашу галоўную старонку. Гэта свайго роду без стыляў. Мы не так шмат. Мы проста павінны ў асноўным тэкст. У нас ёсць табліца стыляў. У нас ёсць тытул. Так што проста голымі косткамі Кампаненты зрабіць сайт. Так адтуль, давайце казаць аб тым, што CSS з'яўляецца і як ён выглядае, і ўсё, што. Такім чынам, для that-- АЛЛИСОН Бухгольц-AU: Вярнуцца да слайдамі. Томас Реймерс: Вярнуцца да слайдамі. І Элісан можа ўзяць на сябе. АЛЛИСОН Бухгольц-AU: Ву. ОК. Так што ў вашым CSS файле, Вы будзеце мець Многія з гэтых рэчаў называецца селектары. Гэта будзе проста аснова вашага CSS-файла. Гэта проста будзе шмат і шмат з іх. Так селектар. Гэта проста агульная анатомія. Мы збіраемся прайсці праз прыклады, таму што, калі вы, хлопцы, ніколі не назірала за маім раздзел, я адчуваю, як рэчы ў абстрактны на самай справе не мае сэнсу. Гэта заўсёды дапамагае ўбачыць прыклады. Такім чынам, мы маем некаторы селектар. Гэта збіраецца быць некаторыя ідэнтыфікатар што мы хочам стыль звярнуцца. І тады мы можам мець любы набор правілаў і каштоўнасцяў. Так селектараў, якія вы маглі б бачыць можа быць нешта накшталт цела, або пункт з P, або загаловак, або любы іншы, усё, што вы хочаце, каб вашы HTML-тэгі, каб быць. Такім чынам, у гэтым выпадку мы маем цела. І ў нас ёсць некаторыя правілы, наколькі гэта адпавядае тое, што ваш стыль прымяняецца да. Так што ў гэтым выпадку мы маем Колер фону і вага шрыфта. Так што гэта збіраецца змяніць фон-небудзь ўнутры тэгаў цела нашага HTML файла. І гэта будзе даваць гэта гэта светла-блакітны значэнне. Так што гэта збіраецца зрабіць фон блакітны. А потым што-небудзь у целе будзе мець вагу шрыфта смелы. Так што гэта проста збіраецца тлустым шрыфтам ўсе нашага тэксту. І гэта толькі адзін селектар. Але вы маглі б вельмі многія з іх. І, як мы збіраемся паказаць Праз трохі больш аб тым, як што працы і іншыя прыклады там. Усё, што вы хочаце дадаць? Томас Реймерс: Няма Элісан атрымаў яго. Мы проста будзем рэзаць прыклад тут, на нашым прыкладзе сайце. Такім чынам, давайце на самай справе прыняць гэта. Гэта ідэальна падыходзіць. Так што я проста хачу, каб скапіяваць і ўставіць што прама ў нашу main.css файла. І я іду, каб выратаваць яго. І тады мы будзем запускаць яго. Так нататка боку, адзін з самых непрыемных рэчаў калі вы не захаваеце файл, і то вы, быццам бы, перазагрузіце старонку, і да т.п., чаму не Змена адбываецца? Гэта бывае. І вось мы ўбачылі, што мы зрабілі наш сайт блакітны фон і некаторыя тлустым шрыфтам тэкст. Я павінен таксама згадаць, калі вы хлопцы, ёсць пытанні аб чым-небудзь мы робім, калі ласка бясплатна, каб спыніць нас і спытаць нас. Мы цалкам гатовыя адказваць на пытанні. АЛЛИСОН Бухгольц-AU: Відавочна, што з CSS, усё будуецца на сабе. Так што, калі адно ня сэнс цяпер, мы не хачу, каб дакучаць вам пазней. Томас Реймерс: так давайце выгляд Прааналізуйце гэты. Дык вы хочаце, каб пачаць з селектарам тут? АЛЛИСОН Бухгольц-AU: Так. Як я ўжо казаў раней, цела гэта проста наша выбару тут. Так што, калі мы вернемся да нашай index-- ах. Томас Реймерс: Які я проста зачыненыя. Дайце мне секунду. Так Файл, Адкрыць, index.html. АЛЛИСОН Бухгольц-AU: Круто. Так што, калі вы заўважылі, тут мы ёсць гэтыя тэгі цела, ці не так? Так селектар раз адпавядае тэгі, пра якія мы гаворым. Так цела прама тут. Такім чынам, што мы хочам сказаць, everything-- мы можам вярнуцца? Шкада, што я мог бы проста як дакрануцца да экрана. Гэта было б так значна халадней. Так што нічога ў тых тэгі цела, якія мы бачылі проста, як, тэксты, і арганізма ў цэлым ставіцца да, як, на заднім плане. Калі вы калі-небудзь хацелі змяніць фон, што будзе ў тэгу цела. Проста ёсць такія правілы, якія прымяняюцца да іх. Так што, калі мы павінны былі пайсці ў index.html и-- на самай справе, у нас можа быць нешта па-за целам? Калі б мы мелі, быццам бы, склеп ці то, яно не будзе прымяняць да гэтага. Але нічога ў Гэтыя тэгі цела будзе могуць быць закрануты гэтым органам селектар, які мы зрабілі. Так што, калі вы былі тыпу што-то яшчэ there-- Томас Реймерс: Давайце ездзіць гэты дом. Так што, калі ў нас быў div-- так што проста яшчэ адзін тэг вы можаце мець. Я збіраюся закрыць яго. Або давайце зробім гэта пункт. Так р пазначае пункце. І ў гэтым пункце. І тады я кажу: "Гэта тэкст". Крута. І тады я зрабіў гэта правіла распаўсюджваецца на У пункце замест цела. Вы ўбачыце, як яно ставіцца толькі да зноў адукаваных пункт, справа, не ўсё гэта. Ці мае гэта сэнс? АЛЛИСОН Бухгольц-AU: Так што гэта ўсё цела, але цяпер наша выбару проста адпавядае пункту. Такім чынам, мы проста павінны тлустым сінім шрыфтам для гэтага канкрэтнага пункта, таму што гэта адзінае, які заключаны ўнутры тэга р. Томас Реймерс: Ці ёсць нейкі сэнс накшталт аб тым, як рэчы інкапсуляцыі іншыя рэчы? АЛЛИСОН Бухгольц-AU: Акрамя таго, толькі сказаць, быццам бы, адзін з лепшых спосабаў каб сапраўды атрымаць камфортна з CSS гэта проста зрабіць што-нешта накшталт гэтага, проста паспрабуйце яго. Гэта вельмі проста што-то тыпу , Ударыў Абнавіць, каб убачыць, што адбываецца. І як з большасцю CS, эксперыментаванне можа часта прывесці да значна лепш інтуітыўнае разуменне. Нават больш, чым нас проста, як, размаўляючы з вамі. Томас Реймерс Абсалютна 100% згодныя па гэтым пытанні. Так што, калі мы вернемся да гэтага, давайце пачнем рассякае менавіта тое, што гэтыя два рабіць. Такім чынам, мы маем два правілы на гэты конт. Так першая гэта колер фону. І вы бачыце, што мы ўсталявалі яго роўным значэнні, светла-блакітны. Такім чынам, у CSS, CSS з'яўляецца свайго роду вельмі друзлых пра тое, як Вы дазволілі вызначыць колер. Такім чынам, вы можаце вызначыць іх па імені. Вы таксама можаце зрабіць нешта накшталт "чырвонага". І потым, калі мы вернемся да гэтага, Вы ўбачыце, што фон чырвоны. Вы таксама можаце атрымаць really-- Я думаю, што вы можна атрымаць даволі творчая з гэтым, вы не можаце? АЛЛИСОН Бухгольц-AU: Я думаю, вы можаце выкарыстоўваць Hex. Вы не можаце? Томас Реймерс: Так. Такім чынам, вы можаце выкарыстоўваць Hex. Але я думаю, імя-мудры. Не існуе? АЛЛИСОН Бухгольц-AU: Вы можаце зрабіць дастаткова мала. Даволі шмат, як і большасць кветак, якія вы можа name-- як, я думаю, ласось з'яўляецца адным. Томас Реймерс: Мы збіраемся паспрабаваць ласося. АЛЛИСОН Бухгольц-AU: Я думаю, зелянява-жоўтыя знаходзіцца ў там. Томас Реймерс: Так. Ўбачыць? Такім чынам, вы можаце атрымаць даволі творчая. АЛЛИСОН Бухгольц-AU: Вы можа атрымаць даволі творчая. Маўляў, калі вы можаце думаць аб назву колеру, верагодна, гэта там. Калі вы сапраўды хочаце добра падрабязна, вы можаце пайсці Hex. Томас Реймерс: Так. Так шаснаццатковай. Калі вы, хлопцы, памятаеце гэтую спіну са старога PSET, выявы Аднаўленне, вы, хлопцы, павінны былі мець справу з гэтых шаснаццаткавыя значэння. І быццам рэзюмаваць, што гэта такое, Hex мае тры значэнні, якія захоўваюцца ў ім. Так што гэта ў групы па два крокам. Першыя два ўяўляюць значэнне чырвонага. Другі ўяўляе значэнне зялёнага. І апошні з якіх з'яўляецца сіні? Так FF адбываецца ўяўляюць шаснаццатковае 255. Такім чынам, вы павінны 255 чырвоны, 255 зялёны і сіні колер 0. І значэння ў дыяпазоне ад 0 да 255. АЎДЫТОРЫЯ: Так. Так па сутнасці, мы маглі б шукаць Інтэрнэт для любога колеру мы хочам, і вызначыць на самой справе вядома, колер камбінаваны спектр, і тады мы маглі б пакласці яго ў? АЛЛИСОН Бухгольц-AU: Цалкам дакладна. Так што вы павінны ў значнай ступені поўны кантроль за колеру, якія вы хочаце ў CSS. Мы будзем казаць пра фонавыя малюнкі пазней? Ці мы хочам, каб гэта зрабіць? Томас Реймерс: Так. Цалкам дакладна. Такім чынам, спачатку, проста каб паказаць, што чырвоны і зялёны-жоўты. І калі Вам патрэбна якая- дапамогу ў пошуку гэтага, вы Ці можа Google нешта як "колеру палітры." АЛЛИСОН Бухгольц-AU: О, гэта вельмі добра. Я люблю Color Picker. Томас Реймерс: colorpicker.com з'яўляецца добрым прыкладам. І вось, вы ўбачыце, што ў вас ёсць поўны Photoshop, як выбар колеру. АЛЛИСОН Бухгольц-AU: Мм-хм. Акрамя таго, класныя рэчы ты можа генераваць каляровыя схемы так што вам не прыйдзецца, як, сутыкаючыся колеру. Томас Реймерс: А потым вось шаснаццатковае значэнне тут. Такім чынам, вы заўсёды можаце знайсці на сайце ў асноўным месцаў, каб атрымаць шаснаццатковае значэнне ад. Гэта не сартаваць таго, што проста, як мы бачыць колеру свету ў лічбах. Гэта больш, што мы ідзем на сайце і знайсці тое, што колер, які мы хочам, а затым ўзяць лічбу. Таму што гэта проста вельмі лёгка спосаб спасылацца рэчы ў CS. АЛЛИСОН Бухгольц-AU: А тут яшчэ also-- Я забыўся дакладную назву сайта. Але ёсць, безумоўна, я думаю, што-то ад Adobe што стварае каляровыя схемы для вас, якая на самай справе выдатна, таму што вы definitely-- гэта часам цяжка зразумець ,, Ах, калі б я хачу выкарыстаць гэты колер, што можа быць яшчэ карысным выкарыстоўваць у іншым месцы на маім сайце, каб, як, зрабіць яго прыгожым і згуртаванай. Томас Реймерс: Allison кажа пра адзін за Adobe называецца Kuler, я думаю. Гэта К-У-Л-Е-Р. АЛЛИСОН Бухгольц-AU: Я так думаю. Я ўпэўнены, што гэта адзін. Томас Реймерс: Мой фаварыт заўсёды Каляровая схема канструктара. АЛЛИСОН Бухгольц-AU: Ох. Томас Реймерс: Што now-- АЛЛИСОН Бухгольц-AU: Ах, гэта прыгожа. Томас Реймерс: А вы у прынцыпе можа сказаць, як, Хачу тры колеру побач адзін з адным. І тады давайце зробім што-небудзь добрае. І тады вы можаце атрымаць прыклад што гэта можа выглядаць. І потым, калі вы навядзіце курсор мышы на любы з іх, гэта дае вам шаснаццатковае значэнне. Гэтак жа, як добры спосаб, каб пачаць думаць аб каляровых схемаў або якія колеру ў вэб-сайт можа ісці добра разам. Таму што гэта можа быць дзіўна не так лёгка падабраць, як вы думаеце. А потым іншыя цікавыя рэчы Я заўсёды лічыў, аб гэтым сайце калі вы патрапілі прыклады, гэта будзе Паказаць, што прыклад сайт можа выглядаць з выкарыстаннем гэтага каляровую схему. У любым выпадку. Вярнуцца да фактычнага CSS. АЛЛИСОН Бухгольц-AU: Але відавочна, што мы ведаю, што гэтыя спасылкі могуць быць карыснымі. Томас Реймерс: Не, яны безумоўна, можа быць карысным. Такім чынам, другое правіла, Элісан? АЛЛИСОН Бухгольц-AU: Так. Другое правіла гэта проста адпаведная нашага шрыфта. Так вага шрыфта проста якая- of-- так вага будзе быць, калі вы хочаце проста, як, нармальны або, як больш тонкія шрыфты, ці ў дадзеным выпадку, як, вызначаны тлустым шрыфтам. Я забыўся. Што, калі вы хочаце it-- ёсць танчэй адзін больш, чым проста, як, нармальна? Томас Реймерс: Я на самой справе не ведаць, калі ёсць больш тонкай. АЛЛИСОН Бухгольц-AU: Я забыўся. Так шрыфта вага мы, як правіла, проста выкарыстоўваць для паўтлустым шрыфтам. Калі вы хочаце атрымаць сапраўды ў гэта, мы збіраемся паказаць вам. W3Schools ёсць усе розныя рэчы, якія вы можаце зрабіць для шрыфтоў. Але ў прынцыпе, калі вы хочаце нічога мяняць пра шрыфт, гэта заўсёды будзе, як, шрыфт-то. Дык гэта будзе, як, сямейства шрыфтоў, калі вы спрабуе змяніць фактычны тып. Гэта будзе стыль шрыфта, калі вас хачу зрабіць гэта як пропіссю, ці курсіў, ці яшчэ шмат чаго. Ці нават колер шрыфта, калі мы хацелі, каб змяніць гэта. Томас Реймерс: Так. Такім чынам, вы можаце змяніць гэта. І накшталт проста Рэзюмэ зараз, так што вы можаце бачыць, што ў нас ёсць селектар тут. У нас ёсць гэтыя фігурныя дужкі. І тады ў нас ёсць правілы падзеленых кропкай з коскі. Ці мае гэта сэнс? Так? Крута. Так што, калі гэта good-- АЛЛИСОН Бухгольц-AU: Назад. Томас Реймерс: Давайце казаць канкрэтна аб тым, якія селектары ў нас ёсць. "Таму што зараз мы ў накшталт толькі што паказалі метак. Але вы, хлопцы, маглі бачыць, што гэта праўдападобна. Скажам, у вас ёсць два пункты, на старонцы, і вы хачу, каб мець магчымасць стылю адзін, але не іншы, Вы не проста хочаце абмяжоўваць сябе прыйдзецца выкарыстаць іншы бягучы HTML тэгі, каб даць ім розныя стылі. Такім чынам, мы маем тры асноўных тыпы селектараў. АЛЛИСОН Бухгольц-AU: Так. Такім чынам, мы маем тэг, што і мы гаварылі пра прама цяпер. Так што накшталт як на цела або р. А то ў нас клас, які з'яўляецца калі мы вызначаем яго ў нашым CSS файле, гэта заўсёды будзе кропка, незалежна ад Вы хочаце імя вашага класа было. І гэта можа прымяняцца да некалькіх рэчаў. Скажам, у вас ёсць пяць пунктаў і два з трох з іх павінны быць аформлены гэтак жа, вы б прымяніць клас да яго. І гэта толькі, як мы робім гэта. Мы дамо вам прыклад дзе гэта на самай справе паказвае ўверх. Але калі ў вас, магчыма, некаторыя тэг р, пасля яго, можна было б напісаць, клас роўны любой зручнай класы Вы хочаце, каб прымяніць да яго. Таму, што б клас селектары, якія мы хочам прымяніць да гэтага канкрэтнаму пункце, мы маглі б проста напісаць, як гэта. Вядома, я думаю, прыклад зробіць гэта нашмат больш канкрэтнымі. Іншы ў нас ёсць гэта ID, які мы пазначым хэш, або фунта, або хэштэгу. Томас Реймерс: знак колькасці. АЛЛИСОН Бухгольц-AU: знак колькасці. Гэта працуе, таксама. А гэта павінна быць сапраўды унікальным. Яны павінны прымяняцца толькі да адно на вашай старонцы. Дык вось, ці з'яўляецца канкрэтны пункт, ці які-небудзь элемент у спісе, або любы іншы, гэта павінна быць унікальным. І такім жа чынам, што мы проста сказаць, як, клас = "class1 class2," гэта можа быць проста ідэнтыфікатар, што мы ёсць. Томас Реймерс: Так. Так што давайце, безумоўна, казаць аб прыкладах тут. І я проста хачу, каб паглыбіцца прама таму ў кодзе. Такім чынам, давайце паглядзім на наш HTML. І таму мы зараз ёсць адзін пункт. Гэты тэкст. Я проста хачу, каб змяніць гэта. "Гэты тэкст 1." А потым мы збіраемся ёсць "Гэты тэкст 2." АЛЛИСОН Бухгольц-AU: другі. Томас Реймерс: Так. Такім чынам, мы цяпер маем "Гэты тэкст 2", ці не так? І мы збіраемся, каб убачыць, што калі мы перазагрузіць старонка, тое, што мы збіраемся знайсці што мы збіраемся find-- АЛЛИСОН Бухгольц-AU: Ох. Томас Реймерс: Так. Мы збіраемся, каб знайсці "Гэта Тэкст 1 ", і" Гэты тэкст 2. " АЛЛИСОН Бухгольц-AU: І з выдатны жоўты колер. Томас Реймерс: І вы ўбачыце, што наша выбару прама зараз, які адносіцца да р, або абзацы, уплывае на іх абодвух, таму што абодва яны адпавядаюць ўмове, што яны абодва р тэгаў. Гэта робіць поўны сэнс. Так пытанне ў тым, добра, што калі мы хочам атрымаць толькі адзін? Гэтак жа, як Элісан казаў, у нас ёсць два іншых спосабу зрабіць гэта. Я збіраюся пачаць з ідэнтыфікатарам. АЛЛИСОН Бухгольц-AU: Давайце пачнем з ідэнтыфікатарам. Томас Реймерс: І як з іх з'яўляюцца атрыбутамі. Так атрыбуты існуюць у HTML. І тое, што яны ёсць, тое, што вы дадаеце ўнутры тэга, які асобна ад імя тэга. Такім чынам, вы можаце мець некалькі атрыбутаў. Так? АЛЛИСОН Бухгольц-AU: Я як раз збіраўся сказаць, з вашага прыкладу з PSET 7, калі любы з вас спрабуюць выраўнаваць рэчы ад цэнтра, Вы маглі б выкарыстоўваць "Тэкст далучаюцца = цэнтр». І вы гэта заўважылі, напэўна, павінны былі сканцэнтраваны Ваш тэкст або ваш навігацыйнай панэлі. Дык вось як раз і атрыбут што вы можаце быць знаёмыя з. Томас Реймерс: Там куча атрыбутаў, якія вы ўбачыце. Так. Як і добры спасылкай на PSET 7. У нас ёсць ідэнтыфікатар. Вы таксама можаце мець клас, падобныя рэчы. Адзін тэг можа мець шмат атрыбутаў. Так, пачынаючы з ідэнтыфікатарам, давайце прадставім, што мы хочаце мець ідэнтыфікатар of-- я не ведаю. Мы будзем называць яго асаблівым, таму што гэта адно, мы збіраецца зрабіць смелы, і падкрэсленне і што заўгодна. АЛЛИСОН Бухгольц-AU: Гэта буду вельмі асаблівае. Томас Реймерс: Так што гэта Адзін з іх, у нас ёсць дакумента асаблівае. Такім чынам, спосаб выбару, што, такім чынам, з'яўляецца у main.css, а не ёсць р тэг, вы #special, добра? І, што выбірае што з ідэнтыфікатарам асаблівае. Ці мае гэта сэнс для ўсіх? АЎДЫТОРЫЯ: Так. Томас Реймерс: Круто. Такім чынам, калі мы вернемся, мы see-- воклічы. Так. Мы ўбачым, што гэта ўсяго толькі выбірае адзін з ідэнтыфікатарам асаблівае. Так? Гучыць выдатна. Так. Залы: Можна нешта ёсць атрыбутам як клас і ідэнтыфікацыйны? Томас Реймерс: Так. АЎДЫТОРЫЯ: OK. І тады тое, што адбудзецца, калі вы затым даць гэта нейкія правілы ў CSS, што канфлікт? Томас Реймерс: Цалкам дакладна. Мы вызначана збіраемся каб гаварыць пра гэта. Так менавіта тое, што вы атрымліваеце на, вы таксама можаце мець класы. Такім чынам, давайце ўявім, што ў мяне было тры пункты, і я хацеў стылізаваць першы два, але не трэцім. Ну, ваша першая думка можа быць, ну, я можа проста даць другі ідэнтыфікатар. Але вы не можаце, таму што ідэнтыфікатарам, гэтак жа, як Элісан казаў, павінен быць унікальным. Такім чынам, замест ID, тое, што вы можна выкарыстоўваць, што вы можаце выкарыстоўваць клас. І class--, што яна дазваляе Вы зрабіць, гэта ў асноўным кажуць, гэта ставіцца як частка групы. У гэтым выпадку, наша група называецца Special. І тое, што мы збіраемся зрабіць, гэта мы збіраемся say--, а не фунт, мы збіраемся выкарыстаць кропку. ОК? І заўважце, што фунт і кропка існуюць толькі ў файле CSS, не ў HTML. АЛЛИСОН Бухгольц-AU: Так. Важнае адрозненне. Томас Реймерс: У мяне ёсць было столькі барацьбы, таму што я паставіў хэш ў HTML і то проста адчуваў сябе дурным на працягу доўгага часу. Паглядзіце, як ён выбірае абодва тыя, з гэтага класа? Крута. Цяпер, усё можа мець некалькі класаў. Скажам, я хацеў, каб першы два маюць фон жоўтага і два маюць колер шрыфта блакітны. ОК. Я сапраўды не ведаю, чаму я хачу зрабіць гэта, але я не магу. АЛЛИСОН Бухгольц-AU: не маглі б рэкамендаваў яго для вашага вэб-сайта. Але для нашых мэтаў, ён будзе рабіць. Томас Реймерс: Гэта не добры каляровай гаме. АЛЛИСОН Бухгольц-AU: Ну, жоўты і сіні мае высокія кветак школе. Я не ведаю, хоць. Томас Реймерс: Allison хай школа аказала вялікі каляровую схему. [Смех] Такім чынам, што мы можам назваць гэта Давайце назавем this-- так у нас ёсць спецыяльныя і ў нас ёсць даволі. Я прапаную, для гэтага трэба выкарыстоўваць значна больш апісальныя імёны. АЛЛИСОН Бухгольц-AU: Так, я б назваць гэта, быццам бы, жоўтага або сіняга колеру. Томас Реймерс: Мы не сапраўды ўносіць рэальны вэб-сайт, які з'яўляецца, чаму мы гэтага не робім. Але калі вы на самой справе быў рэальны вэб-сайт, вы маглі б мець, як, артыкул загаловак, змест артыкула, першае слова, такія рэчы, якія дазваляюць Вам будзе значна больш наглядным. Гэта сапраўды падобна пераменным. Яны павінны быць названыя ў шляху, дзе Вы можаце, like-- ды, як такой. Ідэальна падыходзіць. Так колер фону. І тады мы будзем say-- так спосаб змяніць колер гэта проста "колер". І мы збіраемся зрабіць гэта сіні. Гэта крута. Так што цяпер у нас ёсць Першыя два маюць асаблівае. Наступная адным збіраецца ёсць "клас = прыгожа." АЛЛИСОН Бухгольц-AU: І тады вы будзеце Каб дадаць "даволі" да сярэдняй. Томас Реймерс: Так. А потым у сярэдняе, дадаць "даволі", тое, што адбываецца гэта ў вас ёсць толькі прастора. Так атрыбуту класа з'яўляецца падзелены прабеламі спіс усіх класаў якія ставяцца да гэтага тэгу. ОК? Гэта не як гэты належыць нейкая спецыяльны клас "Асаблівы, прастору, даволі." Ён належыць да двух classes-- спецыяльнай і даволі. Так? Крута. І потым, калі мы паглядзім на тое, што адбываецца, мы ўбачым, што першы мае жоўты фон, чорны тэкст. Па-другое одно-- АЛЛИСОН Бухгольц-AU: --has тлустым шрыфтам жоўты фон з сінім тэкстам. І наша апошняя проста мае сіні тэкст, які мы прызначылі да яго. Томас Реймерс: Cool? Як селектары працуе? Высокі. АЛЛИСОН Бухгольц-AU: Мы хочам зрабіць казаць пра канфлікт зараз, то? Томас Реймерс: Так што так. Цалкам дакладна. Што здарыцца, калі вас ёсць канфлікт, ці не так? Давайце прадставім, што першы ўсталёўвае што-то like-- АЛЛИСОН Бухгольц-AU: Можа быць, Гэта адзін змяняе фон? Томас Реймерс: Так. Так што мы збіраемся зрабіць "даволі" змяніць фон на ласося. АЛЛИСОН Бухгольц-AU: Вы проста з усе вялікія колеру сёння, Томас. Томас Реймерс: Так. Таму што я даведаўся, што я магу выкарыстоўваць ласося ў рэальным колеры. Такім чынам, мы толькі збіраемся зрабіць гэта. Я таксама думаю, Заход рэальны колер. АЎДЫТОРЫЯ: Заход гэта рэальны колер? АЛЛИСОН Бухгольц-AU: Давайце паспрабуем гэта. Томас Реймерс: Пасля гэтай дэманстрацыі толькі таму, што ў выпадку, калі псуе, Я не хачу, каб адладкі. Такім чынам, мы ведаем ласося рэальны колер. Такім чынам, любы здагадкі па што адбудзецца? АЛЛИСОН Бухгольц-AU: Любая ідэя? АЎДЫТОРЫЯ: [неразборліва]. Томас Реймерс: Так. Такім чынам, вы атрымалі гэта дакладна. У асноўным, гэта адбываецца Апошняе правіла, што ён быў дадзены. АЛЛИСОН Бухгольц-AU: Так што гэта дзе каскадныя уступае ў сілу. Томас Реймерс: Так што памятаеце, як мы было, што каскадныя табліцы стыляў? Такім чынам, што мы як-то азначае, што ў нас ёсць куча правілаў якія прымяняюцца на верхняй частцы адзін з адным, і яны могуць таксама перавызначыць адзін з адным. АЛЛИСОН Бухгольц-AU: Так Што б ні ўнізе адмяняе ўсё гэта на самым версе. Вы маглі б правілы, якія цалкам адмаўляць тое загадзя. Гэта таксама тлумачыць, чаму вы хочаце быць асцярожныя, калі вы стылю, так што вы не ствараеце правілы, якія Вы проста цалкам перакрываючы. Томас Реймерс: Ці можа быць, вы хачу, каб перазапісаць правілы. АЛЛИСОН Бухгольц-AU: Ці, можа быць, вы робіце. Так. Томас Реймерс: Уявіце, што ў вас ёсць клас, які адносіцца да большасці рэчаў, але, скажам, вы хочаце змяніць Колер фону на чырвоны, а таксама шрыфта вага паўтлустым шрыфтам для найбольш рэчы, але для аднаго, Вы хочаце толькі колер фону быць чырвоным, але вы хочаце, каб усе іншыя ўласцівасці, вы маглі б зрабіць што-то як "напісанне шрыфта = нармальны," што б потым адмяніць, што смелы змены. Так? Зноў жа, лепшы спосаб, я думаю, Элісан сказаў, што гэта, проста практыкаваць. АЛЛИСОН Бухгольц-AU: эксперыментавання. Томас Реймерс: практыка, практыка, практыка і эксперымент. Я ведаю шмат людзей, якія думаюць, што CSS гэта проста шмат варажбы і-праверкі У рэшце рэшт, дзе, калі Вы хочаце зрабіць something-- як, ў вас ёсць агульнае ўяўленне, але Вы, верагодна, яшчэ трэба паспрабаваць, каб пераканацца, Вы ведаеце, як ён выглядае. АЎДЫТОРЫЯ: Калі вы прэтэндуеце класы, больш адзін на той жа пункт ці частка, робіць гэта ад таго, што замова вы можаце увядзіце іх у двукоссі? Томас Реймерс: Не, не на ўсіх. АЛЛИСОН Бухгольц-AU: Што мае значэнне заказ на працягу вашага CSS стыляў. АЎДЫТОРЫЯ: Не маглі б вы паўтарыць пытанне? Томас Реймерс: Ой. АЛЛИСОН Бухгольц-AU: У класа, калі вы даеце класы што-то ў HTML, якія не гэта мае значэнне, які парадак яны ў? Гэта не мае значэння парадак. Важна тое, парадак Селектары класаў у вашай CSS, у табліцы стыляў. Томас Реймерс: гук добры? АЛЛИСОН Бухгольц-AU: Выдатна. Томас Реймерс: А потым мы будзем працягваць to-- АЛЛИСОН Бухгольц-AU: Што ж мы маем наступны? Я забыўся. О, мы проста маем прыклады. Але мы-то зрабіць тыя. Мы зрабілі прыклады на лета. Томас Реймерс: Мы атрымліваем хутка аб'яднаць селектары. АЛЛИСОН Бухгольц-AU: О, мы атрымліваем, каб аб'яднаць селектары. Томас Реймерс: Такім чынам, некаторыя прыкладаў у нас ёсць # Dog-- фунт, або хэштэг, або знак колькасці, або што-то Вы хочаце патэлефанаваць that-- рэзкім. АЛЛИСОН Бухгольц-AU: Sharp сабака. Томас Реймерс: Тады ў вас ёсць .pets. Што-то мае свой ідэнтыфікатар сабакі, ёсць толькі адна сабака на старонцы. Нешта ёсць ідэнтыфікатар кот, ёсць толькі адна кошка. Там можа быць шмат свойскай жывёлы на гэтай старонцы. Вось чаму мы далі, што класы. У вас ёсць прыклад р. А потым, таму адзін з Апошні прыклад, які гэта тое, што мы не казалі, тое, што адбываецца, калі вы аб'ядноўваеце іх. Так p.pets. Такім чынам, для таго, давайце вернемся да код і ўвесці another-- так. Такім чынам, вернемся сюды. АЛЛИСОН Бухгольц-AU: Я адчуваю, што гэта really-- як толькі праглядаючы прыклады сапраўды спосаб даведацца гэта. Дык вось, што мы робім. Томас Реймерс: Такім чынам, давайце ўявім, што мы толькі хачу, каб вылучыць тэкст 2, дакладна? Такім чынам, мы, безумоўна, не можа зрабіць гэта з ідэнтыфікатарам. Ну, мы маглі б зрабіць гэта з ID, але гэта не мае ID. Я мог бы дадаць адзін, але давайце прадставім, што я не хачу, каб дадаць адзін ці ўжо ёсць што-то яшчэ. Я не магу гэтага зрабіць з гэтым. Тэг, безумоўна, не адзіны, ці не так? І ні адзін не клас. Але вы можаце камбінаваць гэтыя рэчы. Скажам, мы хацелі зрабіць што-то якое прымяняецца толькі да рэчаў, ёсць клас спецыяльных і якія маюць клас даволі. Так што вы можаце зрабіць, гэта ў main.css, Вы можаце сказаць, давайце спачатку выдаліць гэта. Вы можаце камбінаваць іх. Такім чынам, вы можаце зрабіць .special. няма месца. Проста .special.pretty. Што гэта азначае, што нешта які з'яўляецца адначасова спецыяльных і прыгожа. Ці мае гэта сэнс? І калі мы ідзем сюды, што Вы будзеце бачыць гэтае правіла распаўсюджваецца толькі на Другі, які мае як з іх. І вы можаце зрабіць, што для многіх рэчаў. Вы можаце say-- давайце прыкідвацца, што я толькі хацеў каб рабіць рэчы, якія маюць клас прыгожую і які таксама пункт тэга. Так p.pretty. Давайце прадставім, што ў мяне было што-то вельмі на целе тэга. ОК? Я магу запусціць гэта, і я можна ўбачыць, што гэта ўсяго толькі мае намер звярнуцца ў рэчах, якія пункты з класам прыгожа. І вы можаце камбінаваць іх, у асноўным, як многія, як вы хочаце. Такім чынам, вы можаце проста пакласці іх разам. Ці мае гэта сэнс? АЛЛИСОН Бухгольц-AU: Так Гэты від з'яўляецца больш карысным, калі Томас казаў раней, можа быць, ў вас ёсць вельмі складаны сайт, і ў вас ужо ёсць шмат з гэтых правілаў, напісаных, і вам проста трэба, каб аб'яднаць два з раней. Як замест таго, каб пісаць увесь новы селектар і змены яго там, Вы можаце проста аб'яднаць іх там, дзе ён перакрывае. Томас Реймерс: Ці вы маглі б знайсці out-- часам ёсць адзін клас, які робіць колер шрыфта, як сіні, і ёсць яшчэ адзін клас, які робіць сіні фон. І гэта проста не будзе працаваць. Такім чынам, вы напісаць спецыяльны выпадак, дзе, like-- але калі ён мае і тое, што вы збіраюся зрабіць, гэта вы збіраецеся зрабіць гэта адзін гэты адценне сіняга і гэта адна гэтая іншая адценне сіняга. Дакладна? АЛЛИСОН Бухгольц-AU: Добра для тых відаў выключэнняў. Томас Реймерс: Так думаць аб праблемах якія могуць узнікнуць, калі вы аб'ядноўваеце іх. Крута. Такім чынам, вернемся да нашай прэзентацыі. АЛЛИСОН Бухгольц-AU: Мы ўжо амаль там. Томас Реймерс: І гэта спыніў падключэння. АЛЛИСОН Бухгольц-AU: О, няма. АЛЛИСОН Бухгольц-AU: CS на Office, Internet ідзе ўніз. О, іронія. Томас Реймерс: Так шчасце, мы можам ўявіць без інтэрнэту, я думаю ,, таму што ў нас усё слайды тут. Такім чынам, давайце пагаворым аб Адносіны тэгаў. АЛЛИСОН Бухгольц-AU: Дакладна. Так проста нейкая ісці ад таго, што сказаў Томас, гэта проста яшчэ адзін спосаб зрабіць гэта. Такім чынам, мы маем некаторы бацькоў селектары з селектарам дзяцей. Такім чынам, у гэтым прыкладзе тут, у нас ёсць некаторыя корпус з класам навігацыйнай панэлі, кнопак класа. Ах. Томас Реймерс: О, прабачце. АЛЛИСОН Бухгольц-AU: І у асноўным, тое, што гэта азначае, гэта выбраць усе дзеці, як усе гэтыя віды селектараў, у гэтым бацькоўскага селектара. І гэта толькі тыя, гэта калі-небудзь, каб звярнуцца. Я не ведаю, калі вы ёсць лепшы спосаб of-- Томас Реймерс: Так што я думаю, як думаць аб гэта памятаць перш, як мы накшталт як паставіць іх разам. І тады гэта азначае, што адзін элемент які адпавядае ўсім гэтым. Аб чым гэта кажа, я хачу, каб вы адпавядаць ўсе у some-- Я хачу Вам знайсці перамыкач. І затым на працягу, я хачу вам адпавядаць новыя рэчы. Дакладна? Такім чынам, у CSS, гэта ўсё аб свайго роду будучы ў стане адпавядаць гэтыя прадметы. І вы можаце паспрабаваць, каб адпавядаць элементы ў іншыя прадметы. Такім чынам, давайце на самай справе прыклад, і мы думаем, што будзе ўдакладніць. Такім чынам, давайце ўявім, што ў нас ёсць адмысловая, Спецыяльны даволі, што заўгодна. І тады мы маем спасылку, добра? Так што памятаеце, гэта спасылка. Гэта не збіраецца нікуды сыходзіць. І мы збіраемся даць яму спасылка клас, я думаю. Давайце яго на class-- даць мне ідэю. АЛЛИСОН Бухгольц-AU: Круто. Томас Реймерс: Coo-- давайце Ехаць клас даволі. Чаму не? АЛЛИСОН Бухгольц-AU: OK. Томас Реймерс: Так Прама зараз прыгожыя рэчы збіраемся зрабіць фон сіні, колер фону ласося. Гэта мае сэнс. І калі мы робім this-- АЛЛИСОН Бухгольц-AU: Вы хочаце, каб дадаць тэкст так гіперспасылка на самай справе з'яўляецца? Томас Реймерс: Гэта будзе добры выклік. АЛЛИСОН Бухгольц-AU: Таму што права Цяпер мы проста збіраемся нічога не атрымаеце. Томас Реймерс: Так што гэта спасылка. "Гэта звяно." Так, і гэта будзе каб быць яшчэ адно звяно. Давайце дамо яму клас "крута". Вы маеце рацыю. Крута. Так што цяпер мы збіраемся, каб захапіць гэта. Мы збіраемся кінуць адзін. У нас ёсць адзін у адмысловы тэг, і мы таксама будуць мець адзін у даволі тэга. І цяпер тое, што мы збіраемся зрабіць гэта, мы збіраемся зрабіць cool-- што мы хочам гэта рабіць? АЛЛИСОН Бухгольц-AU: Ці можам мы зрабіць яго больш? Томас Реймерс: Давайце дамо яму мяжы. АЛЛИСОН Бухгольц-AU: Мы маглі б мяжы. Томас Реймерс: Так. Так што мы збіраемся зрабіць што-то як, мяжа is-- і мы збіраюся растлумачыць усё гэта ў адну секунду. На дадзены момент-- АЛЛИСОН Бухгольц-AU: Для мадэлі скрынкі. Томас Реймерс: Але цяпер мы знаходзімся проста хачу, каб даць яму мяжы. Так што гэта азначае, што вы ўбачыце гэтыя спасылкі. І вы ўбачыце, што яны маюць Яны, як і выродлівыя чорныя палосы, якія гэта крута. АЛЛИСОН Бухгольц-AU: Наш сайт так даволі. Томас Реймерс: Так. Наш сайт з'яўляецца дзіўным. Такім чынам, гэтыя два спасылкі, і яны з'явяцца. Зараз давайце прадставім, што я толькі хацеў гэта зрабіць калі ён не быў у той які меў фон ласося. Так што памятаеце, што гэты мае вопыт ласося, таму што гэта класа даволі. Але мы хочам сказаць, што толькі астуджае якія знаходзяцца ў класе спецыяльнай, а не ў класе прыгожая, павінен мець гэтую мяжу. Ну, тое, што вы можаце зрабіць, гэта вы магу сказаць .special, прастору, .cool. І на што гэта робіць, калі вы думаеце, пра гэта, гэта ў асноўным кажуць, Добра, знайдзі мне ўсё што адпавядае асаблівым. Затым на працягу гэтых тэгаў, знайсці мне ўсё гэта выдатна. АЛЛИСОН Бухгольц-AU: Так што іншы спосаб што можа быць добра думаць пра гэта, вярнуць яго да С, гэтак жа, як ідэі вобласці. Таму, калі ў вас ёсць некаторыя Селектар, як тыя, што мы працуем для да гэтага, ўся ваша вэб-старонка, і ўсе вашы HTML знаходзіцца ў межах вашай бачнасці, ці не так? Але калі ў нас ёсць гэтыя бацька-нашчадак, гэта як калі б вы звужэння, дзе Вы хочаце ў пэўным месцы, як калі б, як мы глядзім у спецыфічная функцыя, а ўсёй нашай файла. АЎДЫТОРЫЯ: Так што з улікам гэтага, будзе гэта мела значэнне, калі б мы changed-- АЛЛИСОН Бухгольц-AU: парадак? АЎДЫТОРЫЯ: --Обслуживание клас у CSS у .cool, прастору, .special? АЛЛИСОН Бухгольц-AU: Ды таму, што тады хацеў бы сказаць, сфера яго усё, што мае прахалодны, а затым паглядзець на тое, has-- Я маю на ўвазе, як у дадзеным выпадку, Я не думаю, што гэта змяніла б яго. Томас Реймерс: Калі мы сказалі, што? Выбачайце. АЛЛИСОН Бухгольц-AU: Калі мы Сфера яму астыць, а затым глядзець на рэчы з адмысловага, было б тое ж самае, на самай справе. Томас Реймерс: Таму ён не будзе. АЛЛИСОН Бухгольц-AU: Гэта не будзе? О, ды добра. Я памыляюся. Томас Реймерс: Так прычына гэта different-- агульнай mistake-- гэта тое, што цяпер толькі спасылка прахалодным, ці не так? Я думаю, маё пытанне да вас, хлопцы, ёсць, што на гэтай старонцы будзе суправаджацца .cool? Ёсць два тэга тут, ці не так? Што гэта адно і гэта адно. І матч халаднавата. Нішто іншае не робіць. Так што, калі вы сказалі, .cool, прастору, .special, што вы збіраецеся сказаць, гэта у гэтых тэгах, што асаблівага? АЛЛИСОН Бухгольц-AU: Хм. Вось што it-- права. Таму што гэта, як толькі што-то тут. Томас Реймерс: Так што не абярэ нічога. АЛЛИСОН Бухгольц-AU: У той час як з адмысловае, мы ў гэтых тэгах тут. Томас Реймерс: тыя і тыя. АЎДЫТОРЫЯ: OK. Так што тыя тэгі з касая рыса? Томас Реймерс: Так. Ці мае гэта сэнс? Як гэта ў асноўным спрабуюць звузіць сферу прымянення. АЛЛИСОН Бухгольц-AU: Так. Я думаю, што гэта, верагодна, Самы просты спосаб думаць пра гэта. Томас Реймерс: Такім чынам мы знайшлі гэта, і Мы знайшлі гэты супалі асаблівым. А потым мы просім, у рамках гэтыя хлопцы, што гэта крута? І ў гэты, гэты крута. У гэтым, нічога не крута. Так што гэта толькі прыкмета, які застаецца. АЛЛИСОН Бухгольц-AU: У той час як крута толькі ў гэтых біркай там. Томас Реймерс: Цалкам дакладна. І тое, што асаблівага ў іх? Нічога. Цяпер тое, што я скажу, Калі няма месца, Вы пытаецеся, што гэта крута і special-- або тое, што даволі і спецыяльныя, ці не так? Калі вы кажаце, .special.pretty, што гэта гэтак жа, як .pretty.special. Таму што тое, што выдаленне прастору пытаюся, калі вы кажаце, .special, Вы пытаецеся, добра, тыя, якія з'яўляюцца асаблівымі? І тады тыя, якія з іх таксама даволі, што ж, граматычна, што спытаць, што гэта даволі, а затым з іх, што таксама асаблівага? Дакладна? Гэта адрозненне што ў нейкія ёсць. АЎДЫТОРЫЯ: OK. Томас Реймерс: Так. Высокі. Так што з выгляду then-- АЛЛИСОН Бухгольц-AU: Я думаю, што наша апошняя Справа ў тым, (у маскарадных брытанскім акцэнтам) Мадэль акно. Томас Реймерс: box-- [хіхікае] Мне падабаецца, як Элісан кажа, што. Так блокавую мадэль рэчы. АЛЛИСОН Бухгольц-AU: Проста скрынка, я буду ваша мадэль акно. Томас Реймерс: Такім чынам, давайце пагаворым пра гэта. Так што цяпер мы патрацілі шмат часу на размовы пра селектараў. У цяперашні час, вы, хлопцы, напэўна, як, майстры selectors-- вы ведаеце, Як дакладна выбраць кантэнт, які Вы хочаце, каб маніпуляваць на экране. Так што цяпер пытанне ў тым, як менавіта вы можаце працаваць з ім? Так што я думаю, самае асноўнае спосаб думаць аб тым, што , Ну, што менавіта з'яўляецца элементам CSS? Мы патрацілі шмат часу кажу, што тэг, або, што тое самае асноўнае прадстаўленне тэга? Добры спосаб думаць аб гэта значыць, што форма ласося? Якую форму, быццам бы, аранжавай-ружовы фон? АЎДЫТОРЫЯ: Гэта прастакутнік. Томас Реймерс: Гэта прастакутнік, праўда? АЛЛИСОН Бухгольц-AU: Быў не пытанне з падвохам. [Смех] Томас Реймерс: Не спрабуючы каб падмануць вас, хлопцы так позна. Такім чынам, мы маем гэты прастакутнік. І тэг р, ці не так? Так што дае нам добры перакананне, што пункт прадстаўляецца ў выглядзе прамавугольніка, у Прынамсі, у свядомасці браўзэр, які гэта. АЛЛИСОН Бухгольц-AU: Я маю на ўвазе, браўзэры звычайна маюць прамавугольнае, так што мае сэнс. Томас Реймерс: ідэя тут што ўсе тэгі ўнутры CSS прадстаўлены ў выглядзе прамавугольніка. І кожны прастакутнік мае чатыры частак у адпаведнасці з CSS, ОК? У вас ёсць фактычнае змест. Вось дзе тэкст ляжыць. АЛЛИСОН Бухгольц-AU: Можа быць, ваша карціна. Томас Реймерс: Так. Вы павінны водступы, які з'яўляецца проста нейкі прабел. Тады ў вас ёсць межы. І тады ў вас ёсць запас, які гэта белае прастору за межамі гэтага. Так што няма сэнсу для ўсіх, таму мы будзем казаць пра тое, што ні на секунду. Так прама тут, што мы збіраемся рабіць што мы збіраемся стварыць некаторыя дзівы, добра? Выбачайце мяне, пакуль я-- АЛЛИСОН Бухгольц-AU: Я адчуваю, як мы павінны паставіць мілы здымак ст. Томас Реймерс: Мы, безумоўна, павінна быць. АЛЛИСОН Бухгольц-AU: Я адчуваю, як усе маглі б выйграць ад мілы карціна, вось і ўсё. Томас Реймерс: Ці можам мы усе выгады ад a-- АЎДЫТОРЫЯ: Так, вядома. Томас Реймерс: Добра, крута. Такім чынам, мы павінны пакласці міла карцінка ў дзе-то. АЛЛИСОН Бухгольц-AU: Я адчуваю, як мілы зайчык можа быць карысна прама цяпер. Томас Реймерс: Вядома. АЛЛИСОН Бухгольц-AU: Канец тыдня. Ёсць што adorab-- Томас Реймерс: Як наконт кацяняці? АЛЛИСОН Бухгольц-AU: Кацяня працуе, таксама. Томас Реймерс: Круто, таму што ёсць месца для гэтага. Гэта называецца PlaceKitten. АЛЛИСОН Бухгольц-AU: Гэта выдатна. Томас Реймерс: Так. АЛЛИСОН Бухгольц-AU: Проста для, як, запаўняльнікі выявы на вэб-сайт. Томас Реймерс: Мм-хм. Там таксама PlacePuppy. І ёсць PlaceBacon. АЛЛИСОН Бухгольц-AU: PlaceBacon? У самай справе? Томас Реймерс: О, мы не ёсць доступ у Інтэрнэт тут. АЛЛИСОН Бухгольц-AU: [Стогны] Трагічная. Томас Реймерс: У адваротным выпадку, Я б паказаць вам, хлопцы, Як змясціць малюнка на вашым сайце. Мы збіраемся, каб паспрабаваць атрымаць гэта працу перш чым мы павінны ісці. Але цяпер, мы проста будзем казаць у колерах, то. Мы хочам пакласці фатаграфіі kittens-- АЛЛИСОН Бухгольц-AU: Мы зрабілі. Томас Реймерс: --Обслуживание Інтэрнэту ўніз на дадзены момант быцця. Такім чынам, мы маем дзве дзівы, і мы збіраюся даць ім два ідэнтыфікатараў. Мы збіраемся называць яго "Першы" і "другі". Так ID = "першы". І мы збіраемся, каб даць ім два колеру. Так як мы выбіраем што-то з ідэнтыфікатарам "першы"? АЛЛИСОН Бухгольц-AU: Dot або хэш? АЎДЫТОРЫЯ: Sharp. Томас Реймерс: Sharp, ідэальна. Sharp, хэш, незалежна we-- АЛЛИСОН Бухгольц-AU: Шмат рэчаў, каб назваць яго. Томас Реймерс: OK. Мы збіраемся сяліцца на хэштэгу, і гэта тое, што мы збіраемся пайсці з. ОК? АЛЛИСОН Бухгольц-AU: хэштэгу. Томас Реймерс: Так хэштэг ў першую чаргу. АЛЛИСОН Бухгольц-AU: Так Вы можаце цвіркалі seminar-- хэштэгу CSS, хэштэг халаднавата. Томас Реймерс: хэштэгу Awesomeness. АЛЛИСОН Бухгольц-AU: Хэштэгу Awesomeness, так. Томас Реймерс: OK. Такім чынам, мы маем "першы" і "другі". Такім чынам, спачатку мы будзем мець Колер фону ў чырвоны колер. АЛЛИСОН Бухгольц-AU: Ну, тоўстай кішкі. Томас Реймерс: Так. АЛЛИСОН Бухгольц-AU: Я буду тваім спот-праверкі. Томас Реймерс: Allison атрымаў мяне. Фон-колер blue-- Томас Реймерс: Фіялетавы! Томас Реймерс: Фіялетавы. АЛЛИСОН Бухгольц-AU: Так. Purple мой любімы колер, і мы не выкарыстоўвалі яго яшчэ. Томас Реймерс: Вайолет. АЛЛИСОН Бухгольц-AU: Вайолет. Гэта працуе. Томас Реймерс: Так што мы будзе мець два дзівы. Яны збіраюцца, каб быць цалкам пустым. Мы павінны, верагодна, нейкі тэкст. Такім чынам, "Першы" будзе "прывітанне". І "другі" будзе say-- АЛЛИСОН Бухгольц-AU: Да пабачэння. АЎДЫТОРЫЯ: - "свет". Добры дзень, да пабачэння. АЛЛИСОН Бухгольц-AU: я бачыў іх у канцэрце ў два тыдні. Томас Реймерс: The Beatles? АЛЛИСОН Бухгольц-AU: Для лікаў. Яны не так ужо вялікая. Мне гэта не падабаецца. Томас Реймерс: У нас ёсць "HELLO" і "да пабачэння". І зноў, CSS гэта проста шыкоўна, паколькі яна прызнае нашы колеру. Ня трэба нават асцерагаюцца, што яны існуюць. Яны робяць. АЛЛИСОН Бухгольц-AU: яны існуюць. Томас Реймерс: Так CSS Я думаю, мае 255 слоў, каб гаварыць аб колеры. Калі вы можаце думаць аб колеры па-за тыя 255, як я буду ўражаны. АЛЛИСОН Бухгольц-AU: Так. Я думаю, што вы, хлопцы, можа мець проста прыйсці ў адразу пасля. Томас Реймерс: Дык вось, Вы ўбачыце ў нас ёсць дзве скрынкі прама на вяршыні адзін аднаго, ці не так? Добры дзень і бывай. АЛЛИСОН Бухгольц-AU: Там няма месца паміж імі. Яны проста smooshed Права на верхняй частцы адзін аднаго. Томас Реймерс: Такім чынам, першае, Я думаю, мы павінны гаварыць аб з'яўляецца таксама давайце say-- так. Так CSS ўяўляе іх як свайго роду скрынь. І як скрынкі, яны маюць змест. І ўтрыманне прама зараз з'яўляецца свайго роду прывітанне ці да пабачэння і вось яно. ОК? Такім чынам, адна з першых рэчаў, якія вы можаце зрабіць, гэта вы можаце дадаць водступы. Запаўненне кажа, як шмат месца ён павінен выйсці на кожным боку. Так што давайце казаць, што я хачу сказаць, 10 пікселяў з кожнага боку. І я буду рассякаць, што ў секунду. АЛЛИСОН Бухгольц-AU: Усе гэтыя рэчы тут збіраюцца быць у асноўным у пікселях для астатняй часткі семінара. Вы будзеце бачыць, што яна мае некаторы прастору вакол яго, ці не так? Так што вы не бачыце тут ёсць гэтая нябачная роду дапаўненні на кожным боку, якая кажа, быццам бы, ОК, у вас ёсць скрыню content-- АЛЛИСОН Бухгольц-AU: Вы хочаце проста падцягнуць інспектаваць элемент? Томас Реймерс: Так, гэта добрая ідэя. АЛЛИСОН Бухгольц-AU: Акрамя таго, я лічу, што праверыць элемент добры спосаб каб высветліць, калі нешта адбываецца няправільна, што-то нечаканае, аглядаючы тэгі і бачачы, што гэта як перапісваюцца карысна. Томас Реймерс: Так што я не ўпэўнены, калі вы, хлопцы, можаце ўбачыць гэты колер. Ці можаце вы? Вы ўбачыце гэта абіўка ад выгляду беражкі. І тады вы ўбачыце фактычнае ўтрыманне ў сіні, ці не так? Дык вось вельмі Асновы блокавай мадэлі. Вы павінны змест. Тады ў вас ёсць дадатак. Зала: А чаму б табе проста выкарыстоўваць рамку ў the-- АЛЛИСОН Бухгольц-AU: Дакладна. Таму што гэта проста выбару элемент прама цяпер. Томас Реймерс: Так. Іншыя рэчы. Такім чынам, давайце пагаворым аб тым, што Каманда абіўка на секунду. Такім чынам, у CSS, вымярэння павінны мець прылада. Таму спачатку трэба суму. Такім чынам, у гэтым выпадку, мы ўжо казалі 10. І тады наступны мы ўжо казалі гэта Піксэл, пікс. Іншыя з іх вы маглі б мець з'яўляюцца рэчы, як сантыметры, цалі. Вы можаце рабіць рэчы, як, што складае 10 цаляў? І гэта будзе смешна. АЛЛИСОН Бухгольц-AU: О, хлопчык. АЎДЫТОРЫЯ: Вау. Томас і Элісан: Так. Томас Реймерс: Так вось усё абіўка. Я збіраюся вярнуцца да пікселяў. АЛЛИСОН Бухгольц-AU: Пікселі як правіла, быць, як, стандарту. Калі вы глядзіце на шмат вэб-сайтаў, яны ў асноўным працуюць у пікселях. Томас Реймерс: Так што вы збіраецеся, каб убачыць альбо pixels-- іншыя тыя, якія вы бачыце гэта іх, які з'яўляецца адным ЭМ роўная вышыні шрыфта якія вы выкарыстоўваеце. АЛЛИСОН Бухгольц-AU: мм. Томас Реймерс: Гэта добры спосаб сказаць, як я хачу, столькі ж месца, як мой шрыфт прымае. АЛЛИСОН Бухгольц-AU: Не ведаю, што. Вы даведаецеся нешта новае кожны дзень. Томас Реймерс: Ёсць шмат вымярэнняў у CS. Я прапаную вам паглядзець іх. Для ўсіх вашых выпадках, я думаю, пікселяў павінна быць дастаткова. І яны таксама, што Вы будзеце бачыць У большасці прыкладаў зрабіць у рэжыме онлайн. Такім чынам, мы пакінуць яго ў пікселях. Вы таксама можаце, я павінен say-- так абіўка ўсталёўвае ўсе пракладак. Вы таксама можаце зрабіць нешта накшталт "Абіўка-топ" проста set-- АЛЛИСОН Бухгольц-AU: Можа быць, мы атрымаем наш "прывітанне" назад. Томас Реймерс: --to проста ўсталяваць абіўка зверху і нічога больш. Такім чынам, чатыры каманды абіўка-топ, абіўка дном, абіўка-налева, і абіўка правам. АЛЛИСОН Бухгольц-AU: Гэтак жа, як можна было б чакаць скрынцы. Томас Реймерс: Так. Нішто не занадта вар'ят там. Ці мае гэта сэнс? Так што гэта абіўка. Я збіраюся ўсталяваць усе у Пракладкі вярнуцца да 10. А потым я збіраюся перайсці на мяжы. Так што мяжа з'яўляецца мяжа гэта дзіўна каманда. Яна займае то тры рэчы адразу. Так-першае, гэта, як вялікі Вы хачу, каб гэта было як вымярэнне. Зноў жа, я толькі з дапамогай пікселяў. І апошняе, што я Варта дадаць, вымярэнням гэта адна рэч, якая не патрэбны блок 0. Гэта на самай справе няслушна каб даць 0 блок, таму 0 0 па цаляў, пікселы, сантыметры, што заўгодна. Гэта ўсяго толькі азначае, 0, ці не так? Такім чынам, спачатку вы даеце яму вымярэнне. Тады вы даеце яму стыль. Так што я збіраюся сказаць, "цвёрды". І мы будзем казаць аб тым, што гэта значыць. І тады, нарэшце, вы даеце яму колер. Так што я збіраюся сказаць "чорныя". І ўсе гэтыя рэчы, якія мы калі- зараз бачыў, па стылі, акрамя, але мы пагаворым пра гэта. Такім чынам, вы, хлопцы, бачылі вымярэнняў, і вы бачылі кветак. І тое, што адбываецца, мы атрымаем гэта прыемна чорная рамка вакол яго, ці не так? Вы, хлопцы, паглядзім, як мы зрабілі гэта? АЎДЫТОРЫЯ: Так. Томас Реймерс: Круто. Дык што ж гэта? Такім чынам, перш за ўсё, гэта адзін піксель. Гэта відавочна дастаткова, ці не так? Маўляў, яго таўшчыня ў адзін піксель. Ці гэта будзе адзін піксель, але я павялічана, так што гэта крыху больш чым гэта. АЛЛИСОН Бухгольц-AU: І ў нас ёсць гэта смешна дазволам тэлевізара. Томас Реймерс: Так. Вы можаце зрабіць гэта больш, менш, што заўгодна. Дык вось два пікселя мяжы. Вы ўбачыце, што гэта ў два разы тоўшчы. Наступная рэч, якую вы павінны колер. Гэта не цікава. Я не хачу сказаць аб тым, што, на самай справе. АЛЛИСОН Бухгольц-AU: Але стыль можа быць толькі крыху цікавей. Томас Реймерс: Так. Так стылі, ёсць нешматлікія што я бачу звычайна выкарыстоўваецца. Спачатку адзін Цвёрды, побач сваіх пункцірнай, а апошні ў апраўдаліся. І тут ўсеяная. Вы ўбачыце, што яны куча кропак, ці не так? Добры спосаб роду атрымаць добры мяжу адбываецца, працяжнік таксама даволі папулярныя. АЛЛИСОН Бухгольц-AU: І тады, вядома, я упэўнены, што ёсць шмат іншых стылі, якія вы можаце атрымаць. І ў нас ёсць вялікі набор спасылкі ў канцы для вас, хлопцы да выгляду прагледзець і паглядзець на больш прахалоднай CSS. Томас Реймерс: А потым І апошняе, што мы будзем казаць пра Мадэлі скрынка сапраўды хутка. Ну, а далей мяжы, гэтак жа, як дапаўненні, у вас таксама ёсць рэчы, як мяжа злева, межы правоў, межы-топ, мяжы знізу, якія дазваляюць каб дабрацца да пэўнага мяжы. Так вось проста мяжа левай вызначаны. Ці значыць гэта, мае сэнс? АЛЛИСОН Бухгольц-AU: Гэта выдатна спосаб падкрэсліць тое, ці дадаць Лініі паміж рознымі элементамі. Томас Реймерс: Цалкам дакладна. Дык вось наша мяжа. І апошняе ў запас. Як абіўка маржа ў Акрамя гэта не within-- АЛЛИСОН Бухгольц-AU: Гэта не вакол элемента але на самой справе па ўсёй акно, у якім мы былі бачыць. Томас Реймерс: Так. Элісан сказаў, што гэта выдатна. Гэта не так, як, у Вашых Элемент, гэта вакол усёй скрынкі. Гэта азначае, што такія рэчы, як фон не ўжываць да яго. І гэта ў асноўным кажа, як я нічога не хачу у гэтым шмат месца для мяне. Бо тут мы маем маржа 10 пікселяў. Так што нічога на працягу 10 пікселяў павінны быць побач са мной. Нешта накшталт яго прасторай, але выгляд не так. Дык вось вельмі Асновы блокавай мадэлі. Ці мае гэта сэнс? Крута, крута. АЛЛИСОН Бухгольц-AU: Awesome. Так што цяпер я думаю, што мы проста нашы класныя рэсурсы што мы будзем прымаць вас, хлопцы праз вельмі хутка. І мы будзем actually-- добра, у нас ёсць Інтэрнэт яшчэ? Томас Реймерс: Давайце ўбачыць, калі я магу адкрыць up-- дазвольце мне ўбачыць, калі я можа атрымаць доступ у Інтэрнэт хутка у той час як Элісан кажа ні пра што Элісан хоча гаварыць пра гэта. АЛЛИСОН Бухгольц-AU: Так basically-- я не ведаю, што яшчэ я магу сказаць на дадзены момант. Але вось некаторыя сапраўды добрыя рэсурсы. Гэта тыя, якія Томас і я выкарыстаў і што мы на самай справе выкарыстоўваецца ў падрыхтоўчую для гэтага. W3Schools гэта той, які вам Хлопцы павінны былі бачыць раней. Мы рэкамендуем яго для шмат рэчаў, з дапамогай CSS. Я ведаю, я рэкамендую яго мой раздзел ўвесь час. Адзін з найвялікшых рэчаў у тым, што яго дазваляе роду важдацца з CSS і ўбачыць змены імгненна ў гэтым, як, Прыгожы выгляд Двухмесны вокны, што ён мае. Такім чынам, вы не павінны турбавацца аб стварэнне ўласнага вэб-старонку, або стварэнне віртуальны хост ў вашым лакальным прыладзе і лакальны хост, і атрымліваць усе, што рэчы працаваць. Яны ўбудаваныя прама на старонцы. І яна мае такіх мала ўрокі, якія вы можаце прайсці, каб даведацца Больш падрабязна пра селектараў, або даведацца аб маніпуляванні шрыфта або фону, ці малюнкі. І ў вас ёсць гэтыя імгненныя вынікі, якія вы ня трэба рабіць нічога Іншае падрыхтоўчую працу для. Так што я люблю W3Schools. Гэта неверагодна. Хіба гэта працуе? Томас Реймерс: Так. Не, гэта не так. Хочаце, каб я паспрабаваў і перазагрузіць кампутар? Ці мы хочам to-- АЛЛИСОН Бухгольц-AU: Я маю на ўвазе, Ну, гэта таксама будзе онлайн. Усе слайды будуць он-лайн. Так што я проста настойліва рэкамендую рабіць гэта. Гэта выдатна, як толькі як шпаргалку. Гэта проста ўсё асноўнае каманды, якія ў вас ёсць. Гэта выдатна, калі ты першы пачынаючы свой вэб-сайт. Таму што, магчыма, вы не хачу трапіць у усё рэальны вашывы пяшчаны Дызайн-цяжкі матэрыял. Вам проста трэба адфарматаваць яго такім чынам, што-то мае сэнс і волю зрабіць для час. І калі вы сапраўды хочаце каб патрапіць у яго, я ведаю, Гэта, як, адзін з Любыя спасылкі Tomas-х гадоў. Мы выкарыстоўвалі яго падрыхтоўчы, і гэта неверагодна. Гэта распрацоўніка Mozilla. Томас Реймерс: Так Mozilla з'яўляюцца людзі, якія робяць Firefox. І гэта толькі іх ўласная распрацоўшчык спасылка, якая я думаю, гэта выдатна. І ў гэтага ёсць выдатны Спіс рэсурсаў. Такім чынам, мы have-- АЛЛИСОН Бухгольц-AU: А потым Апошняе заўвагу калі вы спрабуеце стварыць свой вэб-сайт, чэрпаць натхненне з рэчаў што вы думаеце, даволі. Праверка элемента, праверкі зыходнага кода можа быць супер карысна за тое, каб высветліць, як стыль вашага ўласнага сайта. Часта я адчуваю сябе лепш Дарэчы, акрамя эксперыментаў, проста глядзець на рэчы, якія даволі. Я лічу, што гэта вельмі цяжка проста выгляд канструкцыі рэчы па сваім меркаванні, асабліва ў пачатку. Таму, калі ласка, паглядзіце на сайтах што вам спадабаецца глядзець. Высветліце, што робіць іх прывабнымі для вас. І то не саромейцеся паспрабаваць паўтарыць гэта. Томас Реймерс: Дакладна. Нават як вэб-сайтаў як гэта, вы можаце ўбачыць ёсць вызначана DIV на самым версе. І тады ў вас ёсць іншы DIV ўнутры Тут, што ВУС Awesomeness. І тады ў вас ёсць куча спасылак тут. Калі вы на самой справе проста праверыць элементы, вы можаце сартаваць пачынаюць бачыць тое, што пішуць сайты выглядаць, і як я магу узнавіць, што калі б захацеў. Ці мае гэта сэнс? Так у нас ёсць толькі тры хвіліны засталося. Так пытанні? Любы з іх? Так. АЎДЫТОРЫЯ: Для колеру прастакутнік, як бы вы have--, калі вы не хочаце яго адбываецца па ўсёй старонцы, можа Вы зрабілі гэта ісці праз толькі палова старонкі або проста тэкст? Томас Реймерс: Так, абсалютна. Такім чынам, дазвольце мне ўбачыць на самай справе. У мяне ёсць дзве ідэі. Такім чынам, перш за ўсё, вы Таксама можна выкарыстоўваць адсоткаў. АЎДЫТОРЫЯ: У самай справе? АЛЛИСОН Бухгольц-AU: Так-то каб паглядзець гэта адноснае пазіцыянаванне. Гэта тое, што мы не было часу, каб патрапіць, але гэта нешта я вызначана Рэкамендуем вы, хлопцы, праверыць. Томас Реймерс: Так адсоткаў. І паглядзець, як мы зрабілі гэта толькі 50% ад шырыні? АЛЛИСОН Бухгольц-AU: Калі вы на самай справе ведаем колькасць пікселяў, Вы можаце быць больш дакладнымі, што шлях. Вы можаце важдацца з ім. Але 50%. Калі б мы былі змяніць памер браўзэр, было б зрабіць яго менш. Томас Реймерс: Ну, гэта у асноўным 50% прама зараз, я думаю. Гэта 50%, а затым маржа быў дададзены да гэтага. CSS мае шмат дзівацтваў. Так што цяпер гэта 50% ад шырыні старонкі. Але памятайце, што ў вас ёсць 10 пікселяў знялі з кожнага боку. Так што калі вы, каб перайсці, што супраць левы край браўзэры то гэта будзе выглядаць 50%. Зноў жа, як я ўжо сказаў, CSS можа будзе шмат варажбы і-праверкі. Як, ты думаеш, што нешта будзе паводзіць сябе ў адзін бок, але ён паводзіць сябе зусім па-іншаму. АЛЛИСОН Бухгольц-AU: І вы проста разумнейшы, і вы проста атрымаеце лепш інтуіцыя яго, як вы рухацца далей. Томас Реймерс: І гэта становіцца ўсё горш і горш. Так што гэта на самай справе проста гонкі. АЛЛИСОН Бухгольц-AU: Гэта супер абнадзейлівымі. Мы хочам, каб падабаецца CSS. Томас Реймерс: CSS з'яўляецца дзіўным. Памятаеце пра гэта. Іншыя пытанні? АЛЛИСОН Бухгольц-AU: адна справа. Што-небудзь яшчэ? Крута. Томас Реймерс: Awesome. АЛЛИСОН Бухгольц-AU: Ну, калі вы хлопцы, ёсць якія-небудзь пытанні пазней, мы заўсёды даступныя як звычайна. Вы, верагодна, ўбачыце некаторыя З нас, для канчатковых праектаў і, безумоўна, на Hackathon. Томас Реймерс: Цалкам дакладна. І на кірмашы. АЛЛИСОН Бухгольц-AU: І на кірмашы. Ох. Томас Реймерс: Паглядзіце наперад да праглядзець увесь awesome-- АЛЛИСОН Бухгольц-AU: Мы ўбачым, усе вашыя дзіўныя вэб-сайтаў што будзе прыгожа. Томас Реймерс: Вы можаце заўсёды см, як, сайты хто меў, быццам бы, добра CSS, а затым як тыя, хто не спрабаваў рабіць CSS. АЛЛИСОН Бухгольц-AU: Акрамя таго, іншая рэч, яшчэ адна рэч, каб паглядзець у стартуе з. Так Bootstrap гэта выдатна. Томас Реймерс: Google, што калі you-- АЛЛИСОН Бухгольц-AU: Google гэта. Гэта неверагодна. Вы будзеце любіць яго. І зараз, калі ў вас ёсць Базавую разуменне CSS, гэта зробіць нашмат больш сэнсу. Высокі. Дзякуй, хлопцы. Томас Реймерс: Дзякуй так шмат.