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.

Css part1

476 views

Published on

  • Be the first to comment

Css part1

  1. 1. Cascading Style Sheets (каскадные таблицы стилей) — язык разметки, специально разработанный для описания внешнего вида, порядка, цвета и расположения элементов на сайте.
  2. 2. Таблицы стилей являются следствием дальнейшего развития HTML и дают нам возможность перейти на следующий уровень представления информации, так как они позволяют разделить смысловое содержимое странички (или сайта) и его оформление. Такая концепция соответствует объектно ориентированному программированию.
  3. 3. Преимущества:  Разграничение кода и оформления  Разное оформление для разных устройств Расширенные по сравнению с HTML способы оформления элементов   Ускорение загрузки сайта  Единое стилевое оформление множества документов
  4. 4. Недостатки:  Не поддерживается старыми версиями браузеров ( а так же не полная кроссбраузерность)  Необходимость иметь определенные начальные знания
  5. 5. Инструменты:  Блокнот  Adobe Dreamweaver  Microsoft FrontPage  Веб-ресурсы (http://colorzilla.com/gradient-editor/)  Rapid CSS Editor  Visual Studio
  6. 6. Параметры          Вид шрифта Форматирование абзаца Свойства блока Фон, границы, указатель мыши и тд.. Способ обрезки фонового изображения Свойство повтора фона Возможность создавать круглые рамки Отбрасывание тени Создание многоколоночного текста
  7. 7. Селекторы Для описания каждого класса используется следующая конструкция: selector{ attribute1: value; attribute2: value; ... attributei: value; }
  8. 8. Если один и тот же стиль необходимо применить к нескольким тегам, то записывается это через запятую следующим образом: Selector1, selector2, selector3{ attribute1: value; attribute2: value; ... attributei: value; } Например: h1, h2, h3{ color: red;}
  9. 9. Подключение Различают три типа подключения таблиц стилей на странице: 1. Подставляемые стили (in-line) 2. Описание в секции заголовка 3. Внешний файл
  10. 10. Первый тип Самый простой in-line, который встраивается непосредственно в тег. При этом подходе оформление действует в пределах одного тега.
  11. 11. Второй тип Определение в секции заголовка. Определение стилей происходит про помощи классов, которые представляют собой списки с определением всех необходимых параметров оформления. Его действие распространяется на всю страничку.
  12. 12. Третий тип И наконец, третий способ — вынести описания стилей во внешний файл. Диапазон его воздействия простирается на все файлы, в которые включено описание.
  13. 13. Why so serious Следует отметить, что стили могут переопределяться. Порядок переопределения следующий: 1. Отдельный файл 2. Секция заголовка 3. In-line Пример. Мы определили во внешнем файле, что текст в теге <p> должен быть красным. Но если в заголовке странички мы дополнительно укажем, что тот же текст в теге <p> должен быть написан синим цветом, то текст будет выведен как раз таки синим.
  14. 14. Правило !important Правило !important — это способ сделать правила, которые должны реагировать одинаково независимо о того, в какой части документа оно применяется. Например, нужно задать чтобы цвет ссылок в любой части документа был красным. Для этого в начале CSS-файла достаточно прописать: a { color: red !important;} Далее везде, где бы мы не хотели переопределить цвет ссылок, он все равно останется красным, даже если попытаться переопределить его в самом теге. <a href="" style="color: blue;">ссылка</a>
  15. 15. Эт-правила (@) Импортирование: @import присоединяет другую таблицу стилей. Медиа-типы: @media применит содержимое к определенному типу медиа, например, к печати. Кодировка: @charset просто устанавливает кодировку внешней таблицы стилей. Правило указывается в верхней части таблицы CSS и выглядит примерно так: @charset "windows-1251"; Шрифты: @font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на компьютер пользователя. Страницы: @page определяет блок страницы. Благодаря этому правилу вы определяете размер и представление единой страницы.
  16. 16. Типы носителя Тип all Описание Все типы. Это значение используется по умолчанию. aural Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. braille Устройства, основанные на системе Брайля, которые предназначены для слепых людей. handheld print Наладонные компьютеры и аналогичные им аппараты. Печатающие устройства вроде принтера. projection Проектор. screen tv Экран монитора. Телевизор.
  17. 17. Валидация CSS Валидацией называется проверка CSS-кода на соответствие спецификации CSS2.1 или CSS3. http://jigsaw.w3.org/css-validator/
  18. 18. CSS-хаки CSS хаки они же - Вендорные префиксы, вендорные суффиксы и вендорные окончания это приставки, используемые производителями (вендорами) браузеров для экспериментальных, еще не принятых в стандарт, CSS-свойств. border-radius: 15px 0 15px 0; /* Валидное свойство CSS 3 скругление углов, значение(цифра) задаёт радиус скругления*/ -moz-border-radius:15px 0 15px 0; /* Firefox */ -webkit-border-radius:15px 0 15px 0; /* Safari, Chrome */ -khtml-border-radius:15px 0 15px 0; /* Konqueror */
  19. 19. Примеры хаков Вендорный префикс Производитель Браузер Браузерный движок -o-, -op-, -xv- Opera Software Opera Presto -moz- проект Mozilla Firefox, SeaMonkey, Camino и др. Gecko -ms- Microsoft Internet Explorer 8 Trident -webkit- Apple Safari 3+, Google Chrome и др. WebKit -icab- Apple iCab WebKit
  20. 20. Единицы измерения Относительные Абсолютные Единица Описание Единица Описание em высота текущего элемента in дюйм (= 2,54 cm) cm сантиметр ex высота символа х mm миллиметр px пиксель % процент pt пункт (=1/72 in) pc пика (=12 pt)
  21. 21. The end

×