>> [Музички]
ALLISON BUCHHOLTZ-о: Значи ние сме во основа, само оди
да ви даде преглед на CSS, затоа што знаеме
дека таа не била затрупана во сите делови.
И ние навистина сакате да бидете сигурни дека ќе момци имаат оваа алатка ви стои на располагање,
бидејќи тој ја има способноста да се направи вашиот веб-сајтови да изгледа многу поубав.
>> И ако сте изградба на веб страната, а потоа веројатно сакате да се направи тоа доста.
Мислам, вие не треба да се, но јас би го препорачуваме. [Се смее]
Ако сакате корисниците да го користат, можеби сакате да се направи тоа малку [нечујни] направи.
Значи, ние ќе се обидеме и да ви даде само некои основни алатки и разбирање,
така што кога ќе излезат и да сте истражување работи во врска CSS,
тоа не е целосна глупост, како CSS понекогаш да биде.
>> TOMAS REIMERS: Да.
Алисон тоа го рече прилично добро.
Па претпоставувам дека првото нешто што го треба да почне со е она што е CSS?
Значи CSS е неверојатна.
CSS--
>> ALLISON BUCHHOLTZ-о: Тоа е името на нашиот семинар.
>> TOMAS REIMERS: Да.
Тоа е навистина важно ви е јасно дека од тогаш.
Само ако се земе еден нешто, тоа е дека ако CSS неверојатна.
Две е CSS се залага за Cascading Style Sheets.
Така, на неговото јадро, CSS е стил на состојба, што значи
тоа ви овозможува да стил веб-страница.
И тогаш што значи тоа, тоа е начин за да додадете стил на вашиот веб-сајтови.
Значи со стил, ние значи сè тоа не е structural--
па работи како бои, позадина слики, граници, како, баласт,
маржи.
Ќе зборуваме за она што сите тоа значи дека во својот тим.
>> Значи ние сме само нема напред и отвори и на оние во gedit.
Значи ова е index.html.
И ова е main.css.
Значи main.css има ништо.
ALLISON BUCHHOLTZ-о: Нема стил досега.
TOMAS REIMERS: Никој.
И како што ќе видите, тоа е навистина грди сајт.
ALLISON BUCHHOLTZ-о: Тоа е едноставно.
TOMAS REIMERS: Да.
Да, тоа не е грдо, тоа е само минималистички.
А потоа, тука имаме index.html.
И така за брзо повториме на HTML, Алисон,
сакате само да се зборува за оваа страница?
>> ALLISON BUCHHOLTZ-о: Да.
Значи очигледно, ние си имаме HTML таг, кој само имиња HTML датотека.
Ние имаме насловот тука, со CSS Awesomeness, which-- ако се вратиме.
Каде е тоа?
>> TOMAS REIMERS: О.
Да, може да се види.
ALLISON BUCHHOLTZ-о: И ќе забележите дека насловот
е ова јазиче заглавието право тука.
И тогаш "Здраво, свет!" е текстот што имаме само
прикажување на веб- страница, која is-- се вратиш назад.
Назад.
Која е само во нашето тело here-- на обичен текст.
Исто така, една работа да известување, ако се погледне тука,
Томас вклучен овие две од нашите слајд.
Па се додека ги имате сите три од овие, ти си во ред.
Тие можат да бидат во било која цел тие сакаат.
Она што е најбитно е само тоа имате секоја од овие три работи.
>> TOMAS REIMERS: Кул.
Додадете тип doc?
ALLISON BUCHHOLTZ-о: Да.
TOMAS REIMERS: Да.
Кул.
ALLISON BUCHHOLTZ-о: Очигледно, мојата микрофони не ми се допаѓа.
TOMAS REIMERS: Ах, да ни даде само сек додека Алисон прекинувачи од нејзиниот микрофон.
Па је.
Значи имаме нашата главна страница.
Тоа е вид на unstyled.
Ние не треба многу.
Ние само треба во основа текстот.
Имаме стилот на состојба.
Имаме титулата.
Па само голи коски компоненти направи веб страната.
>> Па од таму, ајде се зборува за она CSS е
и она што изгледа како и сите за тоа.
Значи за that--
ALLISON BUCHHOLTZ-о: Назад на слајдови.
TOMAS REIMERS: Врати се на слајдови.
И Алисон може да го преземе.
>> ALLISON BUCHHOLTZ-о: Ву.
OK.
Значи во вашиот CSS датотека, сте ќе треба
многу од овие работи вика селектори.
Тоа само ќе биде основа на вашиот CSS датотека.
Тоа е само случува да биде многу, многу од овие.
Значи селектор.
Ова е само општа анатомија.
Ние сме случува да поминат низ примери, затоа што ако никогаш момци
гледав мојот дел, се чувствувам како работи во апстрактни
навистина не дава никаква смисла.
Тоа секогаш помага да видите примери.
>> Значи имаме некои селектор.
Тоа се случува да биде некои идентификатор за она што го сакаме стил да се применува.
И тогаш може да има било збир на правила и вредности.
Значи селектори што ќе може да се види може да биде нешто како тело,
или став со P, или заглавие, или што,
она што го сакате вашиот HTML тагови да биде.
>> Значи во овој случај, имаме тело.
И ние имаме некои правило, што тоа одговара
на она што вашиот стил се применува.
Значи во овој случај, имаме боја на позадината и фонтот тежина.
Значи ова ќе се промени на позадината на ништо
во рамките на секое тело, ознака на нашиот HTML датотека.
И тоа се случува да се даде го ова светло сина вредност.
>> Значи, тоа се случува да се направи позадина светло сина.
И тогаш ништо во тело е случува да имаат задебелен фонт тежина.
Така, тоа е само ќе треба да храбар сите наши текст.
И ова е само еден селектор.
Но, вие би можеле да имаат многу многу од овие.
И како што си оди за да се покаже подоцна, малку повеќе во начинот на
која работи и повеќе примери таму.
Нешто што сакате да додадете?
>> TOMAS REIMERS: Не
Алисон го добив.
Ние сме само ќе се намали до еден пример тука на нашиот пример сајт.
Значи, да всушност ја искористам оваа.
Тоа е совршен.
Па јас сум само ќе копирате и залепите тоа право во нашите main.css датотека.
И јас одам да го спаси.
И тогаш ќе го стартувате.
Значи страна на белешка, еден од повеќето фрустрирачки работи
е ако не го зачувате датотеката, и тогаш ти, како, вчитување на страницата,
и како, зошто не е промената се случува?
Тоа се случува.
Значи тука се виде дека ние направивме нашиот веб-страница светло сина позадина
а некои со задебелен фонт текст.
>> Јас, исто така треба да се спомене, ако момци имаат прашања во врска со ништо
ние сме прави, Ве молиме слободно да не запре и да побарате од нас.
Ние сме целосно подготвени на полето прашања.
>> ALLISON BUCHHOLTZ-о: Очигледно, со CSS, се гради врз себе.
Значи, ако едно нешто не да има смисла сега, ние
не сакате тоа да ви блато одредување подоцна.
>> TOMAS REIMERS: Па ајде вид на сецира ова.
Значи сакате да започнете со селекторот тука?
>> ALLISON BUCHHOLTZ-о: Да.
Како што велеше порано, тело е само нашиот селектор тука.
Значи, ако се вратиме во текот на нашата index-- ах.
>> TOMAS REIMERS: Кој јас само се затворени.
Дај ми една секунда.
Значи датотека, отворено, index.html.
ALLISON BUCHHOLTZ-о: Кул.
Значи ако забележите дека тука, ние имаат овие тела тагови, нели?
Значи селекторот само одговара на тагови кои ние зборуваме за.
Значи тело токму тука.
Значи она што си ти што зборуваш е everything-- можеме да се вратиме?
Би сакал да можам само како допир на екранот.
Тоа би било многу поладна.
>> Значи ништо во тие тело тагови, која ја видовме
беше само, како, на текст, а телото во целина
се однесува, како, на позадината.
Ако некогаш сакате да ги промена на позадината,
кој се случува да биде во телото таг.
Само има овие правила се применуваат на нив.
>> Значи, ако ние требаше да одат на index.html and-- всушност,
може да имаме нешто надвор од телото?
Ако имавме, како, на подножјето или нешто, тоа нема да се применува тоа.
Но, ништо во овие тела тагови се случува
да бидат погодени од овој орган, Селекторот дека ние сме направени.
Значи, ако сте во ситуација да напишеш нешто друго there--
>> TOMAS REIMERS: Да се ​​вози тој дом.
Значи, ако имавме div-- па тоа е само уште еден таг може да имате.
Одам да го затворите.
Или да се направи овој став.
Значи, стр залага за став.
И во тој став.
И тогаш ќе речам: "Ова е текстот."
Кул.
И тогаш Јас направив ова правило се однесува на став, наместо на телото.
Ќе видиме како тоа се однесува само на новоформираната став, десно,
не целата работа.
Дали тоа има смисла?
>> ALLISON BUCHHOLTZ-о: Значи ова е за сите тело,
но сега нашите селектор само одговара на став.
Значи ние само треба храбар и сина за конкретниот став,
бидејќи тоа е единственото нешто кој е затворен во рамките на стр таг.
>> TOMAS REIMERS: Дали тоа има смисла вид за тоа како работите капсулирало други работи?
ALLISON BUCHHOLTZ-о: Исто така, само да се каже, како на пример, еден од најдобрите начини
навистина да се чувствуваме удобно со CSS е само да ги правите нештата како ова,
само да го пробате.
Тоа е многу едноставна да напишеш нешто надвор, хит освежување, и да видиме што се случува.
И како и со повеќето CS, експериментирање често може да
да доведе до многу подобро интуитивен разбирање.
Дури и повеќе, па од нас само, како, да разговараат со вас.
>> TOMAS REIMERS: Апсолутно 100% се согласуваат на таа точка.
Значи, ако ние се вратиме на ова, ајде да почнеме разгледуваа токму она што овие две направи.
Значи имаме две правила за ова.
Значи првиот е боја на позадината.
И ќе видите дека ние сме го постави еднаква вредност, светло сина.
>> Значи во CSS, CSS е вид на многу лабава за тоа како
си дозволи да се дефинира боја.
Значи, можете да ги дефинираат по име.
Вие исто така може да се направи нешто како "црвените".
И тогаш, ако ние се вратиме на ова, ќе видите дека позадината е црвена.
Вие исто така може да се добие really-- јас мислите може да се добие прилично креативни со ова,
не може да ви?
>> ALLISON BUCHHOLTZ-о: Јас мислам дека може да се користи hex.
Не може да ви?
>> TOMAS REIMERS: Да.
Значи, можете да го користите хексадецимален.
Но, јас сум размислување за името-мудрец.
Не се таму?
ALLISON BUCHHOLTZ-о: Можете да направите неколку.
Доста како и повеќето бои што може name-- како, мислам лосос е еден.
>> TOMAS REIMERS: Ние ќе се обиде лосос.
ALLISON BUCHHOLTZ-о: Јас мислам резеда е таму.
TOMAS REIMERS: Да.
Види?
Така може да се добие прилично креативни.
>> ALLISON BUCHHOLTZ-о: Вие може да се добие прилично креативни.
Како, ако може да се мисли на Име на боја, тоа е веројатно во таму.
Ако навистина сакате парична казна детали, можете да се обратите хексадецимален.
>> TOMAS REIMERS: Да.
Значи хексадецимален.
Ако вие момци се сеќава на ова назад од вашиот стар PSET, слика опорави,
вие момци мораше да се справи со овие хексадецимален вредности.
И вид да повториме што е тоа, хексадецимален има три вредности складирани во него.
Така, тоа е во групи од два чекори.
Првите две претставуваат црвена вредност.
Вториот претставува зелените вредност.
И последната е сино?
>> Значи ФФ се случува да претставуваат хексадецимално 255.
Па имате 255 црвени, 255 зелена и 0 сина боја.
И вредности се движат од 0 до 255.
>> ПУБЛИКАТА: Токму така.
Значи во суштина, ние може да го бара на интернет за било која боја што го сакаме,
и да ги идентификува всушност познат спектар на бои комбо,
а потоа да го стави во?
ALLISON BUCHHOLTZ-о: Токму така.
Значи имаш доста целосна контрола во текот на бои што сакате во рамките на CSS.
Дали ние ќе зборуваме за слики во позадина подоцна?
Или сакаме да го направите тоа?
>> TOMAS REIMERS: Да.
Апсолутно.
Значи прво, само за да се покаже дека црвена и зелена боја е жолта.
И ако ви треба некој помош наоѓање ова,
може Google нешто како "боја берач".
ALLISON BUCHHOLTZ-о: Ах, тоа е толку добро.
Сакам боја берач.
>> TOMAS REIMERS: colorpicker.com е добар пример.
И тука, ќе видите дека имате целосна Фотошоп-како боја берач.
>> ALLISON BUCHHOLTZ-о: MM-хм.
Исто така, интересни нешта сте може да генерира шеми на бои
така што ќе не мора, како на пример, да се судри бои.
TOMAS REIMERS: И потоа тука е хексадецимален вредност до тука.
Па секогаш можете да ги најдете на интернет во основа места за да се добие хексадецимален вредност од.
Тоа не е вид на кој само, како, ние види боите на светот во бројки.
Тоа е повеќе што одат онлајн и да се најде она што боја сакаме,
и тогаш земи бројот ќе биде намален.
Затоа што тоа е само навистина лесно начин на упатување на работите во CS.
>> ALLISON BUCHHOLTZ-о: И тогаш има also--
Заборавам точното име на сајт.
Но, таму е дефинитивно, јас мислам, нешто од Adobe
кој генерира шеми на бои за вас, која е навистина кул, затоа што
definitely-- тоа е понекогаш тешко да дознаам,
ох, ако сакате да ја користите оваа боја, што би можело да биде уште една корисна
да се користи на други места на мојот сајт да се, како, направи убаво и смирување.
>> TOMAS REIMERS: Алисон зборуваме за еден од Adobe Kuler нарекува, си мислам.
Тоа е К-У-Л-Е-Р.
ALLISON BUCHHOLTZ-о: Јас мислам така.
Јас сум прилично сигурен дека тоа е еден.
>> TOMAS REIMERS: Мој омилен има секогаш бил шема на бои дизајнер.
>> ALLISON BUCHHOLTZ-о: Ooh.
>> TOMAS REIMERS: Кој е now--
>> ALLISON BUCHHOLTZ-о: Ах, ова е убава.
>> TOMAS REIMERS: А ти во основа може да се каже, како,
Сакам три бои едни до други.
И тогаш ајде да направиме нешто убаво.
И тогаш ќе може да се добие еден пример на она што би можело да изгледа.
И тогаш ако ти лебдиш над било кој од нив, тоа ви дава хексадецимален вредност.
>> Па само како добар начин да се започне размислува за боја шеми
или што боите во веб страната, би можеле да одат добро заедно.
Затоа што тоа може да биде изненадувачки не е толку лесно да ги собереш како што мислите.
И тогаш другите кул работа Јас секогаш сум го нашол за овој сајт
е ако го погоди Примери, тоа ќе покаже она пример веб-сајт
може да изгледа како употреба на таа шема на бои.
Како и да е.
>> Назад кон вистинските CSS.
ALLISON BUCHHOLTZ-о: Но, очигледно, ние Знаете овие препораки би можеле да бидат корисни.
TOMAS REIMERS: Не, тие дефинитивно може да биде корисно.
Значи Второто правило, драга?
>> ALLISON BUCHHOLTZ-о: Да.
Второто правило е само одговараат на нашите фонт.
Значи фонт тежина е само вид of-- па тежината ќе
биде ако сакате само, како, нормален или, како, потенка фонтови,
или во овој случај, како, со задебелени букви.
Заборавам.
Што е ако си сакал it-- е таму потенка од само еден, како, нормално?
TOMAS REIMERS: Јас всушност не знам дали има потенки еден.
ALLISON BUCHHOLTZ-о: го заборавам.
Значи фонт тежина ние обично само го користите за задебелени букви.
Ако сакате да се добие навистина во тоа, ние ќе ви покаже.
W3Schools има сите различни работи што можете да направите за фонтови.
Но, во основа, ако некогаш сакаш да се промени нешто во врска со фонтот,
таа секогаш ќе биде, како, font-нешто.
Значи тоа ќе биде како, font-family ако сте се обидува да го промени вистинскиот тип.
Тоа ќе биде font-style ако сакам да го направам како курзив,
или искосен или какво ли не.
Или, пак, фонт-боја, ако сакавме да го промени тоа.
>> TOMAS REIMERS: То.
Така може да го промени тоа.
И вид на само за да повториме сега, па можете да
види дека имаме селекторот тука.
Имаме овие големи загради.
И тогаш имаме правила одвоени од semicolons.
Дали тоа има смисла?
Да?
Кул.
Значи, ако тоа е good--
>> ALLISON BUCHHOLTZ-о: назад.
TOMAS REIMERS: Ајде да зборуваме конкретно за каков вид на селектори имаме.
Оти ​​ние сме во моментов вид на само покажа тагови.
Но, вие момци може да се види тоа веродостојно.
Велат дека имате два става на страница и можете
сакате да бидете во можност да стил еден, но не од друга страна,
не само сакаат да се ограничи мора да се користи на различни реалните HTML
тагови да им даде различни стилови.
>> Значи, имаме три основни видови на селектори.
ALLISON BUCHHOLTZ-о: Да.
Значи имаме ознака, што е она што ние сме биле зборува за што во моментов.
Значи тоа е вид на како вашето тело или стр.
И тогаш имаме класа, која е кога ќе се дефинираат во нашата CSS датотека,
таа секогаш ќе биде точка, она што сакаш името на вашата класа да биде.
И ова може да се однесува на повеќе нешта.
>> Велат дека имаш пет параграфи и две од три од нив
треба да се стилизирана исти, ќе се применуваат на класата на него.
И ова е само начинот на кој го правиме тоа.
Ќе ви дадам еден пример на каде што ова, всушност, се појавува.
Но, ако сте имале можеби некој таг Па, по него, ќе напише,
класа еднакво на она што класи сакате да се применуваат за тоа.
Значи она што класа селектори кои сакаме да се применува овој специфичен став,
ние само да го напишете вака.
Се разбира, мислам пример ќе многу повеќе конкретни направи.
>> Другиот имаме е проект, кој го означи
со хашиш, или фунта, или хаштагот.
TOMAS REIMERS: Octothorpe.
ALLISON BUCHHOLTZ-о: Octothorpe.
Која работи, исто така.
А таа една навистина треба да биде уникатен.
Тие треба да се однесуваат само на една работа на вашата страница.
Значи без разлика дали тоа е конкретен став, или некој предмет во листата, или што,
ова треба да биде уникатен.
И во истиот начин на кој ние само велат, како, класа = "класа на точност 1 class2"
тоа само може да биде проект на она што го имаме.
TOMAS REIMERS: Да.
Значи, да дефинитивно се зборува за примери тука.
И јас сум само ќе се нурне исправениот грб во кодот.
Па ајде да погледнеме на нашиот HTML.
И така ние во моментов имаме еден став.
Ова е текстот.
Јас сум само ќе го менува тоа. "Ова е текстот 1."
И тогаш ние ќе треба да имаат "Ова е текстот 2."
>> ALLISON BUCHHOLTZ-о: Вториот услов.
TOMAS REIMERS: То.
Затоа сега имаме "Ова е текстот 2", нели?
И ние си оди за да се види дека ако ние ја превчитате страницата, она што ние ќе треба да се најде
е ние ќе find--
ALLISON BUCHHOLTZ-о: Ooh.
TOMAS REIMERS: Да.
Ние сме случува да се најде "Ова е текст 1 "и" Ова е текстот 2. "
>> ALLISON BUCHHOLTZ-о: А надвор прекрасна жолта боја.
>> TOMAS REIMERS: И ќе видите дека нашиот селектор во моментов,
кој се однесува на стр, или ставови, влијае и на нив,
бидејќи и двете од нив се задоволат под услов тие да се и двете на стр таг.
Тоа го прави вкупно смисла.
Значи, прашањето е, добро, што ако сакаме да добиваат само еден?
Значи, токму како Алисон велеше, имаме две други начини да го направите тоа.
Одам да се започне со ид.
>> ALLISON BUCHHOLTZ-о: Да почнеме со ид.
>> TOMAS REIMERS: И двете од нив се атрибути.
Значи постојат атрибути во HTML.
И она што се е нешто што ќе ги додадете
во ознаката што е одвоени од името на ознаката.
Така може да имаат повеќе атрибути.
Да?
>> ALLISON BUCHHOLTZ-о: Јас бев само ќе да се каже, од вашиот пример од PSET 7,
ако некој од вас се обидат да се усогласат работи во центарот,
што може да се користи "Текст усогласат = центарот".
И вие тоа го забележал веројатно треба да се центрирани
Вашиот текст или вашата лента за навигација.
Значи тоа е само исто така атрибут кои може да бидат запознаени со.
TOMAS REIMERS: Има еден куп на атрибути кои ќе видите.
Да.
Како добра референца за да PSET 7.
Имаме проект.
Вие исто така може да има класа, вакви работи.
Еден таг може да имаат многу атрибути.
Значи, почнувајќи со проект, ајде да се преправаме дека сакаат да имаат проект of-- Не знам.
Ние ќе го наречеме посебно, поради ова, ние сме
случува да се направи храбар, и потенцирам, и сеедно.
ALLISON BUCHHOLTZ-о: Тоа е ќе бидам супер посебно.
TOMAS REIMERS: Значи ова еден, имаме проект посебно.
Значи начин за да го изберете тоа, тогаш, е во main.css, наместо да имаат P ознака,
да го направите #special, во ред?
И тоа го одбира работа со проект посебно.
Дали тоа се направи смисла на сите?
ПУБЛИКАТА: Да.
TOMAS REIMERS: Кул.
Па сега ако одиме назад, ние ќе see-- Whoops.
Да.
Ние ќе видиме дека тоа само го избира оној со посебен проект.
Да?
Звучи кул.
Да.
>> ПУБЛИКАТА: нешто може да има припишуваат на двете класа и ид?
>> TOMAS REIMERS: Да.
ПУБЛИКАТА: Добро.
И тогаш што се случува ако потоа да ви даде тоа некои правила во CSS кои се во конфликт?
TOMAS REIMERS: Апсолутно.
Ние сме дефинитивно ќе да се зборува за тоа.
Значи, што точно се добива во, можете исто така да имаат часови.
Значи, да се преправаат дека имав три параграфи и јас
сакаше да стил на првата две, но не и на третото место.
Па, на својата прва идеја може да биде, добро, јас може само да се даде на втората ид.
Но, вие не може, затоа лична карта, токму како Алисон велеше,
мора да биде уникатен.
>> Така, наместо на еден проект, она што да го користите е можете да го користите класа.
И class-- што овозможува можете да направите е да се каже во основа,
оваа припаѓа, како дел од група.
Во овој случај, нашата група се нарекува Специјални.
И она што се случува да се направи тоа, тогаш е ние ќе се say-- наместо фунтата,
ние сме случува да се користи точка.
Во ред?
И ќе забележите дека фунтата и точка постојат само во рамките на CSS датотека,
не е во рамките на HTML.
ALLISON BUCHHOLTZ-о: Да.
Важна дистинкција.
>> TOMAS REIMERS: Имам имаше толку многу борба,
бидејќи јас се стави хаш во HTML и а потоа само се чувствува глупаво за долго време.
Погледнете како тоа го избира двата оние со таа класа?
Кул.
>> Сега, работите можат да имаат повеќе часови.
Да речеме дека јас сакав да го направи првиот две имаат позадина на жолта
а вториот две имаат на боја на сина боја.
OK.
Јас навистина не знам зошто јас би сакаш да го направиш тоа, но можам.
>> ALLISON BUCHHOLTZ-о: не може да препорачува тоа за вашиот веб-сајт.
Но, за нашите цели, тоа ќе го направи.
>> TOMAS REIMERS: Тоа не е добра шема на бои.
ALLISON BUCHHOLTZ-о: Па, жолта и сина се мојата гимназија бои.
Не знам, иако.
TOMAS REIMERS: Алисон висок училиште имаше голема шема на бои.
[Смеа]
Па тогаш што можеме да го наречеме ова е да ја наречеме this-- така имаме посебни
и ние имаме убава.
Предлагам, за ова, можете да користите многу повеќе описни имиња.
ALLISON BUCHHOLTZ-о: Да, јас би ова го нарекуваат, како, жолта или сина.
>> TOMAS REIMERS: Ние не сме навистина прави вистинска веб-сајт,
која е причината зошто ние не го правиме тоа.
Но, ако навистина имаше вистинска веб-сајт,
би можеле да имаат, како, член насловот, член содржина, првиот збор,
такви работи, кои им овозможуваат на да биде многу описни.
Овие се навистина само како променливи.
Тие треба да биде именуван на начин каде можеш, like-- да, како што се.
Перфект.
>> Значи, боја на позадина.
И тогаш ние ќе треба да say-- па начин да ја менуваат бојата е само "боја".
И ние си оди за да се направи тоа сина боја.
Тоа е кул.
Така, сега имаме првите две имаат посебни.
Следна еден се случува да имаат "class = убава."
ALLISON BUCHHOLTZ-о: И тогаш ќе сакате да го додадете "прилично" до средината еден.
TOMAS REIMERS: То.
И тогаш до средината еден, за да додадете "убава", што ќе се случи
е едноставно мора простор.
Значи класа атрибут е разделени со празно место листа
Од сите класи кои се однесуваат на таа ознака.
Во ред?
Тоа не е како овој припаѓа на некој вид на посебна класа наречена
"Посебен, простор, убава."
Таа му припаѓа на две classes-- посебна и убава.
Да?
Кул.
>> А потоа, ако се погледне што се случува, ние сме
ќе се види дека првиот човек мора жолта позадина, црн текст.
Второ one--
>> ALLISON BUCHHOLTZ-о: --has задебелени букви жолта позадина со сини текст.
И нашите последното токму има сини текст кој ние се доверени.
>> TOMAS REIMERS: Кул?
Како селектори работа?
Прекрасно.
>> ALLISON BUCHHOLTZ-о: Дали сакаме да зборува за конфликтот сега и тогаш?
>> TOMAS REIMERS: Па је.
Апсолутно.
Значи она што се случува ако имаат конфликт, нели?
Да се ​​преправам првиот поставува нешто like--
ALLISON BUCHHOLTZ-о: Можеби оваа менува позадина?
TOMAS REIMERS: Да.
Значи ние си оди за да се направи "прилично" промена на позадината на лосос.
ALLISON BUCHHOLTZ-о: Ти си само со сите големи бои денес, Томас.
TOMAS REIMERS: Да.
Затоа што дознав што можам го користите лосос како вистинска боја.
Значи ние сме само ќе треба да го направите тоа.
Јас исто така мислам Зајдисонце е вистинска боја.
ПУБЛИКАТА: Зајдисонце е вистинска боја?
ALLISON BUCHHOLTZ-о: Ајде да ја обидат.
TOMAS REIMERS: По ова демо само затоа што во случај да мензи до,
Не сакам да се дебагирање.
Па знаеме лосос е вистинска боја.
Така било претпоставки за што ќе се случи?
>> ALLISON BUCHHOLTZ-о: Секоја идеја?
>> ПУБЛИКАТА: [нечујни].
>> TOMAS REIMERS: Да.
Значи ли тоа токму во право.
Во суштина, тоа трае со последните правило дека му била дадена.
>> ALLISON BUCHHOLTZ-о: Значи ова е каде каскадни стапува на сила.
>> TOMAS REIMERS: Значи се сеќавам како се имал тоа Cascading Style Sheets?
Значи со тоа, ние вид на значело дека имаме еден куп правила
што се однесуваат на врвот едни на други, и тие, исто така, може да се замени едни со други.
>> ALLISON BUCHHOLTZ-о: Значи што е на дното
ќе ги избегне она што е на врвот.
Вие би можеле да имаат правила кои целосно се негира нешто пред тоа.
Тоа е и причината зошто сакате да биде внимателни кога сте стил,
па вие не сте создавање на правила кои сте само целосно изигрување.
>> TOMAS REIMERS: Или можеби сакате да запишете врз неа правила.
>> ALLISON BUCHHOLTZ-о: Или можеби го правите.
Да.
>> TOMAS REIMERS: Прави имате класа, која се однесува на повеќето нешта,
но да речеме дека сакате да ја промените боја на црвено и фонтот позадина
тежина на храбри за повеќето нешта, но за еден,
вие само сакате бојата на позадина да бидат црвени, но сакате сите други
својства, може да се направи нешто како "font-weight = нормална"
кои потоа ќе го вратите дека задебелени букви промени.
Да?
Повторно, најдобар начин, мислам дека Алисон рече дека тоа е само пракса.
>> ALLISON BUCHHOLTZ-о: експериментирање.
>> TOMAS REIMERS: пракса, пракса, пракса, и експеримент.
Знам многу луѓе кои мислат CSS е само многу претпоставка-и-проверка
на крајот на денот, каде што ако што сакате да направите something-- како,
ќе имаат груба идеја, но се уште најверојатно треба
да го пробате да бидете сигурни дека знаете како изгледа.
>> ПУБЛИКАТА: Кога сте примена класи, повеќе од еден
на истиот став или дел, тоа не
оглед на тоа што за да може да се напишете ги во наводници?
>> TOMAS REIMERS: Не, воопшто не.
>> ALLISON BUCHHOLTZ-о: Она што е важно е на редот во вашиот CSS стилот на состојба.
ПУБЛИКАТА: Може ли да го повтори прашањето?
TOMAS REIMERS: О.
ALLISON BUCHHOLTZ-о: Во текот на класа, кога си даваат часови
до нешто во HTML, дали тоа е важно што тие се во ред?
Тоа не е важно ред.
Она што е важно е редот на класа селектори во рамките на вашиот CSS,
во рамките на вашиот стил на состојба.
>> TOMAS REIMERS: Звукот е добар?
>> ALLISON BUCHHOLTZ-о: стара.
>> TOMAS REIMERS: И потоа ние ќе продолжиме да се to--
ALLISON BUCHHOLTZ-о: Што треба следно?
Заборавам.
О, ние само треба примери.
Но, ние сме вид на направи оние.
Ние го направивме примери на мува.
>> TOMAS REIMERS: Ние се да комбинираат селектори наскоро.
>> ALLISON BUCHHOLTZ-о: Ах, ние се да се комбинираат селектори.
TOMAS REIMERS: Па некои примери е тоа што имаме
# Dog-- фунти, или хаштагот, или octothorpe, или што
сакате да се јавите that-- остар.
>> ALLISON BUCHHOLTZ-о: Остро куче.
>> TOMAS REIMERS: Потоа мора .pets.
Нешто има проект на куче, има само еден кучето на оваа страница.
Нешто има проект на мачка, има само една мачка.
Може да има многу домашни миленичиња на оваа страница.
Тоа е причината зошто ние дадовме дека часовите.
Имате еден пример на стр.
И тогаш па една од последниот пример, кој
е нешто што не се зборуваше за, е она што се случува кога ќе ги комбинирате.
Значи p.pets.
>> Па за тоа, ајде да се вратиме на код и да се воведе another-- је.
Значи повторно тука.
>> ALLISON BUCHHOLTZ-о: Јас се чувствувам како тоа е really--
како само гледајќи низ примери е навистина начин да се научи ова.
Значи тоа е она што го правиме.
>> TOMAS REIMERS: Значи, да се преправаме дека само сакаат да одберете текст 2, нели?
Значи ние дефинитивно не може да го правам тоа со ид.
Па, ние би можеле да го направите тоа со проект, но тоа не мора ид.
Можев да додадете еден, но, ајде да се преправам дека јас не сакате да го додадете еден
или веќе има нешто друго.
Не можам да го правам тоа со тоа.
Етикетата е дефинитивно не е единствена, нели?
Ниту, пак, е класа.
Но, може да се комбинираат овие работи.
Да речеме дека сакал да направи нешто кој се однесува само на она што е
имаат посебна класа и кои имаат класа убава.
>> Така што можете да направите е во main.css, може да се каже, ајде прво избришете оваа.
Можете да ги комбинирате овие.
Така што можете да направите .special.
Нема повеќе простор.
Само .special.pretty.
Што значи тоа е нешто кој е и посебна и убава.
Дали тоа има смисла?
И ако ние одиме тука, она што си оди за да се види
е ова правило важи само за втората, која има и од нив.
И можете да го стори тоа за многу работи.
Можете да say-- ајде преправам дека само сакаше
да ги правите нештата кои имаат класа прилично и кои се исто така став таг.
Значи p.pretty.
Да се ​​преправам дека сум имала нешто симпатично таг тело.
Во ред?
Јас може да работи ова и јас може да се види дека тоа е само
ќе се применуваат за да се работите кои се ставовите со класа убава.
И можете да ги комбинирате овие, Во основа, колку што сакате.
Значи, вие само може да ги стави заедно.
Дали тоа има смисла?
ALLISON BUCHHOLTZ-о: Значи овој вид на е покорисно
кога, Томас велеше порано, можеби имаш многу комплицирана веб-сајт,
а вие веќе имаат многу на овие правила е напишана,
и вие само треба да се се комбинираат две од порано.
Како наместо на пишување целина Новиот селектор и тоа се менува таму,
вие само може да се комбинираат нив, каде што се преклопуваат.
>> TOMAS REIMERS: Или можете може да се најдат out-- понекогаш
има една класа која прави бојата на фонтот е како сина,
и таму е друга класа која прави сина позадина.
И тоа само нема да работи.
Значи ти напишам посебен случај, каде што, like-- но ако тоа има и, она што си
случува да направите е да си оди за да направи ова е еден оваа сенка на сино
а овој тоа друг сенка на сино.
Зарем не?
>> ALLISON BUCHHOLTZ-о: Добра за оние видови на исклучоци.
TOMAS REIMERS: Така да размислуваат за проблемите
кои би можеле да се појават кога ќе ги комбинирате.
Кул.
Значи назад кон нашата презентација.
ALLISON BUCHHOLTZ-о: Ние сме речиси таму.
TOMAS REIMERS: И тоа престана поврзување.
ALLISON BUCHHOLTZ-о: О, не.
ALLISON BUCHHOLTZ-о: ЦС на канцеларија, интернет оди надолу.
О, иронија.
>> TOMAS REIMERS: Значи среќа, можеме да претстави без интернет, претпоставувам,
бидејќи имаме сите слајдови тука.
Па ајде да зборуваме за односот на тагови.
ALLISON BUCHHOLTZ-о: Токму така.
Па само вид на оди надвор од она што Томас рече:
ова е само уште еден начин да го направи тоа.
Значи имаме некои родители Селектор на селекторот дете.
Значи во овој пример тука, имаме некои тело со класа статистика лента, класа копче.
Ах.
>> TOMAS REIMERS: Ох, извинете.
>> ALLISON BUCHHOLTZ-о: А Во суштина, она што ова значи
е да изберете сите деца, како и сите овие видови на селектори,
во рамките на овој селектор родител.
И оние кои се единствените тоа некогаш ќе се однесуваат на.
Јас не знам дали имаат подобар начин of--
TOMAS REIMERS: Па јас погоди на начин да се мисли
за ова е пред се сеќавам како ние вид на како да се стави заедно.
И тогаш тоа значи дека еден елемент која одговара на сите од нив.
Што ова значи, само вели, јас бара од вас да одговара сето
во рамките some-- Сакам можете да најдете селектор.
И тогаш во рамките на тоа, сакам да одговараат на нови работи.
Зарем не?
Значи во CSS, тоа е за сите вид на да бидат во можност да одговара на овие предмети.
И може да се обидете да одговара предмети во рамките на други предмети.
>> Значи, да всушност прават на пример, и мислиме дека ќе се разјаснат.
Значи, да се преправаме дека имаат посебни, специјални убава, сеедно.
И тогаш имаме линк, во ред?
Значи запомнете, е линк.
Тоа нема да оди никаде.
И ние си оди за да го даде класа линк, претпоставувам.
Ајде да го даде class-- ми даде една идеја.
ALLISON BUCHHOLTZ-о: Кул.
TOMAS REIMERS: Coo-- ајде оди тоа била класна убава.
Зошто да не?
>> ALLISON BUCHHOLTZ-о: Добро.
TOMAS REIMERS: Значи сега доста работи
се случува да се направи позадина сина, боја на позадината на лосос.
Тоа го прави смисла.
И ако се направи this--
>> ALLISON BUCHHOLTZ-о: Дали сакате да додадете текст
па хиперврска всушност се појавува?
TOMAS REIMERS: Тоа ќе биде добар повик.
ALLISON BUCHHOLTZ-о: Оти право сега ние сме само ќе добиете ништо.
TOMAS REIMERS: Значи ова е линк.
"Ова е линкот."
О, и тоа се случува да биде уште една алка.
Ајде да се даде на класа "кул".
Во право си.
Кул.
Па сега ние си оди за да го имате овој.
Одиме да се фрли еден.
Ние имаме еден во посебна ознака, и ние, исто така,
се случува да имаат еден во прилично таг.
И сега што ние ќе треба да направите е да сме случува да се направи cool--
што сакаме тоа да се направи?
ALLISON BUCHHOLTZ-о: Можеме ли да го направи поголеми?
TOMAS REIMERS: Да се ​​даде граница.
ALLISON BUCHHOLTZ-о: Можевме граница.
TOMAS REIMERS: Да.
Значи ние се случува да се направи нешто како, на границата is-- и ние сме
одам да ги објасни сето ова во една секунда.
За now--
>> ALLISON BUCHHOLTZ и АУ: До кутија модел.
TOMAS REIMERS: Но, за сега, ние сме само ќе го даде на границата.
Па што значи тоа е ти си ќе се види овие линкови.
И си оди за да се види дека тие имаат овие, како, грда црна граници, кои
е кул.
>> ALLISON BUCHHOLTZ-о: Нашата веб страна е толку убава.
>> TOMAS REIMERS: Да.
Нашата веб страна е неверојатна.
Значи, овие две се врски, и тие се појавуваат.
Сега ајде да се преправам дека само сакав да го направите тоа
ако тоа не е во нешто кои имаа позадината на лосос.
Значи не заборавајте дека оваа има позадина на лосос,
бидејќи тоа е од класа убава.
>> Но, ние сакаме да се каже дека само лади кои се во посебна класа, а не во класа
убава, треба да го имаат тоа граница.
Па, она што можете да направите е да сте може да се каже, .special, просторот, .cool.
И она што го прави, кога мислите за тоа, е тоа е во основа велејќи:
Добро, да ме најдете се што која одговара на посебен.
Потоа во рамките на тие ознаки, најдете мене сè што е кул.
ALLISON BUCHHOLTZ-о: Значи друг начин тоа може да биде добро да се размислува за тоа,
доведување назад кон Ц, е исто како и идејата за опсегот.
Значи, кога имаш некои селектор, како оние
дека ние сме биле работат за пред тоа, целата своја веб-страница, сите на HTML
е во рамките на опсегот, нели?
Но, кога ги имаме овие родител-дете односи,
тоа е како да сте стеснување каде сте во потрага на одредено место,
како, како, ние сме во потрага во специфична функција, наместо
на целата наша датотека.
ПУБЛИКАТА: Така да со тоа во предвид, би го имаат важно ако ние имавме changed--
ALLISON BUCHHOLTZ-о: Редоследот?
ПУБЛИКАТА: --the класа во CSS да .cool, просторот, .special?
ALLISON BUCHHOLTZ-о: Да, затоа што тогаш
би рекол, опсег до сè што е кул,
и потоа да се погледне во она што has-- Мислам, како, во овој случај,
Јас не мислам дека тоа ќе се промени тоа.
>> TOMAS REIMERS: Ако ние го рече тоа?
Жал ми е.
>> ALLISON BUCHHOLTZ и АУ: Доколку ние обем да се излади, а потоа
изгледа за работите од посебен, тоа нема да биде ист, всушност.
>> TOMAS REIMERS: Па тоа не ќе биде.
>> ALLISON BUCHHOLTZ-о: Тоа не би?
Ох, ох добро.
Јас сум во право.
>> TOMAS REIMERS: Па причината тоа е different-- заеднички mistake--
е дека во моментов само врската има кул, нели?
Претпоставувам дека моето прашање за вас момци е, она што на оваа страница се исти со .cool?
Постојат два тагови тука, нели?
Кој е овој еден и оваа.
И одговара кул.
Ништо друго не го прави тоа.
Значи, ако ви рече, .cool, простор, .special, она што ви се случува да кажам е дека,
во рамките на овие тагови, што е посебен?
ALLISON BUCHHOLTZ-о: Хм.
Тоа е она што it-- право.
Затоа што тоа е како само нешто тука.
>> TOMAS REIMERS: Значи го избира ништо.
>> ALLISON BUCHHOLTZ-о: со оглед на тоа посебно, ние сме во овие тагови тука.
>> TOMAS REIMERS: Оние а оние.
ПУБЛИКАТА: Добро.
Значи оние ознаки, коса црта?
>> TOMAS REIMERS: Да.
Дали тоа има смисла?
Како тоа е во основа се обидува да го намали обемот.
ALLISON BUCHHOLTZ-о: Да.
Мислам дека тоа е веројатно Најлесен начин да се размислува за тоа.
>> TOMAS REIMERS: Така најдовме ова, и го најдовме овој и посебен исти.
И тогаш ние бараме, во рамките на овие момци, она што е интересно?
И кај оваа, ова ми е кул.
Во рамките на овој еден, ништо не е кул.
Значи ова е само ознака што останува.
>> ALLISON BUCHHOLTZ-о: Додека кул е само во рамките на овие тагови таму.
TOMAS REIMERS: Токму така.
И, што е посебна во рамките на тие?
Ништо.
Сега, она што можам да го кажам е ако немало простор,
Прашувате што е кул и special-- или она што е убава и посебно, нели?
Ако велиш .special.pretty, тоа е исто како .pretty.special.
>> Затоа што она отстранување на простор е прашува дали, кога ќе се каже .special,
бараме, во ред, кои од нив се специјално?
И тогаш на оние, кои од нив се исто така доста,
која е иста, граматически, што се прашуваат, што е убава,
а потоа и на оние, што е исто така посебен?
Зарем не?
Тоа е разликата на она што е во рамките на она што е.
ПУБЛИКАТА: Добро.
TOMAS REIMERS: Да.
Прекрасно.
Така да со тоа во предвид then--
>> ALLISON BUCHHOLTZ-о: Мислам дека нашиот последен Работата е (во фенси британски акцент)
кутија модел.
>> TOMAS REIMERS: На box-- [chuckles] Јас многу го сакам начинот на кој Алисон вели дека.
Значи кутија модел работа.
>> ALLISON BUCHHOLTZ-о: Само треба кутија, јас ќе бидам вашиот кутија модел.
TOMAS REIMERS: Па ајде да зборуваме за тоа.
Значи ние сега сум поминал многу време зборуваме за селектори.
До сега, вие момци се веројатно, како, мајстори на selectors-- што знаете,
како да точно одберете ја содржината што сакате да се манипулира на вашиот екран.
>> Па сега прашањето е, како точно може да ви го манипулираат?
Па претпоставувам дека повеќето основни начин да се размислува за тоа
е, добро, она што точно е елемент во CSS?
Ние си трошат многу време зборува за, она што е ознака,
или она што е најосновна застапеност на таг?
>> А добар начин да се размислува за Односно, што е форма лосос?
Што форма е, како, на лосос боја позадина?
>> ПУБЛИКАТА: Тоа е правоаголник.
>> TOMAS REIMERS: Тоа е правоаголник, нели?
>> ALLISON BUCHHOLTZ-о: Не е трик прашање.
[Смеа]
>> TOMAS REIMERS: Не се обидува да ви трик момци ова доцна.
Значи имаме овој правоаголник.
И таг е p, нели?
Така што ни дава добра верување дека ставот
е претставен како правоаголник, во барем во умот на прелистувачот, која
тоа е.
>> ALLISON BUCHHOLTZ-о: Мислам, тоа што се правоаголни,
па тоа го прави смисла.
>> TOMAS REIMERS: Идејата тука е дека сите тагови во рамките на CSS
се претставени како правоаголник.
И секој правоаголник има четири делови според CSS, во ред?
Имате вистински содржина.
Тоа е каде што текстот лежи.
>> ALLISON BUCHHOLTZ-о: Можеби вашата слика.
>> TOMAS REIMERS: Да.
Имате баласт, која е само некој вид на бел простор.
Потоа имате граница.
И тогаш ќе имаат маргина, што е бел простор надвор од тоа.
Значи тоа не прави никаква смисла за никого, па ние сме
одам да се зборува за тоа за една секунда.
Па токму тука, она што се случува да се направи е ние си оди за да се создаде некои divs, во ред?
Извинете, додека I--
>> ALLISON BUCHHOLTZ-о: Се чувствувам допаѓа ние треба да се стави една симпатична слика.
>> TOMAS REIMERS: Ние дефинитивно треба.
>> ALLISON BUCHHOLTZ-о: Се чувствувам како сите
би можеле да имаат корист од една симпатична слика, е за сите.
>> TOMAS REIMERS: Можеме сите имаат корист од a--
>> ПУБЛИКАТА: Да, секако.
TOMAS REIMERS: Добро, кул.
Значи ние треба да се стави една симпатична слика некаде.
ALLISON BUCHHOLTZ-о: Се чувствувам како симпатична зајаче може да биде корисно во моментов.
TOMAS REIMERS: Секако.
ALLISON BUCHHOLTZ-о: крајот на неделата.
Имаат нешто adorab--
>> TOMAS REIMERS: Како рунда маче?
>> ALLISON BUCHHOLTZ-о: Маче работи, исто така.
>> TOMAS REIMERS: Кул, бидејќи има место за тоа.
Таа се вика PlaceKitten.
ALLISON BUCHHOLTZ-о: Тоа е одлично.
TOMAS REIMERS: Да.
ALLISON BUCHHOLTZ-о: Само за, како, случаеви слики во вашиот веб-сајт.
TOMAS REIMERS: MM-хм.
Постои, исто така PlacePuppy.
И таму е PlaceBacon.
>> ALLISON BUCHHOLTZ-о: PlaceBacon?
Навистина?
>> TOMAS REIMERS: Ах, ние не имаат пристап до интернет тука.
>> ALLISON BUCHHOLTZ-о: [мислења]
Трагично.
TOMAS REIMERS: Во спротивно, Јас ќе ви покаже момци
како да се стави слики во вашиот веб-сајт.
Ние ќе се обиде да го добивате ова работа пред да треба да одиме.
Но, за сега, ние сме само одам да се зборува во бои тогаш.
Ние сакаме да се стави слики од kittens--
>> ALLISON BUCHHOLTZ-о: Ние го сторивме.
>> TOMAS REIMERS: --the интернет надолу за момент се.
Значи имаме две divs, и ние сме ќе им даде две IDS.
Одиме да го наречеме "Првиот" и "секунда".
Значи id = "прва".
И ние си оди за да им даде две бои.
Така како ние да изберете нешто со лична карта "прв"?
ALLISON BUCHHOLTZ-о: Дот или хаш?
ПУБЛИКАТА: Остро.
TOMAS REIMERS: Остро, совршена.
Шарп, хашиш, што we--
>> ALLISON BUCHHOLTZ-о: Многу нешта да го нарекуваат.
>> TOMAS REIMERS: Добро.
Ние ќе се населат на хаштагот, и тоа е она што ние ќе треба да одам со.
Во ред?
>> ALLISON BUCHHOLTZ-о: хаштагот.
>> TOMAS REIMERS: Значи хаштагот во прв план.
>> ALLISON BUCHHOLTZ-о: Значи можете да чуруликам на seminar--
хаштагот CSS, хаштагот кул.
TOMAS REIMERS: hashtag awesomeness.
ALLISON BUCHHOLTZ-о: Хаштагот awesomeness, да.
TOMAS REIMERS: Добро.
Значи имаме "првиот" и "секунда".
Значи прво, ние ќе треба да имаат боја на позадината на црвено.
ALLISON BUCHHOLTZ-о: Ух, дебелото црево.
TOMAS REIMERS: То.
ALLISON BUCHHOLTZ-о: Јас ќе ти биде место-Проверка на.
TOMAS REIMERS: Алисон ме.
Позадина во боја на blue--
>> TOMAS REIMERS: Виолетова!
>> TOMAS REIMERS: Виолетова.
ALLISON BUCHHOLTZ-о: Да.
Мојата омилена боја Виолетова е, и ние не го користат уште.
>> TOMAS REIMERS: Виолетова.
ALLISON BUCHHOLTZ-о: Виолетова.
Тоа функционира.
>> TOMAS REIMERS: Значи ние сме има две divs.
Тие се случува да биде сосема празен.
Ние веројатно ќе треба да имаат некој текст.
Така, "првиот" ќе биде "ЗДРАВО".
И "вториот" ќе say--
>> ALLISON BUCHHOLTZ-о: Збогум.
>> ПУБЛИКАТА: - "светот".
Здраво, збогум.
ALLISON BUCHHOLTZ-о: Го видов нив во концерт друга недела.
TOMAS REIMERS: Битлси?
ALLISON BUCHHOLTZ-о: За reals.
Тие не си тоа одлично.
Не ми се допаѓа.
>> TOMAS REIMERS: Имаме "Hello" и "збогум".
И повторно, CSS е само страшни, бидејќи ги признава нашиот бои.
Не треба да се дури и се загрижени дека тие постојат.
Тие го прават.
>> ALLISON BUCHHOLTZ-о: тие постојат.
>> TOMAS REIMERS: Значи CSS мислам дека има 255 зборови да се зборува за боја.
Ако може да мисли на боја надвор оние 255, како, јас ќе бидете импресионирани.
ALLISON BUCHHOLTZ-о: Да.
Мислам дека вие момци можат да имаат само што дојде во право после.
>> TOMAS REIMERS: Па еве, ќе видите имаме две кутии
право на врвот на едни со други, така?
Здраво и збогум.
>> ALLISON BUCHHOLTZ-о: Нема простор помеѓу.
Тие се само smooshed право на врвот на еден со друг.
>> TOMAS REIMERS: Така првото нешто Претпоставувам дека треба да се зборува за
е ајде, исто така, say-- је.
Значи CSS ќе ги претставува како еден вид на кутии.
И како кутии, тие имаат содржина.
И содржината во моментов е вид на Здраво или збогум и тоа е тоа.
Во ред?
>> Значи, една од првите работи што може да направите е да можете да додадете баласт.
Соочи вели дека колку простор што треба да ја напушти на секоја страна.
Па да речеме Сакам да кажам 10 точки на секоја страна.
И јас ќе го сецира дека во една секунда.
ALLISON BUCHHOLTZ-о: Сите овие работи тука
се ќе биде во најголем дел во пиксели за остатокот од семинарот.
Ти си оди за да се види што има простор околу неа, нели?
Значи она што не го гледам тука е има овој невидлив вид на баласт
на секоја страна, во која се вели, како, Добро, имаш кутија на content--
>> ALLISON BUCHHOLTZ-о: Дали сакате само да се повлече на увид елемент?
>> TOMAS REIMERS: Да, тоа е добра идеја.
ALLISON BUCHHOLTZ-о: Исто така, јас се наоѓам дека увид елемент е добар начин
да дознаам ако нешто се случува во ред, нешто неочекувано се случи,
инспекција на тагови и гледајќи го она што тоа е како препишани е корисна.
>> TOMAS REIMERS: Па јас не сум сигурен ако вие момци може да се види оваа боја.
Може да ви?
Ќе видите овој баласт од видот на раб.
И тогаш ќе се види вистинскиот содржина во сино, нели?
Значи тоа е многу Основи на кутијата модел.
Имате содржина.
Потоа мора баласт.
>> ПУБЛИКАТА: Зошто не можете само користи кутијата внатре the--
>> ALLISON BUCHHOLTZ-о: Токму така.
Бидејќи тоа е само избор елементот во моментов.
>> TOMAS REIMERS: То.
Други работи.
Па ајде да зборуваме за тоа, Соочи команда за една секунда.
Значи во CSS, мерења треба да имаат единица.
Значи, прво треба износот.
Значи во овој случај, ние рековме 10.
И тогаш следниот еден што рековме е пиксели пиксели.
Други оние што би можеле да имаат се работи како сантиметри, инчи.
Можете да ги правите нештата како, што е 10 инчи?
И тоа ќе биде смешно.
>> ALLISON BUCHHOLTZ-о: О, момче.
>> ПУБЛИКАТА: Леле.
>> Томас и ALLISON: Да.
TOMAS REIMERS: Значи тоа е сите баласт.
Одам да се врати во пиксели.
>> ALLISON BUCHHOLTZ-о: Пиксели имаат тенденција да бидат, како, на стандард.
Кога ќе се погледне на многу веб-сајтови, тие најчесто работат во пиксели.
TOMAS REIMERS: Значи си оди за да се види или pixels-- останатите гледате
е em, кој е еден ЕМ е еднаква на висината на фонтот
која сте моментално го користите.
>> ALLISON BUCHHOLTZ-о: mm.
TOMAS REIMERS: Тоа е добар начин да се каже, како, сакам како многу простор како мојот фонтот
е преземање.
ALLISON BUCHHOLTZ-о: не се знае тоа.
Можете да дознаете нешто ново секој ден.
TOMAS REIMERS: Постојат голем број на мерења во CS.
Јас Ви препорачуваме да ги погледне нагоре.
За сите ваши случаи, мислам дека пиксели треба да биде доволен.
И тие се, исто така, она што си оди за да се види
во најголем број примери се направи на интернет.
Затоа ние ќе го оставиме тоа на пиксели.
>> Можете исто така да, јас треба да say-- така Соочи се поставува на сите paddings.
Вие исто така може да се направи нешто како "Соочи-топ" само set--
ALLISON BUCHHOLTZ-о: Можеби ние ќе го добиваме нашиот "Здраво" назад.
TOMAS REIMERS: --to само го поставите Соочи на врвот и ништо друго.
Значи четири заповеди се Соочи-топ, Соочи дното, баласт-лево,
и баласт-десно.
>> ALLISON BUCHHOLTZ-о: Исто како и што би се очекувало за кутија.
>> TOMAS REIMERS: Да.
Ништо не е премногу луд таму.
Дали тоа има смисла?
Па тоа е баласт.
Одам да го поставите на сите на paddings назад до 10.
И тогаш јас ќе одам да се движи кон границата.
>> Значи она што е границата е граница е чудно команда.
Потребно е вид на три работи одеднаш.
Така, првиот е колку голема може сакате да биде како мерка.
Повторно, јас сум само со користење на пиксели.
И последното нешто што треба да се додаде на мерења
е една работа која не треба единица е 0.
Тоа е всушност неточни за да се даде 0 единица,
бидејќи е 0 0 низ инчи, пиксели, сантиметри, сеедно.
Сето тоа само значи 0, нели?
Значи, прво ќе го даде на мерењето.
>> Потоа го даде на стилот.
Па јас одам да се каже "солидна".
И ние ќе се зборува за она што значи тоа.
И тогаш на крај, ти го даде боја.
Па јас одам да се каже "црни".
И овие се сите нешта ние сме сега не видел, освен за стил,
но ние ќе зборуваме за тоа.
Значи вие момци видовме мерења, и сте виделе бои.
И што се случува е тоа што го добивате ова убаво црна рамка околу тоа, нели?
Вие момци се види како ние го сторивме тоа?
>> ПУБЛИКАТА: Да.
>> TOMAS REIMERS: Кул.
Значи, што е тоа?
Значи прво на сите, тоа е еден пиксел.
Тоа е само по себе доволно, нели?
Како, тоа е еден пиксел дебели.
Или тоа ќе биде еден пиксел, но јас сум зумира, така што е малку повеќе
од тоа.
>> ALLISON BUCHHOLTZ-о: И ние имаме оваа смешна резолуција телевизија.
>> TOMAS REIMERS: Да.
Можете да го направи тоа поголеми, помали, сеедно.
Па овде е две-пиксели граница.
Ќе видите дека е двапати како дебел.
Следното нешто што треба е боја.
Тоа не е интересно.
Јас не одам да се зборува за тоа, навистина.
>> ALLISON BUCHHOLTZ-о: Но стил може да биде само малку интересно.
>> TOMAS REIMERS: Да.
Значи стил, има неколку од нив што гледам најчесто се користи.
Првиот е солидна, следната е испрекинати линии, а последниот е попарен.
И тука е полн.
Ќе видите дека тие се еден куп на точки, нели?
А добар начин да вид на се убаво границата случува, цртички, исто така, прилично популарен.
>> ALLISON BUCHHOLTZ-о: И тогаш, се разбира, јас сум
дека постојат многу други стилови кои може да се добијат.
И ние имаме голем сет на линковите на крајот за вас момци
да се вид на внимателно и погледнете повеќе се излади CSS.
>> TOMAS REIMERS: И потоа последното нешто, ние сме
одам да се зборува за кутија модели вистински брз.
О, и тогаш граница, токму како баласт,
исто така се работи како граница-лево, граница-десно, граница-топ,
границата дното, која ќе им овозможи на да се стигне до одредена граница.
Значи тука е само границата лево дефинирани.
Дали тоа има смисла?
>> ALLISON BUCHHOLTZ-о: Тоа е кул начин да се нагласи работи или да додадете
линии помеѓу различни елементи.
TOMAS REIMERS: Апсолутно.
Значи тоа е нашата граница.
И маргина последните нечиј.
Како баласт маргина е освен тоа не е within--
ALLISON BUCHHOLTZ-о: Тоа е Не околу вашиот елемент
но всушност низ целиот кутија дека ние сме биле гледање.
>> TOMAS REIMERS: Да.
Алисон се вели совршено.
Тоа не е, како, во вашиот елемент, тоа е околу целата кутија.
Тоа значи дека работи како позадина не се однесуваат на него.
И тоа во основа вели дека, како, јас не сакам ништо
во овој многу простор за мене.
Значи како тука имаме маргина од 10 пиксели.
Значи ништо во рок од 10 пиксели треба да биде до мене.
Тоа е вид на нејзината простор, но вид на не.
Значи тоа е многу Основи на кутијата модел.
Дали тоа има смисла?
Кул, се излади.
ALLISON BUCHHOLTZ-о: Прекрасно.
Па сега јас мислиме дека само имаме кул ресурси
дека ние ќе ве однесе момци преку многу брзо.
И ние ќе actually-- добро, имаме интернет уште?
>> TOMAS REIMERS: Да види дали можам да се отвори up--
дозволете ми да видам дали можам може да се добие интернет брзо
додека Алисон зборува за ништо Алисон не сака да зборува.
ALLISON BUCHHOLTZ-о: Значи basically-- Јас не
Знаеш што друго можам да кажам во овој момент.
Но, овие се некои навистина добри ресурси.
Овие се оние кои Томас и јас се користи
и дека ние, всушност, се користи за да се подготви себе си за тоа.
W3Schools е онаа што момци треба да го виделе.
Го препорачуваме за многу работи со CSS.
Знам дека го препорачуваме на мојот дел цело време.
>> Една од големите нешта е тоа што ви овозможува да се вид на хаос со CSS
и да видат промените моментално во ова,
како, двојно-прозорец видите дека го има.
Значи, вие не мора да се грижите за поставување на вашата веб страница,
или поставување vhost во вашиот локалните апаратот и локалниот компјутер,
и добивање на сите нешта за работа.
Тоа е вграден право во рок од страната.
>> И тоа е овие мали лекции кои можете да
минуваат за да дознаете повеќе за селектори,
или да научат за манипулирање со вашиот фонт, или во позадина или слика.
А ти имаш овие моментален резултати кои што
не треба да направите било други првично работа за.
Значи сакам W3Schools.
Тоа е прекрасен.
Дали функционира?
>> TOMAS REIMERS: Да.
Не, тоа не е.
Сакаш да се обидат и рестартирајте го компјутерот ми?
Или сакаме to--
>> ALLISON BUCHHOLTZ-о: Мислам, Па, ова исто така ќе биде онлајн.
Сите слајдови ќе биде онлајн.
Па јас само препорачуваме прават овие.
>> Ова е одлична само како како измамник лист.
Тоа е само сите основни команди што го имате.
Убаво е кога си прв почнувајќи од вашиот веб-сајт.
Затоа што можеби не сакам да навлегувам во сите
реалниот гнидав тврд дизајн тешки работи.
Вие само треба да ја форматирате во начинот на тој вид на прави смисла и волја
направи сега за сега.
И ако навистина сакате за да се влезе во неа, знам
ова е, како, еден од Омилени референци Томас е.
Ние беа го користите да првично, а тоа е прекрасен.
Тоа е инвеститорот од Мозила.
>> TOMAS REIMERS: Значи Мозила се на луѓето кои прават Firefox.
И тоа е само сопствените инвеститорот референца, што мислам дека е одличен.
И тоа е прекрасно Список на ресурсите.
Значи ние have--
>> ALLISON BUCHHOLTZ-о: И тогаш последен белешка е
кога ќе се обидуваш да дизајнирате вашата веб страна,
црпи инспирација од работите кои мислите дека се е убаво.
Инспекција на елемент, контрола на изворниот код
може да се супер корисни за се обидувам да дознаам
како да стил вашата веб страница.
>> Често, се чувствувам како најдобар начин, покрај експериментирање,
е само да се погледне работи кои се прилично.
Сметам дека тоа е навистина тешко да се само вид на дизајн работи на свој,
особено на почетокот.
Затоа ве молиме да се погледне на веб-сајтови дека ќе уживате гледа.
Дознаам што го прави ги привлечен за вас.
И тогаш се чувствуваат слободни да се обиде и да се реплицираат тоа.
>> TOMAS REIMERS: Токму така.
Дури и како веб-сајтови вака, може да се види
има дефинитивно div на врвот.
И тогаш ќе имаат уште една div во тука, што е CSS awesomeness.
И тогаш имаш еден куп линкови тука.
Ако навистина само увид елементи, можете да ги сортирате на
почне да се види она што го прават веб-сајтови изгледа, и како можам
рекреираат дека ако јас сакав да.
Дали тоа има смисла?
Значи имаме само три минути.
Значи прашања?
Секоја од нив?
Да.
>> ПУБЛИКАТА: За боја правоаголник, како ќе
have-- ако не го сакаат тоа ќе низ целата страница, може да
сте го направиле тоа оди преку само половина страница или само текст?
>> TOMAS REIMERS: Да, апсолутно.
Значи, да ме види, всушност.
Имам две идеи.
Значи прво на сите, вие исто така можете да го користите проценти.
>> ПУБЛИКАТА: Навистина?
>> ALLISON BUCHHOLTZ-о: Значи нешто да гледам нагоре е релативна позиционирање.
Тоа е нешто што ние немаат време да се влезе,
но тоа е нешто што дефинитивно Ви препорачуваме да одјавувањето момци.
>> TOMAS REIMERS: Значи проценти.
И да видиме како тоа го направија само 50% од ширината?
ALLISON BUCHHOLTZ-о: Ако всушност се знае бројот на пиксели,
можете да бидете попрецизни на тој начин.
Можете да тинтири околу со неа.
Но, 50%.
Ако бевме да ја промените големината на нашата интернет пребарувач, тоа ќе ја направи помала.
>> TOMAS REIMERS: Па, тоа е во основа 50% во моментов, мислам.
Тоа е 50%, а потоа и на маргина е додадена на тоа.
CSS има многу quirks.
Значи, во моментов ова е 50% на страница ширина.
Но, запомнете дека имаш 10 пиксели симната од секоја страна.
Значи, ако сте во ситуација да се движат дека против на левиот раб на прелистувачот,
тогаш тоа ќе изгледа како 50%.
Повторно, како што реков, CSS може да да биде многу претпоставка-и-проверка.
Како, мислите дека нешто не е во се случува да се однесуваат на еден начин,
но тоа се однесува на сосема поинаков начин.
>> ALLISON BUCHHOLTZ-о: А ти само се попаметни,
и вие само да се добие подобар интуиција за тоа како да се движат заедно.
>> TOMAS REIMERS: И тоа добива полошо и полошо.
Значи тоа е навистина само една трка.
>> ALLISON BUCHHOLTZ-о: Тоа е супер охрабрувачки.
Ние сакаме тие да се CSS.
>> TOMAS REIMERS: CSS е неверојатна.
Сеќавам на тоа.
Други прашања?
>> ALLISON BUCHHOLTZ-о: Една работа.
Нешто друго?
Кул.
>> TOMAS REIMERS: Прекрасно.
>> ALLISON BUCHHOLTZ-о: Па, ако момци имате било какви прашања подоцна,
ние сме секогаш на располагање, како на обично.
Вие, најверојатно, ќе видите некои од нас за конечниот проекти
и дефинитивно на Hackathon.
>> TOMAS REIMERS: Апсолутно.
И на саемот.
>> ALLISON BUCHHOLTZ-о: И на саемот.
О.
>> TOMAS REIMERS: Со нетрпение очекуваме да види сите на вашите awesome--
>> ALLISON BUCHHOLTZ-о: Ќе видиме сите на вашиот страшни веб-сајтови
дека ќе биде убаво.
TOMAS REIMERS: Можете секогаш види, како, на веб-сајтови
кој, како, добро, CSS, а потоа како и оние кои не се обидуваат да се направи CSS.
ALLISON BUCHHOLTZ-о: Исто така, уште работа, уште едно нешто да се погледне во
е Bootstrapping.
Значи подигање е одлично.
>> TOMAS REIMERS: Google дека ако you--
>> ALLISON BUCHHOLTZ-о: Google го.
Тоа е прекрасен.
Ќе го сакам.
И сега дека имате основно познавање на CSS,
тоа ќе се направи многу повеќе смисла.
Прекрасно.
Ви благодариме, момци.
>> TOMAS REIMERS: Ви благодарам многу.