[Играет музыка] АЛЛИСОН Бухгольц-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, это сделает намного больше смысла. Высокий. Спасибо, ребята. 

ТОМАС Реймерс: Спасибо так много.