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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[ЦС50.ТВ] 

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