CSS. Урок 12

Cascading Style Sheets
CSS — язык таблиц стилей, который позволяет прикреплять стиль (например, шрифты и цвет) к структурированным документам (например, документам HTML и приложениям XML).

Практическая работа
Урок 12

Практическая работа
Открываем файл с помощью SublimeText

Практическая работа
Подключаем файл к web – странице:

Работаем с заголовками
В файле style.css
Вид Web-страницы

Работаем с абзацами
В файле style.css
Вид Web-страницы

Работаем с гиперссылками
В файле style.css
Вид Web-страницы

Стилизация гиперссылок
В файле style.css
Hover (:hover): когда курсор расположен над ссылкой без клика
Visited (:visited): ссылка, по которой пользователь переходил ранее, но на которую сейчас не наведен курсор
Active (:active): ссылка в процессе нажатия. Состояние очень быстрое – когда кнопка нажата, но до завершения щелчка.

Ссылки как кнопки
В файле style.css

Добавим кнопке интерактивности
В файле style.css

Стилизация списков (теги ul, li)
В файле style.css

Добавь в CSS!
li:hover { z-index: 1;}
li:before {
border: 2px solid #337AB7; position: absolute;
top: -14px;
padding: 2px 10px;
font-size: 11px;
font-weight: bold;
color: #337AB7;
background: #F7FAFD;
counter-increment: li;
content: counter(li);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}

Добавь в CSS!
li:hover:before {
background: #337AB7;
color: #FFF;
-webkit-transform: translate(-12px, 0);
-ms-transform: translate(-12px, 0);
-o-transform: translate(-12px, 0);
transform: translate(-12px, 0);
}