>> [Музике може чути]
Аллисон Буцххолтз-АУ: Па ми у суштини само иде
да ти дам резиме ЦСС, јер знамо
да није покривен у свим одељцима.
И ми заиста желимо да се уверите да сте момци имају овај алат на располагању,
јер има способност да направи ваши сајтови изгледају много лепше.
>> И ако правите сајт, онда вероватно желите да буде лепа.
Мислим, не морате да, али ја бих га предложити. [Смех]
Ако желите да га користите корисници, да би могао Желим да се мало [неразумљиво] направити.
Тако ћемо покушати и дати вам само неки основни алати и разумевање,
тако да кад изађем и да си истражујући ствари о ЦСС,
није заврши глупости, као што су ЦСС понекад да буде.
>> ТОМАС Реимерс: Да.
Алисон је прилично добро рекао.
Тако да претпостављам прва ствар коју треба да почне са је шта је ЦСС?
Дакле ЦСС ис авесоме.
ЦСС--
>> Аллисон Буцххолтз-АУ: То је Име нашег семинара.
>> ТОМАС Реимерс: Да.
Јако је важно да ви разумете да до тада.
Ако само одузети једно ствар, то је да ЦСС ако страва.
Два је ЦСС означава Цасцадинг Стиле Схеетс.
Дакле у својој сржи, ЦСС стилски, што значи
то вам омогућује да стил веб страницу.
И онда шта то значи, то је начин да додате стил вашим сајтовима.
Дакле по стилу, мислимо све то није струцтурал--
тако ствари као што боја, позадина слике, границе, као, паддинг,
марже.
Причаћемо о томе шта све то значи у мало.
>> Тако смо отишли ​​и корак даље и отворена како оних у гедит.
Дакле, ово је индек.хтмл.
А ово је маин.цсс.
Дакле маин.цсс нема ништа.
Аллисон Буцххолтз-АУ: до сада Нема стил.
ТОМАС Реимерс: Нема.
И као што ћете видети, то је стварно ружно сајт.
Аллисон Буцххолтз-АУ: То је само обичан.
ТОМАС Реимерс: Да.
Да, то није ружна, то је само минималистички.
И онда ту смо индек.хтмл имамо.
И тако за брзо рекапитулација ХТМЛ, Аллисон,
желите да само причамо о страници?
>> Аллисон Буцххолтз-АУ: Да.
Дакле, очигледно, имамо ХТМЛ ознака, који само имена ХТМЛ датотека.
Ми имамо нашу главом овде, са ЦСС Авесоменесс, вхицх-- ако се вратимо.
Где је то?
>> ТОМАС Реимерс: О.
Да, можете видети.
Аллисон Буцххолтз-АУ: И приметио заглавље
је ова картица главом право овде.
А онда "Здраво, свете!" је Текст који смо управо имамо
приказивање на Интернету страна, која је- вратимо.
Назад.
Која је само у нашем телу овде- обичан текст.
Такође, једна ствар да приметити, ако погледате овде,
Томас укључен се ово два из наше слајда.
Дакле, све док имате све три од ових, добро си.
Они могу бити у било ком би они желе.
Оно што је најважније је управо то имате сваки од та три ствари.
>> ТОМАС Реимерс: Кул.
Додајте тип доц?
Аллисон Буцххолтз-АУ: Да.
ТОМАС Реимерс: Да.
Цоол.
Аллисон Буцххолтз-АУ: Очигледно, моји микрофони ме не воле.
ТОМАС Реимерс: О, дај нам сец само док Алисон пребацује из њеног микрофон.
Тако да.
Дакле, имамо нашу главну страницу.
Некако је унстилед.
Немамо много.
Ми само имамо у основи текста.
Имамо лист стила.
Имамо титулу.
Дакле, само голи-бонед компоненте направи сајт.
>> Дакле одатле, хајде причамо о томе шта је ЦСС
и како изгледа и све то.
Тако за то--
Аллисон Буцххолтз-АУ: Назад на слајдовима.
ТОМАС Реимерс: Повратак на слајдовима.
И Аллисон може преузети.
>> Аллисон Буцххолтз-АУ: Ву.
У реду.
Дакле, по вашем ЦСС фајла, ти ћеш имати
Многи од тих ствари зове селекторе.
То ће само бити Основа вашег ЦСС фајла.
Само ће бити много, много њих.
Тако селектор.
Ово је само општи анатомија.
Идемо да прођемо кроз примери, јер ако никада момци
гледао моју секцију, осећам Као ствари у апстрактни
стварно не смисла.
Увек помаже да виде примере.
>> Дакле, имамо неку селектор.
То ће бити нека идентификатор за оно што желимо да се пријаве на стил.
А онда можемо имати било сет правила и вредности.
Дакле селектора који можете видети Можда нешто као тело,
или став са П, или заглавље, или шта већ,
шта год хоћеш да ХТМЛ ознаке да буде.
>> Дакле, у овом случају, имамо тело.
И ми имамо неку правило, који то одговара
за шта ваш стил се односи на.
Дакле, у овом случају, имамо боја позадине и фонта тежина.
Дакле, ово ће се променити позадина свега
у било ком тела таг наше ХТМЛ датотеку.
И то ће дати она ово светло плаво вредност.
>> Тако ће то учинити фон светло плава.
А онда нешто унутар тела је ће имати тежину фонт храбру.
Тако да само же болд све наше текст.
А ово је само један селектор.
Али ти би могао имати веома велики број њих.
И као што ћемо показати касније, мало више у то како
да радови и више примера тамо.
Све што желите да додате?
>> ТОМАС Реимерс: Не
Алисон га.
Само ћемо да исеку Пример овде на нашем сајту пример.
Па хајде да ствари узме ово.
То је савршено.
Тако да сам само ћу да копирате и налепите то право у нашу маин.цсс датотеку.
И ја ћу да га спаси.
А онда ћемо га покренути.
Дакле страна нота, један од већина фрустрирајуће ствари
је ако не сачувате датотеку, и онда, као, релоад тхе паге,
и слично, зашто није промена догађа?
Дешава се.
Дакле овде смо видели да смо направили наш сајт светло плава позадина
а неки дебела текст.
>> Такође треба поменути, ако вас момци имате питања о било чему
радимо, будите Слободно нас заустави и питајте нас.
Ми смо тотално спремни у поље питања.
>> Аллисон Буцххолтз-АУ: Очигледно, са ЦСС, све гради на себе.
Дакле, ако једна ствар не да сада смисла, ми
Не желим да те бог доле касније.
>> ТОМАС Реимерс: Па немојмо врста сецирати ово.
Дакле, да ли желите да почнете са селектором овде?
>> Аллисон Буцххолтз-АУ: Да.
Као што сам раније говорио је, тело је само наша селектор овде.
Дакле, ако се вратимо на нашу индек-- ах.
>> ТОМАС Реимерс: Који сам затворен.
Дај ми секунд.
Дакле Филе, Опен, индек.хтмл.
Аллисон Буцххолтз-АУ: Кул.
Дакле, ако сте овде приметите, ми имају ове ознаке тела, зар не?
Дакле селектор само одговара ознаке које причамо о.
Тако тело овде.
Дакле, оно што говорите је све-- можемо вратити?
Волео бих само могао Као тоуцх екран.
Било би много хладније.
>> Тако нешто у онима боди ознаке, које смо видели
је само, као, текст, и тело уопште
односи се, као, у позадини.
Ако икада пожелите да промените позадину,
да ће бити у телу таг.
Само има ова правила примењују на њих.
>> Дакле, ако смо да идемо у индек.хтмл и-- заправо,
можемо имати нешто изван тела?
Ако смо имали, као, фоотер или нешто, то не би важило за ово.
Али ништа у ови боди ознаке ће
да буду погођене овим телом Селектор да смо направили.
Дакле, ако сте били да куцате нешто друго тамо--
>> ТОМАС Реимерс: Хајде да вози тај дом.
Дакле, ако смо имали див-- тако да је само још један тег можете имати.
Идем да га затворити.
Или нека ово став.
Тако стр означава став.
И у том ставу.
И онда ја кажем, "Ово је текст."
Цоол.
И онда сам направио ово правило важи за став уместо тела.
Видећете како се он односи само на новоформирана став, зар не,
не цела ствар.
Да ли то има смисла?
>> Аллисон Буцххолтз-АУ: Дакле, ово је све тело,
али сада наш селектор само одговара ставу.
Зато морамо масно плаво за ову специфичну ставу,
јер ово је једина ствар да се налази у склопу п таг.
>> ТОМАС Реимерс: врста Има ли то смисла од како су се ствари капсулирају друге ствари?
Аллисон Буцххолтз-АУ: Такође, само да кажем, као, један од најбољих начина
да заиста добити удобан са ЦСС је да само радим ствари овако,
бар пробај.
Врло је једноставно да откуцате нешто од, хит Рефресх, и види шта се дешава.
И као са већином ЦС, експериментисање могу често
довести до много боље интуитивно разумевање.
Чак и више од нас само, као, говорим.
>> ТОМАС Реимерс: Апсолутно 100% слажу по том питању.
Дакле, ако се вратимо на ово, почнимо диссецтинг тачно шта ова двојица радимо.
Дакле, имамо два правила о томе.
Дакле прва је боја позадине.
И видите да смо га поставили једнака је вредности, светло плавом.
>> Дакле, у ЦСС, ЦСС је некако веома лабава о томе како
вам је дозвољено да дефинишете боју.
Тако да их можете дефинисати по имену.
Такође можете урадити нешто попут "црвене".
И онда ако се вратимо на ово, видећете да је позадина црвена.
Такође можете добити стварно-- те мислим може добити прилично креативни са овим,
зар не?
>> Аллисон Буцххолтз-АУ: ја Мислим да можете користити хек.
Зар не?
>> ТОМАС Реимерс: Да.
Тако можете да користите хек.
Али мислим име-мудар.
Зар не постоје?
Аллисон Буцххолтз-АУ: То можете учинити доста.
Прилично попут већине боја које сте може назовете као, мислим да је један лосос.
>> ТОМАС Реимерс: жемо три лососа.
Аллисон Буцххолтз-АУ: ја Мислим цхартреусе је унутра.
ТОМАС Реимерс: Да.
Сее?
Тако да можете добити прилично креативни.
>> Аллисон Буцххолтз-АУ: Ти могао добити прилично креативан.
Као, ако ти падне на памет Име боје, вероватно је унутра.
Ако заиста желите добро детаљ, можете ићи хек.
>> ТОМАС Реимерс: Да.
Тако хексадецимална.
Ако ви сећате ово назад са старог ПСЕТ, слике Рецовер,
момци морали да се позабавимо са овим хек вредностима.
И некако да сумирамо шта је то, Хек има три вредности сачуване у њему.
Тако да је у групама од два корацима.
Прва два представљају црвену вредност.
Други представља зелени вредност.
И последњи је плаво?
>> Тако се дешава да представљају ФР хексадецимална 255.
Тако да имате 255 црвена, 255 зелено, а 0 за плаве.
И има вредности између 0 и 255.
>> ПУБЛИКА: Тако је.
У суштини, можемо да тражи Интернет за било које боје желимо,
и идентификују ствари-познати спектар боја Цомбо,
а онда бисмо могли да га стави у?
Аллисон Буцххолтз-АУ: Тачно.
Тако да имате прилично много потпуну контролу над бојама желите у ЦСС.
Хоћемо ли да причамо о бацкгроунд слике касније?
Или желимо да урадимо то?
>> ТОМАС Реимерс: Да.
Апсолутно.
Дакле прво, само да покажемо да црвена и зелена је жута.
А ако ти треба неки помогне проналажењу ово, ви
цан Гоогле нешто као "берача боји."
Аллисон Буцххолтз-АУ: О, то је тако добро.
Волим Цолор Пицкер.
>> ТОМАС Реимерс: цолорпицкер.цом је добар пример.
И овде, видећете да имате пуно Пхотосхоп-попут боје скупљач.
>> Аллисон Буцххолтз-АУ: Аха.
Такође, цоол ствари си може генерисати шеме боја
тако да немате, као, сукобљених боје.
ТОМАС Реимерс: А онда ево Хек вредност овде.
Тако да увек можете наћи на мрежи основи места да бисте добили хек вредност из.
Није те некако да само, као, ми види боје света у бројкама.
То је више да идемо на мрежи и знати боје желимо,
и онда се тај број доле.
Јер то је само стварно лако начин да се референце ствари у ЦС.
>> Аллисон Буцххолтз-АУ: А ту је и алсо--
Ја заборавио тачан назив сајта.
Али дефинитивно постоји, ја Мислим, нешто из Адобе
да генерише шеме боја за вас, која је стварно супер, јер вас
дефинители-- је понекад тешко схватити,
Ох, ако желите да користите ову боју, шта би могло бити још једна корисна један
да на другом месту користе на мом сајту да, као, чине га лепо и кохезивни.
>> ТОМАС Реимерс: Аллисон је говорио о један Адобе Кулер зове, мислим.
То је К-У-Л-Е-Р.
Аллисон Буцххолтз-АУ: Мислим да јесте.
Прилично сам сигуран да је тај.
>> ТОМАС Реимерс: Мој омиљени има увек био Шема боја Дизајнер.
>> Аллисон Буцххолтз-АУ: Оох.
>> ТОМАС Реимерс: Који је сада--
>> Аллисон Буцххолтз-АУ: Ах, ово је лепа.
>> ТОМАС Реимерс: А ти могу рећи у основи, као,
Желим три боје једни поред других.
И онда хајде да урадимо нешто лепо.
А онда можете добити неки пример шта да може да изгледа.
И онда ако пређете преко било које од их, она вам даје хек вредност.
>> Дакле, само као добар начин за почетак размишљам о шеме боја
или шта боје у сајту Можда иду добро заједно.
Јер то може бити изненађујуће није тако лако да покупи што мислите.
А онда друга ствар кул Увек сам сматрао о овом сајту
је ако погодите Примери, то ће схов Какав пример сајт
може изгледати као користе тај шему боја.
У сваком случају.
>> Назад на стварним ЦСС.
Аллисон Буцххолтз-АУ: Али очигледно, ми знам те референце може бити корисно.
ТОМАС Реимерс: Не, они дефинитивно може бити од помоћи.
Тако другом правилу, Аллисон?
>> Аллисон Буцххолтз-АУ: Да.
Друго правило је само одговара нашој фонт.
Дакле фонт тежина је некако од-- тако тежина би
бити ако само желите, као, нормална или, као, тањи фонтови,
или у овом случају, као, болд.
И форгет.
Шта је ако желиш то-- је ту тањи један од само, као, нормално?
ТОМАС Реимерс: Ја не знам стварно знам да постоји један тањи.
Аллисон Буцххолтз-АУ: заборавим.
Дакле фонт смо обично тежина само користите за масна.
Ако желите да заиста ући у то, идемо да вам покажем.
В3Сцхоолс има све другачије ствари које можете да урадите за фонтове.
Али у основи, ако икада желите да промените нешто у вези фонт,
то увек бити, као, фонт-нешто.
Тако да ће бити као, фонт-фамили ако си покушавајући да промени стварни тип.
То ће бити фонт-фамили ако вас Желим да га направи као курзивом,
или курзив, или шта све не.
Или чак фонт-боја, ако хтели смо да променимо.
>> ТОМАС Реимерс: Аха.
Тако да може да промени.
И некако само да рекапитулација сада, тако да можете
видим да имамо селектора овде.
Имамо ове витичасте.
И онда имамо правила ограничен зарезом.
Да ли то има смисла?
Да?
Цоол.
Дакле, ако је то зликовца--
>> Аллисон Буцххолтз-АУ: Назад.
ТОМАС Реимерс: Хајде да разговарамо конкретно о томе какав селектора имамо.
Јер сада имамо некако само приказано ознаке.
Али ви могао да види да уверљиво.
Рецимо да имате два пасуса на страници и вама
Желим да будем у могућности да стилу један али не и другог,
не само желите да се ограничи да морају да користе различите стварну ХТМЛ
ознаке да им дају различите стилове.
>> Дакле, имамо три основна врсте селектора.
Аллисон Буцххолтз-АУ: Да.
Тако да имамо ознаку, која је шта смо говорили о сада.
Дакле, то је као вашем телу или п.
И онда имамо класу, која је кад смо га дефинишемо у нашој ЦСС фајла,
увек је ће бити дот, како год желите име ваше класе да буде.
И ово може применити на више ствари.
>> Да имате пет ставове и два њих троје
треба стилу исти, ти би важило класу на њега.
А ово је само начин на који ми то радимо.
Ми ћемо вам дати пример где то заправо појави.
Али ако можда имао неку ознаку стр, после тога, ти би писати,
класа једнако Вхатевер наставу желите да примените на њега.
Какве год цласс селектори које желимо да се обрати овом конкретном става,
могли би писати овако.
Наравно, мислим пример ће га много бетона направити.
>> Онај други имамо је ИД, који смо означимо
са хаш или фунте, или хасхтаг.
ТОМАС Реимерс: Оцтотхорпе.
Аллисон Буцххолтз-АУ: Оцтотхорпе.
То ради, превише.
И ово треба стварно бити јединствен.
Они би требало да се односи само на једна ствар на страници.
Дакле да ли је то специфична став, или нека ставка у листи, или шта год,
ово би требало да буде јединствена.
И на исти начин на који смо управо кажу, као, цласс = "цласс1 цласс2,"
ово може бити само ИД год имамо.
ТОМАС Реимерс: Да.
Па хајде да разговарамо дефинитивно о примерима овде.
И само ћу да рони равно назад у коду.
Па хајде да погледамо наше ХТМЛ.
И тако смо сада имамо један пасус.
Ово је текст.
Само ћу да модификују она. "Ово је текст 1."
А онда ћемо имају "Ово је текст 2."
>> Аллисон Буцххолтз-АУ: Други један.
ТОМАС Реимерс: Аха.
Тако сада имамо "Ово је текст 2," зар не?
И ми ћемо да видимо да ли смо релоад страна, шта ћемо да нађемо
је да ћемо финд--
Аллисон Буцххолтз-АУ: Оох.
ТОМАС Реимерс: Да.
Идемо да нађемо "Ово је Текст 1, "и" Ово је текст 2. "
>> Аллисон Буцххолтз-АУ: И од љупка жуте боје.
>> ТОМАС Реимерс: И видећете да је наш селектор сада,
који се односи на стр је, или ставови, утиче и на њих,
јер обојица испуњавају Услов да су обоје стр ознака.
То има смисла укупан.
Дакле, питање је, добро, шта ако смо хтели да се само један?
Тако исто као Алисон рекао, имамо два начина да то уради.
Идем за почетак ид.
>> Аллисон Буцххолтз-АУ: Почнимо са ид.
>> ТОМАС Реимерс: И обоје од њих су атрибути.
Тако атрибути постоје у ХТМЛ.
А шта су они ис нешто што сте додали
унутар таг који је одвојити од имена ознаке.
Тако да можете имати више атрибуте.
Да?
>> Аллисон Буцххолтз-АУ: Управо сам то хтео да кажем, из вашег примера из ПСЕТ 7,
ако неко од вас покуша да усклади ствари до центра,
сте можда користили "Текст алигн = центер."
А ти си то приметио вероватно Требало је да у центру
Ваш текст или ваш трака за навигацију.
Дакле, то је само и атрибут да бисте могли бити упознати са.
ТОМАС Реимерс: Има гомила од атрибута да ћете видети.
Да.
Као и добром односу на ПСЕТ 7.
Имамо ид.
Такође можете имати класа, такве ствари.
Један ознака може имати много особина.
Значи од ид, хајде да се правимо Желим да имају ид од-- не знам.
Ми ћемо га назвати посебан, јер је овај, ми смо
снимиће болд, и подвући, и шта год.
Аллисон Буцххолтз-АУ: То је Биће супер посебан.
ТОМАС Реимерс: Па ово један, имамо ид специјалитет.
Тако начин да одаберете да, онда, је у маин.цсс, а не имати ознаку п,
радиш Специал, у реду?
И то бира ствар са ид специал.
Да ли то има смисла за све?
ПУБЛИКА: Да.
ТОМАС Реимерс: Кул.
Тако да сада, ако се вратимо, ћемо видео-- Упс.
Да.
Видећемо да она само бира онај са ид специал.
Да?
Звучи кул.
Да.
>> ПУБЛИКА: Може нешто има атрибут од обоје класе и ИД?
>> ТОМАС Реимерс: Да.
ПУБЛИКА: У реду.
И шта се онда дешава ако онда дати то нека правила у ЦСС то сукоб?
ТОМАС Реимерс: Апсолутно.
Дефинитивно ћемо да причам о томе.
Па управо оно што сте добијали у, можете имати часове.
Па хајде да се претварам да је имао три параграфа и ја
хтио стил прво два али не и трећу.
Па, твоја прва идеја може бити, па, ја могао само дати а друга је ид.
Али не можеш, јер је лична, баш као Аллисон рекао,
мора да буде јединствена.
>> Тако уместо ид, шта ви Можете користити је можете користити класу.
И цласс-- оно што омогућава ви да урадите је у основи кажу,
ово припада као део групе.
У овом случају, наша група назива Посебна.
И шта ћемо онда урадите је идемо прицала- уместо фунте,
идемо користити тачку.
У реду?
И приметите да фунта и тачка само постоје унутар ЦСС фајла,
не у ХТМЛ.
Аллисон Буцххолтз-АУ: Да.
Важна разлика.
>> ТОМАС Реимерс: Имам имали толико борбу,
јер сам ставио хасх у ХТМЛ и онда само осетио глупо дуго времена.
Погледајте како то бира обе они са те класе?
Цоол.
>> Сада, ствари могу имати више класа.
Рецимо Желео сам да направим први два имају позадину жуте
а друга двојица имају фонта боја плава.
У реду.
Ја стварно не знам зашто сам Желим да то урадим, али ја могу.
>> Аллисон Буцххолтз-АУ: не Мигхт Препоручује се за свој сајт.
Али за наше потребе, то ће урадити.
>> ТОМАС Реимерс: Није добра шема боја.
Аллисон Буцххолтз-АУ: Па, жута и плаво су моји средњошколци боје.
Не знам, ипак.
ТОМАС Реимерс: Аллисон је висок Школа је имала велику шему боја.
[СМЕХ]
Па шта онда можемо назвати ово је Назовимо ово-- тако имамо посебне
а ми имамо Прилично.
Предлажем, за ово, користите много описне имена.
Аллисон Буцххолтз-АУ: Да, ја бих звати, као, жута или плаве.
>> ТОМАС Реимерс: Нисмо Стварно што прави сајт,
због чега нисмо то радили.
Али ако вас стварно имао прави сајт, ви
можда има, као, члан заглавље, чланак садржај, прва реч,
такве ствари, које омогућавају да буду много описно.
Ово су заиста баш као варијабли.
Њих треба именован на начин где можете, као-- да, као што је.
Савршено.
>> Тако боја позадине.
А онда ћемо тако прицала- начин да се промени боју је само "боја."
И ми ћемо да га плаво.
То је кул.
Тако да сада имамо Прва два имају посебан.
Следећа један ће имају "цласс = прилично."
Аллисон Буцххолтз-АУ: И онда ћу желите да додате "прилично" оном средњем.
ТОМАС Реимерс: Аха.
А онда на средњи један, додати "прилично," шта се дешава
је само имати простор.
Тако разредном атрибута је листа простор-раздвојена
свих класа које се односе на тај таг.
У реду?
Није овако један припада нека врста специјалног класе зове
"Посебна, простор, прилично."
Спада у два цлассес-- посебна и лепа.
Да?
Цоол.
>> И онда ако погледамо шта се дешава, ми смо
идемо да видимо да први има жута позадина, црно текст.
Друго једног--
>> Аллисон Буцххолтз-АУ: --хас болд жута позадина са плавим текстом.
И наш последњи је управо има плаво текст који смо јој додијељена.
>> ТОМАС Реимерс: Цоол?
Како селектори раде?
Страва.
>> Аллисон Буцххолтз-АУ: Да ли желимо да говорити о сукобу сада онда?
>> ТОМАС Реимерс: Па да.
Апсолутно.
Па шта се дешава ако вас у сукобу, зар не?
Хајде да се претварамо прву поставља нешто као--
Аллисон Буцххолтз-АУ: Можда ово мења позадину?
ТОМАС Реимерс: Да.
Тако ћемо направити "прилично" промените позадину лососа.
Аллисон Буцххолтз-АУ: Ти си само са сви велики боје данас, Томас.
ТОМАС Реимерс: Да.
Зато што сам сазнао да могу користите лососа као прави боје.
Тако да само ћемо то урадити.
Такође мислим Сунсет је прави боја.
ПУБЛИКА: Залазак сунца је права боја?
Аллисон Буцххолтз-АУ: Хајде да покушамо.
ТОМАС Реимерс: После ове демонстрације само зато што у случају забрља,
Не желим да се отклањање грешака.
Дакле, ми знамо лосос је прави боја.
Тако да било нагађања о шта ће се десити?
>> Аллисон Буцххолтз-АУ: Имате ли идеју?
>> ПУБЛИКА: [неразумљиво].
>> ТОМАС Реимерс: Да.
Дакле имаш га потпуно исправно.
У основи, то траје прошле правило да је дато.
>> Аллисон Буцххолтз-АУ: Па ово је где каскадно ступи на снагу.
>> ТОМАС Реимерс: Па се како смо имао да Цасцадинг Стиле Схеетс?
Дакле од тога, ми некако мислим да имамо гомилу правила
који важе једни на друге, и они такође могу надјачати једни друге.
>> Аллисон Буцххолтз-АУ: Па шта год је на дну
ће премостити све што је на врху.
Могао би да у потпуности имати правила негирају нешто раније.
То је такође зашто желите да буде опрезни када си стајлинг,
тако да не правите правила која ти само потпуно заобила`ењем.
>> ТОМАС Реимерс: Или можда желим да препише правила.
>> Аллисон Буцххолтз-АУ: Или можда радите.
Да.
>> ТОМАС Реимерс: Прави се да имате класа која се односи на већину ствари,
али рецимо да желите да промените боја позадине на црвено и фонта
тежина у болд за већину ствари, али за једног,
желите само боју позадине да буде црвено, али желите све остало
особине, можете да урадите нешто као "фонт-фамили = нормално,"
што би онда поништи тај болд промену.
Да?
Опет, најбољи начин, мислим Алисон је рекао да, је само вежба.
>> Аллисон Буцххолтз-АУ: експериментисања.
>> ТОМАС Реимерс: Пракса, пракса, пракса, и експеримент.
Знам пуно људи који мисле ЦСС је само много Гуесс-и-проверу
на крају дана, где, ако желите да урадите нешто-- као,
имате неку представу, али ипак вероватно треба
да га испробате да се уверите знате како изгледа.
>> ПУБЛИКА: Када се пријављујете класе, више од једног
на истом ставу или секција, зар не
Шта год би можете укуцајте их у наводника?
>> ТОМАС Реимерс: Не, не уопште.
>> Аллисон Буцххолтз-АУ: Оно што је битно је поредак у вашој ЦСС стиле схеет.
ПУБЛИКА: Можете ли да поновите питање?
ТОМАС Реимерс: О.
Аллисон Буцххолтз-АУ: Унутар цласс, када дајете настава
на нешто у ХТМЛ, не то важно којим редом су у?
Није важно наређење.
Оно што је битно је редослед цласс селектори унутар вашег ЦСС,
унутар вашег стила.
>> ТОМАС Реимерс: Звуци добро?
>> Аллисон Буцххолтз-АУ: Дивно.
>> ТОМАС Реимерс: А онда идемо у настави да--
Аллисон Буцххолтз-АУ: Шта имамо следеце?
И форгет.
Ох, ми само имамо примере.
Али ми смо некако урадили они.
Ми смо урадили примере у ходу.
>> ТОМАС Реимерс: Ми добијамо да Ускоро комбиновати селекторе.
>> Аллисон Буцххолтз-АУ: О, добијамо да комбинујемо селекторе.
ТОМАС Реимерс: Значи неки примери је имамо
# Дог-- фунта, или хаштагот, или оцтотхорпе, или како год
желите да позовете то-- оштар.
>> Аллисон Буцххолтз-АУ: Схарп пас.
>> ТОМАС Реимерс: Онда имате .петс.
Нешто има ид од пса, постоји само један пас на страници.
Нешто има ид од мачка, постоји само један мачка.
Могу постојати много кућних љубимаца на страници.
Зато смо дали да класа.
Имате пример п.
И онда тако један од Последњи пример, који
је нешто нисмо разговарали о, је оно што се дешава када их комбинујете.
Тако п.петс.
>> Дакле за то, хајде да се вратимо на Код и увести анотхер-- да.
Тако се овамо.
>> Аллисон Буцххолтз-АУ: ја осјећам као код стварно--
Као само гледа кроз примере је заиста начин да научите ово.
Дакле, то је оно што радимо.
>> ТОМАС Реимерс: Па хајде да се претварамо Само желим да изаберете текст 2, зар не?
Дакле, ми не можемо дефинитивно то са личном картом.
Па, можемо да урадимо да са ид, али нема ид.
Могао додати једну, али хајде да се претварамо да нисам желео да га додате
или она већ има нешто друго.
Ја не могу то да урадим са тим.
Ознака дефинитивно није јединствена, зар не?
А ни је класа.
Али можете комбиновати те ствари.
Рецимо желели смо да урадимо нешто који се односи само на ствари које
има класе посебан и који имају класа прилично.
>> Па шта можете да урадите је у маин.цсс, можете рећи, хајде да прво обрисати ово.
Можете комбиновати.
Тако можете да урадите .СПЕЦИАЛ.
Нема простора.
Само .специал.претти.
То значи нешто који је и посебна и лепа.
Да ли то има смисла?
И ако овде ићи, шта идете да видите
је ово правило примењује само на Други, који има и таквих.
А ти можеш то да многе ствари.
Можете прицала- немојмо претварати да само хтео
да радим ствари које имају лепу класу и који су такође став ознака.
Тако п.претти.
Хајде да се претварамо да сам имао нешто прилично на ознаком телу.
У реду?
Ја могу покренути ово и ја види се да је само то
ће да се пријаве на стварима које су ставови са класи лепом.
А можете комбиновати, у основи, колико желите.
Тако можете их ставити заједно.
Да ли то има смисла?
Аллисон Буцххолтз-АУ: Па ова врста је корисније
када, Томас је говорио раније, можда имате веома компликовану сајт,
а ви већ имате доста ових правила писаних,
а ви само треба да комбинују два од раније.
Као и уместо писања целину Нови селектор и њене промене тамо,
само да комбинујете им где се преклапа.
>> ТОМАС Реимерс: Или си Можда пронађете оут-- понекад
има једна класа која чини боје фонта као плава,
а ту је још једна класа која чини позадинску плаво.
А то једноставно неће радити.
Дакле, ви пишете посебан случај, где, као-- али ако има обоје, шта си
урадити је да ћеш ову игру чини једном ову нијансу плаве
а овај је то друга нијанса плаве.
Зар не?
>> Аллисон Буцххолтз-АУ: Добро за оне врсте изузетака.
ТОМАС Реимерс: Па да размишљање о проблемима
да би могао да настане када их комбинујете.
Цоол.
Дакле вратимо на нашу презентацију.
Аллисон Буцххолтз-АУ: Скоро смо стигли.
ТОМАС Реимерс: И је стао повезивање.
Аллисон Буцххолтз-АУ: Ох, не.
Аллисон Буцххолтз-АУ: ЦС у Канцеларија, Интернет иде доле.
О, иронија.
>> ТОМАС Реимерс: Па срећом, можемо представе без интернета, ваљда,
јер имамо све слајдове овде.
Па хајде да причамо о однос ознака.
Аллисон Буцххолтз-АУ: Тако је.
Тако некако иде офф шта Томаш рекао,
ово је само још један начин да се то уради.
Дакле, имамо неку родитеља селектор са селектором деце.
Дакле, у овом примеру овде, имамо неке Тело са класе НавБар, дугме класа.
Ах.
>> ТОМАС Реимерс: Ох, извините.
>> Аллисон Буцххолтз-АУ: И у основи, шта то значи
је изабрали све деце, као све ове сорти селектора,
унутар овог селектора матичне.
И они су једини то икада ће да се пријаве на.
Ја не знам да ли вас имају бољи начин од--
ТОМАС Реимерс: Па ја Ваљда пут да мисли
о овоме је сетим пре како некако смо као они заједно.
И онда то значи један елемент која одговара све ово.
Шта ово говори је, ја Желим да поклапају све
у неке-- Желим да пронађете селектор.
А онда у то, хоћу ви да одговара нове ствари.
Зар не?
Дакле у ЦСС, то је све о некако бити у стању да одговара ове ставке.
А можете покушати да одговара предмети у оквиру осталих ставки.
>> Па хајде да урадимо у ствари пример, и мислимо да ћемо разјаснити.
Па хајде да се претварамо да имамо посебан, Посебан прилично, шта год.
И онда имамо везу, у реду?
Запамтите, је веза.
Неће ићи нигде.
И ми ћемо га дати Линк класа, претпостављам.
Хајде да се дам цласс-- ми дати идеју.
Аллисон Буцххолтз-АУ: Кул.
ТОМАС Реимерс: Цоо-- немојмо го то класа прилично.
Зашто не?
>> Аллисон Буцххолтз-АУ: У реду.
ТОМАС Реимерс: Па сада Претти Тхингс
снимиће позадину плава, боја позадине лососа.
То има смисла.
И ако ово-- урадимо
>> Аллисон Буцххолтз-АУ: Да ли желите да додате текст
тако хипервезе заправо појави?
ТОМАС Реимерс: То био би добар позив.
Аллисон Буцххолтз-АУ: 'праву Јер Сада смо само нећеш добити ништа.
ТОМАС Реимерс: Дакле, ово је линк.
"Ово је линк."
Ох, и ово иде да буде једна карика.
Хајде да класу "кул".
У праву си.
Цоол.
Тако сада ћемо да зграбите ово.
Идемо да баци у.
Имамо једног у посебна ознака, а такође смо
ће имати један у лепом таг.
И сада шта ћемо да урадите је да ћемо направити цоол--
шта желимо то да урадимо?
Аллисон Буцххолтз-АУ: Можемо ли то направити већи?
ТОМАС Реимерс: Хајде да му дати границу.
Аллисон Буцххолтз-АУ: Могли би граниче.
ТОМАС Реимерс: Да.
Тако ћемо нешто урадити као, граница је-- и ми смо
да објасните то све у секунди.
За сада--
>> Аллисон Буцххолтз-АУ: За кутије модела.
ТОМАС Реимерс: Али за сада, ми смо само да му дати границу.
Па шта то значи је да си идемо да видимо ове везе.
А ти ћеш да видиш да имају ови, као, ружне црна границе, које
је кул.
>> Аллисон Буцххолтз-АУ: Наш сајт је толико лепа.
>> ТОМАС Реимерс: Да.
Наш сајт је супер.
Дакле ова два су линкови, и они појављују.
Хајде сада да се претварам само хтео да урадим ово
ако то није било у нечему који је имао позадину лососа.
Тако се тога ове има позадину лососа,
зато што је из класе лепе.
>> Али ми желимо да кажемо да само хлади који су у класи посебна, не у класи
лепа, треба имати ту границу.
Па, шта можете да урадите ви је могу да кажем, .СПЕЦИАЛ, простор, .цоол.
А шта да ради, када мислите о томе, да ли је то у основи говорећи,
Ок, финд ме еверитхинг да одговара посебна.
Затим у оквиру тих ознака, финд ја све то је цоол.
Аллисон Буцххолтз-АУ: Па још један начин да би било добро да размислим о томе,
стављајући је у Ц, је баш као и идеја о обиму.
Дакле, када имате неки Селектор, попут оних
да смо радили за ово пре, цела ваша веб страница, све ваше ХТМЛ
буде у оквиру обима, зар не?
Али кад имамо ове родитељ-дете,
то је као да сте сужавање где Ви тражите на одређеном месту,
као да, као, ми смо у потрази уместо специфична функција
од целе наше датотеке.
ПУБЛИКА: Имајући то на уму, зар то било вазно да смо имали цхангед--
Аллисон Буцххолтз-АУ: ред?
ПУБЛИКА: --Тхе класа у ЦСС да .цоол, простор, .СПЕЦИАЛ?
Аллисон Буцххолтз-АУ: Да, јер тада то
би рекли, обим га све што има кул,
а затим погледајте шта хас-- Мислим, као, у овом случају,
Ја не мислим да би то променило.
>> ТОМАС Реимерс: Да смо рекао шта?
Извините.
>> Аллисон Буцххолтз-АУ: Ако смо ми обим да се охлади, а затим
тражити ствари из специјалне, било би исто, у ствари.
>> ТОМАС Реимерс: Па то не би било.
>> Аллисон Буцххолтз-АУ: То не би?
Ох, ох добро.
Ја сам у праву.
>> ТОМАС Реимерс: Па разлог то је уобичајено дифферент-- мистаке--
је то сада само веза има кул, зар не?
Ваљда моје питање да момци је, шта на овој страници се слаже са .цоол?
Постоје две ознаке овде, зар не?
Која је ово једна и овај.
Оба матцх кул.
Ништа друго не.
Дакле, ако сте рекли, .цоол, простор, .СПЕЦИАЛ, шта ћеш да кажеш је,
у оквиру ове ознаке, шта је посебна?
Аллисон Буцххолтз-АУ: Хм.
То је оно што то-- праву.
Јер то је као само нешто овде.
>> ТОМАС Реимерс: Дакле бира ништа.
>> Аллисон Буцххолтз-АУ: Док са Посебан, ми смо у оквиру ове ознаке овде.
>> ТОМАС Реимерс: Они и оне.
ПУБЛИКА: У реду.
Дакле, те ознаке из коса црта?
>> ТОМАС Реимерс: Да.
Да ли то има смисла?
Како је то у основи покушавајући да убрзате обим.
Аллисон Буцххолтз-АУ: Да.
Мислим да је то вероватно Најлакши начин да се размисли о томе.
>> ТОМАС Реимерс: Па смо нашли ово, и смо ово обоје упарен посебан.
И онда ми тражимо, у року ови момци, шта је цоол?
И у оквиру ове, ово је кул.
У оквиру овог, ништа је кул.
Дакле, ово је једини ознака која остаје.
>> Аллисон Буцххолтз-АУ: Док кул је само у оквиру ових само ознаке тамо.
ТОМАС Реимерс: Тачно.
А шта је посебна у то?
Ништа.
Сада, шта ћу рећи је ако није било простора,
питате шта је кул и специал-- или шта је лепа и посебна, зар не?
Ако кажете .специал.претти, то је исто као .претти.специал.
>> Јер оно уклањање простор је пита се, кад кажете .СПЕЦИАЛ,
питате, добро, Које су посебна?
И онда оне које они су такође прилично,
што је исто, граматички, као затразис, шта је лепо,
и онда од оних, што је такође посебан?
Зар не?
То је разлика од шта је оно што је унутар.
ПУБЛИКА: У реду.
ТОМАС Реимерс: Да.
Страва.
Имајући то у виду онда--
>> Аллисон Буцххолтз-АУ: Мислим да је наш последњи Ствар је у томе (у елегантним британским нагласком)
кутија модела.
>> ТОМАС Реимерс: бок-- [цхуцклес] Волим начин на Алисон каже да.
Тако је кутија модел ствар.
>> Аллисон Буцххолтз-АУ: Само имам кутија, бићу твоја кутија модела.
ТОМАС Реимерс: Па хајде да причамо о томе.
Тако сада смо провели доста времена говори о селектора.
До сада, ви сте вероватно, као, господари селецторс-- знате,
како да тачно одабрати садржај који желите да манипулишу на екрану.
>> Тако да сада питање је, како тачно може да се манипулише?
Тако да претпостављам најосновнији начин да мисле о томе
је, добро, шта тачно је елемент у ЦСС-у?
Провели смо много времена говоримо о, шта је ознака,
или шта је најосновнија репрезентација ознаке?
>> Добар начин да размишљају о то јест, оно што је лосос облик?
Шта облик је, као, лососа позадину?
>> ПУБЛИКА: То је правоугаоник.
>> ТОМАС Реимерс: То је правоугаоник, зар не?
>> Аллисон Буцххолтз-АУ: Зар није трик питање.
[СМЕХ]
>> ТОМАС Реимерс: Не покушавам да вас преваре момци овако касно.
Дакле, имамо овај правоугаоник.
И ознака је стр, зар не?
Тако да нам даје добар Веровање да став
је представљен као правоугаоник, на барем у уму претраживача, који
то је.
>> Аллисон Буцххолтз-АУ: Мислим, претраживачи су обично правоугаоног,
тако да има смисла.
>> ТОМАС Реимерс: Идеја је да су сви ознака у ЦСС
су представљени као правоугаоника.
И сваки правоугаоник има четири делови по ЦСС, у реду?
Имате стварни садржај.
Ту лежи текст.
>> Аллисон Буцххолтз-АУ: Можда ваша слика.
>> ТОМАС Реимерс: Да.
Имате паддинг, која је само нека врста белог простора.
Онда имате границу.
И онда имате марже, које је бели простор изван тога.
Тако да нема смисла никоме, тако да смо
ће говорити о томе на тренутак.
Дакле овде, шта ћемо да радимо се да ћемо створити неке дивови, у реду?
Извините док ја--
>> Аллисон Буцххолтз-АУ: Осећам се као требамо ставити слатку слику у.
>> ТОМАС Реимерс: Дефинитивно треба.
>> Аллисон Буцххолтз-АУ: Осећам се као и сви
могао имати користи од слатка слика, то је све.
>> ТОМАС Реимерс: Можемо ли сви имају користи од а--
>> ПУБЛИКА: Да, наравно.
ТОМАС Реимерс: У реду, кул.
Зато треба да стави сладак фото за негде.
Аллисон Буцххолтз-АУ: Осећам се као сладак зека може бити корисно сада.
ТОМАС Реимерс: Наравно.
Аллисон Буцххолтз-АУ: Крај недеље.
Имам нешто адораб--
>> ТОМАС Реимерс: Како кажеш мачетом?
>> Аллисон Буцххолтз-АУ: Маче ради, превише.
>> ТОМАС Реимерс: Кул, јер постоји место за то.
То се зове ПлацеКиттен.
Аллисон Буцххолтз-АУ: То је сјајно.
ТОМАС Реимерс: Да.
Аллисон Буцххолтз-АУ: Само за, као, плацехолдер слике у вашем сајту.
ТОМАС Реимерс: Аха.
Ту је ПлацеПуппи.
А ту је и ПлацеБацон.
>> Аллисон Буцххолтз-АУ: ПлацеБацон?
Стварно?
>> ТОМАС Реимерс: О, ми не радимо имају приступ интернету овде.
>> Аллисон Буцххолтз-АУ: [Гроанс]
Трагична.
ТОМАС Реимерс: Иначе, Ја бих вам покажем
како да слике у вашем сајту.
Ми ћемо покушати да се ово ради и прије морамо да идемо.
Али за сада, ми смо само причати у бојама тада.
Ми желимо да ставимо слике киттенс--
>> Аллисон Буцххолтз-АУ: Јесмо.
>> ТОМАС Реимерс: --Тхе Интернет је на овај тренутак био.
Дакле, имамо два дивови, а ми смо ће им дати два легитимације.
Ми ћемо то назвати "Први" и "Други".
Дакле ид = "први".
И ми ћемо им дати две боје.
Па како да изаберете нешто са ИД "први"?
Аллисон Буцххолтз-АУ: Дот или хасх?
ПУБЛИКА: Схарп.
ТОМАС Реимерс: Схарп, савршена.
Оштар, хасх, шта год смо--
>> Аллисон Буцххолтз-АУ: Много тога можеш да га зову.
>> ТОМАС Реимерс: У реду.
Идемо да се населе на хасхтаг, и то је оно што ћемо ићи са.
У реду?
>> Аллисон Буцххолтз-АУ: Хасхтаг.
>> ТОМАС Реимерс: Па хаштагот прво.
>> Аллисон Буцххолтз-АУ: Па можете твеет семинар--
хаштагот ЦСС, хаштагот кул.
ТОМАС Реимерс: Хасхтаг Авесоменесс.
Аллисон Буцххолтз-АУ: Хасхтаг Авесоменесс, да.
ТОМАС Реимерс: У реду.
Дакле, имамо "први" и "друга".
Дакле, прво, ми ћемо имати Позадина црвени.
Аллисон Буцххолтз-АУ: Ух, дебело црево.
ТОМАС Реимерс: Аха.
Аллисон Буцххолтз-АУ: Бићу твоје место-цхецкер.
ТОМАС Реимерс: Аллисон је ме.
Бацкгроунд-цолор оф блуе--
>> ТОМАС Реимерс: Љубичаста!
>> ТОМАС Реимерс: Љубичаста.
Аллисон Буцххолтз-АУ: Да.
Пурпле је моја омиљена боја, а нисмо користили још.
>> ТОМАС Реимерс: Виолет.
Аллисон Буцххолтз-АУ: Виолет.
То ради.
>> ТОМАС Реимерс: Па ми смо ће имати два дивови.
Они ће бити потпуно празан.
Вероватно би требало да имамо неки текст.
Дакле "први" ће бити "здраво".
И "друга" ће прицала-
>> Аллисон Буцххолтз-АУ: Збогом.
>> ПУБЛИКА: - "СВЕТ."
Здраво, збогом.
Аллисон Буцххолтз-АУ: Видео сам их у спрези друге недеље.
ТОМАС Реимерс: Тхе Беатлес?
Аллисон Буцххолтз-АУ: За реалних бројева.
Нису толико велика.
Не свидја ми се.
>> ТОМАС Реимерс: Имамо "ХЕЛЛО" и "Збогом."
И опет, ЦСС јуст авесоме, јер препознаје наше боје.
Не треба да ни брину да они постоје.
Они раде.
>> Аллисон Буцххолтз-АУ: Они постоје.
>> ТОМАС Реимерс: Па ЦСС мислим има 255 речи да разговарамо о боји.
Ако можете смислити боје ван они 255, као, ја ћу бити импресионирани.
Аллисон Буцххолтз-АУ: Да.
Мислим да би можда имати само дођи у праву после.
>> ТОМАС Реимерс: Па овде, видећете да имамо две кутије
Право на врху сваке друге, зар не?
Здраво и пријатно.
>> Аллисон Буцххолтз-АУ: Нема простора између.
Они само смоосхед Право на један преко другог.
>> ТОМАС Реимерс: Дакле прва ствар Претпостављам да треба да разговарамо о
хајде да је такође прицала- да.
Тако их ЦСС представља као нека врста кутија.
И као кутија, они имају садржај.
И садржај сада је некако ЗДРАВО или збогом и то је то.
У реду?
>> Тако је један од првих ствари које може да уради је можете додати пуњење.
Паддинг каже колико простора треба оставити на свакој страни.
Рецимо ја желим да кажем 10 пиксела на свакој страни.
И ја ћу да сецира у секунди.
Аллисон Буцххолтз-АУ: Све ове ствари овде
ће бити углавном у пикселима за остатак семинара.
Идеш да видим да има неки простор око ње, зар не?
Па шта ви не видите овде је ту је ово невидљиви врста паддинг
са сваке стране, који каже, као, Ок, имате свој кутију цонтент--
>> Аллисон Буцххолтз-АУ: Да ли желиш да само повуците елемент увид?
>> ТОМАС Реимерс: Да, то је добра идеја.
Аллисон Буцххолтз-АУ: Такође, сматрам да елеменат инспекцију је добар начин
да схватим да ли је нешто догађа погрешно, нешто неочекивано деси,
инспекцију ознаке и виде шта то је као преписан је корисно.
>> ТОМАС Реимерс: Па нисам сигуран ако ви можете видети ову боју.
Можеш ли ти?
Видећете ову паддинг на врсту ивице.
И онда видите стварни Садржај у плаво, зар не?
Дакле, то је врло основе кутије модела.
Имате садржај.
Онда имате паддинг.
>> ПУБЛИКА: Зашто не само користите кутију унутра до--
>> Аллисон Буцххолтз-АУ: Тако је.
Јер то је само одабир елеменат сада.
>> ТОМАС Реимерс: Аха.
Друге ствари.
Па хајде да разговарамо о томе паддинг команда на секунду.
Дакле, у ЦСС, мерења Потребно је да имате јединицу.
Дакле, прво морате износ.
Дакле, у овом случају, ми смо рекли 10.
А онда следећи смо рекли је пиксела, пк.
Остали оне које могу имати су ствари као центиметара, центиметара.
То можете учинити ствари воле, шта је 10 инча?
И то ће бити смешно.
>> Аллисон Буцххолтз-АУ: О, човече.
>> ПУБЛИКА: Вау.
>> ТОМАС и Аллисон: Да.
ТОМАС Реимерс: Па то је све паддинг.
Идем да се вратим у пиксела.
>> Аллисон Буцххолтз-АУ: Пикелс имају тенденцију да буду, као, стандард.
Када погледате много сајтовима, углавном раде у пикселима.
ТОМАС Реимерс: Значи да ћеш видети или пикелс-- они други које видите
је ем, који је један ем је једнака висини од фонта
који тренутно користите.
>> Аллисон Буцххолтз-АУ: Мм.
ТОМАС Реимерс: То је добар начин да се каже, Као, ја желим што више простора мом фонт
је узимање.
Аллисон Буцххолтз-АУ: Нисам знао да.
Можете научити нешто ново сваког дана.
ТОМАС Реимерс: Има Много мерења у ЦС.
Предлажем вам да их погледаш.
За све ваше случајеве, мислим пиксела би требало да буде довољно.
И они су и шта идете да видите
у већини примера урађено на мрежи.
Дакле, ми ћемо га оставити на пиксела.
>> Иоу цан алсо, ја треба да прицала- паддинг Поставља све паддингс.
Такође можете учинити нешто слично "Паддинг" да само договорен--
Аллисон Буцххолтз-АУ: Можда добићемо наш "здраво" леђа.
ТОМАС Реимерс: --то само сет паддинг на врху и ништа друго.
Тако су четири команде паддинг, паддинг-боттом, паддинг-лефт,
и паддинг-десно.
>> Аллисон Буцххолтз-АУ: Као што се и очекује за кутију.
>> ТОМАС Реимерс: Да.
Ништа превише луд тамо.
Да ли то има смисла?
Тако да је паддинг.
Идем да поставите све су паддингс назад до 10.
А онда ћу прећи на граници.
>> Па шта је граница је граница је чудно команда.
Потребно врсту три ствари одједном.
Дакле прво је колики си Желим да то буде као мера.
Опет, ја користим само пиксела.
И последња ствар коју сам треба додати да мерења
је једна ствар која не треба јединицу је 0.
То је заправо нетачно да дам 0 јединицу,
јер је 0 0 широм инча, пикелс, центиметара, како год.
Све је само значи 0, зар не?
Дакле, прво сте му дати мерење.
>> Онда му дати стил.
Зато ћу да кажем "добар."
И причаћемо о томе шта то значи.
И онда на крају, ти му дати боју.
Зато ћу да кажем "црно."
А ово су све ствари које смо сада видела, осим стила,
али ћемо разговарати о томе.
Дакле, ви момци видели мерења, и ти си се боје.
А шта се дешава је добијамо ово Лепо Црна граница око њега, зар не?
Ви видите како смо то урадили?
>> ПУБЛИКА: Да.
>> ТОМАС Реимерс: Кул.
Па шта је то?
Пре свега, то је један пиксел.
То је очигледно довољно, зар не?
Као, то је један пиксел густа.
Или било би један пиксел, али ја сам зумирати, тако да је мало више
од тога.
>> Аллисон Буцххолтз-АУ: И ми имамо ово смешно резолуција телевизор.
>> ТОМАС Реимерс: Да.
Ти можеш да га већи, мањи, шта год.
Дакле, ево два-пиксел граница.
Видећете га два пута је дебела.
Следећа ствар коју морате је боја.
То није интересантно.
Нећу да причам о томе, заиста.
>> Аллисон Буцххолтз-АУ: Али стил Можда само мало интересантно.
>> ТОМАС Реимерс: Да.
Дакле стилу, мало је оних да Видим најчешће користе.
Први је чврста, следећа је испрекидана, а последња је Дасхед.
И овде се нижу.
Видећете да су гомила тачкица, зар не?
Добар начин да се на неки начин добити леп границу иде, цртице су такође прилично популаран.
>> Аллисон Буцххолтз-АУ: И онда, наравно, ја сам
Сигурно има доста други стилови које можете добити.
И ми имамо велики скуп линкови на крају за вас
да некако прегледати и погледај још хладном ЦСС.
>> ТОМАС Реимерс: А онда последња ствар, ми смо
ће говорити о бок модели јако брзо.
Ох, и онда граница, баш као пуњење,
имате и такве ствари бордер-лефт, граница-десно, бордер-топ,
бордер-боттом, који вам омогућавају да на одређеној граници.
Дакле овде је само граница лево-дефинисан.
Да ли то има смисла?
>> Аллисон Буцххолтз-АУ: То је кул начин да се нагласи ствари или додати
линије између различитих елемената.
ТОМАС Реимерс: Апсолутно.
Дакле, то је наш граница.
И последњи је маржа.
Као паддинг маргин је само што се није витхин--
Аллисон Буцххолтз-АУ: То је не око елемента
али у ствари око целе кутија које смо видели.
>> ТОМАС Реимерс: Да.
Алисон је савршено рекао.
Није, као, у унутрашњости елеменат, то је око целе кутије.
То значи ствари као што су позадина се не односе на њега.
И у суштини каже, Као, ја не желим ништа
у оволико простора за мене.
Дакле као овде имамо маржа од 10 пиксела.
Па ништа у року од 10 пиксела треба да буде поред мене.
То је врста њеног простор али некако не.
Дакле, то је врло основе кутије модела.
Да ли то има смисла?
Цоол, кул.
Аллисон Буцххолтз-АУ: Страва.
Зато сада ми мислимо само имамо наше цоол ресурсе
да ћемо вас поведем кроз врло брзо.
И ми ћемо добро стварно--, имамо још интернет?
>> ТОМАС Реимерс: Хајде да видим да ли могу да отворим их--
само да видим да ли сам могу добити интернет брзо
док Алисон говори о било чему Алисон жели да разговара о.
Аллисон Буцххолтз-АУ: Тако басицалли-- ја не радим
Знам шта још могу да кажем у овом тренутку.
Али ово су неки стварно добри ресурси.
То су оне које Томас и ја користио
и да ми заправо користи да се припремимо за то.
В3Сцхоолс је онај који вас момци треба да сте видели раније.
Препоручујемо га за Много ствари са ЦСС.
Знам да сам га препоручио да мој секција све време.
>> Једна од великих ствари је то то омогућава вам да врсти збрке са ЦСС
и виде промене тренутно у ово,
као, двапут прозор видели да има.
Тако да не морате да бринете о постављање своју веб страницу,
или постављање вхост у вашем локални уређај и локалне домаћин,
и добијање свих тих ствари рад.
Она је уграђена у праву у оквиру странице.
>> И има ово мало лекције које можете
проћи да уче Више о селектора,
или уче о манипулисању ваше фонта, или позадина, или слика.
И имате ово тренутна резултати које сте
не морају учинити нешто друга преп рад за.
Тако Волим В3Сцхоолс.
То је сјајно.
Да ли ради?
>> ТОМАС Реимерс: Да.
Не, није.
Да ли желите да покушате и поново мој компјутер?
Или желимо да--
>> Аллисон Буцххолтз-АУ: Мислим, добро, то ће такође бити на мрежи.
Сви слајдови ће бити на мрежи.
Тако да сам само високо препоручити радим ово.
>> Ово је одлична као и само као Цхеат Схеет.
То је само све основне команде које имате.
Сјајно је када први пут си почевши од вашег сајта.
Јер можда нећеш желим да улазим у све
стварни Нитти Гритти Дизајн-тешке ствари.
Само треба да га форматирање на начин да има смисла и вољу
учинити за сада.
И ако заиста желите да улазим у то, ја знам
ово је као један од Томас омиљени референце.
Ми смо га користе у преп, и то је феноменално.
То је Програмер из Мозилла.
>> ТОМАС Реимерс: Па Опера су људи који праве Фирефок.
И то је само њихова програмер референца, што мислим да је супер.
И има диван списак ресурса.
Тако смо бих--
>> Аллисон Буцххолтз-АУ: А онда последња ставка је
кад покушаваш да дизајнирати сајт,
добити инспирацију из стварима да мислите да су лепе.
Прегледом елемент, инспекцију изворни код
може бити од помоћи супер за покушавајући да схватим
томе како обликовати вашу властиту веб страницу.
>> Често, осећам се као најбољи начин, поред експериментисања,
је само да погледате ствари које су прилично.
Мислим да је стварно тешко је само дизајнирас ствари сами,
посебно у почетку.
Дакле погледајте сајтовима да уживате гледајући.
Схватити шта чини им апелујући на тебе.
А онда слободно покушајте и понове то.
>> ТОМАС Реимерс: Тако је.
Чак као сајтовима овако, можете видети
дефинитивно постоји див на врху.
И онда имате још један див унутар Овде, која је ЦСС Авесоменесс.
И онда имате гомилу линкова овде.
Ако сте стварно само увид елементи, можете сортирати на
почети да види шта радим сајтова изгледају, а како ја могу
поново да ако желим да.
Да ли то има смисла?
Дакле, имамо само три минута.
Па питања?
Било који од њих?
Да.
>> ПУБЛИКА: За боју правоугаоник, како бисте
бих-- ако је нисте желе иде преко целе странице, могао
сте направили је прошло преко само пола страна или само текст?
>> ТОМАС Реимерс: Да, апсолутно.
Па да видим ствари.
Имам две идеје.
Пре свега, ви такође могу користити процената.
>> ПУБЛИКА: Стварно?
>> Аллисон Буцххолтз-АУ: Па нешто да се угледају је релативна позиционирање.
То је нешто што нам немају времена да се баве,
али то је нешто што дефинитивно Препоручујем момци проверити.
>> ТОМАС Реимерс: Со одсто.
И видите како смо успели само 50% од ширине?
Аллисон Буцххолтз-АУ: Ако вас заправо знају број пиксела,
можете бити прецизнији тако.
Можете поиграм се са њом.
Али 50%.
Ако бисмо променили величину наше бровсер, што би било мање.
>> ТОМАС Реимерс: Па, то је Право у основи 50% сад, мислим.
То је 50%, а затим маргина је додао да то.
ЦСС има много хирова.
И за сада је ово 50% од ширине странице.
Али запамтите да имате 10 пиксела скинут са сваке стране.
Дакле, ако вас је било да се крећу да против лева ивица претраживача,
онда би то личило 50%.
Опет, као што сам рекао, ЦСС може бити много Гуесс-и-проверу.
Као, мислиш да нешто није ће се понашати на један начин,
али се понаша потпуно другачији начин.
>> Аллисон Буцххолтз-АУ: А ти само се паметнији,
а ти само добити бољи интуиција за то како се крећете дуж.
>> ТОМАС Реимерс: И Још је горе и горе.
Дакле то је заиста само трка.
>> Аллисон Буцххолтз-АУ: То је супер охрабрујуће.
Желимо им да воле ЦСС.
>> ТОМАС Реимерс: ЦСС је страва.
Запамтите то.
Још питања?
>> Аллисон Буцххолтз-АУ: једна ствар.
Још нешто?
Цоол.
>> ТОМАС Реимерс: Страва.
>> Аллисон Буцххолтз-АУ: Па, вама ако момци имате неких питања касније,
ми смо увек на располагању као и обично.
Вероватно ћете видети неке од нас за коначних пројекте
и дефинитивно на Хацкатхон.
>> ТОМАС Реимерс: Апсолутно.
И на сајму.
>> Аллисон Буцххолтз-АУ: И на сајму.
Ох.
>> ТОМАС Реимерс: Радујем се видим сву своју авесоме--
>> Аллисон Буцххолтз-АУ: Видећемо све ваше страшан сајтове
да ће бити лепа.
ТОМАС Реимерс: Увек можеш види, као, Форум
који је имао, као, добра ЦСС и затим као они који нису покушати да урадим ЦСС.
Аллисон Буцххолтз-АУ: Такође, још један ствар, још једна ствар да размотри
је Боотстраппинг.
Дакле Бутстрап је супер.
>> ТОМАС Реимерс: Гоогле да ако ти--
>> Аллисон Буцххолтз-АУ: Гоогле је.
То је сјајно.
Ви ћете га волети.
И сада када имате Основно разумевање ЦСС,
то ће бити много више смисла.
Страва.
Хвала, момци.
>> ТОМАС Реимерс: Хвала вам пуно.