[Играет музыка] 

ДАГ Lloyd: Так что давайте еще один видео, чтобы говорить о более одного языка. На этот раз мы поговорим о CSS. Так CSS, что является аббревиатурой Каскадные таблицы стилей, еще один язык мы используем при построении веб-сайтов. Подумайте об этом, как это. Если HTML-это то, что мы используем, чтобы организовать Содержание мы хотим поставить на нашей странице, CSS является инструментом, который мы обычно используем настроить, как наши сайты выглядят, и как пользовательский опыт на самом деле это, взаимодействуя с нашим сайтом. 

Подобно HTML, CSS является не является языком программирования. Он не имеет логику. Он не имеет переменные. Он не имеет каких-либо, что течь, связанные вещи, которые делает C. Это язык стиль. И его синтаксис довольно просто, и просто описаны как элементы нашего страница есть определенные HTML Элементы должны быть изменены. Для этого, если у вас есть не пока смотрел наше видео на HTML, или не знакомы с HTML, как правило, вам можете взглянуть на что первых, потому что это обсуждение CSS будет зависеть от некоторые знания HTML. 

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

Так как мы строим стилей? Ну во-первых, мы должны определить селектор. В последнем примере, что селектор был тела. Тогда у нас есть открытый фигурная скобка, и мы собирается начать, определяющая стилей для этого селектора. Между фигурными скобками, мы просто есть список пар ключ-значение. Предыдущий пара значение было Цвет фона синий запятой, но мы могли бы сделать больше и больше из них. Вы можете иметь несколько вещей, применяя в этом теге, то тело селектора. Каждый из них будут разделены точка с запятой, и мы называем каждый из них декларация, декларация CSS. Когда мы закончим со всем укладки мы Чтобы применить к этой конкретной тега, мы просто должны закрывающей фигурной готовиться, чтобы закончить стилей, и мы сделали определении стилей для этого конкретного выбора. 

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

Затем вы можете использовать ключевое слово, так CSS имеет определенные цвета которые встроены в него, синий, зеленый, черный, очень простые цвета, которые мы знаем. Но вы также можете указать любой шестигранный цвет, который вы хотели бы. Напомним, что цвета могут быть определены набором шестигранных чисел трех от 0 до 255, RG и В, красный, зеленый и синий компонент. И так мы можем указать любой цвет мы хотим от, вместо синего, зеленого или черного цвета, используя фунт, а затем шесть цифр шестнадцатеричном, и что даст нам шесть цифра цвет. Так вот цвет фона. 

У нас также есть передний план Цвет, который, как правило, будет текст на странице. А вы могли бы так же сделать с ключевым словом и цифрами или шесть шестнадцатеричной. Таким образом, вы можете указать любой цвет вы хочу для текста вашей страницы в отношении конкретного цвет фона, наверху. Вы также можете изменить и дело шрифтом, и пути текст оказывается на странице. 

Таким образом, вы можете изменить размер шрифта. Вы можете использовать ключевые слова, такие как дополнительный, Очень мелкий, или хх мало, или средний, большой, и так далее. Вы можете использовать фиксированные точки, 10 Точка, точка 12, и так далее. Вы можете использовать проценты, 80%, 20%, где 100% является шрифт по умолчанию размер, который обычно собирается что-то вроде 11 или 12 очков. Или вы можете даже основывают его самой последней размера шрифта. Если вы только что написали что-то, и вы знаете то, что вы хотите, чтобы он был меньше, но вы не знаете точно, какой размер вам хочу, чтобы, ну, вы можете просто сказать, Размер шрифта меньше. И это будет основывать прочь, только наверху, это размер шрифта. И вы можете получить больше или меньше. Таким образом, есть много разных способы указать размер шрифта. 

Вы также можете указать, что семейство шрифтов вы хотите. Если у вас есть конкретный имя, есть ли способ в CSS-- мы не собираемся говорить об этом here-- определить очень конкретный шрифт и вставлять его в вашей странице. Вы также можете использовать родовые имена. Там много веб-безопасных шрифтов которые предварительно определены в CSS. И если вы являетесь пользователем Microsoft Офис в последние 20 лет, Вы, наверное, знакомы с многие из этих веб-безопасных шрифтов уже Times New Roman, Arial, Courier New, Грузию, Tahoma, Verdana, и так далее. Те, все они считаются безопасными веб-шрифты. А на самом деле, часть из Причина они пришли, чтобы быть был использоваться, чтобы сделать каждую страницу web-- что доступ к этой умолчанию набор шрифтов с различными засечек, и все это шрифта вещи, которые мы не попасть, но они, как правило доступны в вашем CSS, даже если вы не в противном случае определить шрифты. Наконец, вы можете выровнять текст, вместо этого бытия, по умолчанию, выровнены влево, вы могли бы выровнять его вправо, или вы могли бы выровнять его по центру, или оправдано, так что он ударил обоих полей. Так что те все варианты, которые можно использовать чтобы изменить то, что ваш текст выглядит, и как она отображается на вашей странице. 

Ваши селекторы не должны быть только метки. Мы ранее видели тело тега Селектор, и селектор тегов выглядит так же, как, что. Вы называете тег, а затем вам определить стилей для этого тега. Но вы также можете сделать что-то называется селектор ID. Идентификатор селектора выглядит довольно похожи. Но отмечают, что в настоящее время я не использую HTML-теги, я использую, в этом случае, #unique или хеширования. Если вы помните из нашего видео на HTML, мы говорили о том, как метки могут иметь атрибуты. 

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

Вы также можете сделать что-то называется селектором класса. Таким образом, в дополнение к наличию ID атрибуты, вы также можете добавить атрибут класса, чтобы HTML-теги. И когда вы используете атрибут класса, она может быть применена к нескольким тегам. Так что, если у вас есть несколько вещей, которые аналогичны, может быть, вы хотите сказать открытый тег бла, бла, бла, бла, класс равен студентов. И тогда этот конкретный стилей будет применяться к каждому тегу, чей класс студентов. В этом случае, мы установите Цвет фона на желтый, и мы устанавливаем непрозрачность, которая это тег, который нам не о чем поговорить, но только имеет дело с прозрачной, как что-то, до 70%, в этом случае. 

Там же два варианта Написание стилей. Вы можете написать их непосредственно в HTML путем размещения стилей в между тегами стиле. И эти метки в стиле пойти внутри головные теги веб-страницы. , Возможно, более предпочтительный способ сделать это написать отдельный файл .css, а затем связать его в свой документ, используя ссылку меток. Теги Link, опять же, являются отличается от гиперссылок, если вы помните из нашего видео в HTML. И ссылка теги, как мы тянуть в отдельных файлах. Это вроде как эквивалент помощью #include для веб-программирования. 

Итак, давайте взглянем на table.HTML. Если вы помните из нашего HTML-видео, я показал пример очень простое умножение таблица, выглядел довольно некрасиво, и, возможно, есть способ сделать это лучше с CSS, чтобы сделать это на самом деле выглядят больше как умножение стол, или что-то Это не просто склеены с не фактическое разделение между рядами и колоннами. Итак, давайте над головой CS50 IDE, и взглянуть на то, как CSS может, вроде, настройки то, что мы начали с раньше, и сделать что-то намного лучше. 

Таким образом, мы находимся в CS50 IDE Теперь, если не знакомы, мы подтянуть в этом таблица, HTML-страницы. Table.HTML основном просто определяет содержимое в А multiple-- он должен был быть четыре на четыре таблица умножения. Это довольно просто. И мы будем думать, что это было бы выглядят довольно хорошо организованы. Но на самом деле, когда мы просматривать эту страницу, мы видим, что это своего рода уродливый, правда? Очевидно, мы имеем строк и столбцов здесь. Там какая-то разделения. Но это не имеет смысла разделение. Мы на самом деле не получить слишком много информации здесь. И нет никакого разделения между строк и столбцов в выражении из горизонтальных или вертикальных правил. Мы могли бы сделать это искать немного лучше. Так давайте попробуем. Так что я собираюсь закрыть эту вкладку здесь. И я собираюсь закрыть мой table.HTML, и у меня есть еще один вариант здесь называется table2.HTML. Мы откроем, что до. Тело странице почти то же, но я изменился немного сверху. И я буду прокручивать здесь. Обратите внимание, что на этот раз, я с помощью встроенных тегов в стиле. Я открыл тег стиль, и теперь я определения CSS стилей только внутри от него. У меня есть таблицы стилей, что говорит, таблицу. Это мой селектор тегов. Я не использую точку или хэш, которые я буду делать, если я был с помощью ID или селектор класса. У меня есть селектор тегов here-- таблицу. Этот стиль будет применяются к каждому таблицу тегов. Видимо, я хочу, чтобы положить один пиксел, сплошной синий границы, в моей таблице. Это звучит, как он, вероятно, помочь ситуации, верно? Мы собираемся, чтобы иметь вещи выглядят намного лучше. Так что это нормально. Стилистически, я только что встроенные мой стилей здесь. Это, конечно, приемлемый способ сделать это. Давайте посмотрим, как это выглядит. Так что я вернусь сюда, и Я будет предварительный просмотр table2.HTML. Ну, это не совсем то, что я хотел, но это именно то, что мы просили. Мы сказали, что этот стиль собирается обратиться к нашему столу. Наш стол теперь имеет один пиксель Широкий, твердый синий граница вокруг него. Мы на самом деле не получить в ячейках таблицы. Мы просто получать к столу. Так CSS работал. Он прикладывается стилей к нашему столу. Но не совсем делать что мы хотели это делать. Как мы можем получить, чтобы сделать то, что мы хотим это делать? 

Ну, давайте взглянем на еще одного версия этого в table3.HTML. Так что я просто закрою эти вкладки. Я собираюсь вернуться сюда, чтобы мой дерево файл, и открыть table3.HTML. Опять же, это будет выглядеть довольно похоже здесь в начале. Но заметьте, на этот раз, вместо использования таблица стилей встроен прямо там, Я собираюсь связать в стилей с помощью тега ссылки. Так что я, видимо, связывая в стилей называется tables.CSS, и это хорошо равно стилей просто означает: хорошо, Что это за файл относительно того, что Я doing-- является стилей, что я используя для моей странице. Так что, если я действительно хочу посмотреть, что Я делаю с помощью CSS здесь, Мне нужно идти, что открыт table.CSS файл, а также. Таким образом, мы вернемся сюда снова в наш файл дерева. Там это table.CSS. Мы поп его открытым. Теперь мы видим, немного в CSS. Судя по всему, у меня есть пара вещей происходит здесь. Я, видимо, хотят поставить пять пиксел, сплошная красная граница, вокруг моего стола. Мы уже знаем, что происходит просто пойти по периметру. Мы видели, что в table2.HTML. С каждой строке, я по-видимому, нужно указать что высота строки 50 пикселей. Таким образом, для каждой строки, помните, это то, что делает TR тег, Я делаю это в 50 пикселей. 

Наконец, у меня есть на этот комментарий. И это, как мы делаем в комментарии CSS. Это очень похоже на блок захватить комментарии слэш звезды. Весь текст вы хотите. Там нет слэш слэш, хотя в CSS. Для коротких встроенных комментариев, мы должны чтобы использовать эту конкретную формат здесь. Похоже, что я делаю Много вещей в моих тегах тд. Запомнить TD метки, или таблицу Данные, которые на самом деле просто колонны внутри наши ряды, и, видимо, для каждого элемента данных в моей таблице, я хочу, установить цвет фона черный, цвет должен быть белым, цвет цвет переднего плана. Так что это будет текст моей странице. Я хочу большой шрифт, 22 указать шрифт, и я хочу, это будет в семье шрифта, Грузия. Так что я не собираюсь есть шрифт по умолчанию. Я собираюсь задать Грузию, является одним из тех веб-безопасных шрифтов что мы видели раньше. Я хочу, чтобы мой текст быть выровнен централизованно, в середине коробки, Я не хочу, чтобы их оставили в выровнены по правому краю или. И я хочу, чтобы мой ширину столбца чтобы быть 50 пикселей в ширину, а также. Давайте взглянем на как это выглядит, и посмотреть, если это, может быть, улучшение. Так что я собираюсь пойти в table3.HTML, который Напомним, включает в себя table.CSS в качестве связующего звена, и мы его просмотра. Это намного лучше правильно? Это на самом деле начинает выглядеть намного больше, как таблицу умножения. У меня есть, что красная граница вокруг моего стола, но теперь Я также уточнил, что каждая строка 50 пикселей в ширину, или это 50 пикселей tall-- оправдание me-- каждый столбец 50 пикселей в ширину. Данные в каждом столбце, и только данные, имеет черный фон. Так вот, почему те, белые линии там. Поскольку пространство между всеми этими клетками, это не граница в и само по себе, это просто Я только заполнение в клетки, которые на самом деле делает границы таблицы, которые видимо, существует все время, это просто тонкие белые линии. Теперь они видны. Теперь они палить на экране. И таким образом, это очень простой стилей, которые я применил, и теперь моя таблица выглядит гораздо больше, как таблица четыре на четыре умножения, вместо просто перемешаны беспорядок, где все ясно строк и столбцов, но не супер хорошо организованы. Мы действительно просто царапать поверхность что вы можете сделать с помощью CSS здесь. К счастью, документация CSS довольно проста. Вы будете использовать несколько его атрибуты, довольно часто. Те, о которых мы говорили ранее в этом видео. Есть несколько, которые вам вероятно, не будет использовать все. И это нормально, тоже. Но только знаешь, что есть много документации там. Таким образом, даже если мы не охватывают все, вы, конечно, не оставил по своему усмотрению. Но CSS действительно весело экспериментировать с. И я бы настоятельно рекомендуем вам играть с ваших веб-страниц, и посмотреть, как вы можете сделать их выглядеть и чувствовать себя, чтобы улучшить пользователю опыт посещения вашей страницы. Я Дуг Ллойд. Это CS50.