Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

17. основы css (cascading style sheets)

1,028 views

Published on

Для чего придумана технология CSS

Published in: Design
  • Be the first to comment

  • Be the first to like this

17. основы css (cascading style sheets)

  1. 1. CSS (Cascading Style Sheets) каскадные таблицы стилей
  2. 2. Сравните…  «голый» HTML  «одежда» из CSS
  3. 3. Определение стиля  Стиль - это набор параметров форматирования, который применяется к элементам веб-страницы. Для текста можно указать:  Гарнитуру - название шрифта  Начертание - нормальное, жирное, курсив, подчеркнутое  Кегль – размер шрифта  Цвет шрифта… 2 …верхний индекс E=MC или нижний индекс Н О и другие… 2
  4. 4. Стили для блочных элементов  Блочный элемент – это, например, абзац, таблица.  Для них может быть указаны отступы между границей элемента и внешними объектами Это значение “margin” лучше margin указывать в пикселях
  5. 5. Преимущества стилей Позволяют разделить содержимое (контент) и его оформление (размеры и тип шрифта, цвета, фоновые рисунки и т.д.) Страницы получают единое оформление - это создает преемственность между страницами и улучшают его восприятие в целом
  6. 6. Преимущества стилей (продолжение) Централизованное хранение. Стили, как правило, хранятся в одном или нескольких специальных файлах *.CSS -ссылка на них указывается во всех документах сайта. Расширенные возможности. В отличие от HTML стили имеют гораздо больше возможностей по оформлению элементов WEB-страниц. Рамки, цвета, фоновые картинки – все теперь задаѐтся в CSS файле
  7. 7. Преимущества стилей (продолжение2)  Быстрая работа. При хранении стилей в отдельном файле, он кэшируется (т.е. сохраняется на диске у посетителя) и, при повторном обращении к нему, извлекается из кеша браузера.  Уменьшается размер кода и снижается время загрузки страниц
  8. 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. 9. Что собой представляет CSS Файл CSS – текстовый файл (как и HTML)
  10. 10. Dreamweaver и стили Вся работа по созданию стилей мы будем вести с помощью панели (палитры) CSS Style (Shift-F11)
  11. 11. В заключение…  CSS – очень удобная, мощная и гибкая технология форматирования HTML – страниц  Сегодня практически ни один сайт не обходится без ее использования (включая сайты построенные на CMS)

×