[Powered by Google Translate] [ЦСС] [Јосепх Онг - Универзитет Харвард] [Ово је ЦС50. - ЦС50.ТВ] 

Данас ћемо говорити о ЦСС или Цасцадинг Стиле Схеетс. 

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

Па како да користите ЦСС са ХТМЛ? Узми овај лошег изгледа сајт сам написао. Ако Роб је да погледате на овом сајту сада, вероватно би рекао нешто попут: "Вау Мој увод изгледа ужасно. Џозеф, ти си ужасно дизајнер." "Коришћење Тимес подразумевани фонт Хелветица је много боље." 

Дакле, оно што је можда најједноставнији начин да примените стил Роб жели? Најочигледнији начин много људи у почетку написао ЦСС је била да се оно што зовемо стил декларације право у самом елементу коришћењем ХТМЛ стил атрибут. Изјава стил једноставно се састоји од имовине ЦСС у ХТМЛ елемента желимо да променимо праћено двотачком затим нови вредности имовине и тачку и зарез на крају. На пример, рецимо Роб жели црну ивицу око његовог увођења. Прво смо ставили стил атрибут див Роб овде онда унутар двоструких наводника ставио ЦСС изјаву: "Бордер: 1пк солид црно;" 1 пиксел односи на ширину границе, чврсто се односи на стил границе, и боја на крају одређује шта је граница у боји је. 

Ако желимо више стилова на елемент, пишем ове декларације у низу. На пример, ако Роб жели главом текст у Хелветица са плавом позадином и више простора око текста, можемо да урадимо ово: стиле = "фонт-фамили: Хелветица, бацкгроунд-цолор: блуе; паддинг: 5пк;" Последња тачка-зарез је заправо опционално, али људи обично га задржи у ради доследности екипе. 

Ми ћемо сачувати објашњавајући неке од хладнијих и сложеније ЦСС својства за још један видео. Ако имате нешто на уму, само гугујеш ефекат који желите следе ЦСС вероватно ће вам дати веома добре резултате. Кул ствар је да је ЦСС прилично широка, зато претпостављам да, ако постоји нешто што желите да урадите - са разлогом - ЦСС може вероватно то урадити. Ми то називамо врсту стајлинг инлине стил. Елемент стил је, добро, у складу са почетне ознаке. 

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

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

Сада, шта ако смо хтели да изаберете унутрашњост х1 за интро Роб? Можда мислите: "Хајде да се стави ИД на њему, а онда крећу наше раније стилове." То ради, али има ЦСС друге начине што вам омогућава да изаберете елементе користећи оно што називамо цомбинаторс да се мешају једноставне селектора. На пример, размак лик може да се користи као цомбинатор навести све инстанце 1. селектора који живе унутар другог селектора. То звучи много компликованије него што заиста јесте. Ево примера. Ми ћемо упишите # опљачка, додајте размак, а прате га са Х1, Још један једноставан селектор зове таг селектора да бира врста елемената као дива или пасуса. Простор комбинује наше 2 једноставне селекторе, применом ЦСС декларације и великих заграда у х1 ознака који живе унутар елемента са ид = "роб". Само да вас убеди да то ради, ја ћу променити боју фонта на белој, освежење, и, изгледа, Роб главом је сада бела. 

Сва овог рада показује да коришћењем правила уместо уметнуте стилова можемо да добијемо много чистији код. У ствари, ако је овај стил блок почиње постаје мало велики, Могу чак да повуче ове стилове у једну потпуно другу датотеку. 

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

У случају да се питате, једноставне селектори садрже личне селектора таг и селектори попут оних које смо управо видели као и цласс селектори за избор елемената са одређене класе, атрибута селектори за избор елемената по другим атрибутима као што су тип = "радио" инпута за радио дугме, као и псеудоселецторс лебди и фокус за навођење стилинг када интеракције воле моусинг преко елемента дешавају. 

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

Комбиновањем ових селекторе и цомбинаторс, можете да прошире спектар стајлинг можете да постигнете на одређеној веб страници и писати ЦСС ефикасније. Са само неколико линија ЦСС ме видите овде куцање, Брзо сам се направити нешто овако изгледају овако нешто. 

Ја сам Јосиф, а то је ЦС50. 

[ЦС50.ТВ] 

Ух, одакле да почнем? Пусти ме да урадим без - [смех] Ок. Додавање - Пусти ме да промене ту формулацију. Оох. Извините.