Привет. Добро пожаловать на нашу первую по-настоящему техническую лекцию в нашем курсе CSS. Речь идет о добавлении стиля на ваши страницы. Если вы пришли на этот курс со мной из нашего курса HTML, вы знаете, что я знаю, что вы можете сделать общие HTML-файлы. Но до сих пор вы, возможно, совсем не стилизовали их. Я хочу, чтобы вы знали, прежде чем мы начнем стиль, и вы начнете размещать свои собственные маленькие повороты на страницах, это то, что один и тот же HTML-файл может выглядеть по-разному при просмотре в разных браузерах, и для этого есть несколько причин. Во-первых, некоторые теги не поддерживаются в некоторых браузерах, в то время как они находятся в других. Поэтому, если вы когда-либо использовали тег details, вы можете видеть, что иногда ваша страница будет иметь маленькие стрелки или разные маленькие маркировки на них, а в других случаях это не будет. Таким образом, это сводится к тэгам, которые поддерживаются. Но также, каждый браузер имеет свой собственный стиль по умолчанию. И что говорит этот стиль по умолчанию, так это то, как я хочу, чтобы мои заголовки H1 выглядели, или это то, сколько заполнений я хочу вокруг моих абзацев. Поэтому, если вы перейдете на одну и ту же страницу в разных браузерах, это может быть трудно сказать, но вы увидите крошечные небольшие различия в том, как вещи сделаны. Но в общем, этот вид по умолчанию действительно простой. И большинство людей, которых я знаю, они не хотят, чтобы их страницы выглядели простыми. Они хотят поставить в какой-то стиль. Итак, давайте начнем смотреть на то, как вы можете это сделать. Один из способов добавить стиль - подумать о добавлении его непосредственно в текст. Теперь, когда HTML развивался, мы пошли от тегов, которые были отчетливо о цвете, и о разных центрировании, и тому подобное. Чтобы сказать «нет», «нет», мы не хотим, чтобы теги, связанные со стилем. Нам нужны только теги, которые имеют отношение к контенту. Люди сказали, что мы можем это сделать, но я хочу сделать это красивой. Итак, как они это сделали, они добавили атрибуты стиля. Поэтому в этом случае я взял тег h1 и добавил атрибут стиля и просто сказал «цвет: синий». И что это будет делать, это сделает этот конкретный заголовок h1 иметь синий шрифт для него. Так что это очень просто. Это хороший способ просто войти и добавить простой стиль на вашу страницу. Тем не менее, это все еще нарушает наше правило о желании отделять контент от стиля. Потому что если вы хотите изменить его на, скажем, красный или зеленый или что-то в этом роде позже, вам придется войти и изменить тег, потому что вам придется изменить атрибут. Поэтому я действительно пытался уйти с моего пути, чтобы не использовать это вообще, и вместо этого, получить привычку делать все правильно. И правильный способ стилировать ваши страницы - использовать CSS. Каскадные таблицы стилей - это в основном способ для вас написать правила, которые говорят, как вы хотите стиль всех абзацев, или как вы хотите стиль всех ваших заголовков, или как вы хотите стилизовать некоторые из ваших изображений. Это действительно хороший, конкретный способ, которым каждый может следовать, чтобы сделать эти варианты стиля. И правила настроены вот так. Сначала вы должны поставить свой селектор, а селектор - это просто причудливый способ сказать, что вы хотите стиль. В нашем случае, мы начнем с того, чтобы просто дать селектору различные имена тегов, такие как h1 или абзац. Как только вы найдете, какой тег вы хотите стиль, вы говорите, какое свойство вы хотите изменить. Так что мы можем посмотреть на такие вещи, как цвет, цвет фона, сколько места мы поместим вокруг него, мы собираемся покрыть все это. Но сейчас мы начнем очень просто и разберемся с цветами. Затем вы должны дать каждому свойству значение, сказав, какой цвет вы хотите, чтобы это было. Итак, с одной стороны, у нас есть очень общий, как мы пишем правило. И с другой стороны, я написал очень конкретное правило, которое гласит: эй, всякий раз, когда вы видите заголовок h1, я хочу, чтобы вы сделали шрифт синим цветом. Таким образом, мы сделали именно то, что мы сделали, когда мы внедрили тег стиля, но теперь он очень общий, и мы не говорим о конкретном заголовке. Мы говорим не о конкретном метке. Поэтому, когда вы пишете эти правила, синтаксис очень важен. Много раз, когда вы пишете HTML, браузер действительно хорош для вас, и если вы забудете закрыть тег, он говорит, это нормально, я знаю, что она хочет, чтобы я сделал, и это будет идти вперед и положить страницу вверх в любом случае. Когда вы делаете CSS, если вы небрежны с тем, что мы называем вашим синтаксисом, вы получите неприятности. Таким образом, скобки и точки с запятой очень важны. Итак, позвольте мне показать вам еще раз, когда мы вернемся сюда, вы увидите, что у меня есть начальная скобка и закрывающая скобка, и у меня есть точка с запятой прямо в конце. Вы должны помнить, чтобы включить их. И одна из причин, по которой я говорю об этом, заключается в том, что когда вы начинаете писать свой код, когда вы выбираете хороший редактор, и большинство редакторов довольно хороши, такие как Sublime или TextWrangler, TextEdit, Notepad ++, они будут ставить цвета для вас. Так что вдруг, если вы смотрите на свои правила CSS, и вы такие: woah, я вроде как ожидал, что вещи будут разными цветами, но вместо этого все белое или все красное. Это дает вам такой намек, что вы испортили свой синтаксис правил. В той же строке, я просто хочу бросить сюда, что когда вы пишете свое правило, вы можете поместить комментарии, чтобы помочь вам отлаживать и помочь вам объяснить себе, что вы собираетесь. И вот как комментарии делаются в CSS. Вы просто сделаете /*, */ снова. Итак, что произойдет, если вы хотите сделать больше, чем только одно свойство? Что делать, если вместо того, чтобы говорить только, что вы хотите, чтобы цвет фона был синим, вы также хотите, чтобы цвет фона был желтым? Ну, без проблем. Вы можете иметь столько комбинаций значений свойств, сколько хотите. Вам просто нужно помнить, чтобы отделить их точкой с запятой. Так что в этом случае, опять же, я установил цвет синего, а цвет фона - желтый. Итак , теперь, когда ты знаешь, как написать правило, как мы можем заставить их работать? Ну, есть два способа , и первый способ, о котором я расскажу, называется использование внутренней таблицы стилей. Так что, как вы можете видеть здесь, в моем коде, у меня есть базовый шаблон нашего файла. И внутри тегов головы, я положил этот тег стиля, вот где вы собираетесь поместить свои правила, они определены прямо в этом стиле. Итак, теперь, внутри тега стиля, я добавил h1, синий цвет, и я закончил свой тег стиля. Теперь происходит то, что когда браузер открывает вашу страницу, он попадает в главный раздел, где написано: «О, здорово, она написала несколько правил, давайте посмотрим, что она хочет, чтобы я сделал. И он будет знать, что нужно пройти через вашу страницу и применить это правило ко всем тегам H1. И если у вас есть несколько правил, включая абзацы, изображения, такие вещи, я буду знать, я хочу применить это ко всем экземплярам во всем файле. Хорошо. Теперь есть очень хороший шанс, что вы испортите, потому что я делаю это 80% времени, когда я развиваюсь в классе, и что я делаю, это я забыл закрыть этот тег стиля. И если вы забудете закрыть этот тег стиля внизу, ну на самом деле ваша страница может оказаться пустой. Поэтому не пугайтесь, когда вы впервые начинаете делать это, если ваша страница пуста, это, вероятно, означает, что вы забыли закрыть тег стиля. Ладно. Итак, внутренние таблицы стилей действительно хороши, когда вы просто пытаетесь стилизовать одну страницу. Ладно? И я часто делаю это, чтобы я мог хранить весь свой код в одном файле вместо того, чтобы идти назад и вперед и назад и вперед. Но представьте, что у вас есть сайт, где вы будете иметь 10,20, 1000 различных страниц, и вы хотите, чтобы они все имели очень последовательный взгляд на них. Вы не хотите заходить и говорить, что если вы хотите изменить цвет, вам не нужно заходить и открывать каждый из этих файлов, чтобы вы могли изменить цвет на красный или зеленый. Вместо этого вы хотите использовать что-то, называемое внешними таблицами стилей. То, как он работает с внешней таблицей стилей, заключается в том, что вы помещаете свои правила в другой файл. Таким образом, вы открываете файл, вы собираетесь сохранить его что-то вроде mystyle с расширением.css. Так что теперь браузер знает, о, все в HTML, это содержание. Все в .css, это макет. Теперь, когда вы делаете свою внешнюю таблицу стилей, это выглядит так же, как мы только что сделали во внутреннем, за исключением того, что вы не используете тег стиля. Затем, как только вы поместили свои правила в отдельный файл, все, что вам нужно сделать, это добавить ссылку в раздел head. Так что в этом случае, я вошел, я поставил свою ссылку, мне нужно сообщить ему о связи, потому что таблица стилей. И вы должны помнить, чтобы указать имя файла. так что снова это то, где будет очень важно, чтобы вы называли вещи таким образом, что они делают с тех пор для вас. Вы можете ссылаться на столько различных таблиц стилей, сколько хотите, большую часть времени мы начинаем с одного. Итак, теперь, когда у нас была эта таблица стилей, каждый отдельный файл, который ссылается на него, будет делиться этой таблицей стилей. Помните, когда я упомянул, что у вас может быть сайт с 10, 20, 1000 страниц, и вы решили изменить этот цвет с синего на красный или зеленый или что-то в этом роде? Это здорово. Все, что вам нужно сделать, это открыть style.css, изменить одну строку кода, и теперь вы только что изменили потенциально тысячи страниц Хорошо, так что давайте поговорим минутку об этой идее каскадных таблиц стилей. Что это значит, что мы каскадируемся? Ну, когда браузер собирается сделать вашу страницу, первое, что он будет смотреть, это идти, хорошо, может, они мне ничего не говорят. Как я обычно делаю заголовки h1? Насколько большой я могу сделать этот шрифт? Имеют свои собственные значения по умолчанию. Но затем он идет, и он выглядит, и он говорит: «О, есть ли какие-либо внешние таблицы стилей. Потому что если это так, я собираюсь перезаписать настройки браузера по умолчанию и поместить правила, которые находятся в этой внешней таблице стилей вместо этого. Далее он собирается проверить внутренний стиль. Этот стиль, который у вас есть в головном разделе. Потому что в общем, браузер думает, хм, может быть, есть что-то действительно особенное в этой конкретной странице, и здесь она хочет, чтобы я сделал эти правила вместо этого. Наконец, любой из этих встроенных стилей, где вы используете тег атрибута, они будут иметь самый высокий приоритет из всех. Так что это может быть действительно запутанным, потому что вы можете начать писать разные правила, и вы не можете понять, почему некоторые работают, а некоторые нет. Здесь снова появляется каскадная часть. Сначала он смотрит на значения по умолчанию, затем внешние, затем внутренние, а затем встроенные. Вот почему на самом деле вы хотите избежать использования любого встроенного стиля, потому что он в значительной степени сводит на нет все ваши правила стиля. Хорошо, мы знаем, как идут эти четыре, но что, если у вас есть селектор и вы связались с двумя или тремя разными таблицами стилей, и тот же H1 был определен как синий, зеленый и желтый, но в разных файлах. Как браузер знает, что делать? Ну, как это работает, так это то, что правила из последнего файла имеют приоритет. И то, что я имею в виду под последним файлом, это означает, что он идет в головной раздел, и он идет один, два, три, и он выглядит как порядок, который вы перечислили, и последний из них, который будет иметь приоритет. Хорошо? Ну, что, если у вас есть селектор в одном и том же файле, и вы написали H1 несколько раз. На самом деле это может произойти совсем немного. Особенно, если вы решите уйти и стать частью большой компании по разработке, вы пишете код, а потом кто-то другой пишет код, или, как я говорю моим младшим, может быть, вы вышли и хорошо провели время однажды ночью, и вы пришли домой и решили, что я буду писать код! И вы забываете, что вы уже написали некоторые правила. Ну, если это так, еще раз, браузер будет смотреть на тот, который он видел последним. Итак, в этом случае у меня есть два правила для h1. Один пишет на цвет синий. И я сказал: «Эй, я хочу, чтобы ты использовал эту семейство воздушных шрифтов. А потом, здесь может быть целая куча вещей, может быть ничего, и я говорю «привет», я хочу, чтобы ты использовал семейство шрифтов «Таймс». Как браузер будет смотреть на это, он будет идти вниз, doo-doo-doo-doo-doo и сказать, что я сделаю весь шрифт синим, и я собираюсь пойти вперед и сделать шрифт семейства Times. Просто всегда будет использовать последний, который он видел. Таким образом, последнее правило имеет приоритет, независимо от того, было ли оно внутри вашего кода или оно пришло из разных файлов. Однако есть один способ перезаписать это. Предположим, вы что-то пишете и знаете, что хотите, чтобы что-то было таким. Тебе плевать, если кто-то еще перезаписывает его. Вы действительно хотите убедиться, что люди не используют встроенный стиль, разные вещи вроде этого. То, что вы можете использовать, это вы можете использовать! Важный атрибут прямо здесь. Так что прямо здесь у меня есть семья шрифтов, Арайл, и у меня есть важная вещь прямо здесь. Поэтому, несмотря на то, что позже я решаю перезаписать его со временем, браузер скажет « нет», я знаю, что она действительно хотела, чтобы я использовал Arial, и это работает. Итак, давайте посмотрим на пример того, что я имею в виду под всеми этими прецедентами. Я знаю, что просто слушать меня может стать немного подавляющим, так что у меня есть быстрый пример, показывающий вам разные способы, а потом я заверну эту лекцию. Итак, давайте начнем использовать атрибут style. Как вы можете видеть здесь, я написал код, и я использовал атрибут style для этого заголовка h1 и этого одного абзаца. Поэтому в этом случае я хочу, чтобы мой заголовок h1 был синим, а мой абзац был красным. И я действительно хочу показать вам, что единственный абзац, который был изменен на красный текст или красный шрифт, был первым. Другая еще черная. Таким образом, единственный способ стиль - это если вы идете, и вы меняете каждый тег, чтобы он выглядел так, как вы этого хотите. Если бы я хотел, чтобы все абзацы были красными, мне пришлось бы пойти туда и поставить стиль равно, стиль равно. В этом примере есть только два, но вы можете представить, как это будет действительно раздражать, если у вас будет много, хорошо. В следующем примере у нас есть внутренний стиль. В этом случае я поместил свой тег стиля вверху, и я добавил правила для абзацев и заголовков H1, и он должен обрабатывать оба. Так что теперь здесь больше ничего нет, мой тег сам по себе. И если вы посмотрите на результат, пойдем сюда. Вы можете видеть, что теперь, несмотря на то, что мой HTML вообще не имеет никакого стиля, оба абзаца красны здесь, и так же заголовок. Ладно? Последний пример, который у меня был для вас, это то, что я взял те же правила, и я отложил их во внешнюю таблицу стилей. Опять же, здесь нет тега стиля. Это только сами правила. И тогда мне пришлось вернуться к HTML-файлу, и вы можете видеть прямо здесь, рядом с вершиной, у меня есть эй, давайте свяжемся с таблицей стилей, которую я хочу. А теперь, я хочу обратить внимание на это очень внимательно. Если вы заметили, у меня есть лист CSS/ExternalStyle. Это означает, что моя таблица стилей находится в специальной папке под названием css. Разработчики действительно подчеркивают, что вы делаете это, потому что вы хотите, чтобы ваш код был организован в разные части. Так что опять же, таким же образом, у меня теперь есть страница, которая использует внешние таблицы стилей и выглядит очень хорошо. Так что весь этот код будет доступен для вас, чтобы посмотреть на него, но я хочу, чтобы вы играли с ним как можно больше. Но я хочу использовать этот последний пример, чтобы помочь вам понять, как работает каскад. Так что прямо здесь, у меня есть моя внешняя таблица стилей. Я подойду сюда на секунду. Иди к моему, и я добавлю, последнее. Извини, это будет неловко. И я скажу, что знаешь что? Вместо этого, я хочу, чтобы этот шрифт снова был черным, и я заканчиваю его. Я покажу тебе, что происходит, когда ты очень быстро облажаешься. Я сохраню его, я перезагружу свою страницу и все исчезло. Это то, о чем я говорил. Ты действительно хочешь убедиться, что включил этот тег стиля. Сделай это. Убедитесь, что вы закрыли его. Ладно. Итак, теперь то, что я здесь делаю, это мой браузер имеет свой браузер по умолчанию. Он имеет внешнюю таблицу стилей, и теперь он также имеет внутренний. Итак, давайте посмотрим, какой цвет он будет, будет ли он синим или будет черным. И как видите, она черная. Таким образом, когда вы начинаете стиль, это будет очень важно, чтобы вы рассмотрели различные способы разделения вашего контента от вашего форматирования. А также смотреть на различные способы, которые вы можете сделать это форматирование. Итак, одна из первых вещей, о которых я хочу, чтобы вы подумали, это то, как эта идея внешних и внутренних таблиц стилей действительно играет в отделении контента от форматирования. И в то же время я хочу, чтобы вы поняли, что мы не всегда следуем каждому правилу. В начале мы всегда должны начать с действительно, очень простых примеров, чтобы помочь вам, ребята, закрепить то, что происходит с CSS. Поэтому я просто собираюсь закончить это сейчас с краткой, краткой демонстрацией из примера, который они имеют на csszengarden.com, потому что я думаю, что это действительно приносит домой идею, что CSS может быть очень мощным. Так что давайте посмотрим. Так что на этом сайте, CSS Zen Garden, Они на самом деле сделали действительно большую работу, показывая все различные способы, которые вы можете форматировать точно тот же файл, но по-разному. Итак, здесь, если вы посмотрите, вы можете увидеть, что это таблица стилей одного человека для украшения или стилизации этого документа. Теперь, не изменяя любой HTML вообще, кто-то другой пришел и сказал: эй, знаете что, это хорошо, но я собираюсь стиль его таким образом. Выглядит совершенно по-другому. Это тот же самый точный HTML, но он выглядит совершенно по-другому. Точно так же, у нас есть этот прямо здесь, тот же точный HTML. Но вы не могли выглядеть иначе, потому что они добавили некоторые CSS и JavaScript к нему, что отличается. Так что пойдем со мной. Мы будем много кодировать в этом курсе. Мы будем много играть с этим курсом. Ты будешь много испортить в этом курсе. Но я не могу дождаться, когда вы разработаете что-то, что действительно отражает, как вы хотите, чтобы ваша страница выглядела. Спасибо.