[Възпроизвеждане на музика] ALLISON BUCHHOLTZ-AU: Така ние сме основно само ще да ви даде западнала на CSS, защото знаем че не е обхваната във всички участъци. И ние наистина искате да се уверите, че сте момчета имат този инструмент, на ваше разположение, защото тя има способността да се направи вашия уеб сайтове изглеждат много по-хубави. 

И ако сте изграждане на уеб сайт, а след това вие може би искате да направите това доста. Искам да кажа, че не е нужно да, но бих го предложа. [Смее се] Ако искате потребителите да го използват, може да се искам да го малко [недоловим] направи. Така че ние ще се опитаме да ви дам само някои основни инструменти и разбиране, така че когато изляза и да сте изследване неща за CSS, това не е завърши безсмислици, като CSS понякога да бъде. 

TOMAS Reimers: Да. Алисън го каза доста добре. Така че предполагам, първото нещо, което трябва да започне с какво е CSS? Така че CSS е страхотно. CSS-- 

ALLISON BUCHHOLTZ-AU: Това е Името на нашия семинар. 

TOMAS Reimers: Да. Това наистина е много важно, че Вие разбирате, че по това време. Ако само отнеме една нещо, то е, че CSS ако страхотно. Две е CSS е съкращение от Cascading Style Sheets. Така че в същността си, CSS е стил лист, което означава, тя ви позволява да оформяте страницата. И тогава какво означава това, че е начин да добавите стил на вашия уеб сайтове. Така че по стил, имаме предвид всичко това не е structural-- толкова неща, като цветове, фон образи, граници, като, уплътнение, маржове. Ще говорим за това, което всичко, което означава по-малко. 

Така че ние току-що била реализирана и отвори и двете от тези, в текстовия редактор. Така че това е index.html. И това е main.css. Така main.css няма нищо. ALLISON BUCHHOLTZ-AU: No стил досега. TOMAS Reimers: Няма. И както ще видите, че е наистина грозно място. ALLISON BUCHHOLTZ-AU: Това е просто. TOMAS Reimers: Да. Да, това не е грозна, това е просто минималистичен. И тогава тук имаме index.html. И така за бързо обзор на HTML, Allison, искате да говорим само за страницата? 

ALLISON BUCHHOLTZ-AU: Да. Така че очевидно, ние имаме нашия HTML маркер, който просто имена HTML файл. Ние разполагаме с глава тук, с CSS Awesomeness, which-- ако се върнете. Къде е това? 

TOMAS Reimers: Oh. Да, можете да видите. ALLISON BUCHHOLTZ-AU: И забележи хедъра е този с глава раздела чак до тук. И тогава "Hello, World!" е текста, който ние имаме само показване на мрежата страница, която is-- се върна. Back. Което е само в нашето тяло here-- на обикновен текст. Също така, едно нещо, за да забележите, ако погледнете тук, Tomas включване на тези двама от нашата пързалка. Така че, стига да имат всичко три от тях, всичко е наред. Те могат да бъдат под каквато цел те искат. Какво е най-важно е само, че имате всеки от тези три неща. 

TOMAS Reimers: Cool. Добави тип док? ALLISON BUCHHOLTZ-AU: Да. TOMAS Reimers: Да. Cool. ALLISON BUCHHOLTZ-AU: Очевидно, моите микрофони не ме харесват. TOMAS Reimers: О, да ни даде сек просто докато Allison минава извън нея микрофон. Така че, да. Така че ние имаме нашата основна страница. Това е вид на Unstyled. Ние не разполагаме с много. Ние просто трябва основно текст. Имаме стил лист. Имаме титлата. Така че просто голи обезкостено компоненти направи сайт. 

Така че от там, нека говорим за това, CSS е и как изглежда и всичко това. Така че за that-- ALLISON BUCHHOLTZ-AU: Обратно към слайдовете. TOMAS Reimers: Назад към слайдовете. И Allison може да поеме. 

ALLISON BUCHHOLTZ-AU: Woo. OK. Така че във вашия CSS файл, започваш да има много от тези неща, наречена селектори. Това просто ще бъде основа на вашия CSS файл. Това е просто щеше да бъде много и много от тях. Така че избора. Това е само за обща анатомия. Отиваме да мине през примери, защото ако никога момчета Гледах раздел ми, аз се чувствам харесват нещата в абстрактното наистина не е логично. Това винаги помага да се види от примерите. 

Така че ние имаме някои избора. Това ще бъде някакъв идентификатор за това, което искаме стила да прилага по отношение на. И тогава ние може да има никакво набор от правила и ценности. Така селектори, които може да видите може да е нещо подобно на тялото, или точка с P, или удар с глава, или каквото и да, каквото си искате вашите HTML тагове да бъдат. 

Така че в този случай, ние имаме тяло. И ние имаме някаква норма, които това съответства до каква си стил се отнася до. Така че в този случай, ние имаме цвета на фона и шрифта тегло. Така че това няма да се промени На фона на всичко, в рамките на всеки орган етикет на нашия HTML файл. И това ще ви даде то това светло синьо стойност. 

Така, че ще ходи да се направи фон светло синьо. И тогава всичко в тялото е ще има тегло шрифт смели. Така че това е просто ще смели цялата ни текст. И това е само един селектор. Но вие може да има много много от тях. И тъй като ние ще покажем по-късно, малко повече за това как че работи и още примери. Всичко, което искате да добавите? 

TOMAS Reimers: No. Алисън го. Ние просто ще намали до една Например тук, на нашия пример сайт. Така че нека да вземе реално това. Той е идеален. Така че аз съм просто ще копирате и поставяте това право в нашата main.css файл. И аз ще го спаси. И тогава ние ще го изпълним. Така бележка страна, една от най- -разочароващ неща е, ако не запишете файл, и тогава, като, презаредете страницата, и други подобни, защо не е промяната се случва? Това се случва. Така че тук ние видяхме, че ние направихме нашия уебсайт светло син фон и някои удебелен текст. 

Трябва да спомена, ако момчета имат въпроси за нищо което правим, моля не се колебайте свободни да ни спре и да ни питате. Ние сме напълно готови Полето на въпроса. 

ALLISON BUCHHOLTZ-AU: Очевидно е, че с CSS, всичко се гради върху себе си. Така че, ако едно нещо не има смисъл сега, ние не искам това да ви блато късно. 

TOMAS Reimers: Така че нека вид дисекция това. Така че искате да започнете с лост за тук? 

ALLISON BUCHHOLTZ-AU: Да. Както казах преди, тялото е само нашата избора тук. Така че, ако се върнем към нашия index-- ах. 

TOMAS Reimers: Кои Просто затвори. Дай ми секунда. Така File, Open, index.html. ALLISON BUCHHOLTZ-AU: Cool. Така че, ако забележите тук, ние имат следните тагове тялото, нали? Така че за избор на точно съответства таговете, че ние говорим. Така тялото точно тук. Така че това, което казвам е, everything-- да се върнем? Иска ми се да можех просто като докоснете екрана. Тя ще бъде толкова по-хладно. 

Така че нищо в тези, маркери за тяло, които видяхме е просто, като текстът, и тялото като цяло се отнася до тях, като, на заден план. Ако някога искате да промяна на фона, че ще е по таг тялото. Просто има тези правила се прилагат към тях. 

Така че ако трябва да отидете index.html and-- всъщност, може да имаме нещо извън тялото? Ако имахме, като, долен колонтитул или нещо, то няма да се прилагат за настоящата. Но всичко в рамките на тези тагове тялото ще да бъдат засегнати от това тяло избора, който сме направили. Така че, ако ви се налага да въвеждате нещо друго there-- 

TOMAS Reimers: Нека да карам, че у дома. Така че, ако имахме div-- така че това е просто още един таг можете да имате. Отивам да го затворите. Или нека да направи тази точка. Така стр означава ал. И в този параграф. И тогава аз казвам: "Това е текст." Cool. И тогава аз направих това правило се прилага за една точка, а не на тялото. Ще видим как ще се прилага само за новосформираната алинея, нали, не цялото това нещо. Това прави ли смисъл? 

ALLISON BUCHHOLTZ-AU: Така че всичко това е тялото, но сега нашата избора просто съответства на параграф. Така че ние просто трябва смела и синьо за тази конкретна точка, защото това е единственото нещо, което е затворено в маркер стр. 

TOMAS Reimers: Това прави ли смисъл сортиране за това как нещата се капсулират други неща? ALLISON BUCHHOLTZ-AU: Също така, просто да се каже, като, един от най-добрите начини наистина да се удобно с CSS е просто да правим нещата по този начин, Просто го изпробвате. Това е много проста, за да напишете нещо вън, удари Refresh, и да видим какво ще стане. И тъй като с най-CS, експериментиране може често да доведе до много по-добро интуитивно разбиране. Дори повече, отколкото ни само, харесват, да говори с вас. 

TOMAS Reimers: Абсолютно 100% са съгласни по тази точка. Така че, ако се върнем към това, нека да започнем дисекция точно това, което тези две направя. Така че ние имаме две правила за това. Така че първата е цвета на фона. И вие виждате, че ние сме го настроите равна на стойността, светло синьо. 

Така че в CSS, CSS е нещо на много свободна за това как ти е позволено да определят цвета. Така че можете да ги определят по име. Можете също така да се направи нещо като "червените". И след това, ако се върнем към това, ще видите, че фонът е червен. Можете също така да получите really-- I смятате може да стане доста креативни с това, Не мога да ви? 

ALLISON BUCHHOLTZ-AU: I че можете да използвате шестнадесетичен. Не мога да ви? 

TOMAS Reimers: Да. Така че можете да използвате шестнадесетичен. Но си мисля, име-мъдър. Няма ли? ALLISON BUCHHOLTZ-AU: Можете да направите доста. Доста като повечето цветове, които ви може name-- харесват, мисля, че сьомгата е една. 

TOMAS Reimers: Ние ще пробвам сьомга. ALLISON BUCHHOLTZ-AU: I мисля, резедаво е там. TOMAS Reimers: Да. Вижте? Така че можете да получите доста креативен. 

ALLISON BUCHHOLTZ-AU: Вие може да стане доста креативен. Подобно на това, ако можеш да се сетиш за Име на цвят, това е може би там. Ако наистина искате глоба детайли, можете да отидете шестнадесетичен. 

TOMAS Reimers: Да. Така шестнадесетичен. Ако вие, момчета, не забравяйте това обратно от стария си PSET, Снимка Възстановяване, вие трябваше да се справят с тези шестнадесетичен стойности. И някак да обобщим това, което е, че, шестнадесетичен има три стойности, съхранявани в него. Така че това е в групи от две стъпки. Първите две представляват червената стойност. Вторият представлява зелената стойност. А последната е синьо? 

Така че FF се случва да представлява шестнадесетичен 255. Така че имате 255 червени, 255 зелено, и 0 за сините. И стойности варират между 0 и 255. 

Публика: Точно така. Така че по същество, бихме могли да търсите Интернет за всеки цвят, което искаме, и идентифициране на действително известни цвят комбо спектър, и след това можем да го сложи в? ALLISON BUCHHOLTZ-AU: Точно така. Така че ще трябва доста много пълен контрол над желаните цветове в рамките на CSS. Ще ходим ли да се говори за фонови изображения по-късно? Или искаме да направим това? 

TOMAS Reimers: Да. Абсолютно. Така че на първо място, само за да покаже, че червено и зелено е жълто. И ако имате нужда от помощ при намирането на това, Може ли Google нещо като "избор на цвят." ALLISON BUCHHOLTZ-AU: О, това е толкова добра. Обичам Color Picker. 

TOMAS Reimers: colorpicker.com е добър пример. И тук, ще видите, че имате пълен Photoshop-подобен избор на цвят. 

ALLISON BUCHHOLTZ-AU: MM-HM. Също така, готини неща, които са може да генерира цветови схеми така че не е нужно, като, сблъскващи се цветове. TOMAS Reimers: И след това тук е стойност до шестнадесетичен тук. Така че винаги може да се намери онлайн основно места, за да получите стойността на шестнадесетичен от. Това не е нещо, което просто, като ние виж цветовете на света в цифри. Това е повече, че отиваме на линия и ще разберете какво цвят искаме, и след това да вземе броя надолу. Защото това е просто много лесно начин за указване неща в CS. 

ALLISON BUCHHOLTZ-AU: И след това има also-- Забравя се точното наименование на обекта. Но определено има, I мисля, нещо от Adobe който генерира цветови схеми за вас, което е наистина страхотно, защото definitely-- това е понякога Трудно е да се разбере, о, ако искам да използвам този цвят, какво може да е друго полезно едно да използвате на друго място в сайта ми да, като, направи го хубаво и сплотено. 

TOMAS Reimers: Алисън говорим за един от Adobe нарича Kuler, мисля. Това е К-U-L-E-R. ALLISON BUCHHOLTZ-AU: Мисля, че да. Почти съм сигурен, че това е едно. 

TOMAS Reimers: Любимата ми е винаги е била Схема Color Designer. 

ALLISON BUCHHOLTZ-AU: Ooh. 

TOMAS Reimers: Коя е now-- 

ALLISON BUCHHOLTZ-AU: Ах, това е красива. 

TOMAS Reimers: И вие може да се каже, в общи линии, като, Искам три цвята един до друг. И тогава нека да направим нещо хубаво. И тогава можете да получите един пример на какво може да изглежда така. И тогава, ако мишката върху някоя от тях, той ви дава стойността на шестнадесетичен. 

Така че просто като добър начин да започнете мисля за цветови схеми или какви цветове в един сайт може да ти бъде добре заедно. Защото това може да се окаже учудващо Не е толкова лесно да вземем колкото си мислиш. И тогава друга готино нещо Винаги съм се намери за този сайт е, ако ви удари Примери, тя ще покажа какво пример сайт може да изглежда като използва тази цветова схема. Както и да е. 

Обратно към действителната CSS. ALLISON BUCHHOLTZ-AU: Но очевидно, ние Като знаете това позовавания биха могли да бъдат полезни. TOMAS Reimers: Не, те Определено може да бъде полезно. Така второто правило, Алисън? 

ALLISON BUCHHOLTZ-AU: Да. Второто правило е просто съответстваща на нашия шрифт. Така че теглото на шрифта е просто вид of-- така Теглото да, ако искате просто, като, нормална или, като, по-тънки шрифтове, или в този случай, като, смели. Забравям. Каква е дали искаш it-- е там по-тънка една от просто, като, нормално ли е? TOMAS Reimers: Аз всъщност не знам дали има по-тънка един. ALLISON BUCHHOLTZ-AU: забравям. Така шрифта ние обикновено тегло просто използвайте за смели. Ако искате да получите наистина в това, ние ще ви покажем. W3Schools има всички различни неща, които можете да направите за шрифтове. Но в общи линии, ако някога искате да промени нищо за шрифта, тя винаги ще бъде, като, шрифт нещо. Така че това ще бъде като, шрифт семейство, ако сте Опитвате се да промените действителния тип. Той ще бъде на шрифта стил, ако искам да го направя като курсив, или курсив, или какво ли още не. Или дори шрифт цвят, ако искахме да променим това. 

TOMAS Reimers: Мда. Така че можете да промените това. И нещо, само за да рекапитулация сега, така че можете да Виждате, че имаме селектора до тук. Ние имаме тези големи скоби. И тогава ние имаме правила очертани с точка и запетая. Това прави ли смисъл? Така ли? Cool. Така че, ако това е good-- 

ALLISON BUCHHOLTZ-AU: Back. TOMAS Reimers: Да поговорим конкретно за какъв вид селектори имаме. Защото в момента ние сме нещо просто показа тагове. Но вие може да видите, че правдоподобно. Речем, че има две точки на страница, а вие искам да мога да стил един, но не друга, не просто искам да се ограничавате да се наложи да използвате различно застроена HTML маркери, за да ги дават различни стилове. 

Така че ние имаме три основни видове превключватели. ALLISON BUCHHOLTZ-AU: Да. Така че ние имаме маркер, който е това, което Вече говорихме за момента. Така че това е нещо като тялото ви или стр. И след това имаме клас, който е когато го определи в нашия CSS файл, тя винаги ще бъде DOT, каквото искате името на вашия клас да бъде. И това може да се прилага за няколко неща. 

Речем, че има пет точки и двама от тримата Трябва да бъде оформена същото, вие ще се прилага един клас с него. И това е само начина, по който го направи. Ще ви дам един пример за когато това действително се появи. Но ако имаше може би някои тагове р, след това, ще можете да пишете, клас се равнява на каквито и класове искате да се прилагат към него. Така че каквото клас селектори, които искаме да прилага по отношение на тази конкретна точка, бихме могли просто да напише подобно. Разбира се, аз мисля, че един пример ще го определят като много по-конкретна направи. 

Другият имаме е ID, която ще означаваме с хашиш, или килограм, или таг. TOMAS Reimers: Octothorpe. ALLISON BUCHHOLTZ-AU: Octothorpe. Това работи, също. И този човек наистина трябва да е уникален. Те следва да се прилагат само за едно нещо на страницата си. Така че независимо дали това е конкретна точка, или някакъв елемент от списъка, или каквото и да, това трябва да е уникален. И по същия начин, че ние просто се каже, като, клас = "Клас1 class2" това може да бъде само за самоличност от каквото имаме. TOMAS Reimers: Да. Така че нека да говорим със сигурност във връзка с примери тук. И аз съм просто ще се потопите направо обратно в кода. Така че нека да погледнем на нашия HTML. И така, ние в момента имаме една точка. Това е текст. Аз съм просто ще променят това. "Това е текст 1." И тогава ние ще имат "Това е проект 2." 

ALLISON BUCHHOLTZ-AU: Втори една. TOMAS Reimers: Мда. Така че сега ние имаме "Това е текст 2", нали? И ние ще видим, че ако ние се презарежда страницата, какво ще да се намери е ние ще find-- ALLISON BUCHHOLTZ-AU: Ooh. TOMAS Reimers: Да. Отиваме да се намери "Това е Текст 1 "и" Това е проект 2. " 

ALLISON BUCHHOLTZ-AU: А от прекрасен жълт цвят. 

TOMAS Reimers: И вие ще видите, че нашата избора точно сега, който се отнася до р е, или параграфи, засяга и двете от тях, защото и двете от тях отговаря на изискването за условие, че и двете са на стр таг. Това прави общо чувство. Така че въпросът е, добре, това, което ако искаме да получават само една? Така че точно като Allison казваше, имаме две други начини да се направи това. Отивам да се започне с идентификатор. 

ALLISON BUCHHOLTZ-AU: Нека да започнем с ID. 

TOMAS Reimers: И двете от тях са атрибути. Така че съществуват атрибути в HTML. И какви са те, е нещо, което можете да добавите вътре в маркер, който е отделно от името на етикета. Така че може да има няколко качества. Така ли? 

ALLISON BUCHHOLTZ-AU: Тъкмо щях да се каже, от вашия пример от PSET 7, ако някой от вас се опита да приведе нещата до центъра, може да са използвани "Текст приведе = център." И вие го забелязал вероятно трябва да са центрирани текста си или вашата лента за навигация. Така че това е просто също атрибут че може да сте запознати. TOMAS Reimers: Има един куп от атрибути, които ще видите. Да. Като добър позоваване на PSET 7. Имаме ID. Можете също така да имат клас, такива неща. А един таг може да има много качества. Така се започва с идентификатор, нека ние се преструваме искам да имам лична of-- аз не знам. Ще го наречем специален, защото това, ние сме Ще направя удебелен, и подчертая, и каквото. ALLISON BUCHHOLTZ-AU: Това е Ще бъде супер специален. TOMAS Reimers: Значи това един, имаме ID специален. Така че начинът да изберете това, тогава, е в main.css, а не да има р маркер, правиш #special, OK? И това избира нещо с ID специален. Дали това има смисъл за всеки? Публика: Да. TOMAS Reimers: Cool. Така че сега, ако се върнем назад, ние ще see-- подвиквания. Да. Ще видите, че то само избира този с ID специален. Така ли? Звучи страхотно. Да. 

Група: Може нещо да има атрибут на клас, така и за самоличност? 

TOMAS Reimers: Да. Публика: OK. И тогава какво ще стане, ако след това ви дам то някои правила в CSS, че конфликт? TOMAS Reimers: Абсолютно. Ние определено ще да се говори за това. Така че точно това, което се получава най-, можете също да имат класове. Така че нека да се преструвам, че е имал три точки и I Исках да оформите първи две, но не и на трети. Ами, на първо вашата идея може да бъде, добре, аз може просто да даде на втория документ за самоличност. Но не можеш, защото за самоличност, точно като Allison казваше, трябва да бъде уникален. 

Така че, вместо за самоличност, което можете да може да се използва, е да можете да използвате един клас. И class-- какво позволява можете да направите, е основно се каже, То принадлежи като част от група. В този случай, нашата група се нарича Специалния. И това, което ние ще направим след това е ние ще say-- отколкото килограм, ние ще използваме точки. OK? И забележи, че лирата и точката съществува само в рамките на файла CSS, не в рамките на HTML. ALLISON BUCHHOLTZ-AU: Да. Важна разлика. 

TOMAS Reimers: Имам имаше толкова много борба, защото сложих хеша в HTML и След това просто се чувствам глупаво за дълго време. Вижте как го избира и двете тези с този клас? Cool. 

Сега, нещата могат да имат множество класове. Да кажем, че иска да направи първата две са на фона на жълто а вторите две имат цвят на шрифта на синьо. OK. Аз наистина не знам защо бих искам да правя това, но не мога. 

ALLISON BUCHHOLTZ-AU: да не тя препоръчва за вашия уеб сайт. Но за нашите цели, то ще направя. 

TOMAS Reimers: Това не е добра цветова схема. ALLISON BUCHHOLTZ-AU: Е, жълто и синьо са високи моите цветове училище. Аз не знам, все пак. TOMAS Reimers: Алисън висока училище имаше голяма цветова схема. [Смях] Така че след това, което можем да наречем това е Нека наречем this-- така че ние имаме специален и ние имаме доста. Аз предлагам, за това, можете да използвате много по-описателни имена. ALLISON BUCHHOLTZ-AU: Да, бих Наричаме това, като, жълто или синьо. 

TOMAS Reimers: Не сме наистина направи реалната уебсайт, поради което ние не правим това. Но ако действително имаше истински сайт, вие може да се наложи, като член с глава, Член съдържание, първата дума, неща, които позволяват можете да бъде много по-описателно. Това са наистина точно като променливи. Те трябва да се нарича така, когато можете, like-- да, като такива. Perfect. 

Така фонов цвят. И тогава ние ще say-- така че начин за промяна на цвета е само "цвят." И ние ще направим това синьо. Това е готино. Така че сега ние имаме Първите две имат специален. Следваща един ще има "клас = доста." ALLISON BUCHHOLTZ-AU: И след това ще искате да добавите "доста" за среден. TOMAS Reimers: Мда. И след това на средната, да се добави "доста", какво се случва, е просто да има пространство. Така че атрибутът клас е списък на пространство-разделени от всички класове които се прилагат за този етикет. OK? Това не е като този принадлежи някакъв специален клас, наречен "Специален, пространство, доста." Той принадлежи към две classes-- специална и доста. Да? Cool. 

И след това, ако погледнем какво се случва, ние сме Ще видите, че първото, което трябва жълт фон, черен текст. Второ one-- 

ALLISON BUCHHOLTZ-AU: --has смели жълт фон със синьо текст. И последната ни един просто има син текст, че ние, предназначен за него. 

TOMAS Reimers: Презареждане? Как селектори работят? Awesome. 

ALLISON BUCHHOLTZ-AU: Искаме ли да говорим за конфликта сега тогава? 

TOMAS Reimers: Така че, да. Абсолютно. Така че това, което се случва, ако има конфликт, нали? Нека си представим, първият създава нещо like-- ALLISON BUCHHOLTZ-AU: Може би това променя фона? TOMAS Reimers: Да. Така че ние ще направим "доста" промяна на фона на сьомга. ALLISON BUCHHOLTZ-AU: Ти си просто с всички велики цветовете днес, Томас. TOMAS Reimers: Да. Защото разбрах, че мога използвате сьомга като реален цвят. Така че ние сме само ще го направя. Аз също мисля, Sunset е истински цвят. Публика: Sunset е истински цвят? ALLISON BUCHHOLTZ-AU: Да опитаме. TOMAS Reimers: След тази демонстрация Просто, защото в случай, че бъркотии, Аз не искам да се отстраняване на грешки. Така че ние знаем сьомга е истински цвят. Така че всяка предположения относно какво ще се случи? 

ALLISON BUCHHOLTZ-AU: Имаш ли представа? 

Публика: [недоловим]. 

TOMAS Reimers: Да. Така ли го точно така. По принцип, тя счита, Последното правило, че то е постановено. 

ALLISON BUCHHOLTZ-AU: Така че това е където каскаден влезе в сила. 

TOMAS Reimers: Така си спомням как ние трябваше че Cascading Style Sheets? Така че от тази, че един вид означава, че ние имаме един куп правила които се прилагат в началото на всяка друга, и те могат също да замени всеки друг. 

ALLISON BUCHHOLTZ-AU: Така каквото е в дъното ще замени каквато е в горната част. Може да имате, че напълно правила отрича нещо предварително. Това е и причината, поради която искате да бъде Внимавайте, когато си стайлинг, така че да не създаваме правила, които вие сте просто напълно императивни. 

TOMAS Reimers: Или може би искам да презапише правила. 

ALLISON BUCHHOLTZ-AU: Или може би сте прави. Да. 

TOMAS Reimers: Прави се, че има клас, който се отнася за повечето неща, но да речем, че искате да промените Цвят на фона на червено и шрифта тегло да смели за най- неща, но за една, искате само цвета на фона да бъдат червени, но искате всички останали свойства, които можете да направите нещо като "шрифт тегло = нормално," които след това ще отмените тази смела промяна. Така ли? Отново, най-добрият начин, аз мисля, Алисън каза той, е просто да практикуват. 

ALLISON BUCHHOLTZ-AU: експериментиране. 

TOMAS Reimers: Практика, практика, практика, и експеримент. Знам, че много хора, които мислят CSS е просто много предположение-и-чек в края на деня, когато ако което искате да направите something-- харесват, имате груба представа, но все пак би трябва да го изпробвате, за да се уверите, Знаете ли, че това, което изглежда. 

Публика: Когато сте кандидатстване класове, повече от един на същата точка или раздел, го прави Независимо какъв ред може напишете ги в кавички? 

TOMAS Reimers: Не, ни най-малко. 

ALLISON BUCHHOLTZ-AU: Важното е, поръчката в рамките на вашия CSS стилове. Публика: Бихте ли повторили въпроса? TOMAS Reimers: Oh. ALLISON BUCHHOLTZ-AU: В рамките на клас, когато даваме на класове към нещо в HTML, прави ли значение какъв ред те са в? Няма значение реда. Важното е от порядъка на клас селектори в рамките на вашата CSS, в рамките на вашия стил на лист. 

TOMAS Reimers: звучи добре? 

ALLISON BUCHHOLTZ-AU: Lovely. 

TOMAS Reimers: И след това ние ще продължим to-- ALLISON BUCHHOLTZ-AU: Какво трябва след това? Забравям. О, ние просто трябва примери. Но ние сме вид прави тези. Ние сме направили примери в движение. 

TOMAS Reimers: Имаме възможност да комбинирате селектори скоро. 

ALLISON BUCHHOLTZ-AU: О, ние се да комбинирате селектори. TOMAS Reimers: Така че някои примери е, че трябва # Dog-- килограм, или таг, или octothorpe, или каквото искате да се обадите that-- рязко. 

ALLISON BUCHHOLTZ-AU: Sharp куче. 

TOMAS Reimers: Тогава трябва .pets. Нещо има ID на куче, има само едно куче на страницата. Нещо има ID на котка, има само една котка. Може да има много домашни любимци на страницата. Ето защо ние дадохме тази класа. Имате пример за р. И след това, така че един от най- Последният пример, който е нещо, което ние не сме говорили за, е това, което се случва, когато те се смесват. Така p.pets. 

Така че за това, нека се върнем към код и въведе another-- да. Така че отново тук. 

ALLISON BUCHHOLTZ-AU: I чувствам като това е really-- като просто търсите чрез примери наистина е начинът да се научим на това. Така че това, което правим. 

TOMAS Reimers: Така че нека ние се преструваме само да изберете текст 2, нали? Така че ние определено не може направя това с лична. Е, можем да направим това с ID, но това не се отразява ID. Мога да добавя една, но нека да се преструвам че аз не искам да се добави един или тя вече има и нещо друго. Аз не мога да направя, че с това. Маркерът определено не е уникално, нали? И нито е класа. Но вие можете да комбинирате тези неща. Да кажем, че ние искахме да направим нещо която се прилага само за неща, които има специален клас и които имат класа доста. 

Така че това, което можете да направите, е в main.css, може да се каже, нека първо да изтриете това. Можете да комбинирате тези. Така че можете да направите Особености в чертежите. Няма място. Просто .special.pretty. Какво означава това е нещо, която е едновременно специална и доста. Това прави ли смисъл? И ако се върнем тук, това, което започваш да се види е това правило се прилага само за Вторият, който има както на тези. И вие можете да направите това за много неща. Можете да say-- нека преструвам, че само исках да прави неща, които имат класа доста и които са също маркер параграф. Така p.pretty. Нека си представим, че имах нещо доста по тялото на маркер. OK? Мога да изпълня този и аз може да се види, че това е само ще се прилага за неща, които са параграфи с класа доста. И вие можете да комбинирате тези, По принцип, колкото искате. Така че можете просто да ги съберете заедно. Това прави ли смисъл? ALLISON BUCHHOLTZ-AU: Така този вид е по-полезен когато, Tomas казваше по-рано, може би имате много сложен сайт, и вече имате много на тези правила, написани, и просто трябва да се комбинирате две от преди. Като вместо да пишете цяло Новият избора и да го променя там, може просто да се комбинират ги, когато той се припокрива. 

TOMAS Reimers: Или сте може да намерите out-- понякога има един клас, който прави цвета на шрифта е като син, и там е друг клас, които прави фон синьо. И това просто няма да работи. Така че ти пиша специален случай, когато, like-- но ако го има, така, това, което сте ще направя, е, че ще направите това този нюанс на синьото и това този друг нюанс на синьото. Нали така? 

ALLISON BUCHHOLTZ-AU: Добро за тези видове изключения. TOMAS Reimers: Така че, за да мисля за проблеми които биха могли да възникнат, когато ги комбинирате. Cool. Така че обратно към нашата презентация. ALLISON BUCHHOLTZ-AU: Почти сме там. TOMAS Reimers: И това е спрял свързване. ALLISON BUCHHOLTZ-AU: О, не. ALLISON BUCHHOLTZ-AU: CS в офиса, интернет върви надолу. О, иронията. 

TOMAS Reimers: Така че за щастие, ние можем Представяме без интернет, предполагам, защото имаме всички слайдове тук. Така че нека да говорим за отношения на тагове. ALLISON BUCHHOLTZ-AU: Точно така. Така че просто вид ще на разстояние от това, което каза Томас, това е просто още един начин да го направя. Така че ние имаме някаква майка Селектор с режимен дете. Така че в този пример тук, ние имаме някои тяло с клас на лентата за управление, бутон клас. Ah. 

TOMAS Reimers: О, съжалявам. 

ALLISON BUCHHOLTZ-AU: А По принцип, какво означава това се избере всички деца, като всички тези видове селектори, в рамките на този селектор майка. И тези, които са единствените, тя някога ще се прилага по отношение на. Аз не знам дали сте има по-добър начин of-- TOMAS Reimers: Така че аз Предполагам, че начина, по който да се мисли за това е, не забравяйте преди това как ние нещо като ги съберете заедно. И тогава това означава, че един елемент която съвпада с всички от тях. Това, което казва, е, че Искам да съвпадне всичко в рамките some-- искам можете да намерите на избора. И след това в рамките на това, искам можете да съвпада с нови неща. Нали така? Така че в CSS, всичко е въпрос на вид е в състояние да отговаря на тези елементи. И вие можете да се опитате да съвпадне обекти на територията на други елементи. 

Така че нека действително да направи един пример, и ние мислим, че ще се изясни. Така че нека да се преструваме, че има специален, специална доста, каквото. И тогава ще имаме връзка, OK? Така че не забравяйте, а е връзка. Това няма да ходи никъде. И ние ще го дам Връзката на клас, предполагам. Нека си го на получаване class-- ми даде идея. ALLISON BUCHHOLTZ-AU: Cool. TOMAS Reimers: Coo-- нека тя класа доста отида. Защо не? 

ALLISON BUCHHOLTZ-AU: OK. TOMAS Reimers: Така точно сега хубави неща ще направим фона синьо, цвят на фона на сьомга. В това има смисъл. И ако ние this-- правим 

ALLISON BUCHHOLTZ-AU: Искате ли да добавите текст така хипервръзка всъщност се появява? TOMAS Reimers: Това ще бъде добър разговор. ALLISON BUCHHOLTZ-AU: Защото полето Сега ние просто ще получите нищо. TOMAS Reimers: Така че това е един линк. "Това е една връзка." О, и това се случва да бъде друга връзка. Нека да го дам на класа "готин". Прав си. Cool. Така че сега ние ще вземете тази. Отиваме да хвърлят един. Ние имаме един в специален етикет, и ние също ще имаме един в доста маркер. И сега какво ще да направите е да отиваме да cool-- какво искаме да направим? ALLISON BUCHHOLTZ-AU: Можем ли да го направим по-голям? TOMAS Reimers: Нека да го даде на границите. ALLISON BUCHHOLTZ-AU: Бихме могли граница. TOMAS Reimers: Да. Така че ние ще направим нещо като, граничен is-- и ние сме Ще ви обясня всичко това в секунда. За now-- 

ALLISON BUCHHOLTZ-AU: За модел кутия. TOMAS Reimers: Но за сега, ние сме Просто ще го дам на границите. И така, какво означава това е, че си Ще видите тези връзки. И ти започваш да се види, че те имат тези, като грозни черни ивици, които е готино. 

ALLISON BUCHHOLTZ-AU: Нашият сайт е толкова красива. 

TOMAS Reimers: Да. Нашият сайт е страхотно. Така че тези две са връзки, и те се появяват. Сега нека да се преструвам, че само исках да направя това ако не беше в нещо който има фон на сьомга. Така че не забравяйте, че това има опит на сьомга, защото е от клас доста. 

Но ние искаме да кажем, че само се охлади които са в клас специален, не в клас доста, трябва да има тази граница. Е, какво можете да направите вие ​​е Може да се каже, Особености в чертежите, пространство, .cool. И какво, че прави, когато си мислиш, за това, е това е основно казвайки, OK, намери ми всичко който съвпада специален. След това в рамките на тези тагове, намерете ми всичко, което е готино. ALLISON BUCHHOLTZ-AU: Така че друг начин че може да е добре да се мисли за това, то връщането обратно на C, е точно като идеята за обхват. Така че, когато имате малко избора, подобно на онези, че ние сме работили за преди това, цялата си уеб страница, всички от вашия HTML е в рамките на обхвата си, нали? Но когато имаме тези родител-дете отношения, това е все едно стесняване където търсите да определено място, сякаш, подобно, което търсим в рамките на специфична функция, вместо на цялата ни файл. Публика: Така че с това се има предвид, би тя има значение, ако имахме changed-- ALLISON BUCHHOLTZ-AU: Редът? Публика: --the клас в CSS да .cool, пространство, Особености в чертежите? ALLISON BUCHHOLTZ-AU: Да, защото тогава бих казал, обхват тя да всичко, което е готино, и след това погледнете какво has-- Искам да кажа, като в този случай, Аз не мисля, че щеше да го променя. 

TOMAS Reimers: Ако бяхме казали какво? Извинете. 

ALLISON BUCHHOLTZ-AU: Ако ние мащаб го да се охлади и след това за нещата изглежда не на специална, тя ще бъде същата, всъщност. 

TOMAS Reimers: Така че това няма да бъде. 

ALLISON BUCHHOLTZ-AU: Той не би? Ох, ох добре. Не съм прав. 

TOMAS Reimers: Така че причината това е different-- обща mistake-- е, че в момента само връзката е готино, нали? Предполагам, че въпросът ми към вас, момчета е, това, което на тази страница е съпътствано от .cool? Има два тагове тук, нали? Коя е тази една и тази. И двете съвпадат готино. Нищо друго не прави. Така че, ако заяви, .cool, пространство, Особености в чертежите, това, което ще кажа е, в рамките на тези тагове, това, което е специален? ALLISON BUCHHOLTZ-AU: Hm. Това е, което it-- полето. Защото това е като просто нещо тук. 

TOMAS Reimers: Така той избира нищо. 

ALLISON BUCHHOLTZ-AU: като има предвид с специално, ние сме в рамките на тези тагове тук. 

TOMAS Reimers: Тези, както и тези. Публика: OK. Така че тези тагове от наклонена черта? 

TOMAS Reimers: Да. Това прави ли смисъл? Как това е основно се опитва да стесни обхвата. ALLISON BUCHHOLTZ-AU: Да. Мисля, че това е може би най- Най-лесният начин да се мисли за това. 

TOMAS Reimers: До тук открихме това, и ние открихме този двете съвпадащи специален. И тогава ние искаме, в рамките на тези момчета, какво е готино? И в рамките на този един, това е супер. В рамките на този един, нищо не е готино. Така че това е само етикет, който остава. 

ALLISON BUCHHOLTZ-AU: като има предвид, хладно е само в рамките на тези на тагове там. TOMAS Reimers: Точно така. И това, което е специално в тези,? Нищо. Сега, това, което ще кажа е, ако не е имало пространство, питате какво е готино и special-- или това, което е доста и особено, нали? Ако кажеш .special.pretty, че е същите като .pretty.special. 

Защото това, което премахването на пространството е питам се, когато ти казват Особености в чертежите, питате, OK, кои от тях са специални? И след това на тези, които такива са и красиви, което е същото, граматически, като се търси това, което е доста, и след това на тези, това, което е също така специален? Нали така? Това е разликата от това, което е в рамките на това, което е. Публика: OK. TOMAS Reimers: Да. Awesome. Така че с това се има предвид then-- 

ALLISON BUCHHOLTZ-AU: Мисля, че нашата последна нещо е (в луксозни британски акцент) модела кутия. 

TOMAS Reimers: The box-- [подсмихва] Обичам начина, Allison казва, че. Така че нещо в кутия модел. 

ALLISON BUCHHOLTZ-AU: Просто трябва кутия, аз ще бъда вашата кутия модел. TOMAS Reimers: Така че нека да говорим за това. Така че в момента ние сме прекарали много време да говори за селектори. До сега, вие сте най-вероятно, като, майстори на selectors-- знаете, как точно да изберете съдържанието, което искате да манипулирате на вашия екран. 

Така че сега въпросът е, как точно да го манипулира? Така че предполагам, най-основните начин да се мисли за това е, добре, какво точно е елемент в CSS? Прекарахме много време говорим за това, което е маркер, или това, което е най-основната представителство на етикет? 

Един добър начин да се мисли за това е, каква форма е сьомга? Каква форма е, като това розово-оранжев цвят фон? 

Публика: Това е правоъгълник. 

TOMAS Reimers: Това е правоъгълник, нали? 

ALLISON BUCHHOLTZ-AU: Не беше подвеждащ въпрос. [Смях] 

TOMAS Reimers: Не се опитвам да ви подведе момчета толкова късно. Така че ние имаме този правоъгълник. И етикетът е р, нали? Така, че ни дава добра убеждение, че параграфът е представен като правоъгълник, в поне в съзнанието на браузъра, който е то. 

ALLISON BUCHHOLTZ-AU: Искам да кажа, браузъри обикновено са правоъгълни, така че има смисъл. 

TOMAS Reimers: Идеята тук е, че всички маркери в CSS са представени като правоъгълник. И всеки правоъгълник има четири части, съгласно CSS, OK? Имате действителното съдържание. Това е, когато текстът се крие. 

ALLISON BUCHHOLTZ-AU: Може би вашата снимка. 

TOMAS Reimers: Да. Имате подложка, която е просто някакъв вид бяло пространство. След това имате на границите. И тогава ще трябва марж, който е празно пространство извън това. Така че няма смисъл на никого, така че сме Ще говорим за това за секунда. Така че точно тук, това, което ние ще направим се отиваме да създаде някои divs, OK? Извинете ме, докато I-- 

ALLISON BUCHHOLTZ-AU: Чувствам се харесва ние трябва да се сложи сладко картина вътре. 

TOMAS Reimers: Ние определено трябва. 

ALLISON BUCHHOLTZ-AU: Имам чувството, че всеки, биха могли да се възползват от по- сладка снимка, е всичко. 

TOMAS Reimers: Можем всички ползи от A-- 

Публика: Да, разбира се. TOMAS Reimers: OK, хладно. Така че ние трябва да се сложи сладко картина в някъде. ALLISON BUCHHOLTZ-AU: Чувствам се като сладко зайче може да бъде полезна в момента. TOMAS Reimers: Разбира се. ALLISON BUCHHOLTZ-AU: края на седмицата. Има нещо adorab-- 

TOMAS Reimers: Как пристъп коте? 

ALLISON BUCHHOLTZ-AU: Котенце работи, също. 

TOMAS Reimers: Cool, защото има един сайт за това. Тя се нарича PlaceKitten. ALLISON BUCHHOLTZ-AU: Това е страхотно. TOMAS Reimers: Да. ALLISON BUCHHOLTZ-AU: Само за, като, заместващи изображения във вашия сайт. TOMAS Reimers: MM-HM. Има също така и PlacePuppy. И има PlaceBacon. 

ALLISON BUCHHOLTZ-AU: PlaceBacon? Наистина ли? 

TOMAS Reimers: О, не го правим имат достъп до интернет тук. 

ALLISON BUCHHOLTZ-AU: [стонове] Трагичната. TOMAS Reimers: В противен случай, Бих искал да ви покажа момчета как да се сложи снимки във вашия сайт. Ние ще се опитаме да се получи това работи, преди да трябва да отида. Но за сега, ние сме просто Ще говорим в цветове след това. Искаме да сложи снимки на kittens-- 

ALLISON BUCHHOLTZ-AU: Ние направихме. 

TOMAS Reimers: --the интернет е установени за момента е. Така че ние имаме две divs, и ние сме Ще им дам два идентификатори. Отиваме да го наречем "Първо" и "второ". Така ID = "на първо място." И ние ще им дам два цвята. И как ще се избере нещо с идентификатор на "първия"? ALLISON BUCHHOLTZ-AU: Dot или хашиш? Публика: Sharp. TOMAS Reimers: Sharp, перфектна. Sharp, хашиш, каквото we-- 

ALLISON BUCHHOLTZ-AU: Много неща, за да го наричат. 

TOMAS Reimers: OK. Отиваме да се заселят на таг, и това е, което ние ще отидем с. OK? 

ALLISON BUCHHOLTZ-AU: таг. 

TOMAS Reimers: Така таг първо. 

ALLISON BUCHHOLTZ-AU: Така можете да чуруликане на seminar-- таг CSS, таг готино. TOMAS Reimers: таг Awesomeness. ALLISON BUCHHOLTZ-AU: Таг Awesomeness, да. TOMAS Reimers: OK. Така че ние имаме "първа" и "втора". Така че на първо място, ние ще имаме фонов цвят на червено. ALLISON BUCHHOLTZ-AU: Uh, на дебелото черво. TOMAS Reimers: Мда. ALLISON BUCHHOLTZ-AU: Ще бъде вашето място за проверка. TOMAS Reimers: Алисън ме. Background-цвят на blue-- 

TOMAS Reimers: Purple! 

TOMAS Reimers: Purple. ALLISON BUCHHOLTZ-AU: Да. Любимият ми цвят Purple е, и ние още не сте го използва. 

TOMAS Reimers: Violet. ALLISON BUCHHOLTZ-AU: Violet. Това работи. 

TOMAS Reimers: Така че ние сме ще има две divs. Те ще бъдат напълно празна. Може би трябва да има някакъв текст. Така че "на първо място" ще бъде "HELLO." И на "втория" ще say-- 

ALLISON BUCHHOLTZ-AU: Довиждане. 

Публика: - "свят." Здравей, довиждане. ALLISON BUCHHOLTZ-AU: Видях ги в концерт другата седмица. TOMAS Reimers: Бийтълс? ALLISON BUCHHOLTZ-AU: За реала. Те не са толкова голяма. Аз не го харесвам. 

TOMAS Reimers: Имаме "Здравей" и "довиждане." И отново, CSS е просто страхотно, защото се признават нашите цветове. Не трябва да се дори притесняват, че те съществуват. Те правят. 

ALLISON BUCHHOLTZ-AU: Те съществуват. 

TOMAS Reimers: Така CSS Мисля има 255 думи, за да говорят за цвят. Ако можеш да се сетиш цвят отвън тези 255, като, аз ще бъда впечатлен. ALLISON BUCHHOLTZ-AU: Да. Мисля, че вие, момчета, може да има Просто дойде веднага след. 

TOMAS Reimers: Така че тук, ще видите ние имаме две кутии полето в началото на всяка друга, нали? Здравейте и довиждане. 

ALLISON BUCHHOLTZ-AU: Няма никакво пространство между тях. Те просто smooshed полето в началото на всяка друга. 

TOMAS Reimers: Така че първото нещо, Предполагам, че ние трябва да говорим за е нека да say-- да. Така CSS ги представя като нещо кутии. И като кутии, те имат съдържание. А съдържанието в момента е нещо като Здравей, мое или довиждане и това е всичко. OK? 

Така че едно от първите неща, които може да направите, е да можеш да добавиш подложка. Пълнеж казва колко място тя трябва да напусне всяка страна. Така че нека да кажа, искам да кажа, 10 пиксела от всяка страна. И ще направи дисекция, че в секунда. ALLISON BUCHHOLTZ-AU: Всички тези неща тук ще бъде най-вече в пиксели за останалата част от семинара. Вие ще видите, че тя има малко пространство около него, нали? Така че това, което вие не виждате тук, е че има тази невидима вид подплата от всяка страна, в която се казва, като, OK, имате си кутия на content-- 

ALLISON BUCHHOLTZ-AU: Искате ли просто да дръпнете нагоре инспектира елемент? 

TOMAS Reimers: Да, това е добра идея. ALLISON BUCHHOLTZ-AU: Също така, аз намирам че инспектира елемент е един добър начин да разбера, ако нещо се случва наред, се случи нещо неочаквано, инспектиране на етикетите и да видиш какво това е като презаписва е полезно. 

TOMAS Reimers: Така че аз не съм сигурен ако вие може да видите в този цвят. Може ли? Ще видите тази подложка от вида на ръба. И след това да види реалната съдържание в синьо, нали? Така че това е самото Основи на модела на кутията. Имате съдържание. След това имате подложка. 

Публика: Защо просто не използвайте полето вътре the-- 

ALLISON BUCHHOLTZ-AU: Точно така. Защото това е просто избора елемента в момента. 

TOMAS Reimers: Мда. Други неща. Така че нека да говорим за това уплътнение команда за секунда. Така че в CSS, измервания Трябва да има звено. Така че първо трябва сумата. Така че в този случай, казахме 10. И тогава на следващия казахме е пиксела, пиксела. Други такива, които имате, са неща като см, инча. Можете да правите неща като, това, което е десет инча? И това ще е смешно. 

ALLISON BUCHHOLTZ-AU: О, момче. 

Публика: Уау. 

TOMAS И ALLISON: Да. TOMAS Reimers: Така че това е всичко, подплата. Отивам да се върна в пиксели. 

ALLISON BUCHHOLTZ-AU: Pixels склонни да бъдат, например, стандарта. Когато се вгледате в много сайтове, те най-често работят в пиксели. TOMAS Reimers: Значи ти започваш да се види или pixels-- други такива, които виждате е ем, който е един ем е равно на височината на шрифта която използвате в момента. 

ALLISON BUCHHOLTZ-AU: мм. TOMAS Reimers: Това е един добър начин да се каже, харесват, искам толкова място, колкото ми шрифта е като. ALLISON BUCHHOLTZ-AU: Не знаех, че. Можете да научите нещо ново всеки ден. TOMAS Reimers: Има много измервания в CS. Предлагам ви да ги търсите. За всичките си дела, аз мисля, пиксела трябва да са достатъчни. И те са също така това, което започваш да се види в по-голямата част от примери извършва онлайн. Така че ние ще го оставите в пиксели. 

Можете също така, че трябва да say-- така уплътнителни комплекти всички на уплътнители. Можете също така да се направи нещо подобно "Подплата-отгоре", за да просто set-- ALLISON BUCHHOLTZ-AU: Може би ние ще се заемем нашето "HELLO" обратно. TOMAS Reimers: --to само в стаята на уплътнение на върха и нищо друго. Така четирите команди са пълнеж-отгоре, подложка-отдолу, подплата-ляво, и подплата-дясно. 

ALLISON BUCHHOLTZ-AU: Точно като може да се очаква за една кутия. 

TOMAS Reimers: Да. Нищо прекалено луд там. Това прави ли смисъл? Така, че е пълнеж. Отивам да зададете всички на уплътнители назад към 10. И тогава аз ще се премине към границите. 

Така че това, което е на границата е граница е странно команда. Отнема вид три неща наведнъж. Така че първото е колко голям искам тя да бъде като измерването. Отново, аз съм само с помощта на пиксела. И последното нещо, което трябва да добавите към измервания е едно от нещата, които не се нуждае от една единица е 0. Това всъщност е неправилно за да се получи 0 единица, тъй 0 е 0 целия инча, пиксела, cm, независимо. Тя просто означава 0, нали? Така че първо трябва да го дам на измерването. 

След това можете да го даде на стила. Така че аз ще кажа "твърда". И ние ще говорим за това какво означава това. И след това на последно място, можете да му дадете цвят. Така че аз ще кажа "черно". И това са все неща, с които сме се Сега виждали преди, с изключение на стил, но ние ще говорим за това. Така че вие ​​сте виждали измервания, и сте виждали цветове. И това, което се случва, е, че ние се получи това хубава черна рамка около него, нали? Вие, момчета, да видим как ние сме го направили? 

Публика: Да. 

TOMAS Reimers: Cool. И така, какво е това? Така че на първо място, това е един пиксел. Това е очевидно достатъчно, нали? Подобно, че е дебел един пиксел. Или това ще бъде един пиксел, но аз съм увеличени в, така че е малко по- от това. 

ALLISON BUCHHOLTZ-AU: И ние имаме тази смешна резолюция TV. 

TOMAS Reimers: Да. Можете да направите това по-голяма, по-малък, независимо. Така че тук е два пиксела граничен а. Ще видите, че е два пъти по-дебела. Следващото нещо, което трябва е цвят. Това не е интересно. Аз няма да говоря за това, наистина. 

ALLISON BUCHHOLTZ-AU: Но стилът може да е малко по-интересна. 

TOMAS Reimers: Да. Така стил, твърде малко са тези, че виждам използва често. Първо нечии твърди, следващите нечии пунктирана, а последната е пунктиран. И тук е осеян. Вие ще видите, че те са куп точки, нали? Един добър начин за сортиране на получите хубава граничен ще, тирета са доста популярни. 

ALLISON BUCHHOLTZ-AU: И тогава, разбира се, аз съм уверите, че има много други стилове, които можете да получите. И ние имаме голям набор от връзки в края за вас, момчета някак да чета и Посетете по-готино CSS. 

TOMAS Reimers: И след това последното нещо, ние сме Ще говорим за кутия модели бързо. О, и след това на границите, точно като подложка, Вие също имате такива неща гранично-ляво, гранично-надясно, гранично-горната, гранично-отдолу, които ви позволяват за да получите най-специфична граница. Така че тук е просто границата ляво-определено. Има ли, че има смисъл? 

ALLISON BUCHHOLTZ-AU: Това е един много готин начин да се подчертае неща или да добавите линии между различните елементи. TOMAS Reimers: Абсолютно. Така че това е нашата граница. И границата на последната му. Като подложка Margin на освен това не е within-- ALLISON BUCHHOLTZ-AU: Това е не около вашия елемент но всъщност около целия кутия, че ние сме били виждат. 

TOMAS Reimers: Да. Алисън го каза перфектно. Това не е, като, вътре си елемент, това е около целия прозорец. Това означава, че такива неща фон не се прилага за него. И това основно се казва, харесват, аз не искам нищо в тази много място за мен. Така че, като тук имаме марж от 10 пиксела. Така че нищо в рамките на 10 пиксела трябва да е до мен. Това е вид на своята пространство, но някак не. Така че това е самото Основи на модела на кутията. Това прави ли смисъл? Cool, хладно. ALLISON BUCHHOLTZ-AU: Awesome. Така че сега ние мислим само имаме нашите готини ресурси че ще ви отведе момчета чрез много бързо. И ние ще actually-- добре, имаме интернет все още? 

TOMAS Reimers: Нека видя дали мога да отворя up-- нека само да видя дали ще мога може да се получи на интернет-бързо докато Allison говори за нищо Allison иска да говори за. ALLISON BUCHHOLTZ-AU: Така basically-- аз не правя знам какво друго мога да кажа на този етап. Но това са някои наистина добри ресурси. Това са такива, че Tomas и съм използвал и че всъщност използвани за подготвителния за това. W3Schools е този, който ви момчета трябва да са виждали преди. Препоръчваме го за много неща с CSS. Знам, че мога да го препоръчам на ми точка през цялото време. 

Един от най-великите неща, е, че тя ви позволява да вид забъркваш с CSS и да видим промените мигновено в това, като, видите двоен прозорец, който го има. Така че не е нужно да се притеснявате за създаването на своя собствена уеб страница, или създаване vhost във вашия местно уред и локален хост, и получаване на всички тези неща работен. То е залегнало правото в рамките на страницата. 

И тя има тези малки уроци, които можете да проверете да научите повече за селектори, или да научите за манипулиране на вашия шрифт, или фон или изображение. И това е случая моментните резултати, които сте не е нужно да правите всеки друга подготвителна работа за. Така че аз обичам W3Schools. Това е страхотно. Е да работиш? 

TOMAS Reimers: Да. Не, това не е всичко. Искате ли да опитате и рестартирайте компютъра си? Или искаме to-- 

ALLISON BUCHHOLTZ-AU: Искам да кажа, Е, това също ще бъде на линия. Всички слайдовете ще бъде на линия. Така че аз просто силно препоръчвам правиш това. 

Това е страхотно, както току-що като мамят лист. Това е просто всичко основния команди, които имате. Това е страхотно, когато сте първи започвате вашия сайт. Защото може би не правя искам да отида в цялата реалния гнидав пясъчен дизайн-тежки неща. Ти просто трябва да го форматирате по начин, този вид има смисъл и воля направя за момента. И ако наистина искате да влязат в него, аз знам, това е, като един от Любимите модели на Томас. Бяхме го използвате, за да подготвям, и това е страхотно. Това е с разработчика от Mozilla. 

TOMAS Reimers: Така Mozilla са хората, които правят Firefox. И това е само собственото си разработчик позоваване, което мисля, че е страхотно. И това е прекрасно Списък на ресурси. Така че ние have-- 

ALLISON BUCHHOLTZ-AU: И след последната нота е когато се опитвате да Дизайн на уебсайтове, черпят вдъхновение от нещата които смятате, че са доста. Проверка на елемента, инспектиране на изходния код може да бъде супер полезно за опитвам да разбера как да оформите вашия собствен уебсайт. 

Често се чувствам като най-добрия начин, освен експериментиране, е просто да погледнете неща, които са доста. Смятам, че е наистина трудно да просто тип дизайн нещата по своему, особено в началото. Така че, моля погледнете сайтове че ви харесва гледа. Разбера какво прави ги привлекателен за вас. И тогава не се колебайте да опитам да репликира, че. 

TOMAS Reimers: Точно така. Дори и като уеб сайтове по този начин, можете да видите определено има Разделение на върха. И тогава ще трябва друг Разделение в рамките на тук, което е CSS Awesomeness. И тогава ще има куп линкове тук. Ако наистина само инспектира елементи, може да бъдат подредени на започнете да видим какво правим уеб сайтове изглежда, и как мога да пресъздаде, че ако искам да. Това прави ли смисъл? Така че ние имаме само оставени три минути. Така че на въпроса? Всеки от тях? Да. 

Публика: За цвета правоъгълник, как бихте have-- ако не го искат От другата страна на цялата страница, може да сте направили го прекоси само половината страницата или просто текста? 

TOMAS Reimers: Да, абсолютно. Така че нека да видим реално. Аз имам две идеи. Така че на първо място, вие Може да използвате процента. 

Публика: Наистина ли? 

ALLISON BUCHHOLTZ-AU: Значи нещо да погледнете нагоре е относително позициониране. Това е нещо, което ние не е нужно време, за да влязат в, но това е нещо, което аз определено Препоръчваме вие ​​да пробвате. 

TOMAS Reimers: Значи процента. И да видим как можем да го направи само 50% от ширината? ALLISON BUCHHOLTZ-AU: Ако всъщност знаят броя на пикселите, можете да бъдем по-точни по този начин. Можете да свиря на цигулка наоколо с него. Но 50%. Ако трябва да промените размера на нашия браузър, тя ще го направи по-малък. 

TOMAS Reimers: Е, това е основно 50% в момента, мисля. Това е 50%, а след това на границата е добавен към това. CSS има много странности. Така че в момента това е 50% от ширината на страницата. Но не забравяйте, че имате 10 пиксела излетяло от всяка страна. Така че, ако ви се налага да се движат, че срещу в левия край на браузъра, След това тя ще изглежда като 50%. Отново, както казах, CSS може бъде много предположение-и-чек. Подобно, смятате нещо е ще се държат по един начин, но тя се държи съвсем различен начин. 

ALLISON BUCHHOLTZ-AU: И просто се умни, а ти просто получите по-добра интуиция за това, докато се движите напред. 

TOMAS Reimers: И това все по-лошо и по-лошо. Така че това е наистина само една раса. 

ALLISON BUCHHOLTZ-AU: Това е супер обнадеждаващо. Искаме те да харесва CSS. 

TOMAS Reimers: CSS е страхотно. Не забравяйте, че. Други въпроси? 

ALLISON BUCHHOLTZ-AU: Единственото нещо. Нещо друго? Cool. 

TOMAS Reimers: Awesome. 

ALLISON BUCHHOLTZ-AU: Е, ако сте момчета имат въпроси по-късно, ние винаги сме на разположение по обичайното. Вие вероятно ще видите някои на нас за окончателните проекти и определено в Hackathon. 

TOMAS Reimers: Абсолютно. И по време на панаира. 

ALLISON BUCHHOLTZ-AU: И по време на панаира. Oh. 

TOMAS Reimers: Очаквайте виждайки всички от вашата awesome-- 

ALLISON BUCHHOLTZ-AU: Ще видим всички страхотни сайтове че ще бъде красива. TOMAS Reimers: Винаги можете да виж, като, уебсайтовете който имаше, като, добър CSS и след това като тези, които не се опита да направи CSS. ALLISON BUCHHOLTZ-AU: Също така, друг нещо, още едно нещо, за да погледне в е Bootstrapping. Така Bootstrap е страхотно. 

TOMAS Reimers: Google, че ако you-- 

ALLISON BUCHHOLTZ-AU: Google него. Това е страхотно. Вие ще го обичам. И сега, че имате основни познания за CSS, тя ще направи много по-дълбок смисъл. Awesome. Благодаря, момчета. 

TOMAS Reimers: Благодаря ви много.