Всем привет.
С возвращением.
Пришло время начать наш последний проект.
Я очень надеюсь, что к тому времени, когда вы закончите с этим, у вас будет что-то
, чем вы действительно гордитесь, и что вы захотите поделиться.
Опять же, наша цель заключается в том, что мы собираемся написать одну таблицу
стилей и стиль трех различных HTML-файлов.
Теперь, когда вы начнете,
я предполагаю, что вы выполнили второе одноранговое задание.
Вы можете свободно изменять это так, как хотите, но
мне нужно знать, что эти изменения завершены.
Ладно, давай я покажу тебе наши «до» и «после»,
куда мы идем с этим финальным проектом.
Итак, давайте посмотрим, что мы сделали до сих пор в этом курсе.
У нас был наш первый HTML-вид.
Наш следующий, мы сделали это очень ясно.
Наш третий, где мы добавили в каком-то другом стиле.
И, наконец,
на нашем четвертом, это может выглядеть не очень по-другому на этой первой странице, но
где я действительно хочу, чтобы вы сосредоточились на странице Команды и на этом столе.
Вы сможете увидеть, что я действительно вышел и
положил много укладки в этот стол.
И причина, по которой я выбрал таблицы, заключается в том, что это будет шанс для нас войти и
использовать эти псевдоклассы.
Используйте эти псевдоэлементы, используйте некоторые градиенты,
все эти мелочи, которые могут быть немного трудно достичь,
но как только вы это сделали, это выглядит действительно хорошо.
Давайте поговорим о каждой из этих маленьких частей.
Так что еще раз, просто небольшое напоминание, сделайте одну таблицу стилей.
Я не хочу другую таблицу стилей для
каждой страницы, вы хотите тот, который будет охватывать всех.
И мы будем использовать псевдоэлементы и псевдоклассы.
Поэтому, если вы немного запутались в этом, не забывайте, что
у нас есть слайды, которые охватывают это, а также некоторые из наших примеров кода вместе.
Итак, давайте начнем с таблицы, потому что это основная часть страницы.
Как минимум, я хочу, чтобы вы пошли вперед и настроили шрифт, ширину
и маржу.
Теперь, когда вы стиль шрифта, есть много различных вариантов, которые вы можете посмотреть.
У вас могут быть разные семейства шрифтов.
Можно изменить размер, вес и высоту линии.
Одна из причин, по которой я рекомендую высоту строки, заключается в том, что когда вы
это делаете, гораздо проще центрировать текст внутри строк, если вы сделали
высоту строки такой же, как и размер текста.
Для вашей ширины, я не хочу, чтобы ваш стол занял всю страницу.
Я хочу, чтобы это заняло где-то между 75 и 90%.
И одна из причин, по которой я хочу, чтобы ты сделал это,
это потому, что я хочу, чтобы ты центрировал стол.
Я хочу, чтобы ты играл с этим свойством.
И выяснить, как вы можете занять нужное количество места и
поместить его туда, где вы хотите.
Затем мы посмотрим на заголовок стола.
Таким образом, заголовок таблицы немного отличается от других строк, и
он действительно имеет важное семантическое значение.
Таким образом, используя теги заголовков таблицы, мы сможем удвоить эту
идею, что мы ставим ее по-другому, и это значит что-то другое.
Итак, сначала измените цвет фона.
Как только вы получите это для работы,
я хочу, чтобы вы попытались поместить градиентный цвет фона.
Теперь не забудьте, чтобы использовать градиент,
вам нужно будет поместить некоторые префиксы браузера.
Затем добавьте границу, но я хочу, чтобы вы округлили два верхних угла, а
не все, а затем также сделали нижнюю границу толще.
Наконец, когда вы закончите с этим, продолжайте и
добавьте хотя бы одно другое свойство, то, что, по вашему мнению, будет выглядеть круто.
После того, как вы сделаете заголовок таблицы, давайте продолжим и положим в
некоторый стиль для строк таблицы.
Первое, что я хочу, чтобы вы сделали, и есть причина для этого,
это я хочу, чтобы вы установили непрозрачность строк таблицы до некоторого значения около 0,8.
Где-то там.
Где вы все еще можете прочитать текст, но он немного исчез.
Затем я хочу, чтобы вы убедились, что первый столбец каждой строки таблицы
выровнен по левому краю, а остальные два центрированы.
Теперь вы можете сделать этот стиль внутри элементов строки таблицы, или
вы можете сделать это внутри элементов таблицы, этих TD.
Это действительно зависит от того, как вы прыгаете и пытаетесь сделать это.
Наконец, я хочу, чтобы вы пошли вперед и поместили еще один псевдокласс.
Где, когда кто-то наводит курсор на любой из рядов,
он будет меняться от своего рода выцвел на более темный цвет.
И я покажу вам пример, прежде чем я продолжу.
Поэтому, если вы заметили в этой таблице,
текст немного исчез от сплошного черного цвета шрифта.
Так вот где появляется непрозрачность.
Теперь, когда я наведите курсор на имя каждой команды,
вы увидите, что шрифт становится немного темнее.
Я не менял цвет шрифта здесь, я не менял семейство шрифтов
, тип или что-то в этом роде.
Вместо этого, то, что я изменил, - это непрозрачность, чтобы установить его на 1.
Так что теперь, когда мой зависание погаснет,
он возвращается к тому оригинальному виду утраченного значения.
Каждый из элементов таблицы может принимать любое количество стиля, которое вы
хотите дать ему.
Но то, что я хочу видеть, что вы делаете, это я хочу увидеть, как вы стиль заполнения,
цвет шрифта и цвет фона.
И я хочу, чтобы вы установили радиус границы в два пикселя.
Вы никогда не сможете увидеть такую неразличимую или
тонкую разницу на столе.
Так что я хочу, чтобы ты положил его, просто когда я скажу тебе сделать это,
ты заметила, что там есть реальные изменения.
Наконец-то, это будет отличный шанс для
тебя сделать то, что я не прикрывал себя.
Часть того, чтобы быть веб-дизайнером, это научиться выходить туда и
искать различные свойства, с которыми вы можете играть.
Поэтому я бы посоветовал вам выйти и посмотреть на текстовую тень.
Это то, что я использую в своем примере.
Поэтому, если вы действительно хотите попробовать повторить его, идите вперед и попробуйте использовать его самостоятельно.
Еще раз, мы будем использовать одноранговую оценку для этого задания.
И оценки будут основаны как на уровне завершенности, так и на некотором уровне эстетики.
Правильные стандарты кодирования всегда будут применяться, но
вы можете указать предпочитаемый размер экрана.
Поэтому, если кто-то решит взять ваш CSS и применить его к HTML, вы
можете сообщить им, что это действительно лучше всего выглядит на большом экране или маленьком мобильном устройстве.
Теперь, на самом деле есть много,
много способов, которыми вы можете изменить эту таблицу стилей вокруг.
И поэтому я не хочу, чтобы ты беспокоился о том, чтобы отбить все стандарты.
Но если вы решите что-то немного сумасшедшее, немного другое, и
что-то, что другие люди могут не понять.
Я действительно рекомендую, чтобы вы положили это в нижней части таблицы стилей.
Чтобы люди, просматривающие ваш код, действительно могли сосредоточиться на фактических требованиях,
а затем быть поражены вашими действительно классными инновациями.
Поэтому я надеюсь, что это то, что действительно поможет укрепить ваше
понимание CSS.
Если вы сталкиваетесь с проблемами, вы должны свободно использовать доски обсуждений и
действительно спрашивать людей о том, что вы не совсем уверены.
Или просто поделитесь чем-то крутым, что вы должны работать.
Удачи.