[Мусиц плаиинг] 

Даг Ллоид: Па хајде да узмемо још један Видео да причамо о још једном језику. Овај пут ћемо причати о ЦСС. Дакле, ЦСС, што је скраћеница за Цасцадинг Стиле Схеетс, је још један језик који користимо при изградњи сајтова. Размислите о томе овако. Ако ХТМЛ је оно што ми користимо да организују Садржај желимо да стави на нашој страници, ЦСС је алат који смо генерално користи прилагодити како наши сајтови изгледају, и како је корисничко искуство стварно је, у интеракцији са нашег сајта. 

Слично ХТМЛ, ЦСС није програмски језик. То нема логике. То не мора варијабле. То нема било какву да проток у вези ствари које Ц нема. То је стил језика. И његова синтакса је прилично једноставна и само описује како елементи нашег страна има одређене ХТМЛ елементи треба да се модификује. У том смислу, ако нема ипак гледали нашу видео на ХТМЛ, или су упознати са ХТМЛ углавном, хвала Можда желите да погледате који Први, јер је ово дискусија о ЦСС ће зависити нека сазнања о ХТМЛ. 

Дакле, овде је стварно једноставна ЦСС стилесхеет. Чак и ако никада нисте Пре него програмирани са ЦСС, Прилично сам сигуран да могу да схватим шта то ради стиловима. Шта он ради? Па, примењено на тело нашег веб страна, све између тела тагова на нашем ХТМЛ, и поставља боја позадине те странице до плаве боје. Па, то је врло једноставно стиловима. То је заправо врло хумани пријатељски језика, ЦСС. Дакле, чак и ако никад користили раније, вероватно могао да претпостави шта је урадио. У ствари, ако лоадед страницу, где ово стилова је некако уграђен, боја позадине нашој страници би бити плаво, а не стандардни бели. 

Па како да градимо стилесхеет-? Па прво, морамо да идентификују селектор. У последњем примеру, да селектор је тело. Онда имамо отворено коврџава браце, а ми смо ће почети дефинисања стилова за тај селектор. Између заграда, ми само списак кључних вредности парова. Претходни вредност пар је боја позадине плава зарез, али можемо да урадимо више од њих. Можете имати више ствари применом на тај таг, те селектора тела. Сваки од њих је одвојен би а зарез, а ми зовемо сваки од њих декларација, ЦСС декларација. Када смо завршили са свим стајлинг и ми желите да примените на том таг, само се затвара Цурли браце да прекине стила, и готови смо дефинисање стила за тог селектора. 

Које су неке заједничке особине ЦСС? Па, можда желите да ставите граница око нечега. Дакле, може се рећи, граница, то би било ваш кључ, и онда ваше вредности ће бити, Који стил, боје и ширине желите да буде. Дакле, стил може бити солидан линија, испрекидана линија, испрекидана линија, испуст линија, која ће бити таласаста линија. Можда желите да га бити плаве или црне или зелене. Можда желите да буде 1 или 2 или 10 пиксела ширине. Можете одредити све те ствари. Можда желите да поставите позадину Боја Вашу страницу на одређени начин. Већ смо видели да, постављање позадина тела да буде плаво. 

Тада можете користити кључну реч, тако ЦСС има одређене боје који су уграђени у њу, плава, зелена, црна, веома једноставна боје знамо. Али такође можете навести било који Хек боја која желите. Подсетимо се да боје могу бити идентификовани низом од три хек бројева од 0 до 255, РГ и Б, црвене, зелене и плаве компонента. И тако можемо да наведемо свака боја желимо од, уместо плаве или зелене или црна, користећи килограма и затим шест цифара хек, и да би нам дају шест цифра боје. Дакле, то је боја позадине. 

Такође имамо први план боја, која је обично ће бити текст на Вашу страницу. А ти слично могу да урадим са кључну реч и или шест цифре хек. Дакле, можете одредити било коју боју си Желим за текст на Вашу страницу против одређеног боја позадине, изнад. Такође можете променити и носити са словима, као и начин текста је изречена на страници. 

Дакле, можете да промените величину фонта. Можете користити кључне речи као што су екстра, Веома мали, или кк мала, средња или, велика, и тако даље. Можете користити фиксне тачке, 10 поинт, 12 тачака, и тако даље. Можете користити процентима, 80%, 20%, где је 100% је подразумевани фонт величина, која се обично ће бити нешто као 11 или 12 поена. Или можете чак и да засновати са од најновијег величине слова. Ако сам написао нешто и знате оно што желите је да би било мање, али не знате тачно шта вам величина Желим да то буде, добро, можеш само да кажем, фонт сизе мањи. И то ће засновати са од, само се горе, то је фонт сизе. И можете добити мање или веће. Дакле, постоји много другачији начини да одредите величину слова. 

Можете одредити шта Фамилија фонтова желите. Ако имате посебан име, постоји начин на ЦСС-- нећемо да разговарамо о томе овде-- да се дефинише веома специфичан фонт и уградити га у своју страну. Такође можете да користите генеричке имена. Има много сигурних фонтова веб које су унапред дефинисани у ЦСС. А ако сте корисник Мицрософт Канцеларија у последњих 20 година, вероватно сте упознати са многи од ових фонтова сигурних веб Већ Тимес Нев Роман, Ариал, Цоуриер Нев, Грузију, Тахома, Вердана, и тако даље. Они су сви сматрају безбедним веб фонтови. И заправо, део је Разлог су дошли да буду је да се користи да би веб-- сваку страницу је приступ овом подразумевано сет фонтова са различитим серифа, а све то фонта ствари нећемо ући, али они су обично доступна у вашој ЦСС, чак и ако не иначе дефинише фонтове. На крају, можете ускладити свој текст, уместо да буде, по дефаулту, поравнати лево, можеш поравнајте га на десно, или сте могли да алигн центрирана, или оправдано тако да је ударио обе маргине. Дакле, то су све опције које можете користити да промените шта је ваш текст изгледа, и како је приказан на вашој страници. 

Ваши селектори не морају да буду само ознаке. Раније смо видели тела таг селектор, и селектор ознака не изгледа баш тако. Иоу наме ознаку, а онда вам дефинисати стила за ту ознаку. Али можете да урадите нешто назива селектор ИД. За одабир ИД изгледа прилично слично. Али приметите, да сада не користим ХТМЛ ознака, ја користим, у овом случају, #уникуе, или хасх јединствен. Ако се сећате из наше видео на ХТМЛ, разговарали смо о томе како ознаке могу имати атрибуте. 

И један атрибут који се односи да скоро свим ХТМЛ тагова, али нисмо разговарали о томе, је нешто што се зове лична ознака. Дакле, ово посебно ЦСС би примењују се само на ХТМЛ таг који има веома специфична ИД, који сте по имену. Дакле, ако имате негде у коду, негде у вашем ХТМЛ датотеке, ознаке и вама навести као атрибут тага, ИД једнако јединствен, овај Посебно стиловима Овде ће се примењивати само између да ознака са ИД за јединствен. 

Такође можете учинити нешто назива селектор класе. Дакле, поред што имају ИД атрибута, можете такође додати цласс атрибут ХТМЛ тагова. А када користите атрибут цласс, се може применити на више ознака. Дакле, ако имате неколико ствари које су слични, можда желите да кажете, отворена ознака бла, бла, бла, бла, класа једнако студенте. И онда ова стиловима би важило сваком таг чији је класа студената. У овом случају, ми бисмо подесите боја позадине у жуто, и ми бисмо поставили непрозирности, која је ознака нисмо разговарали о, али само бави како транспарентна нешто је до 70%, у овом случају. 

Постоје две опције за писање стилова. Можете их писати директно у ХТМЛ постављањем стилесхеет- између стила тагова. А ти стиле ознаке унутра од ХЕАД вашег веб страници. Можда више омиљени нацин да се је да се напише посебан .цсс фајл, а затим га повезати у своју документовати помоћу линк ознака. Линк ознаке, опет су разликује од хипервеза, ако се сећате из нашег видеа ХТМЛ. И линк тагови су како повуците у одвојеним датотекама. То је некако као еквивалент #инцлуде за веб програмирање. 

Дакле, хајде да погледамо табле.ХТМЛ. Ако се сећате из наше ХТМЛ-Видео, показао сам пример веома једноставно множење сто који је изгледао прилично ружан, а можда има начин да буде боље ЦСС да би заправо изгледају више личи на умножавање сто, или нешто То није само слепљене без стварног подели између редова и колоне. Дакле, кренимо преко до ЦС50 ИДЕ и погледај колико ЦСС може, на неки начин, твеак оно што смо почели са раније, и чине га нешто много боље. 

Дакле, ми смо у ЦС50 ИДЕ сада, и ако непозната, ћемо повући у ово сто да ХТМЛ страница. Табле.ХТМЛ основи само дефинише садржај олуја са мултипле-- је требало да буде четири од четири таблица множења. То је прилично једноставан. И ми би помислио да би изгледају прилично добро организована. Али, у ствари, када смо прегледали ову страницу, видимо да је то нека врста ружна, зар не? Јасно ми имамо редове и колоне овде. Постоји нека врста одвајања. Али то није смисла раздвајања. Ми заправо не добија превише информација овде. И нема раздвајања између редови и колоне у смислу хоризонталних или вертикалних правила. Могли бисмо вероватно да ово погледај мало боље. Дакле, хајде да пробамо. Зато ћу затворити ову картицу овде. И ја ћу да затворим свој табле.ХТМЛ, и ја имам другу верзију овде зове табле2.ХТМЛ. Ми ћемо отворити то. Тело странице је прилично исти, али сам мења мало на врху. И ја ћу дођите овамо. Обратите пажњу да је овај пут, ја сам коришћењем уграђене у стилу ознаке. Ја сам отворио стил ознаку, а сада сам дефинисање ЦСС стила само унутар од тога. Имам стила који каже, сто. То је мој избор ознака. Ја не користим тачку или хашиш, које бих да радим ако И је помоћу ИД или селектор класе. Имам селектора ознака ми-- сто. Овај стил ће применити на сваком столу таг. Изгледа да желите да поставите један Пикел широк, чврста плава граница, у мом столу. То звучи као да би вероватно хелп ситуацију, зар не? Ми ћемо имати ствари изгледају много боље. Дакле, ово је у реду. Стилски, управо сам уграђен мој стила овде. То је свакако прихватљив начин да се то уради. Да видимо шта ово личи. Зато ћу се вратити овде, и Ја ћу да прегледате моју табле2.ХТМЛ. Па, то није баш оно што сам желео, али то је управо оно што смо тражили. Рекли смо да је овај стил ће да се пријаве на наш сто. Наша сто сада има један пиксел широк, чврста плаве линије око ње. Ми заправо не добија у ћелијама табеле. Управо се за столом. Тако ЦСС радио. То је примењен стилова за наш сто. Али није баш урадити оно што смо желели да уради. Како да стигнемо да урадимо оно што желимо да уради? 

Па, хајде да погледамо још један Верзија ово табле3.ХТМЛ. Дакле, само ћу затворити ове картице. Ја ћу да се вратим овамо на мој филе дрво, и отвори табле3.ХТМЛ. Опет, то ће лепо изгледати слично овде у почетку. Али обавештење, овај пут, уместо да користите стилова ембеддед право тамо, Ја ћу карика у стиловима користећи линк ознаку. Дакле, очигледно сам повезивање у А стиловима зове таблес.ЦСС, и то добро једнако стиловима само меанс-- добро, шта је овај фајл у односу на оно што Ја сам доинг-- је стиловима да сам користи за моју страницу. Дакле, ако заиста желим да видим шта Ја радим са ЦСС овде, Морам да идем да отворено табле.ЦСС филе као добро. Дакле, ми ћемо се вратити овамо поново да морамо да чувамо дрвета. Ту је табле.ЦСС. Ми ћемо га поп отворен. Сада видимо мало ЦСС. Очигледно, имам пар ствари дешава овде. Очигледно желим ставити пет Пикел широк, чврста црвена граница, око мог стола. Већ знамо да је то иде да само да на периметру. Видели смо да је у табле2.ХТМЛ. Са сваком реду, ја очигледно желео да прецизира да је висина реда је 50 пиксела висока. Дакле, за сваки ред, запамтите то је оно што је ТР ознака ради, Правим је 50 пиксела висока. 

На крају, ја имам овај коментар. А ово је како правимо коментаре у ЦСС. То је врло слично да искористе блок коментари синтакса коса црта звездице. Све текст желите. Нема Сласх Сласх иако у ЦСС. За кратке инлине коментаре, имамо да користите ову посебан формат овде. Изгледа као да радим Многе ствари у мојим ТД тагова. Не заборавите ТД ознаке, или сто података, који су стварно само колоне унутрашњост наши редови, и по свему судећи за сваки комад података у мојим столом, желим да подесите боју позадине да бити црна, боја буде бела, боја је боја у првом плану. Дакле, ово ће бити текст мог страници. Желим велика слова, 22 указују фонт, а ја желим да је од породице фонтова, Грузија. Дакле, ја не идем у имају подразумевани фонт. Ја ћу навести Грузију, која је једна од оних сигурних фонтова веб које смо раније видели. Желим да мој текст да се усклади централно, у средини кутије, Не желим да буде лево поравнати или десно поравнати. И желим своју ширину колоне да буде 50 пиксела ширине као добро. Хајде да погледамо шта ово личи, и види да је ово можда побољшање. Зато ћу да идем у табле3.ХТМЛ, који опозив, укључује табле.ЦСС као веза, и ми ћемо га прегледати. То је много боље, зар не? Ово је заправо почиње да изгледају Много више као таблицу множења. Имам ту црвену границу око мог стола, али сада Такође сам прецизирао да Сваки ред је 50 пиксела ширине, или је то 50 пиксела талл-- изговор мене-- свака колона је 50 пиксела ширине. Подаци у свакој колони, а само подаци, има црну позадину. Зато они беле линије су ту. Пошто је простор у између свих тих ћелија, то није граница у и само по себи, то је само Ја сам попуњавање само у ћелије, која је заправо чини границе табеле, које очигледно је постојао све време, да је само танке беле линије. Сада су видљиви. Сада су поп офф на екрану. И то је врло једноставан стилова које сам примењује, и сада мој сто изгледа много више као четири од четири таблица множења, уместо само Јумблед хаосу, где све је јасно редове и колоне, али није супер добро организован. Ми смо заправо само гребање по површини шта можете да урадите са ЦСС овде. Срећом ЦСС документација је прилично јасан. Ви ћете користити неке од својих атрибути, прилично често. Они са којима смо разговарали о раније у овом видеу. Постоји неколико Јеси ли то ти Вероватно неће користити све. И то је у реду, превише. Али само знам, да постоји доста документације тамо. Дакле, чак и ако нисмо покрива све, ви сигурно не препуштени сами. Али ЦСС је стварно забавно да експериментишу са. И снажно бих вам и да се играте са својим веб страницама, и видите како можете да их направи изгледају и осећају да побољша корисника Искуство посетите страницу. Ја сам Доуг Лојд. Ово је ЦС50.