Разделы презентаций
- Разное
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Геометрия
- Детские презентации
- Информатика
- История
- Литература
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
CSS- стили. Основы работы с хостингом
Содержание
- 1. CSS- стили. Основы работы с хостингом
- 2. Человек Одежда Сайт CSS-стили Аналогия:
- 3. CSS - Каскадные таблицы стилей (Cascading Style Sheets)Делают сайты такими, какими мы привыкли их видеть. Красивыми
- 4. Что будет, если стили на сайте отключить? Встречайте, Medium
- 5. Немного CSS-магии
- 6. Цели:Научиться подключать CSS-стили тремя способамиУзнать об особенностях каждого из нихНаучиться выбирать оптимальный способ
- 7. Как запоминать CSS-свойства:Фоновый цвет => background-colorЦвет =>
- 8. Способ #1 Инлайновые стили
- 9. 1 способ: инлайновые стилиЗадаются прямо у элемента
- 10. Инлайновые стили: особенности Свойства CSS У CSS есть много полезных свойств
- 11. Инлайновые стили: особенности Свойства CSS У CSS есть много полезных свойств Что тут написано? Стилей БОЛЬШЕ, чем текста
- 12. Инлайновые стили: особенности Свойства CSS У CSS есть много полезных свойств
- 13. Инлайновые стили: особенности Когда тегов много и
- 14. p {color: black} div {font-size: 18px} Способ #2 тег
- 15. 2 способ: стили в теге Задаются один
- 16. 2 способ: стили в теге Применяются ко
- 17. 2 способ: стили в теге Имеют меньший
- 18. 2 способ: стили в теге Занимают место
- 19. Слайд 19
- 20. 3 способ: стили по ссылкеПодключаются на каждой странице
- 21. 3 способ: стили по ссылкеУ ссылки есть
- 22. 3 способ: стили по ссылке
- 23. 3 способ: стили по ссылке Атрибут
- 24. 3 способ: стили по ссылке
- 25. Стили по ссылке: практикаПодключится или нет?
- 26. Стили по ссылке: Подключится или нет?
- 27. Стили по ссылке: Подключится или нет?
- 28. Итоги:Мы научились подключать CSS-стили тремя способамиУзнали об особенностях каждого из них Умеем выбирать оптимальный способ
- 29. Скачать презентанцию
Человек Одежда Сайт CSS-стили Аналогия:
Слайды и текст этой презентации
Слайд 3CSS - Каскадные таблицы стилей (Cascading Style Sheets)
Делают сайты такими, какими мы
привыкли их видеть.
Слайд 6Цели:
Научиться подключать CSS-стили тремя способами
Узнать об особенностях каждого из них
Научиться
выбирать оптимальный способ
Слайд 7Как запоминать CSS-свойства:
Фоновый цвет => background-color
Цвет => color
Размер шрифта =>
font-size
Жирность шрифта => font-weight
Ширина => width
Высота => height
Граница => border
Слайд 91 способ: инлайновые стили
Задаются прямо у элемента в атрибуте style
style = “property : value”>
Если
нужно задать более одного стиля, значения разделяются точкой с запятой
Слайд 10Инлайновые стили: особенности
2px solid yellow;”>
underline; color: black;”>Свойства CSS
У CSS есть много полезных свойств
Слайд 11Инлайновые стили: особенности
2px solid yellow;”>
underline; color: black;”>Свойства CSS
У CSS есть много полезных свойств
Что тут написано? Стилей БОЛЬШЕ, чем текста
Слайд 13Инлайновые стили: особенности
Когда тегов много и стилей много, ухудшают
читаемость кода
Можно приписать непосредственно к элементу => имеют наибольший
приоритет 
Слайд 152 способ: стили в теге
Задаются один раз на каждой
странице в
p {color: black}
div {font-size: 18px}
Слайд 162 способ: стили в теге
Применяются ко всем элементам на
странице. p {color: black} div {font-size: 18px} То есть все элементы div на
странице будут иметь 18 размер шрифта
Слайд 172 способ: стили в теге
Имеют меньший приоритет, чем инлайновые
стили.
То есть, если задать всем div на странице 18 размер
шрифта, а одному элементу задать другое значение:
То сработает инлайновый стиль, потому что он к элементу ближе
Слайд 182 способ: стили в теге
Занимают место на каждой
странице
Действуют в пределах только одной страницы
А если сайт многостраничный,
то одинаковые стили копировать?
Слайд 213 способ: стили по ссылке
У ссылки есть следующие обязательные
атрибуты То есть, при подключении надо указывать все три
href="/styles.css">Атрибут rel => "relation". Мы подключаем стили
Слайд 233 способ: стили по ссылке
href="путь/до/styles.css">
Атрибут href => "путь от HTML-файла до файла со
стилями"
Если HTML и CSS файл лежат в одной папке, то указываем только название, иначе указываем путь
Слайд 243 способ: стили по ссылке
со стилями обязательно должно быть расширение CSS
Название может быть
любым, но большинство разработчиков используют именно styles.css, чтобы было понятно, что мы подключаем стили
Слайд 28Итоги:
Мы научились подключать CSS-стили тремя способами
Узнали об особенностях каждого из
них
Умеем выбирать оптимальный способ
