Слайд 2Cascading Style Sheets
CSS — язык таблиц стилей, который позволяет прикреплять стиль (например, шрифты и
![Cascading Style Sheets CSS — язык таблиц стилей, который позволяет прикреплять стиль](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/938806/slide-1.jpg)
цвет) к структурированным документам (например, документам HTML и приложениям XML).
Слайд 4Практическая работа
Открываем файл с помощью SublimeText
![Практическая работа Открываем файл с помощью SublimeText](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/938806/slide-3.jpg)
Слайд 5Практическая работа
Подключаем файл к web – странице:
![Практическая работа Подключаем файл к web – странице:](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/938806/slide-4.jpg)
Слайд 6Работаем с заголовками
В файле style.css
Вид Web-страницы
![Работаем с заголовками В файле style.css Вид Web-страницы](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/938806/slide-5.jpg)
Слайд 7Работаем с абзацами
В файле style.css
Вид Web-страницы
![Работаем с абзацами В файле style.css Вид Web-страницы](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/938806/slide-6.jpg)
Слайд 8Работаем с гиперссылками
В файле style.css
Вид Web-страницы
![Работаем с гиперссылками В файле style.css Вид Web-страницы](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/938806/slide-7.jpg)
Слайд 9Стилизация гиперссылок
В файле style.css
Hover (:hover): когда курсор расположен над ссылкой
![Стилизация гиперссылок В файле style.css Hover (:hover): когда курсор расположен над ссылкой](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/938806/slide-8.jpg)
без клика
Visited (:visited): ссылка, по которой пользователь переходил ранее, но на которую сейчас не наведен курсор
Active (:active): ссылка в процессе нажатия. Состояние очень быстрое – когда кнопка нажата, но до завершения щелчка.
Слайд 10Ссылки как кнопки
В файле style.css
![Ссылки как кнопки В файле style.css](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/938806/slide-9.jpg)
Слайд 11 Добавим кнопке интерактивности
В файле style.css
![Добавим кнопке интерактивности В файле style.css](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/938806/slide-10.jpg)
Слайд 13 Стилизация списков (теги ul, li)
В файле style.css
![Стилизация списков (теги ul, li) В файле style.css](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/938806/slide-12.jpg)
Слайд 14Добавь в CSS!
li:hover { z-index: 1;}
li:before {
border: 2px solid #337AB7;
![Добавь в CSS! li:hover { z-index: 1;} li:before { border: 2px solid](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/938806/slide-13.jpg)
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;
}
Слайд 15Добавь в CSS!
li:hover:before {
background: #337AB7;
color: #FFF;
-webkit-transform: translate(-12px, 0);
-ms-transform:
![Добавь в CSS! li:hover:before { background: #337AB7; color: #FFF; -webkit-transform: translate(-12px, 0);](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/938806/slide-14.jpg)
translate(-12px, 0);
-o-transform: translate(-12px, 0);
transform: translate(-12px, 0);
}