>> [Грає музика]
Аллісон Бухгольц-AU: Так Ми в основному тільки збирається
щоб дати вам короткий виклад з CSS, тому що ми знаємо,
що він не був покритий у всіх розділах.
І ми дійсно хочемо, щоб переконатися, що ви хлопці, є цей інструмент у вашому розпорядженні,
тому що він має можливість робити Ваші сайти виглядають набагато красивіше.
>> І якщо ви будуєте сайт, то Ви, мабуть, хочете, щоб зробити його красиво.
Я маю на увазі, ви не повинні, але я хотів би запропонувати його. [Сміється]
Якщо ви хочете, щоб користувачі, щоб використовувати його, ви, можливо, хочете, щоб зробити його трохи [нерозбірливо].
Отже, ми збираємося, щоб спробувати дати вам тільки деякі основні інструменти і розуміння,
так що, коли ви виходите, і ви дослідження речі про CSS,
це не повна маячня, як CSS іноді бути.
>> ТОМАС Реймерс: Так.
Еллісон сказав, що це дуже добре.
Так що я думаю, перше, що ми повинні почати з того, що CSS?
Так CSS є дивним.
CSS--
>> Аллісон Бухгольц-AU: Це Ім'я нашого семінару.
>> ТОМАС Реймерс: Так.
Це дуже важливо, що Ви розумієте, що до того часу.
Якщо ви тільки відняти один річ, це те, що CSS, якщо дивним.
Два це CSS означає Каскадні таблиці стилів.
Таким чином, в своїй основі, CSS є лист стилі, то
вона дозволяє укладати веб-сторінки.
І потім, що це означає, що, це спосіб додати стиль Вашої веб-сайтів.
Так за стилем, ми маємо на увазі всі це не structural--
так такі речі, як кольори, тло, зображення, межі, начебто, оббивка,
Поля.
Ми будемо говорити про те, що Все це означає, в небагато.
>> Таким чином, ми просто пішли вперед і відкрив обидва ці в Gedit.
Так що це index.html.
І це main.css.
Так main.css не має нічого.
Аллісон Бухгольц-AU: Ні стиль досі.
ТОМАС Реймерс: Ні.
І, як ви побачите, що це дійсно потворні сайт.
Аллісон Бухгольц-AU: Це просто.
ТОМАС Реймерс: Так.
Так, це не бридко, це просто мінімалізмом.
А потім ось у нас є index.html.
І так швидко повторення HTML, Еллісон,
Ви хочете, щоб просто поговорити про сторінку?
>> Аллісон Бухгольц-AU: Так.
Так, очевидно, ми маємо HTML тег, який тільки імена HTML файл.
У нас є заголовок тут, за допомогою CSS Awesomeness, which-- якщо ви повернетеся.
Де це?
>> ТОМАС Реймерс: Ой.
Так, ви можете бачити.
Аллісон Бухгольц-AU: І зверніть увагу на заголовок
це вкладка заголовок прямо тут.
А потім "Hello, World!" є Текст, який ми тільки що
відображення на веб- сторінка, яка is-- повернутися.
Тому.
Що саме в нашому організмі here-- звичайний текст.
Крім того, одна справа зверніть увагу, якщо ви подивитеся тут,
Томас перемикається вгору це два з нашого слайда.
Так що, поки у вас є всі три з них, ти в порядку.
Вони можуть бути в будь-якому порядку, вони хочуть.
Що найважливіше це всього лише у вас є кожна з цих трьох речей.
>> ТОМАС Реймерс: Круто.
Додати тип документа?
Аллісон Бухгольц-AU: Так.
ТОМАС Реймерс: Так.
Круто.
Аллісон Бухгольц-AU: Мабуть, мої мікрофони не люблять мене.
ТОМАС Реймерс: О, дай нам хвилинку просто в той час як Еллісон переключається з її мікрофон.
Так що так.
Отже, ми маємо нашу головну сторінку.
Це свого роду без стилів.
Ми не так багато.
Ми просто повинні в основному текст.
У нас є таблиця стилів.
У нас є титул.
Так що просто голими кістками Компоненти зробити сайт.
>> Так звідти, давайте говорити про те, що CSS є
і як він виглядає, і все, що.
Таким чином, для that--
Аллісон Бухгольц-AU: Повернутися до слайдів.
ТОМАС Реймерс: Повернутися до слайдів.
І Еллісон може взяти на себе.
>> Аллісон Бухгольц-AU: Ву.
ОК.
Так що у вашому CSS файлі, Ви будете мати
Багато з цих речей називається селектори.
Це буде просто основа вашого CSS-файлу.
Це просто буде багато і багато з них.
Так селектор.
Це просто загальна анатомія.
Ми збираємося пройти через приклади, тому що, якщо ви, хлопці, ніколи не
спостерігала за моїм розділ, я відчуваю, як речі в абстрактний
насправді не має сенсу.
Це завжди допомагає побачити приклади.
>> Отже, ми маємо деякий селектор.
Це збирається бути деякі ідентифікатор що ми хочемо стиль звернутися.
І тоді ми можемо мати будь-яке набір правил і цінностей.
Так селекторів, які ви могли б бачити може бути щось на зразок тіла,
або пункт з P, або заголовок, або будь-який інший,
все, що ви хочете, щоб ваші HTML-теги, щоб бути.
>> Таким чином, в цьому випадку ми маємо тіло.
І у нас є деякі правила, наскільки це відповідає
те, що ваш стиль застосовується до.
Так що в цьому випадку ми маємо Колір фону і вага шрифту.
Так що це збирається змінити фон-небудь
всередині тегів тіла нашого HTML файлу.
І це буде давати це це світло-блакитний значення.
>> Так що це збирається зробити фон блакитний.
А потім що-небудь в тілі матиме вагу шрифту сміливий.
Так що це просто збирається жирним шрифтом все нашого тексту.
І це тільки один селектор.
Але ви могли б дуже багато з них.
І, як ми збираємося показати Через трохи більше про те, як
що роботи й інші приклади там.
Все, що ви хочете додати?
>> ТОМАС Реймерс: Немає
Еллісон отримав його.
Ми просто будемо різати приклад тут, на нашому прикладі сайті.
Отже, давайте насправді прийняти це.
Це ідеально підходить.
Так що я просто хочу, щоб скопіювати і вставити що прямо в нашу main.css файлу.
І я йду, щоб врятувати його.
І тоді ми будемо запускати його.
Так примітка боку, один з найнеприємніших речей
якщо ви не збережете файл, і то ви, начебто, перезавантажте сторінку,
і т.п., чому не Зміна відбувається?
Це буває.
І ось ми побачили, що ми зробили наш сайт блакитний фон
і деякі жирним шрифтом текст.
>> Я повинен також згадати, якщо ви хлопці, є питання про що-небудь
ми робимо, будь ласка безкоштовно, щоб зупинити нас і запитати нас.
Ми повністю готові відповідати на запитання.
>> Аллісон Бухгольц-AU: Очевидно, що з CSS, все будується на собі.
Так що, якщо одне не сенс зараз, ми
не хочу, щоб докучати вам пізніше.
>> ТОМАС Реймерс: так давайте вид Проаналізуйте цей.
Так ви хочете, щоб почати з селектором тут?
>> Аллісон Бухгольц-AU: Так.
Як я вже говорив раніше, тіло це просто наша вибору тут.
Так що, якщо ми повернемося до нашої index-- ах.
>> ТОМАС Реймерс: Який я просто закриті.
Дайте мені секунду.
Так Файл, Відкрити, index.html.
Аллісон Бухгольц-AU: Круто.
Так що, якщо ви помітили, тут ми Тобто ці теги тіла, чи не так?
Так селектор раз відповідає теги, про які ми говоримо.
Так тіло прямо тут.
Отже, що ми хочемо сказати, everything-- ми можемо повернутися?
Шкода, що я міг би просто як доторкнутися до екрана.
Це було б так набагато прохолодніше.
>> Так що нічого в тих теги тіла, які ми бачили
просто, як, тексти, і організму в цілому
відноситься до, як, на задньому плані.
Якщо ви коли-небудь хотіли змінити фон,
що буде в тезі тіла.
Просто є такі правила, які застосовуються до них.
>> Так що, якщо ми повинні були піти в index.html і-- насправді,
у нас може бути щось поза тілом?
Якби ми мали, начебто, підвал або то, вона не буде застосовувати до цього.
Але нічого в Ці теги тіло буде
можуть бути порушені цим органом селектор, який ми зробили.
Так що, якщо ви були типу щось ще there--
>> ТОМАС Реймерс: Давайте їздити цей будинок.
Так що, якщо у нас був div-- так що просто ще один тег ви можете мати.
Я збираюся закрити його.
Або давайте зробимо це пункт.
Так р позначає пункті.
І в цьому пункті.
І тоді я кажу: "Це текст".
Круто.
І тоді я зробив це правило поширюється на У пункті замість тіла.
Ви побачите, як воно відноситься тільки до новостворених пункт, праворуч,
не всі це.
Чи має це сенс?
>> Аллісон Бухгольц-AU: Так що це все тіло,
але тепер наша вибору просто відповідає пункту.
Таким чином, ми просто повинні жирним синім шрифтом для цього конкретного пункту,
бо це єдине, який укладено всередині тега р.
>> ТОМАС Реймерс: Чи є якийсь сенс кшталт про те, як речі инкапсуляции інші речі?
Аллісон Бухгольц-AU: Крім того, тільки сказати, начебто, один з кращих способів
щоб дійсно отримати комфортно з CSS це просто зробити щось на зразок цього,
просто спробуйте його.
Це дуже просто щось типу , Вдарив Оновити, щоб побачити, що відбувається.
І як з більшістю CS, експериментування може часто
привести до набагато краще інтуїтивне розуміння.
Навіть більше, ніж нас просто, як, розмовляючи з вами.
>> ТОМАС Реймерс: Абсолютно 100% згодні з цим.
Так що, якщо ми повернемося до цього, давайте почнемо розсікає саме те, що ці два робити.
Отже, ми маємо два правила на цей рахунок.
Так перша це колір фону.
І ви бачите, що ми встановили його рівним значенню, світло-блакитний.
>> Таким чином, в CSS, CSS є свого роду дуже пухких про те, як
Ви дозволили визначити колір.
Таким чином, ви можете визначити їх по імені.
Ви також можете зробити щось на зразок "червоного".
І потім, якщо ми повернемося до цього, Ви побачите, що фон червоний.
Ви також можете отримати really-- Я думаю, що ви можна отримати досить творча з цим,
ви не можете?
>> Аллісон Бухгольц-AU: Я думаю, ви можете використовувати Hex.
Ви не можете?
>> ТОМАС Реймерс: Так.
Таким чином, ви можете використовувати Hex.
Але я думаю, ім'я-мудрий.
Не існує?
Аллісон Бухгольц-AU: Ви можете зробити досить мало.
Досить багато, як і більшість квітів, які ви може name-- як, я думаю, лосось є одним.
>> ТОМАС Реймерс: Ми збираємося спробувати лосося.
Аллісон Бухгольц-AU: Я думаю, зеленувато-жовті знаходиться в там.
ТОМАС Реймерс: Так.
Побачити?
Таким чином, ви можете отримати досить творча.
>> Аллісон Бухгольц-AU: Ви може отримати досить творча.
Мовляв, якщо ви можете думати про назва кольору, ймовірно, це там.
Якщо ви дійсно хочете добре детально, ви можете піти Hex.
>> ТОМАС Реймерс: Так.
Так шестнадцатеричной.
Якщо ви, хлопці, пам'ятаєте цю спину зі старого PSET, зображення Відновлення,
ви, хлопці, повинні були мати справу з цих шістнадцяткові значення.
І начебто резюмувати, що це таке, Hex має три значення, що зберігаються в ньому.
Так що це в групи по два кроком.
Перші два представляють значення червоного.
Другий являє значення зеленого.
І останній з яких є синій?
>> Так FF відбувається представляють шестнадцатеричное 255.
Таким чином, ви повинні 255 червоний, 255 зелений і синій колір 0.
І значення в діапазоні від 0 до 255.
>> АУДИТОРІЯ: Так.
Так по суті, ми могли б шукати Інтернет для будь-якого кольору ми хочемо,
і визначити насправді відомо, колір комбінований спектр,
і тоді ми могли б покласти його в?
Аллісон Бухгольц-AU: Абсолютно вірно.
Так що ви повинні в значній мірі повний контроль за кольори, які ви хочете в CSS.
Ми будемо говорити про фонові зображення пізніше?
Чи ми хочемо, щоб це зробити?
>> ТОМАС Реймерс: Так.
Абсолютно вірно.
Отже, спочатку, просто щоб показати, що червоний і зелений-жовтий.
І якщо Вам потрібна якась допомога в пошуку цього, ви
Чи може Google щось як "кольору палітри."
Аллісон Бухгольц-AU: О, це дуже добре.
Я люблю Color Picker.
>> ТОМАС Реймерс: colorpicker.com є гарним прикладом.
І ось, ви побачите, що у вас є повний Photoshop, як вибір кольору.
>> Аллісон Бухгольц-AU: Мм-ом.
Крім того, класні речі ти може генерувати колірні схеми
так що вам не доведеться, як, стикаючись кольору.
ТОМАС Реймерс: А потім ось шістнадцяткове значення тут.
Таким чином, ви завжди можете знайти на сайті в основному місць, щоб отримати шістнадцяткове значення від.
Це не сортувати того, що просто, як ми бачити кольори світу в цифрах.
Це більше, що ми йдемо на сайті і знайти те, що колір, який ми хочемо,
а потім взяти цифру.
Тому що це просто дуже легко спосіб посилатися речі в CS.
>> Аллісон Бухгольц-AU: А тут ще also--
Я забув точну назву сайту.
Але є, безумовно, я думаю, щось від Adobe
що створює колірні схеми для вас, яка насправді здорово, тому що ви
definitely-- це іноді важко зрозуміти ,,
Ах, якби я хочу використовувати цей колір, що може бути ще корисним
використовувати в іншому місці на моєму сайті, щоб, як, зробити його гарним і згуртованою.
>> ТОМАС Реймерс: Allison говорить про один за Adobe називається Kuler, я думаю.
Це К-У-Л-Е-Р.
Аллісон Бухгольц-AU: Я так думаю.
Я впевнений, що це один.
>> ТОМАС Реймерс: Мій фаворит завжди Колірна схема конструктора.
>> Аллісон Бухгольц-AU: Ох.
>> ТОМАС Реймерс: Що now--
>> Аллісон Бухгольц-AU: Ах, це красиво.
>> ТОМАС Реймерс: А ви в принципі може сказати, як,
Хочу три кольору поруч один з одним.
І тоді давайте зробимо що-небудь хороше.
І тоді ви можете отримати приклад що це може виглядати.
І потім, якщо ви наведіть курсор миші на будь-який з їх, це дає вам шістнадцяткове значення.
>> Так само, як хороший спосіб, щоб почати думати про колірних схем
або які кольори в веб-сайт може йти добре разом.
Тому що це може бути дивно не так легко підібрати, як ви думаєте.
А потім інші цікаві речі Я завжди вважав, про цей сайт
якщо ви потрапили приклади, це буде Показати, що приклад сайт
може виглядати з використанням цього кольорову схему.
У будь-якому випадку.
>> Повернутися до фактичного CSS.
Аллісон Бухгольц-AU: Але очевидно, що ми знаю, що ці посилання можуть бути корисними.
ТОМАС Реймерс: Ні, вони безумовно, може бути корисним.
Таким чином, друге правило, Еллісон?
>> Аллісон Бухгольц-AU: Так.
Друге правило це просто відповідна нашого шрифту.
Так вага шрифту просто якась of-- так вага буде
бути, якщо ви хочете просто, як, нормальний або, як більш тонкі шрифти,
або в даному випадку, як, виділені жирним шрифтом.
Я забув.
Що, якщо ви хочете it-- є тонше один більше, ніж просто, як, нормально?
ТОМАС Реймерс: Я насправді не знати, якщо є більш тонкою.
Аллісон Бухгольц-AU: Я забув.
Так шрифту вага ми, як правило, просто використовувати для напівжирним шрифтом.
Якщо ви хочете отримати дійсно в це, ми збираємося показати вам.
W3Schools є всі різні речі, які ви можете зробити для шрифтів.
Але в принципі, якщо ви хочете нічого змінювати про шрифт,
це завжди буде, як, шрифт-то.
Так це буде, як, сімейства шрифтів, якщо ви намагається змінити фактичний тип.
Це буде стиль шрифту, якщо вас хочу зробити це як прописом,
або курсив, або ще багато чого.
Або навіть колір шрифту, якщо ми хотіли, щоб змінити це.
>> ТОМАС Реймерс: Так.
Таким чином, ви можете змінити це.
І начебто просто Резюме зараз, так що ви можете
бачити, що у нас є селектор тут.
У нас є ці фігурні дужки.
І тоді у нас є правила розділених крапкою з комою.
Чи має це сенс?
Так?
Круто.
Так що, якщо це good--
>> Аллісон Бухгольц-AU: Назад.
ТОМАС Реймерс: Давайте говорити конкретно про те, які селектори у нас є.
"Тому що зараз ми в начебто тільки що показали міток.
Але ви, хлопці, могли бачити, що це правдоподібно.
Скажімо, у вас є два пункти, на сторінці, і ви
хочу, щоб мати можливість стилю один, але не інший,
Ви не просто хочете обмежувати себе доведеться використовувати інший поточний HTML
теги, щоб дати їм різні стилі.
>> Отже, ми маємо три основних типи селекторів.
Аллісон Бухгольц-AU: Так.
Отже, ми маємо тег, що і ми говорили про прямо зараз.
Так що ніби як на тіло або р.
А то у нас клас, який є коли ми визначаємо його в нашому CSS файлі,
це завжди буде точка, незалежно від Ви хочете ім'я вашого класу було.
І це може застосовуватися до кількох речей.
>> Скажімо, у вас є п'ять пунктів і два з трьох з них
повинні бути оформлені так само, ви б застосувати клас до нього.
І це тільки, як ми робимо це.
Ми дамо вам приклад де це насправді показує вгору.
Але якщо у вас, можливо, деякі тег р, після нього, можна було б написати,
клас дорівнює будь-якій зручній класи Ви хочете, щоб застосувати до нього.
Тому, що б клас селектори, які ми хочемо застосувати до цього конкретного пункту,
ми могли б просто написати, як це.
Звичайно, я думаю, приклад зробить це набагато більш конкретними.
>> Інший у нас є це ID, який ми позначимо
хеш, або фунта, або хештегом.
ТОМАС Реймерс: знак числа.
Аллісон Бухгольц-AU: знак числа.
Це працює, теж.
А це має бути дійсно унікальним.
Вони повинні застосовуватися тільки до одне на вашій сторінці.
Так от, чи є конкретний пункт, або який-небудь елемент у списку, або будь-який інший,
це має бути унікальним.
І таким же чином, що ми просто сказати, як, клас = "class1 class2,"
це може бути просто ідентифікатор, що ми є.
ТОМАС Реймерс: Так.
Так що давайте, безумовно, говорити про приклади тут.
І я просто хочу, щоб зануритися прямо назад в коді.
Отже, давайте подивимося на наш HTML.
І тому ми зараз є один пункт.
Цей текст.
Я просто хочу, щоб змінити це. "Цей текст 1."
А потім ми збираємося є "Цей текст 2."
>> Аллісон Бухгольц-AU: другий.
ТОМАС Реймерс: Так.
Таким чином, ми тепер маємо "Цей текст 2", чи не так?
І ми збираємося, щоб побачити, що якщо ми перезавантажити сторінка, те, що ми збираємося знайти
що ми збираємося find--
Аллісон Бухгольц-AU: Ох.
ТОМАС Реймерс: Так.
Ми збираємося, щоб знайти "Це Текст 1 ", і" Цей текст 2. "
>> Аллісон Бухгольц-AU: І з прекрасний жовтий колір.
>> ТОМАС Реймерс: І ви побачите, що наша вибору прямо зараз,
який відноситься до р, або абзаци, впливає на них обох,
тому що обидва вони відповідають умови, що вони обидва р тегів.
Це робить повний сенс.
Так питання в тому, добре, що якщо ми хочемо отримати тільки один?
Так само, як Еллісон говорив, у нас є два інших способи зробити це.
Я збираюся почати з ідентифікатором.
>> Аллісон Бухгольц-AU: Давайте почнемо з ідентифікатором.
>> ТОМАС Реймерс: І як з них є атрибутами.
Так атрибути існують в HTML.
І те, що вони є, те, що ви додаєте
всередині тега, який окремо від імені тега.
Таким чином, ви можете мати кілька атрибутів.
Так?
>> Аллісон Бухгольц-AU: Я саме збирався сказати, з вашого прикладу з PSET 7,
якщо кожен з вас намагаються вирівняти речі від центру,
Ви могли б використовувати "Текст приєднуються = центр».
І ви це помітили, напевно, повинні були зосереджені
Ваш текст або ваш навігаційної панелі.
Так от якраз і атрибут що ви можете бути знайомі з.
ТОМАС Реймерс: Там купа атрибутів, які ви побачите.
Так.
Як і хороший посиланням на PSET 7.
У нас є ідентифікатор.
Ви також можете мати клас, подібні речі.
Один тег може мати багато атрибутів.
Так, починаючи з ідентифікатором, давайте уявимо, що ми хочете мати ідентифікатор of-- я не знаю.
Ми будемо називати його особливим, бо це одне, ми
збирається зробити сміливий, і підкреслення і що завгодно.
Аллісон Бухгольц-AU: Це буду дуже особливе.
ТОМАС Реймерс: Так що це Один з них, у нас є документа особливе.
Таким чином, спосіб вибору, що, таким чином, є в main.css, а не є р тег,
ви #special, добре?
І, що вибирає що з ідентифікатором особливе.
Чи має це сенс для всіх?
АУДИТОРІЯ: Так.
ТОМАС Реймерс: Круто.
Отже, якщо ми повернемося, ми see-- вигуки.
Так.
Ми побачимо, що це всього лише вибирає один з ідентифікатором особливе.
Так?
Звучить здорово.
Так.
>> Залу: Можна щось є атрибутом як клас та ідентифікаційний?
>> ТОМАС Реймерс: Так.
АУДИТОРІЯ: OK.
І тоді те, що станеться, якщо ви потім дати це якісь правила в CSS, що конфлікт?
ТОМАС Реймерс: Абсолютно вірно.
Ми безумовно збираємося щоб говорити про це.
Так саме те, що ви отримуєте на, ви також можете мати класи.
Отже, давайте уявимо, що в мене було три пункти, і я
хотів стилізувати перший два, але не третім.
Ну, ваша перша думка може бути, ну, я може просто дати другий ідентифікатор.
Але ви не можете, бо ідентифікатором, так само, як Еллісон говорив,
повинен бути унікальним.
>> Таким чином, замість ID, то, що ви можна використовувати, що ви можете використовувати клас.
І class--, що вона дозволяє Ви зробити, це в основному говорять,
це відноситься як частина групи.
У цьому випадку, наша група називається Special.
І те, що ми збираємося зробити, це ми збираємося say--, а не фунт,
ми збираємося використовувати точку.
ОК?
І зауважте, що фунт і крапка існують тільки у файлі CSS,
не в HTML.
Аллісон Бухгольц-AU: Так.
Важлива відмінність.
>> ТОМАС Реймерс: У мене є було стільки боротьби,
бо я поставив хеш в HTML і то просто відчував себе дурним протягом тривалого часу.
Подивіться, як він вибирає обидва ті, з цього класу?
Круто.
>> Тепер, все може мати кілька класів.
Скажімо, я хотів, щоб перший два мають фон жовтого
і два мають колір шрифту блакитний.
ОК.
Я дійсно не знаю, чому я хочу зробити це, але я не можу.
>> Аллісон Бухгольц-AU: не могли б рекомендував його для вашого веб-сайту.
Але для наших цілей, він буде робити.
>> ТОМАС Реймерс: Це не хороший кольоровій гамі.
Аллісон Бухгольц-AU: Ну, жовтий і синій мої високі квітів школі.
Я не знаю, хоча.
ТОМАС Реймерс: Allison хай школа мала великий колірну схему.
[Сміх]
Отже, що ми можемо назвати це Давайте назвемо this-- так у нас є спеціальні
і у нас є досить.
Я пропоную, для цього потрібно використовувати набагато більш описові імена.
Аллісон Бухгольц-AU: Так, я б назвати це, начебто, жовтого або синього кольору.
>> ТОМАС Реймерс: Ми не дійсно вносить реальний веб-сайт,
який є, чому ми цього не робимо.
Але якщо ви насправді був реальний веб-сайт, ви
могли б мати, як, стаття заголовок, зміст статті, перше слово,
такі речі, які дозволяють Вам буде набагато більш наочним.
Це дійсно подібно змінним.
Вони повинні бути названі в дорозі, де Ви можете, like-- так, як такої.
Ідеально підходить.
>> Так колір фону.
І тоді ми будемо say-- так спосіб змінити колір це просто "колір".
І ми збираємося зробити це синій.
Це круто.
Так що тепер у нас є Перші два мають особливе.
Наступна одним збирається є "клас = красиво."
Аллісон Бухгольц-AU: І тоді ви будете Щоб додати "досить" до середньої.
ТОМАС Реймерс: Так.
А потім в середнє, додати "досить", те, що відбувається
це у вас є тільки простір.
Так атрибута класу є розділений пробілами список
всіх класів які ставляться до цього тегу.
ОК?
Це не як цей належить якась спеціальний клас
"Особливий, простір, досить."
Він належить до двох classes-- спеціальної і досить.
Так?
Круто.
>> І потім, якщо ми подивимося на те, що відбувається, ми
побачимо, що перший має жовтий фон, чорний текст.
По-друге одно--
>> Аллісон Бухгольц-AU: --has жирним шрифтом жовтий фон з синім текстом.
І наша остання просто має синій текст, який ми призначили до нього.
>> ТОМАС Реймерс: Cool?
Як селектори працює?
Високий.
>> Аллісон Бухгольц-AU: Ми хочемо зробити говорити про конфлікт зараз, то?
>> ТОМАС Реймерс: Так що так.
Абсолютно вірно.
Що трапиться, якщо вас є конфлікт, чи не так?
Давайте уявимо, що перший встановлює щось like--
Аллісон Бухгольц-AU: Може бути, Це один змінює фон?
ТОМАС Реймерс: Так.
Так що ми збираємося зробити "досить" змінити фон на лосося.
Аллісон Бухгольц-AU: Ви просто з всі великі кольору сьогодні, Томас.
ТОМАС Реймерс: Так.
Тому що я дізнався, що я можу використовувати лосося в реальному кольорі.
Таким чином, ми тільки збираємося зробити це.
Я також думаю, Захід реальний колір.
АУДИТОРІЯ: Захід це реальний колір?
Аллісон Бухгольц-AU: Давайте спробуємо це.
ТОМАС Реймерс: Після цієї демонстрації тільки тому, що у випадку, якщо псує,
Я не хочу, щоб налагодження.
Отже, ми знаємо лосося реальний колір.
Таким чином, будь здогадки по що станеться?
>> Аллісон Бухгольц-AU: Будь-яка ідея?
>> АУДИТОРІЯ: [нерозбірливо].
>> ТОМАС Реймерс: Так.
Таким чином, ви отримали це точно.
В основному, це відбувається Останнє правило, що воно було дано.
>> Аллісон Бухгольц-AU: Так що це де каскадні набуває чинності.
>> ТОМАС Реймерс: Так що пам'ятаєте, як ми було, що каскадні таблиці стилів?
Отже, що ми якось означає, що у нас є купа правил
які застосовуються на верхній частині один з одним, і вони можуть також перевизначити один з одним.
>> Аллісон Бухгольц-AU: Так Що б не внизу
скасовує все це на самому верху.
Ви могли б правила, які повністю заперечувати те заздалегідь.
Це також пояснює, чому ви хочете бути обережні, коли ви стилю,
так що ви не створюєте правила, які Ви просто повністю перекриваючи.
>> ТОМАС Реймерс: Або може бути, ви хочу, щоб перезаписати правила.
>> Аллісон Бухгольц-AU: Або, може бути, ви робите.
Так.
>> ТОМАС Реймерс: Уявіть, що у вас є клас, який відноситься до більшості речей,
але, скажімо, ви хочете змінити Колір фону на червоний, а також шрифту
вага напівжирним шрифтом для найбільш речі, але для одного,
Ви хочете тільки колір фону бути корисним, але ви хочете, щоб всі інші
властивості, ви могли б зробити щось як "накреслення шрифту = нормальний,"
що б потім скасувати, що сміливий зміни.
Так?
Знову ж таки, кращий спосіб, я думаю, Еллісон сказав, що це, просто практикувати.
>> Аллісон Бухгольц-AU: експериментування.
>> ТОМАС Реймерс: практика, практика, практика і експеримент.
Я знаю багато людей, які думають, що CSS це просто багато ворожіння і-перевірки
Зрештою, де, якщо Ви хочете зробити something-- як,
у вас є загальне уявлення, але Ви, мабуть, ще потрібно
спробувати, щоб переконатися, Ви знаєте, як він виглядає.
>> АУДИТОРІЯ: Коли ви претендуєте класи, більш один
на той же пункт або розділ, робить це
від того, що замовлення ви можете введіть їх у лапки?
>> ТОМАС Реймерс: Ні, не на всіх.
>> Аллісон Бухгольц-AU: Що має значення замовлення протягом вашого CSS стилів.
АУДИТОРІЯ: Не могли б ви повторити питання?
ТОМАС Реймерс: Ой.
Аллісон Бухгольц-AU: В класу, коли ви даєте класи
щось в HTML, що не це має значення, який порядок вони в?
Це не має значення порядок.
Важливо те, порядок Селектори класів у вашій CSS,
в таблиці стилів.
>> ТОМАС Реймерс: звук хороший?
>> Аллісон Бухгольц-AU: Прекрасно.
>> ТОМАС Реймерс: А потім ми будемо продовжувати to--
Аллісон Бухгольц-AU: Що ж ми маємо наступний?
Я забув.
О, ми просто маємо приклади.
Але ми-то зробити ті.
Ми зробили приклади на льоту.
>> ТОМАС Реймерс: Ми отримуємо скоро об'єднати селектори.
>> Аллісон Бухгольц-AU: О, ми отримуємо, щоб об'єднати селектори.
ТОМАС Реймерс: Таким чином, деякі прикладів у нас є
# Dog-- фунт, або хештег, або знак числа, або щось
Ви хочете зателефонувати that-- різким.
>> Аллісон Бухгольц-AU: Sharp собака.
>> ТОМАС Реймерс: Тоді у вас є .pets.
Щось має свій ідентифікатор собаки, є тільки одна собака на сторінці.
Щось є ідентифікатор кіт, є тільки одна кішка.
Там може бути багато домашніх тварин на цій сторінці.
Ось чому ми дали, що класи.
У вас є приклад р.
А потім, тому один з Останній приклад, який
це те, що ми не говорили, те, що відбувається, коли ви поєднуєте їх.
Так p.pets.
>> Таким чином, для того, давайте повернемося до код і ввести another-- так.
Отже, повернемося сюди.
>> Аллісон Бухгольц-AU: Я відчуваю, що це really--
як тільки переглядаючи приклади дійсно спосіб дізнатися це.
Так ось, що ми робимо.
>> ТОМАС Реймерс: Отже, давайте уявимо, що ми тільки хочу, щоб виділити текст 2, вірно?
Таким чином, ми, безумовно, не може зробити це з ідентифікатором.
Ну, ми могли б зробити це з ID, але це не має ID.
Я міг би додати один, але давайте уявимо, що я не хочу, щоб додати один
або вже є щось ще.
Я не можу цього зробити з цим.
Тег, безумовно, не єдиний, чи не так?
І жоден не клас.
Але ви можете комбінувати ці речі.
Скажімо, ми хотіли зробити щось яке застосовується тільки до речей,
є клас спеціальних і які мають клас досить.
>> Так що ви можете зробити, це в main.css, Ви можете сказати, давайте спочатку видалити це.
Ви можете комбінувати їх.
Таким чином, ви можете зробити .special.
немає місця.
Просто .special.pretty.
Що це означає, що щось який є одночасно спеціальних і красиво.
Чи має це сенс?
І якщо ми йдемо сюди, що Ви будете бачити
це правило поширюється лише на Другий, який має як з них.
І ви можете зробити, що для багатьох речей.
Ви можете say-- давайте прикидатися, що я тільки хотів
щоб робити речі, які мають клас гарненьку і який також пункт тега.
Так p.pretty.
Давайте уявимо, що в мене було щось дуже на тілі тега.
ОК?
Я можу запустити це, і я можна побачити, що це всього лише
має намір звернутися в речах, які пункти з класом красиво.
І ви можете комбінувати їх, в основному, як багато хто, як ви хочете.
Таким чином, ви можете просто покласти їх разом.
Чи має це сенс?
Аллісон Бухгольц-AU: Так Цей вид є більш корисним,
коли Томас говорив раніше, можливо, у вас є дуже складний сайт,
і у вас вже є багато з цих правил, написаних,
і вам просто потрібно, щоб об'єднати два з раніше.
Як замість того, щоб писати весь новий селектор і зміни його там,
Ви можете просто об'єднати їх там, де він перекриває.
>> ТОМАС Реймерс: Або ви могли б знайти out-- іноді
є один клас, який робить колір шрифту, як синій,
і є ще один клас, який робить синій фон.
І це просто не буде працювати.
Таким чином, ви написати спеціальний випадок, де, like-- але якщо він має і те, що ви
збираюся зробити, це ви збираєтеся зробити це один цей відтінок синього
і це одна ця інша відтінок синього.
Вірно?
>> Аллісон Бухгольц-AU: Добре для тих видів винятків.
ТОМАС Реймерс: Так думати про проблеми
які можуть виникнути, коли ви поєднуєте їх.
Круто.
Отже, повернемося до нашої презентації.
Аллісон Бухгольц-AU: Ми вже майже там.
ТОМАС Реймерс: І це припинив підключення.
Аллісон Бухгольц-AU: О, ні.
Аллісон Бухгольц-AU: CS на Office, Internet йде вниз.
О, іронія.
>> ТОМАС Реймерс: Так щастя, ми можемо уявити без інтернету, я думаю ,,
тому що у нас все слайди тут.
Отже, давайте поговоримо про Відносини тегів.
Аллісон Бухгольц-AU: Вірно.
Так просто якась йти від того, що сказав Томас,
це просто ще один спосіб зробити це.
Отже, ми маємо деякий батьків селектору з селектором дітей.
Таким чином, в цьому прикладі тут, у нас є деякі корпус з класом навігаційної панелі, кнопок класу.
Ах.
>> ТОМАС Реймерс: О, вибачте.
>> Аллісон Бухгольц-AU: І в основному, те, що це означає,
це вибрати всі діти, як всі ці види селекторів,
в цьому батьківського селектора.
І це тільки ті, це коли-небудь, щоб звернутися.
Я не знаю, якщо ви є кращий спосіб of--
ТОМАС Реймерс: Так що я думаю, як думати
про це пам'ятати перш, як ми ніби як поставити їх разом.
І тоді це означає, що один елемент який відповідає всім цим.
Про що це говорить, я хочу, щоб ви відповідати всі
в some-- Я хочу Вам знайти перемикач.
І потім протягом, я хочу вам відповідати нові речі.
Вірно?
Таким чином, в CSS, це все про свого роду будучи в змозі відповідати ці предмети.
І ви можете спробувати, щоб відповідати елементи в інші предмети.
>> Отже, давайте насправді приклад, і ми думаємо, що буде уточнити.
Отже, давайте уявимо, що у нас є спеціальна, Спеціальний досить, що завгодно.
І тоді ми маємо посилання, добре?
Так що пам'ятайте, це посилання.
Це не збирається нікуди йти.
І ми збираємося дати йому посилання клас, я думаю.
Давайте його на class-- дати мені ідею.
Аллісон Бухгольц-AU: Круто.
ТОМАС Реймерс: Coo-- давайте Їхати клас досить.
Чому ні?
>> Аллісон Бухгольц-AU: OK.
ТОМАС Реймерс: Так Прямо зараз гарні речі
збираємося зробити фон синій, колір фону лосося.
Це має сенс.
І якщо ми робимо this--
>> Аллісон Бухгольц-AU: Ви хочете, щоб додати текст
так гіперпосилання насправді з'являється?
ТОМАС Реймерс: Це буде хороший виклик.
Аллісон Бухгольц-AU: Тому що право Тепер ми просто збираємося нічого не отримаєте.
ТОМАС Реймерс: Так що це посилання.
"Ця ланка."
Так, і це буде щоб бути ще одна ланка.
Давайте дамо йому клас "круто".
Ви праві.
Круто.
Так що зараз ми збираємося, щоб захопити це.
Ми збираємося кинути один.
У нас є один в спеціальний тег, і ми також
будуть мати один в досить тега.
І зараз те, що ми збираємося зробити це, ми збираємося зробити cool--
що ми хочемо це робити?
Аллісон Бухгольц-AU: Чи можемо ми зробити його більше?
ТОМАС Реймерс: Давайте дамо йому кордону.
Аллісон Бухгольц-AU: Ми могли б кордону.
ТОМАС Реймерс: Так.
Так що ми збираємося зробити щось як, кордон is-- і ми
збираюся пояснити все це в одну секунду.
На даний момент--
>> Аллісон Бухгольц-AU: Для моделі коробки.
ТОМАС Реймерс: Але зараз ми знаходимося просто хочу, щоб дати йому кордону.
Так що це означає, що ви побачите ці посилання.
І ви побачите, що вони мають Вони, як і потворні чорні смуги, які
це круто.
>> Аллісон Бухгольц-AU: Наш сайт так досить.
>> ТОМАС Реймерс: Так.
Наш сайт є дивним.
Таким чином, ці два посилання, і вони з'являться.
Тепер давайте уявимо, що я тільки хотів це зробити
якщо він не був у той який мав фон лосося.
Так що пам'ятайте, що цей має досвід лосося,
тому що це класу досить.
>> Але ми хочемо сказати, що тільки охолоджує які знаходяться в класі спеціального, а не в класі
красива, повинен мати цю межу.
Ну, те, що ви можете зробити, це ви можу сказати .special, простір, .cool.
І на що це робить, коли ви думаєте, про це, це в основному говорять,
Добре, знайди мені все що відповідає особливим.
Потім протягом цих тегів, знайти мені все це здорово.
Аллісон Бухгольц-AU: Так що інший спосіб що може бути добре думати про це,
повернути його до С, так само, як ідеї області.
Тому, коли у вас є деякі Селектор, як ті,
що ми працюємо для до цього, вся ваша веб-сторінка, і всі ваші HTML
знаходиться в межах вашої видимості, чи не так?
Але коли у нас є ці батько-нащадок,
це як якби ви звуження, де Ви хочете в певному місці,
як якби, як ми дивимося в специфічна функція, а
всій нашій файлу.
АУДИТОРІЯ: Так що з урахуванням цього, буде це мало значення, якби ми changed--
Аллісон Бухгольц-AU: порядок?
АУДИТОРІЯ: --Обслужіваніе клас в CSS в .cool, простір, .special?
Аллісон Бухгольц-AU: Та тому, що тоді
хотів би сказати, сфера його все, що має прохолодний,
а потім подивитися на те, has-- Я маю на увазі, як в даному випадку,
Я не думаю, що це змінило б його.
>> ТОМАС Реймерс: Якщо ми сказали, що?
Вибачте.
>> Аллісон Бухгольц-AU: Якщо ми Сфера йому охолонути, а потім
дивитися на речі із спеціального, було б те ж саме, насправді.
>> ТОМАС Реймерс: Тому він не буде.
>> Аллісон Бухгольц-AU: Це не буде?
О, да ладно.
Я помиляюся.
>> ТОМАС Реймерс: Так причина це different-- загального mistake--
це те, що зараз тільки посилання прохолодним, чи не так?
Я думаю, моє питання до вас, хлопці, є, що на цій сторінці буде супроводжуватися .cool?
Є два тега тут, чи не так?
Що це одне і це одне.
І матч прохолодно.
Ніщо інше не робить.
Так що, якщо ви сказали, .cool, простір, .special, що ви збираєтеся сказати, це
в цих тегах, що особливого?
Аллісон Бухгольц-AU: Хм.
Ось що it-- право.
Бо це, як тільки щось тут.
>> ТОМАС Реймерс: Так що не вибере нічого.
>> Аллісон Бухгольц-AU: У той час як з спеціальна, ми в цих тегах тут.
>> ТОМАС Реймерс: ті й ті.
АУДИТОРІЯ: OK.
Так що ті теги з коса риса?
>> ТОМАС Реймерс: Так.
Чи має це сенс?
Як це в основному намагаються звузити сферу застосування.
Аллісон Бухгольц-AU: Так.
Я думаю, що це, ймовірно, Найпростіший спосіб думати про це.
>> ТОМАС Реймерс: Таким чином ми знайшли це, і Ми знайшли цей збіглися особливим.
А потім ми просимо, в рамках ці хлопці, що це круто?
І в цей, цей круто.
У цьому, нічого не круто.
Так що це тільки ознака, яка залишається.
>> Аллісон Бухгольц-AU: У той час як круто тільки в цих биркою там.
ТОМАС Реймерс: Абсолютно вірно.
І те, що особливого в них?
Нічого.
Тепер те, що я скажу, Якщо немає місця,
Ви питаєте, що це круто і special-- або те, що досить і спеціальні, чи не так?
Якщо ви говорите, .special.pretty, що це так само, як .pretty.special.
>> Тому що те, що видалення простір питаю, коли ви говорите, .special,
Ви запитуєте, добре, ті, які є особливими?
І тоді ті, які з них також досить,
що ж, граматично, що запитати, що це досить,
а потім з них, що також особливого?
Вірно?
Ця відмінність що в якісь є.
АУДИТОРІЯ: OK.
ТОМАС Реймерс: Так.
Високий.
Так що з вигляду then--
>> Аллісон Бухгольц-AU: Я думаю, що наша остання Справа в тому, (в маскарадних британським акцентом)
Модель вікно.
>> ТОМАС Реймерс: box-- [хихикає] Мені подобається, як Еллісон каже, що.
Так блокову модель речі.
>> Аллісон Бухгольц-AU: Просто коробка, я буду ваша модель вікно.
ТОМАС Реймерс: Отже, давайте поговоримо про це.
Так що зараз ми витратили багато часу на розмови про селекторів.
В даний час, ви, хлопці, напевно, як, майстри selectors-- ви знаєте,
Як точно вибрати контент, який Ви хочете, щоб маніпулювати на екрані.
>> Так що тепер питання в тому, як саме ви можете працювати з ним?
Так що я думаю, саме основне спосіб думати про те, що
, Ну, що саме є елементом CSS?
Ми витратили багато часу кажу, що тег,
або, що те саме основне уявлення тега?
>> Хороший спосіб думати про тобто, що форма лосося?
Яку форму, начебто, оранжево-рожевий фон?
>> АУДИТОРІЯ: Це прямокутник.
>> ТОМАС Реймерс: Це прямокутник, вірно?
>> Аллісон Бухгольц-AU: Був не питання з підступом.
[Сміх]
>> ТОМАС Реймерс: Не намагаючись щоб обдурити вас, хлопці так пізно.
Отже, ми маємо цей прямокутник.
І тег р, чи не так?
Так що дає нам хороший переконання, що пункт
представляється у вигляді прямокутника, в Принаймні, у свідомості браузер, який
це.
>> Аллісон Бухгольц-AU: Я маю на увазі, браузери зазвичай мають прямокутний,
так що має сенс.
>> ТОМАС Реймерс: ідея тут що всі теги всередині CSS
представлені у вигляді прямокутника.
І кожен прямокутник має чотири частин відповідно до CSS, ОК?
У вас є фактичний зміст.
Ось де текст лежить.
>> Аллісон Бухгольц-AU: Може бути, ваша картина.
>> ТОМАС Реймерс: Так.
Ви повинні відступи, який є просто якийсь пробіл.
Тоді у вас є кордону.
І тоді у вас є запас, який це білий простір за межами цього.
Так що немає сенсу для всіх, тому ми
будемо говорити про те, що ні на секунду.
Так прямо тут, що ми збираємося робити що ми збираємося створити деякі діви, добре?
Вибачте мене, поки я--
>> Аллісон Бухгольц-AU: Я відчуваю, як ми повинні поставити милий знімок в.
>> ТОМАС Реймерс: Ми, безумовно, повинно бути.
>> Аллісон Бухгольц-AU: Я відчуваю, як все
могли б виграти від милий картина, от і все.
>> ТОМАС Реймерс: Чи можемо ми всі вигоди від a--
>> АУДИТОРІЯ: Так, звичайно.
ТОМАС Реймерс: Добре, круто.
Таким чином, ми повинні покласти мило картинка в десь.
Аллісон Бухгольц-AU: Я відчуваю, як милий зайчик може бути корисно просто зараз.
ТОМАС Реймерс: Звичайно.
Аллісон Бухгольц-AU: Кінець тижня.
Є що adorab--
>> ТОМАС Реймерс: Як щодо кошеня?
>> Аллісон Бухгольц-AU: Кошеня працює, теж.
>> ТОМАС Реймерс: Круто, тому що є місце для цього.
Це називається PlaceKitten.
Аллісон Бухгольц-AU: Це здорово.
ТОМАС Реймерс: Так.
Аллісон Бухгольц-AU: Просто для, як, заповнювачі зображення на веб-сайт.
ТОМАС Реймерс: Мм-ом.
Там також PlacePuppy.
І є PlaceBacon.
>> Аллісон Бухгольц-AU: PlaceBacon?
Справді?
>> ТОМАС Реймерс: О, ми не є доступ в Інтернет тут.
>> Аллісон Бухгольц-AU: [Стогін]
Трагічна.
ТОМАС Реймерс: В іншому випадку, Я б показати вам, хлопці,
Як помістити зображення на вашому сайті.
Ми збираємося, щоб спробувати отримати це роботу перш ніж ми повинні йти.
Але зараз, ми просто будемо говорити в кольорах, то.
Ми хочемо покласти фотографії kittens--
>> Аллісон Бухгольц-AU: Ми зробили.
>> ТОМАС Реймерс: --Обслужіваніе Інтернету вниз на даний момент буття.
Отже, ми маємо дві діви, і ми збираюся дати їм два ідентифікаторів.
Ми збираємося називати його "Перший" та "другої".
Так ID = "перший".
І ми збираємося, щоб дати їм два кольори.
Так як ми вибираємо щось з ідентифікатором "перший"?
Аллісон Бухгольц-AU: Dot або хеш?
АУДИТОРІЯ: Sharp.
ТОМАС Реймерс: Sharp, ідеально.
Sharp, хеш, незалежно we--
>> Аллісон Бухгольц-AU: Багато речей, щоб назвати його.
>> ТОМАС Реймерс: OK.
Ми збираємося селитися на хештегом, і це те, що ми збираємося піти с.
ОК?
>> Аллісон Бухгольц-AU: хештегом.
>> ТОМАС Реймерс: Так хештег в першу чергу.
>> Аллісон Бухгольц-AU: Так Ви можете чірікать seminar--
хештегом CSS, хештег прохолодно.
ТОМАС Реймерс: хештегом Awesomeness.
Аллісон Бухгольц-AU: Хештегом Awesomeness, так.
ТОМАС Реймерс: OK.
Отже, ми маємо "перший" і "друга".
Отже, спочатку ми матимемо Колір фону в червоний колір.
Аллісон Бухгольц-AU: Ну, товстої кишки.
ТОМАС Реймерс: Так.
Аллісон Бухгольц-AU: Я буду твоїм спот-перевірки.
ТОМАС Реймерс: Allison отримав мене.
Фон-колір blue--
>> ТОМАС Реймерс: Фіолетовий!
>> ТОМАС Реймерс: Фіолетовий.
Аллісон Бухгольц-AU: Так.
Purple мій улюблений колір, і ми не використали його ще.
>> ТОМАС Реймерс: Вайолет.
Аллісон Бухгольц-AU: Вайолет.
Це працює.
>> ТОМАС Реймерс: Так що ми матиме два діви.
Вони збираються, щоб бути повністю порожнім.
Ми повинні, ймовірно, якийсь текст.
Таким чином, "Перший" буде "привіт".
І "другий" буде say--
>> Аллісон Бухгольц-AU: До побачення.
>> АУДИТОРІЯ: - "мир".
Здрастуйте, до побачення.
Аллісон Бухгольц-AU: я бачив їх у концерті на два тижні.
ТОМАС Реймерс: The Beatles?
Аллісон Бухгольц-AU: Для чисел.
Вони не так вже й велика.
Мені це не подобається.
>> ТОМАС Реймерс: У нас є "HELLO" і "до побачення".
І знову, CSS це просто приголомшливо, оскільки вона визнає наші кольори.
Не потрібно навіть побоюються, що вони існують.
Вони роблять.
>> Аллісон Бухгольц-AU: вони існують.
>> ТОМАС Реймерс: Так CSS Я думаю, має 255 слів, щоб говорити про колір.
Якщо ви можете думати про колір поза ті 255, як я буду вражений.
Аллісон Бухгольц-AU: Так.
Я думаю, що ви, хлопці, може мати просто прийти в відразу після.
>> ТОМАС Реймерс: Так от, Ви побачите у нас є дві коробки
прямо на вершині один одного, чи не так?
Здрастуй і прощай.
>> Аллісон Бухгольц-AU: Там немає місця між ними.
Вони просто smooshed Право на верхній частині один одного.
>> ТОМАС Реймерс: Отже, перше, Я думаю, ми повинні говорити про
є також давайте say-- так.
Так CSS представляє їх як свого роду ящиків.
І як коробки, вони мають зміст.
І зміст прямо зараз є свого роду привіт або до побачення і ось воно.
ОК?
>> Таким чином, одна з перших речей, які ви можете зробити, це ви можете додати відступи.
Заповнення говорить, як багато місця він повинен вийти на кожній стороні.
Так що давайте говорити, що я хочу сказати, 10 пікселів з кожного боку.
І я буду розсікати, що в секунду.
Аллісон Бухгольц-AU: Всі ці речі тут
збираються бути в основному в пікселях для іншої частини семінару.
Ви будете бачити, що вона має деякий простір навколо нього, чи не так?
Так що ви не бачите тут є ця невидима роду доповнення
на кожній стороні, яка говорить, начебто, ОК, у вас є ящик content--
>> Аллісон Бухгольц-AU: Ви хочете просто підтягти інспектувати елемент?
>> ТОМАС Реймерс: Так, це хороша ідея.
Аллісон Бухгольц-AU: Крім того, я вважаю, що перевірити елемент хороший спосіб
щоб з'ясувати, якщо щось відбувається неправильно, щось несподіване,
оглядаючи теги і бачачи, що це як переписуються корисно.
>> ТОМАС Реймерс: Так що я не впевнений, якщо ви, хлопці, можете побачити цей колір.
Чи можете ви?
Ви побачите це оббивка від виду кромки.
І тоді ви побачите фактичне вміст у синій, чи не так?
Так от дуже Основи блокової моделі.
Ви повинні зміст.
Тоді у вас є доповнення.
>> Зал: А чому б тобі просто використовувати рамку в the--
>> Аллісон Бухгольц-AU: Вірно.
Тому що це просто вибору елемент прямо зараз.
>> ТОМАС Реймерс: Так.
Інші речі.
Отже, давайте поговоримо про те, що Команда оббивка на секунду.
Таким чином, в CSS, вимірювання повинні мати пристрій.
Тому спочатку потрібно суму.
Таким чином, в цьому випадку, ми вже говорили 10.
І тоді наступний ми вже говорили це піксель, пікс.
Інші з них ви могли б мати є речі, як сантиметри, дюйми.
Ви можете робити речі, як, що становить 10 дюймів?
І це буде смішно.
>> Аллісон Бухгольц-AU: О, хлопчик.
>> АУДИТОРІЯ: Вау.
>> ТОМАС і Еллісон: Так.
ТОМАС Реймерс: Так от всі оббивка.
Я збираюся повернутися до пікселів.
>> Аллісон Бухгольц-AU: Пікселі як правило, бути, як, стандарту.
Коли ви дивитеся на багато веб-сайтів, вони в основному працюють в пікселях.
ТОМАС Реймерс: Так що ви збираєтеся, щоб побачити або pixels-- інші ті, які ви бачите
це їх, який є одним ЕМ дорівнює висоті шрифту
які ви використовуєте.
>> Аллісон Бухгольц-AU: мм.
ТОМАС Реймерс: Це хороший спосіб сказати, як я хочу, стільки ж місця, як мій шрифт
приймає.
Аллісон Бухгольц-AU: Не знаю, що.
Ви дізнаєтеся щось нове кожен день.
ТОМАС Реймерс: Є багато вимірів в CS.
Я пропоную вам подивитися їх.
Для всіх ваших випадках, я думаю, пікселів має бути достатньо.
І вони також, що Ви будете бачити
У більшості прикладів зробити в режимі онлайн.
Таким чином, ми залишити його в пікселях.
>> Ви також можете, я повинен say-- так оббивка встановлює всі прокладок.
Ви також можете зробити щось на зразок "Оббивка-топ" просто set--
Аллісон Бухгольц-AU: Може бути, ми отримаємо наш "привіт" назад.
ТОМАС Реймерс: --to просто встановити оббивка зверху і нічого більше.
Таким чином, чотири команди оббивка-топ, оббивка дном, оббивка-наліво,
і оббивка правом.
>> Аллісон Бухгольц-AU: Так само, як можна було б очікувати коробці.
>> ТОМАС Реймерс: Так.
Ніщо не надто божевільний там.
Чи має це сенс?
Так що це оббивка.
Я збираюся встановити всі в Прокладки повернутися до 10.
А потім я збираюся перейти на кордоні.
>> Так що кордон є межа це дивно команда.
Вона займає те три речі відразу.
Так-перше, це, як великий Ви хочу, щоб це було як вимір.
Знову ж таки, я тільки за допомогою пікселів.
І останнє, що я Слід додати, вимірам
це одна річ, яка не потрібен блок 0.
Це насправді невірно щоб дати 0 блок,
тому 0 0 по дюймів, пікселі, сантиметри, що завгодно.
Це всього лише означає, 0, чи не так?
Отже, спочатку ви даєте йому вимір.
>> Тоді ви даєте йому стиль.
Так що я збираюся сказати, "твердий".
І ми будемо говорити про те, що це означає.
І тоді, нарешті, ви даєте йому колір.
Так що я збираюся сказати "чорні".
І всі ці речі, які ми коли- Зараз бачив, за стилем, окрім,
але ми поговоримо про це.
Таким чином, ви, хлопці, бачили вимірювань, і ви бачили квітів.
І те, що відбувається, ми отримаємо це приємно чорна рамка навколо нього, чи не так?
Ви, хлопці, подивимося, як ми зробили це?
>> АУДИТОРІЯ: Так.
>> ТОМАС Реймерс: Круто.
Так що ж це?
Отже, перш за все, це один піксель.
Це самоочевидне достатньо, чи не так?
Мовляв, його товщина в один піксель.
Чи це буде один піксель, але я збільшено, так що це трохи більше
ніж це.
>> Аллісон Бухгольц-AU: І у нас є це смішно дозволом телевізора.
>> ТОМАС Реймерс: Так.
Ви можете зробити це більше, менше, що завгодно.
Так ось два пікселя кордону.
Ви побачите, що це в два рази товще.
Наступна річ, яку ви повинні колір.
Це не цікаво.
Я не збираюся говорити про те, що, насправді.
>> Аллісон Бухгольц-AU: Але стиль може бути тільки трохи цікавіше.
>> ТОМАС Реймерс: Так.
Так стилі, є небагато що я бачу звичайно використовується.
Спочатку один Твердий, поруч своїх пунктирна, а останній в виправдалися.
І тут всіяна.
Ви побачите, що вони купа точок, чи не так?
Хороший спосіб роду отримати хороший кордон відбувається, тире також досить популярні.
>> Аллісон Бухгольц-AU: І тоді, звичайно, я
впевнений, що є багато інших стилі, які ви можете отримати.
І у нас є великий набір посилання в кінці для вас, хлопці
до виду переглянути та подивитися на більш прохолодною CSS.
>> ТОМАС Реймерс: А потім І останнє, що ми
будемо говорити про Моделі коробка дійсно швидко.
Ну, а далі кордону, так само, як доповнення,
у вас також є речі, як межа зліва, межі прав, межі-топ,
кордони знизу, які дозволяють щоб дістатися до певного кордону.
Так от просто межа лівої визначені.
Чи означає це, має сенс?
>> Аллісон Бухгольц-AU: Це здорово спосіб підкреслити те, чи додати
Лінії між різними елементами.
ТОМАС Реймерс: Абсолютно вірно.
Так от наш кордон.
І останнє в запас.
Як оббивка маржа в Крім це не within--
Аллісон Бухгольц-AU: Це не навколо елемента
але насправді по всій вікно, в якому ми були бачити.
>> ТОМАС Реймерс: Так.
Еллісон сказав, що це прекрасно.
Це не так, як, у Ваших Елемент, це навколо всієї коробки.
Це означає, що такі речі, як фон не застосовувати до нього.
І це в основному говорить, як я нічого не хочу
в цьому багато місця для мене.
Так як тут ми маємо маржа 10 пікселів.
Так що нічого протягом 10 пікселів повинні бути поруч зі мною.
Щось на зразок його простором, але вигляд не так.
Так от дуже Основи блокової моделі.
Чи має це сенс?
Круто, круто.
Аллісон Бухгольц-AU: Awesome.
Так що тепер я думаю, що ми просто наші класні ресурси
що ми будемо приймати вас, хлопці через дуже швидко.
І ми будемо actually-- добре, у нас є Інтернет ще?
>> ТОМАС Реймерс: Давайте побачити, якщо я можу відкрити up--
дозвольте мені побачити, якщо я може отримати доступ в Інтернет швидко
в той час як Еллісон говорить ні про що Еллісон хоче говорити про це.
Аллісон Бухгольц-AU: Так basically-- я не
знаю, що ще я можу сказати на даний момент.
Але ось деякі дійсно хороші ресурси.
Це ті, які Томас і я використав
і що ми насправді використовується в підготовчу для цього.
W3Schools це той, який вам Хлопці повинні були бачити раніше.
Ми рекомендуємо його для багато речей, за допомогою CSS.
Я знаю, я рекомендую його мій розділ весь час.
>> Один з найбільших речей в тому, що його дозволяє роду возитися з CSS
і побачити зміни миттєво в цьому,
як, Дивившися Двомісний вікна, що він має.
Таким чином, ви не повинні турбуватися про створення власного веб-сторінку,
або створення віртуальний хост у вашому локальному пристрої і локальний хост,
і отримувати все, що речі працювати.
Вони вбудовані прямо на сторінці.
>> І вона має таких мало уроки, які ви можете
пройти, щоб дізнатися Детальніше про селекторів,
або дізнатися про маніпулювання шрифту або фону, або зображення.
І у вас є ці миттєві результати, які ви
не потрібно робити нічого Інша підготовчу роботу для.
Так що я люблю W3Schools.
Це неймовірно.
Хіба це працює?
>> ТОМАС Реймерс: Так.
Ні, це не так.
Хочете, щоб я спробував і перезавантажити комп'ютер?
Чи ми хочемо to--
>> Аллісон Бухгольц-AU: Я маю на увазі, Ну, це також буде онлайн.
Всі слайди будуть он-лайн.
Так що я просто настійно рекомендую робити це.
>> Це здорово, як тільки як шпаргалку.
Це просто все основне команди, які у вас є.
Це здорово, коли ти перший починаючи свій веб-сайт.
Тому що, можливо, ви не хочу потрапити в усі
реальний вошивий піщаний Дизайн-важкий матеріал.
Вам просто потрібно відформатувати його таким чином, щось має сенс і волю
зробити для час.
І якщо ви дійсно хочете щоб потрапити в нього, я знаю,
Це, як, один з Улюблені посилання Tomas-х років.
Ми використовували його підготовчого, і це неймовірно.
Це розробника Mozilla.
>> ТОМАС Реймерс: Так Mozilla є люди, які роблять Firefox.
І це тільки їх власна розробник посилання, яка я думаю, це здорово.
І у цього є чудовий Список ресурсів.
Таким чином, ми have--
>> Аллісон Бухгольц-AU: А потім Останнє зауваження
коли ви намагаєтеся створити свій веб-сайт,
черпати натхнення з речей що ви думаєте, досить.
Перевірка елемента, перевірки вихідного коду
може бути супер корисно за те, щоб з'ясувати,
як стиль вашого власного сайту.
>> Часто я відчуваю себе краще До речі, крім експериментів,
просто дивитися на речі, які досить.
Я вважаю, що це дуже важко просто вид конструкції речі на свій розсуд,
особливо на початку.
Тому, будь ласка, подивіться на сайтах що вам сподобається дивитися.
З'ясуйте, що робить їх привабливими для вас.
І то не соромтеся спробувати повторити це.
>> ТОМАС Реймерс: Вірно.
Навіть як веб-сайтів як це, ви можете побачити
тобто виразно DIV на самому верху.
І тоді у вас є інший DIV всередині Тут, що УС Awesomeness.
І тоді у вас є купа посилань тут.
Якщо ви насправді просто перевірити елементи, ви можете сортувати
починають бачити те, що роблять сайти виглядати, і як я можу
відтворити, що якби захотів.
Чи має це сенс?
Так у нас є тільки три хвилини залишилося.
Так питання?
Будь-який з них?
Так.
>> АУДИТОРІЯ: Для кольору прямокутник, як би ви
have--, якщо ви не хочете його відбувається по всій сторінці, може
Ви зробили це йти через тільки половина сторінки або просто текст?
>> ТОМАС Реймерс: Так, абсолютно.
Отже, дозвольте мені побачити насправді.
У мене є дві ідеї.
Отже, перш за все, ви Також можна використовувати відсотків.
>> АУДИТОРІЯ: Справді?
>> Аллісон Бухгольц-AU: Так-то щоб подивитися це відносне позиціонування.
Це те, що ми не було часу, щоб потрапити,
але це щось я виразно Рекомендуємо ви, хлопці, перевірити.
>> ТОМАС Реймерс: Так відсотків.
І подивитися, як ми зробили це тільки 50% від ширини?
Аллісон Бухгольц-AU: Якщо ви насправді знаємо кількість пікселів,
Ви можете бути більш точними, що шлях.
Ви можете возитися з ним.
Але 50%.
Якби ми були змінити розмір браузер, було б зробити його менше.
>> ТОМАС Реймерс: Ну, це в основному 50% прямо зараз, я думаю.
Це 50%, а потім маржа був доданий до цього.
CSS має багато примх.
Так що зараз це 50% від ширини сторінки.
Але пам'ятайте, що у вас є 10 пікселів зняли з кожного боку.
Так що якщо ви, щоб перейти, що проти лівий край браузері
то це виглядатиме 50%.
Знову ж таки, як я вже сказав, CSS може буде багато ворожіння і-перевірки.
Як, ти думаєш, що щось буде вести себе в одну сторону,
але він веде себе зовсім по-іншому.
>> Аллісон Бухгольц-AU: І ви просто розумніші,
і ви просто отримаєте краще інтуїція його, як ви рухатися далі.
>> ТОМАС Реймерс: І це стає все гірше і гірше.
Так що це насправді просто гонки.
>> Аллісон Бухгольц-AU: Це супер обнадійливими.
Ми хочемо, щоб подобається CSS.
>> ТОМАС Реймерс: CSS є дивним.
Пам'ятайте про це.
Інші питання?
>> Аллісон Бухгольц-AU: одна справа.
Що-небудь ще?
Круто.
>> ТОМАС Реймерс: Awesome.
>> Аллісон Бухгольц-AU: Ну, якщо ви хлопці, є які-небудь питання пізніше,
ми завжди доступні як звичайно.
Ви, ймовірно, побачите деякі З нас, для остаточних проектів
і, безумовно, на Hackathon.
>> ТОМАС Реймерс: Абсолютно вірно.
І на ярмарку.
>> Аллісон Бухгольц-AU: І на ярмарку.
Ох.
>> ТОМАС Реймерс: Подивіться вперед до переглянути весь awesome--
>> Аллісон Бухгольц-AU: Ми побачимо, всі ваші дивовижні веб-сайтів
що буде красиво.
ТОМАС Реймерс: Ви можете завжди см, як, сайти
хто мав, начебто, добре CSS, а потім як ті, хто не пробував робити CSS.
Аллісон Бухгольц-AU: Крім того, інша річ, ще одна річ, щоб подивитися в
стартує с.
Так Bootstrap це здорово.
>> ТОМАС Реймерс: Google, що якщо you--
>> Аллісон Бухгольц-AU: Google це.
Це неймовірно.
Ви будете любити його.
І тепер, коли у вас є Базове розуміння CSS,
це зробить набагато більше сенсу.
Високий.
Спасибі, хлопці.
>> ТОМАС Реймерс: Спасибо так багато.