Твитнуть об этом видео
Поделиться на Facebook
Поделиться по E-mail
Скачать исходники к 6 видеоуроку по CSS Размер: 28.87 kB, скачали: 510 раз.
- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Изучаем ссылки и псевдоклассы в CSS
Как работают псевдоклассы и для чего они нужны? Псевдоклассы определяют состояние элемента, после чего присваивают ему свои стили. Например, у нас на странице расположена ссылка синего цвета. Если мы наведем на эту ссылку указатель мыши, то ссылка мгновенно становится подчеркнутой, а если попробуем нажать, то ссылка становится красной. Это осуществляется с помощью псевдоклассов. Как я уже сказал, они отслеживают поведение элемента и дают ему свои стили, которые прописаны в соответствующем документе. В этом видеоуроке мы будем разбираться со ссылками и псевдоклассами, которые можно будет к ним применить.
Как прописываются псевдоклассы в коде? Сначала идет селектор, потом двоеточие и затем сам псевдоклас. На примере я показал псевдокласс, работающий при наведении на ссылку. Мы наводим мышь на ссылку, после чего происходит событие, и наша ссылка становится подчеркнутой. Как только уводим мышь со ссылки, ссылка принимает исходный вид. Думаю, понятно. А раз понятно, то давайте перейдем в документ style.css и попробуем прописать все эти псевдоклассы.
Псевдокласс непосещенной ссылки
Псевдоклассы мы можем приписывать не только к селектору «а» (к ссылкам), но и к любому классу — к любому селектору. Давайте сначала попробуем прописать псевдоклассы для всех ссылок. Прописываем селектор «a», ставим двоеточие и прописываем псевдокласс link (он означает, что пользователь нашу ссылку еще пока не посетил). Пропишем ссылке цвет и text-transform (трансформирование, которое мы изучали в прошлом видеоуроке).
a:link {
color: #FF00FF;
text-transform: uppercase;
}
Сохраним и проверим в браузере, что у нас получилось на данный момент. Видим, что все ссылки стали фиолетового цвета и написаны большими буквами. Но есть одна ссылка «сайт», которая не изменила стиль — как была, так и осталась написанной темно-фиолетовым цветом маленькими буквами. Почему? Все потому, что она уже была посещена. Если мы сейчас посетим ссылку «ИЗУЧАТЬ», то она станет такой же, как ссылка «сайт».
Псевдокласс посещенной ссылки
Давайте создадим специальный псевдокласс для уже посещенных ссылок. Переходим в код и создаем касс visited. Давайте зададим ему другой цвет, чтобы можно было сразу отличить, и поставим подчеркивание — text-decoration.
a:visited {
color: #FF0000;
text-transform: capitalize;
text-decoration: underline;
}
Сохраняем. Проверяем в браузере. Все посещенные ссылки стали подчеркнутыми и приняли свойство capitalize (каждое слово ссылки стало начинаться с большой буквы).
Псевдокласс ссылки при наведении
В начале этого видеоурока я показывал пример. Там при наведении на ссылку, она принимала особый вид. Давайте сделаем это. Делается это с помощью псевдокласса hover. Text-decoration поставим overline.
a:hover {
color: #FFFF00;
text-transform: lowercase;
text-decoration: overline;
}
Сохраняем и смотрим, что у нас получилось. Давайте наведем мышку на ссылку. Мы видим, что ссылка стала желтого цвета с верхним подчеркиванием, а также все ее буквы стали маленькими.
Давайте изменим цвет, например, на зеленый. Желтый здесь не очень смотрится.
a:hover {
color: #00FF00;
text-transform: lowercase;
text-decoration: overline;
}
Сохраняем. Стало более-менее.
Теперь давайте попробуем задать псевдоклассы не ссылкам, а абзацу, например. То есть, чтобы все ссылки в абзаце принимали какой-либо класс. Переходим в код файла index.html и пропишем где-нибудь абзац.
<br><p>И тут возникла идея создать уже свой собственный сайт :)</p>
Абзац будет иметь свой класс. Сразу его пропишем. Класс будет называться links.
<br><p>И тут возникла идея создать уже свой собственный сайт :)</p>
Переходим в файл стилей. Сейчас будем прописывать стили для ссылок, которые находятся в абзаце со стилем links. Как мы это пропишем? Сначала прописываем абзац — p, ставим точку, прописываем класс — links, ставим пробел и букву «a», означающую ссылки. После этого ставим двоеточие и прописываем псевдокласс link. Сейчас я объясню, что мы написали. Сначала идет абзац, потом класс, а потом — ссылка. Абзац с классом links, в котором есть ссылка, принимает псевдокласс link со стилями, которые мы сейчас укажем. Пропишем свойство color со значением, например #004400 – темно-зеленый цвет. На этом все.
p.links a:link {
color: #004400;
}
Сохраняем и посмотрим, что у нас получилось. А ничего у нас не получилось, потому что ссылка у нас была посещенной. Давайте пропишем еще одну ссылку, которая у нас не будет посещенной. Переходим в код.
<br><p>И <a href="/tut.html">тут</a> возникла идея создать уже свой собственный сайт</a>.
Сохраняем. Проверяем. Мы видим, что ссылка «тут» стала зеленого цвета, подчеркнутая снизу, написана большими буквами. Почему она написана большими буквами? Сейчас мы это разберем. Перейдем в код. Видим, что мы задали только цвет, но чуть выше мы задали всем ссылкам трансформирование uppercase. И раз мы не указали нашей ссылке особое трансформирование, то она станет писаться большими буквами. В связи с этим мы сейчас укажем особое трансформирование. Поставим значение none.
p.links a:link {
color: #004400;
text-transform: none;
}
Сохраняем. Буквы нашей ссылки стали маленькими, при наведении она принимает глобальный класс всех ссылок, так как мы не задали для этого абзаца и класса links специальный псевдокласс. Давайте его зададим. Возможно на словах это чуть-чуть не понятно, но, думаю, на примере вы это поймете. Цвет поставим такой же. Трансформирования также не будет, text-decoration будет underline. В p.links a:link укажем text-decoration: none.
p.links a:link {
color: #004400;
text-transform: none;
text-decoration: none;
}
p.links a:hover {
color: #004400;
text-transform: none;
text-decoration: underline;
}
Сохраняем. Обновляем. У нас получилась ссылка «тут» зеленого цвета. При наведении появляется нижнее подчеркивание. Так же и со ссылкой «сайт», но она уже посещена, просто мы не задали псевдокласс для посещенной ссылки. При наведении она тоже становится зеленой и подчеркнутой.
Давайте создадим класс для уже посещенных ссылок. Поставим бардовый цвет, трансформирования не будет, text-decoration тоже поставим none.
p.links a:visited {
color: #CC0000;
text-transform: none;
text-decoration: none;
}
Сохраняем. Смотрим, что у нас произошло с абзацем. Не посещенная ссылка имеет зеленый цвет, при наведении подчеркивается. Посещенная ссылка имеет красный цвет, но при наведении она не принимает никакой класс. Если ссылка «тут» при наведении становится зеленой и подчеркнутой, то ссылка «сайт» ничего не принимает. В чем же дело? Дело в том, что псевдокласс hover находится выше, чем visited. Чтобы наша задумка осуществилась, нам нужно псевдокласс hover поставить ниже, чем visited.
p.links a:visited {
color: #CC0000;
text-transform: none;
text-decoration: none;
}
p.links a:hover {
color: #004400;
text-transform: none;
text-decoration: underline;
}
Теперь сохраняем и проверяем. Все работает. Наша задумка осуществилась. Если мы сейчас нажмем на ссылку «тут», то она станет красного цвета, как и ссылка «сайт» и при наведении станет зеленой с нижним подчеркиванием. С этим все понятно. Осталось совсем немного.
Псевдокласс ссылки при нажатии
Сейчас я вам покажу последний псевдокласс для ссылок — active (нажатие). Пока ссылка будет нажата, она будет принимать какие-то стили. Давайте добавим свойство font-weight со значением bold. Пусть при нажатии ссылка становится жирной. Трансформирования не будет, text-decoration — тоже, а цвет укажем красный.
p.links a:active {
color: #CC0000;
font-weight: bold;
text-transform: none;
text-decoration: none;
}
Сохраняем. Проверяем. Попробуем нажать. Я держу ссылку нажатой, она стала жирной и темно-красного цвета. Если я ее отпущу, то ссылка просто примет свой вид, который принимала раньше.
На этом данный видеоурок мы заканчиваем. Обязательно поэкспериментируйте с классами, попробуйте разные свойства, поменяйте псевдоклассы местами и достигните нужного вам результата. Спасибо за внимание. До встречи в следующем видеоуроке, в котором вы узнаете, что такое коробочная модель в CSS, а также познакомитесь с рамками и отступами.
Info-line.net
Привет, чем дальше тем интересней, посмотрел 6-ой урок понимаю теперь уже что CSS может очень и очень многое, сразу хочется стока всего сделать, а знаний не хватает, объясняешь хорошо, информации очень много, может посоветуешь как всё это запомнить? =) Это в обще возможно? Может быть какие то вещи надо записывать, точнее я так и делаю, учить наизусть?) Спасибо.
Запоминать пока все не обязательно. Задачей курса по CSS является изучение основ в CSS и понимание того, как он действует на простых примерах и свойствах.
Можно сказать, что этот курс является лишь теоретической частью, хотя я все-таки и пытаюсь включать в него практику тоже.
Позже будет выпущен курс по блочной кроссбраузерной верстке. Этот курс будет только практикой и своеобразным продолжением курса по CSS.
В нем мы будем верстать сайт с PSD шаблона, тем самым закрепляя изученное. 😉
О! Очень бы хотелось получить практические навыки такой верстки, понять алгоритмы действий и использования программ и увидеть этот курс побыстрее 🙂
привет! спасибо за уроки! =)
Сделайте пожалуйста урок о том, как делать ролловер, т.е. когда при наведении на картинку-ссылку, начальная картинка заменяется другой картинкой.
Это можно сделать с помощью CSS или JavaScript. Второй вариант предпочтительнее, поэтому я его буду разбирать только в курсе по JavaScript, что будет не скоро)
Однако, я все равно покажу вам код, думаю вы сами сообразите, что к чему, подставив свои изображения и проверив, что происходит в браузере.
Если использовать CSS, то это делается с помощью исчезновения одного изображения и появления на его месте другого. Исчезновение можно сделать с помощью display: none;
В курсе по CSS этого не будет, т.к. я уже сказал, что предпочтительнее делать с помощью JavaScript.
спасибо но я как то неочень понимаю у вас нет видеоурока етой части?
Юрий, что именно не понимаете? Как сделать, чтобы при наведении на изображение появлялось другое?
Если я правильно понял вас, то нету. Но он и не нужен. Просто положите 2 изображения (в примере это — html.png и css.png) в папку img, а потом вставьте этот кусок кода (выше) в страницу index.html. Потом посмотрите, что произойдет. Уверен, путем проб и ошибок вы не только поймете, что к чему, но и запомните эти 2 атрибута (onmouseout и onmouseover) 🙂
Если у вас другие названия изображений, то просто подставьте их названия вместо html.png и css.png соответственно.
Олег у меня вот такая строчка работает только один раз
p.links a:link { color: green; }, тоесть я пишуp.links2 a:link { color: red; }и задаю этот сlass для другого текста он не работает 🙁могу ли я увидеть весь ваш код?
Олег, хочется сказать ещё раз огромнейшее СПАСИБО! Вы очень помогли
понять: что, зачем и почему. Главное, что всё получается. Успехов Вам! Жду
продолжения уроков и по другим программам. Благодарная ученица.
И Вам спасибо 🙂 Подписывайтесь на рассылку, чтобы не пропустить 🙂
Олег, подскажите, пожалуйста, я прописываю псевдокласс для посещенной ссылки, но при этом никаких изменений не происходит. Заранее спасибо
Прописали ли Вы стили в этот псевдокласс? Мне нужно увидеть Ваш код, чтобы точно определить проблему.