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

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

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

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

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

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

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

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

Это гораздо легче увидеть, например, так что давайте начнем с создания простого правила CSS. Во-первых, давайте теги стиля в голове разделе нашего HTML. Затем селектора. Мы начнем с помощью одной из самых простых селекторов, символ решетка, который выбирает HTML элемента по его ID атрибута. В этом случае мы выберем DIV, который представляет введение Роба , введя символ решетка последующим ID DIV автора, Роб. Теперь деклараций. Добавим, открывать и закрывать скобки и изменить наши ранее встроенных деклараций о 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] 

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