Сегодня мы поговорим о стилизации ссылок и списков стилей.
Когда приходит время, чтобы стиль ссылок на вашей странице,
это действительно важно, чтобы вы помните, что ссылки являются то, что составляют веб-сайт.
Именно эта взаимосвязь помогает людям получать знания.
Это то, что помогает поисковым системам связать ваш текст и
контент с чужим текстом и контентом.
Итак, сегодня мы поговорим конкретно о ссылках, потому что
я хочу, чтобы вы подумали о том, как вы стайлинг.
В общем, когда вы переходите к стилю ссылки, вы можете использовать
все те же различные атрибуты, которые вы использовали для всего остального.
Ваши заголовки, ваши абзацы, такие вещи.
Тем не менее, ссылки имеют одно специальное дополнительное свойство
под названием text-decoration.
Итак, в этом примере, что я делаю, так это то, что
вместо того, чтобы мои ссылки были встроенными, что означает, что они идут рядом друг с другом
, я скажу: эй, я хочу, чтобы мои ссылки были разделены друг на друга.
Поэтому, надеюсь, большая часть этого кода выглядит вам знакомо.
У вас есть идея, что дисплей блок, он будет идти друг под другом.
Вес шрифта, я хочу, чтобы он был немного смелым.
Я установил новый цвет и новый цвет фона.
Теперь я установил ширину, и, если вы попытаетесь установить ширину, и
она не работает, просто помните, что ссылки по умолчанию являются встроенными, и
они не принимают ширину, если вы не измените их на блок или встроенный блок.
Я также собираюсь выровнять текст, добавить некоторые дополнения, и это текстовое украшение,
нет, это новое.
Здесь написано: эй,
я хочу избавиться от подчеркивания, которое обычно появляется под ссылками.
Так что я перешел от этого здесь, в верхнем углу,
к тому, что немного более стилизовано здесь внизу.
На самом деле, это почти даже не похоже на ссылку.
Так что давай поговорим об этом.
Иногда при установке своих ссылок
люди действительно пытаются сделать его более похожим на кнопки.
И мы хотим избежать этого, потому что хотим быть семантикой.
Если вы хотите кнопку, используйте вместо этого элемент кнопки.
И вы можете сделать это очень просто, просто поместив тег кнопки вместо
тега якоря.
И опять же, таким же образом вы можете стилизовать его по-разному.
Но я хочу, чтобы вы поняли, что есть так
много разных вещей, которые вы можете сделать со ссылками и так много стиля, что вы можете сделать с
ними, убедитесь, что люди понимают, что это ссылка, на которую они смотрят.
Или, если они используют средство чтения с экрана, это ссылка, о которой они слышат.
Итак, еще одна новая вещь о ссылках,
которую мы не видели раньше, это идея о том, что у ссылок есть состояния.
Вы когда-нибудь замечали, что, когда вы заходите на веб-страницу,
иногда некоторые ссылки синие, а некоторые из них фиолетовые?
И, вы понимаете, что после немножко,
те, которые фиолетовые, они там, потому что вы посещали их раньше.
Итак, что у нас есть, есть ли у нас разные состояния.
И я расскажу о них очень быстро, а потом,
когда мы поговорим о том, что называется псевдоуроками, мы поговорим о них еще больше.
Но быстро, a с этим двоеточием прямо здесь ссылка
просто говорит, что это просто обычная ссылка, вы видели ее раньше,
a; посещенный говорит вот ссылка, и мой браузер говорит мне.
Он знает, что я нажимала на него раньше.
По умолчанию браузер будет другой цвет.
У нас также есть связь с зависанием над ним.
Так что вы, наверное, видели это, когда вы держите мышь над чем-то,
вроде того, что я держу ручку здесь.
Это то, что он сделает что-то сумасшедшее.
Может быть, это изменит цвет или другие вещи вроде этого.
Таким образом, наведите курсор мыши на ссылку.
Какой вид поднимает интересный вопрос о том,
работает ли это на сенсорных экранах?
Когда вы разрабатываете свою страницу, вы должны помнить, что зависание не обязательно
будет работать, если люди получают доступ к ней на телефоне или планшете или что-то в этом роде.
Что подводит меня в другое состояние под названием «Фокус».
Таким образом, состояние фокуса - это то, что происходит, когда кто-то просматривает вашу страницу.
Когда они попадают на вкладку, он будет прыгать от элемента к элементу.
И когда он дойдет до этой конкретной связи, он поймет, что я в фокусе, так что
если вы хотите сделать что-то другое, может быть, то же самое, что вы делаете, когда люди зависают,
вот как вы можете вызвать эту активность.
Ладно, и последний - это тот, который я действительно думаю, что самый странный из всех,
я бы, возможно, даже назвал это глупым, но я не создал Интернет и HTML, и
я уважаю, но это действительно странно, потому что то, что это говорит, это эй,
это ссылка, как я нажимаю на него.
И причина, по которой я думаю, что это странно, потому что для большинства из нас,
когда мы нажимаем на ссылку, мы идем на новую страницу, так что
мы даже не увидим, что произошло в стиле.
Ладно?
Давайте поговорим о том, как мы это делаем.
Но прежде чем я это сделаю, мы вновь возвращаемся к этой идее приоритета.
Каскадные таблицы стилей очень велики на этом.
Если вы решите, что хотите использовать эти разные состояния,
есть несколько правил, которые вы должны помнить при написании таблиц стилей.
Во-первых, если вы собираетесь использовать: hover, он должен прийти после: link.
И далее, a:vised и a:active они должны прийти после: наведения.
Так что это просто иерархия, которая происходит, пока вы покрываете свои страницы.
Итак, давайте посмотрим на пример сейчас некоторого кода и как я стилизую свои ссылки.
В этом примере
у меня есть только три ссылки, которые я ни в коем случае не стилизовал.
У меня есть ссылка на введение в веб-дизайн,
ссылка на Мичиганский университет, и ссылка на Университет штата Кент,
где я учился в аспирантуре.
Но что происходит, когда я иду вперед, и я добавляю к нему некоторые CSS?
Здесь, на вершине, у меня есть все типичные вещи, о которых мы говорили раньше,
ширина и цвет.
Я добавил текстовое оформление, и
я также хотел добавить эту идею маржи, где я могу центрировать каждую из моих ссылок
поверх друг друга с небольшим количеством пространства между ними.
Ладно, давайте взглянем на то, как это выглядит, и
вы увидите, что у меня все ссылки выглядят очень по-разному, хорошо.
И вы можете видеть, когда я вижу свою ручку,
когда я наводим курсор на каждую из них, что происходит, так это изменение цвета.
То, как я заставил это работать, прямо здесь.
Всякий раз, когда моя ссылка переходит в состояние зависания,
она знает, чтобы изменить цвет фона и цвет шрифта.
Хорошо, ну что такое: фокус, и что у меня есть здесь немного, a:active?
Что происходит здесь, так это то, что я поставил в фокус для
тех людей, которые просматривают мою страницу.
Так что, когда вы смотрите на мою вкладку, вы можете увидеть Введение в веб-дизайн переходит в
фокус, а затем Университет Мичигана
, а затем штат Кент, и я делаю это, просматривая страницу.
Последнее правило, действующее правило, это то, что я покажу тебе, а
потом оттормаемся от этого.
Активный работает, так это то, что когда вы фактически нажимаете на страницу,
он собирается добавить границу вокруг этой ссылки.
Странно, что как только я закончу
нажимать, мы перейдем на новую страницу.
Так что это вроде как разрывается, ты не сможешь увидеть эту границу,
если я не задержу ее очень намеренно, просто так.
Итак, в этом примере я попытался показать вам два разных способа, которые вы можете
стилизовать ссылки.
Теперь давайте продолжим и подумаем об этом чуть более подробно.
Когда вы создаете эти ссылки, я еще раз не могу подчеркнуть важность
доступности, мы хотим убедиться, что ваши ссылки являются ссылками и
что люди знают, что они там.
Как только вы закончите играть со ссылками, давайте продолжим и
начнем думать о стилизации элементов списка.
При использовании списков стилей свойства по умолчанию все они выглядят одинаково.
У вас есть один, два, три или круг, круг, круг, круг, но
мы можем изменить все это, мы можем изменить вещи за пределами шрифта и
поля, чтобы посмотреть на стиль, который принимают ваши списки.
Таким образом, некоторые из вещей, которые мы можем посмотреть, это ваш тип стиля
списка, ваше изображение стиля списка.
Позиция стиля списка и только стиль списка.
Тип стиля списка в основном говорит, как вы хотите, чтобы я указывал разные
элементы списка?
По умолчанию для упорядоченных списков снова у нас есть один, два, три, но
вы можете дать разные значения.
Вы можете сказать, что я хочу, чтобы это была нижняя римская цифра, верхняя римская цифра,
нижняя альфа-цифра, вы можете играть с ними, чтобы получить чувство, которое вы хотите.
Итак, в этом случае мы перешли от 1 и 2 к A и B.
И если бы вместо этого я сделал нижнюю альфу, у нас были бы строчные a и строчные b.
Когда вы делаете тип списка для неупорядоченных списков, как правило, то, что у вас есть, и
это зависит от вашего браузера, это маленький круг или маленький диск.
Мы можем изменить это, и
мы можем ввести именно то, что ты хочешь убедиться, что это будет.
Другой вариант, с которым вы можете играть, - это идея
полностью избавиться от этих маркеров по умолчанию и
вместо этого использовать пользовательское изображение вместо этого традиционного маркера.
И когда вы это делаете,
это как бы восходит к этой идее позиции в стиле списка.
Много раз вы будете перемещать свою позицию, в
зависимости от того, какой стиль списка вы используете.
Здесь у меня есть пример того, где я говорю, что хочу мое изображение стиля списка.
У меня есть квадрат, это говорит: эй, если вы не можете найти картинку вперед и
использовать квадрат, иначе я хочу, чтобы вы использовали эту картинку прямо здесь.
Ладно? Итак, давайте
посмотрим на другой пример.
В файле list.html то, что я помещаю здесь, - это два разных типа списка,
неупорядоченный список и упорядоченный список.
И я просто заполнил их другой информацией.
И когда ты посмотришь на этот экран, который я сделаю для
тебя немного больше, если смогу.
Вы можете видеть, что неупорядоченные списки просто используют круги, а
упорядоченные списки используют номера по умолчанию.
Итак, давайте поиграем с этим сейчас.
Давайте продолжим и положим в таблицу стилей.
В моей таблице стилей я вошел туда, сказал, что я хочу сделать со своими
стилями списка, я хочу переключить его на верхнюю римскую и цифровую, а также использовать квадрат вместо этого.
Так вот, как это выглядело раньше, и вот как мы выглядим после этого.
Так что, видите, в этом есть еще кое-что.
И, это очень простой способ изменить свою страницу
от того, как другие люди обычно делают свою страницу.
Еще один вариант, который я просто хотел показать вам,
потому что всем это действительно нравится, это идея использования изображения стиля списка.
Итак, я пойду сюда и раскомментирую этот код.
И если вы помните, если вы обращали внимание на эту идею, что, когда у вас есть
приоритет, это новое правило перезапишет все правила над ним.
Так что давайте продолжим и убедимся, что я сохранил свою страницу, и давайте продолжим и перезагрузим.
И теперь в этом случае произошло то, что мы удалили эти обычные маркеры,
и я положил свой маленький молний.
Таким образом, делать подобные вещи не сложно, но,
честно говоря, это занимает немного времени, особенно если вы используете изображения,
чтобы убедиться, что у вас все написано точно так же.
Опечатки на самом деле убийца.
Дело не в том, что это сложно,
а в том, что ты просто будешь очень осторожен, когда делаешь это.
Ладно, давайте посмотрим, о чем мы говорили до сих пор.
И не только в этой лекции, но и в курсе, который мы получили сегодня.
И я хочу подчеркнуть, что до сих пор мы ставили теги, и
эти теги всегда могут просто принимать эти пары значений свойств, и
вы можете превратить свою страницу в нечто действительно большое.
Мы собираемся пойти на что-то новое и немного другое.
Мы поговорим о псевдоклассах, идентификаторах и селекторах.
И я хочу убедиться, что тебе удобно
строить разные правила самостоятельно, прежде чем ты продвинешься.
Теперь быть комфортным не значит, что ты совершенна.
Это не значит, что ты умеешь всё делать.
Это означает, что вы достаточно уверены, чтобы выйти и
начать использовать некоторые из инструментов, которые есть там, чтобы улучшить ваш сайт.
Я перечисляю двух из них прямо здесь только потому, что они оба очень хорошо известны
в случае сайта Криса Педерика, или я лично только что нашел их очень полезными.
Другой вариант - просто помните, что вы можете пойти туда, и
вы можете сделать веб-поиск инструментов разработчика.
Ты не первый, и ты не будешь последним человеком,
сталкивающимся с проблемами, когда ты ставишь свою страницу.
Я надеюсь, что вы действительно пойдете на форумы
курса Coursera или в любом классе, в котором вы находитесь, и попросите своих сокурсников о помощи.
Потому что на самом деле, единственный способ учиться - это практиковать,
практиковать, сталкиваться с проблемами, получить помощь и продолжать идти.
Когда вы делаете все больше и больше веб-дизайна, я надеюсь, что вы обретете уверенность,
чтобы помочь сделать что-то действительно крутое, чем вы будете гордиться.
Так что держись там.
Спасибо.