[Powered by Google Translate] [CSS] [Джозеф Ong - Гарвардский университет] [Это CS50. - CS50.TV] 

Сегодня мы будем говорить о CSS или каскадные таблицы стилей. 

Так что же такое CSS? Ну, давайте разберем термин CSS вниз на 2 части: Каскадная и стилей. Каскадные немного более сложным, и это то, что мы расскажем в другом видео. Но для начала, стилей очень много намеков на то, что CSS делает. Он добавляет стили в HTML веб-страницы, изменить то, как веб-страницы эстетически выглядит. Это означает, что все, начиная от шрифта текста для позиционирования контента на странице другие интересные вещи, как сделать углах коробки округлой или добавления теней к тексту. Вы даже можете делать сумасшедшие вещи, как сделать вещи оживить на экране. 

Так как мы используем CSS с HTML? Возьмите это плохой вид сайта я только что написал. Если Роб были смотреть на этот сайт прямо сейчас, он бы, вероятно, сказать что-то вроде: "Wow! Мое ​​знакомство выглядит ужасно. Иосиф, ты ужасно дизайнер". "Использование шрифтов по умолчанию Times? Helvetica гораздо лучше". 

Так что может быть самый простой способ, чтобы применить стиль Роб хочет? Наиболее очевидный способ многих людей изначально писал CSS было поставить то, что мы называем стилем декларации прав в самом элементе использованием HTML атрибут стиля. Объявление стиля, просто состоит из CSS свойства элемента HTML, мы хотим изменить двоеточие и новый стоимости имущества и точка с запятой в конце. Например, предположим, что Роб хочет черной рамкой вокруг его введения. Мы сначала поставить атрибут стиля дел на Роба здесь Затем в двойные кавычки ставить декларации CSS: "Границы: 1px твердых черных"; 1 пиксель относится к ширине границы, твердый относится к стилю границу, и цвет в конце определяет, какой цвет границы является. 

Если мы хотим несколько стилей на элемент, писать эти заявления в определенной последовательности. Например, если Роб хочет, чтобы его текст заголовка в Helvetica с синим фоном и больше пространства вокруг текста, мы можем сделать это: стиль = "семейство шрифтов: Helvetica; фонового цвета: синий; обивка: 5px;" Последняя точка с запятой является фактически обязательным, но люди обычно храните его в ради согласованности в. 

Мы спасем объяснить некоторые из кулера и более сложных свойств CSS для другого видео. Если у вас есть что-то в уме, просто погуглить эффекта вы хотите следует CSS вероятно, даст вам очень хорошие результаты. Самое замечательное в том, что CSS является довольно широким, так что шансы, если есть все, что вы хотите сделать - в разумных пределах - CSS, вероятно, может сделать это. Мы называем такой стиль встроенного стиля. Элемент стиля, а, в соответствии с начала тега. 

Для людей, которые действительно хотели бы быть организованы, Вы можете начать получать немного раздраженный тем, как грязно все это выглядит. Представьте себе, что вы должны были сделать это для каждого элемента на странице, плюс теперь ваш HTML и CSS все перемешаны и суматоху. Валовая, верно? Чтобы исправить это, люди постепенно начали ловить на их разделение HTML разметку от их стиля CSS, используя то, что называется CSS селекторы. CSS селекторы используются для выбора элементов, к которым применяются деклараций. Селектор в сочетании с перечнем деклараций CSS часто называют, как правило CSS. Эти правила будут введены между открытием и закрытием HTML теги стиля, Часто в голове документа. 

Это гораздо легче видеть на примере, так что давайте начнем с создания простого правила CSS. Во-первых, давайте стиле теги в голову разделе нашего HTML. Далее, селекторе. Начнем с помощью одной из самых простых селекторов, хэш-символа, который выбирает HTML элемент по его ID атрибута. В этом случае мы выберем дел, которое представляет введение Роба , введя хэш-символа следуют ID дел, Роб. Теперь деклараций. Добавим, открывать и закрывать скобки и изменить наши ранее встроенные деклараций о DIV Роба Внутри этих скобок, обновления, и, прохладном, введение Роб все еще есть черная рамка вокруг него минус грязный уродство линию. 

Теперь, что если бы мы хотели, чтобы выбрать h1 внутри интро Роба? Вы можете подумать: "Давайте поставим ID на нем, а затем переместить наши предыдущие стили". Это работает, но CSS есть и другие способы позволяя вам выбирать элементы с помощью того, что мы называем комбинаторы смешивать простых селекторов. Например, символ пробела может быть использован в качестве комбинатора указать все случаи из 1 селектора, которые живут внутри другого выбора. Это звучит намного сложнее, чем есть на самом деле. Вот пример. Мы будем вводить # грабить, добавить пространства, и следовать ему с h1, еще один простой селектор называется тегом селектор, который выбирает типы элементов как дивы или пунктах. Пространство объединяет наши 2 простых селекторов, применяя все CSS деклараций и фигурные скобки тегов h1, которые живут внутри элемента с ID = "грабить". Просто, чтобы убедить вас, что это работает, я изменить цвет шрифта на белый, обновления, и, смотрите, заголовок Роба теперь белый. 

Вся эта работа идет, чтобы показать, что с помощью правил, а не встроенных стилей мы можем получить гораздо чище код. В самом деле, если этот стиль блока начинает получать немного большую, Я даже могу вытащить из этих стилей в другой файл вообще. 

Чтобы включить этот новый файл CSS в этом документе я буду использовать ссылку тегов HTML. Вот я говорю, что я связей во внешней таблице стилей, отн атрибута, и указать путь к файлу с моей HREF атрибута. Теперь мой HTML разметка и CSS организованы хорошо в совершенно отдельных файлов, которая почти всегда способ дизайнеры предпочитают работать с HTML и CSS. 

В случае, если вам интересно, простых селекторов включают ID селекторы и селекторы тегов, как те, которые мы только что видели а также класс селекторов для выбора элементов с определенным классом, селекторы атрибутов для выбора элементов по другим признакам, как тип = "радио" для радио-кнопки входа, и pseudoselectors как парить и сосредоточить для определения стиля, когда взаимодействие люблю мышью на элементе происходит. 

Общие комбинаторы включать пробелы для всех детей и запятые отличить селекторы. Другие вы можете столкнуться включают стрелки для прямого детей только, тильды для всех братьев и сестер, которые происходят после элементов, и плюс за 1 брат, который приходит сразу после элемента. 

Благодаря сочетанию этих селекторов и комбинаторов, Вы можете расширить диапазон стилей можно достичь на данном веб-страницы и писать CSS более эффективно. С помощью всего лишь нескольких строк CSS вы видите меня печатать здесь, Я могу быстро сделать что-то вроде этого похоже что-то вроде этого. 

Я Иосиф, и это CS50. 

[CS50.TV] 

Ну, с чего же начать? Позвольте мне сделать это без - [смеется] Хорошо. Добавить - Позвольте мне изменить эту формулировку. Ох. Извините.