17. основы css (cascading style sheets)
Download as PPTX, PDF0 likes738 views
Документ рассматривает каскадные таблицы стилей (CSS) и их преимущества перед обычным HTML, включая возможность разделения контента и оформления, централизованное хранение стилей и улучшение времени загрузки страниц. Он описывает способы подключения CSS к веб-страницам, в основном через тег <link>, и подчеркивает важность CSS в современном веб-дизайне. В заключение указано, что CSS является ключевой технологией для форматирования веб-страниц.
17. основы css (cascading style sheets)
- 1. CSS (Cascading Style Sheets) каскадные таблицы стилей
- 2. Сравните… «голый» HTML «одежда» из CSS
- 3. Определение стиля Стиль - это набор параметров форматирования, который применяется к элементам веб-страницы. Для текста можно указать: Гарнитуру - название шрифта Начертание - нормальное, жирное, курсив, подчеркнутое Кегль – размер шрифта Цвет шрифта… 2 …верхний индекс E=MC или нижний индекс Н О и другие… 2
- 4. Стили для блочных элементов Блочный элемент – это, например, абзац, таблица. Для них может быть указаны отступы между границей элемента и внешними объектами Это значение “margin” лучше margin указывать в пикселях
- 5. Преимущества стилей Позволяют разделить содержимое (контент) и его оформление (размеры и тип шрифта, цвета, фоновые рисунки и т.д.) Страницы получают единое оформление - это создает преемственность между страницами и улучшают его восприятие в целом
- 6. Преимущества стилей (продолжение) Централизованное хранение. Стили, как правило, хранятся в одном или нескольких специальных файлах *.CSS - ссылка на них указывается во всех документах сайта. Расширенные возможности. В отличие от HTML стили имеют гораздо больше возможностей по оформлению элементов WEB-страниц. Рамки, цвета, фоновые картинки – все теперь задаѐтся в CSS файле
- 7. Преимущества стилей (продолжение2) Быстрая работа. При хранении стилей в отдельном файле, он кэшируется (т.е. сохраняется на диске у посетителя) и, при повторном обращении к нему, извлекается из кеша браузера. Уменьшается размер кода и снижается время загрузки страниц
- 8. Способы добавления стилей на веб-страницу Самый распространенный способ - таблица связанных стилей. В этом случае стилей располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <LINK>. Данный тег помещается в контейнер <HEAD>, как показано в примере Подключение таблицы связанных стилей <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> Относительная ссылка <link rel="stylesheet" type="text/css" href="mysite.css"> <link rel="stylesheet" type="text/css" href="http://www.htmlbook.ru/main.css"> </head> Абсолютная ссылка <body> <h1>Заголовок</h1> <p>Текст</p> </body> </html>
- 9. Что собой представляет CSS Файл CSS – текстовый файл (как и HTML)
- 10. Dreamweaver и стили Вся работа по созданию стилей мы будем вести с помощью панели (палитры) CSS Style (Shift-F11)
- 11. В заключение… CSS – очень удобная, мощная и гибкая технология форматирования HTML – страниц Сегодня практически ни один сайт не обходится без ее использования (включая сайты построенные на CMS)