Wiki-учебник по веб-технологиям: TextSearch ...

Главная | |

Искать: 
 

Результаты поиска фразы "CSS":
  1. CSS/ПоддержкаБраузерами
    ==Поддержка CSS браузерами ==
    Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на Gecko (Mozilla Firefox и др.) и ~WebKit (Arora, Google Chrome, Safari), а также браузер Opera. К сожалению, самый распространенный на данный момент браузер Internet Explorer 6 поддерживает CSS далеко не полностью. Вышедший спустя 7 лет после своего предшественника Internet Explorer 7 хотя и значительно улучшил уровень поддержки CSS, но всё ещё содержит значительное количество ошибок. В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично - CSS 3.
    Для проверки поддержки браузером различных частей стандарта CSS был разработан тест «Acid». Его вторая версия называется «~Acid2», а третья, соответственно, «~Acid3»
    В стандартах CSS от консорциума W3C используется модель, в которой свойство **width** определяет ширину содержимого блока, не включая в нее отступы и рамки. Ранние версии Internet Explorer (4 и 5), реализовали собственную модель, в которой width определяет расстояние между рамками блока, включая отступы (**padding**) и рамки (**border**). Кроме Internet Explorer 5 эту модель так же понимают браузеры Netscape 4 и Opera 7. Поддержка стандартной модели W3C появилась в IE только в шестой версии.
    В разрабатываемом стандарте CSS3 для решения этой проблемы введено свойство **box-sizing**, со значениями **content-box** для указания на использование стандартной модели W3C и **border-box** для использования модели IE 5.
    === CSS-фильтры ===
    Различия в реализации CSS различными браузерами заставляют веб-разработчиков искать решения, как заставить все браузеры отображать страницу одинаково. CSS-фильтры (также часто называемые CSS-хаками) позволяют выборочно применять (или не применять) стили к различным элементам. Например, известно, что Internet Explorer 6 применяет правила, использующие селекторы вида ** * html //селектор//** (фильтр, известный как «star html bug»). Тогда, чтобы заставить и браузеры, использующие блоковую модель W3C и IE, работающего в Quirks mode со своей блоковой моделью, отображать блок **#someblock** шириной в 100 пикселей и внутренними отступами в 10 пикселей можно написать такой код:
    Подробнее о том, как достигается ((/CSS/КроссбраузерностьCSSХаки кроссбраузерность CSS -- тут)).
  2. CSS
    <[Преподаватели и наставники, ведущие обучение CSS, могут предлагать свои варианты организации последовательности изучения CSS в комментариях к данному разделу учебника. Также свои замечания по организации учебника могут высказывать читатели, ведущие самостоятельное изучение CSS. Чтобы самостоятельное изчение CSS было эффективным, необходимо привлекать методический опыт, который дает обучение CSS. Учебник для начинающих должен способствовать быстрому старту разработчика.
    ==CSS. Каскадные таблицы стилей==
    Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS).
    Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе
    Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят несколько правил одновременно.
    ===Технология CSS: общий взгляд==
    Название "Каскадные таблицы стилей" происходит от английского Cascading Style Sheets, аббревиатурой которого является CSS. Впервые стили появляются в HTML 4.0 для определения представления элементов HTML и решения проблем представления документов. Стили обычно хранятся в таблицах стилей: могут быть определены как внутри HTML-документа, так и в специальном файле с расширением css. Используя отдельные файлы для хранения таблиц стилей, можно существенно сократить объем работы. Также можно определить несколько стилей, которые, подчиняясь существующим правилам, будут каскадно задавать один определенный стиль.
    **Пример использования CSS**
    С помощью CSS документы HTML можно выводить, используя различные стили вывода.
    ===Введение в CSS==
    * ((!/ВерсииCSS Версии CSS))
    * ((!/ПодключениеCSS Подключение CSS))
    * ((!/Комментарии Комментарии CSS))
    * ((!/ПараметрыТекста Параметры текста в CSS))
    * ((!/ПараметрыФона Параметры фона в CSS))
    * ((!/КроссбраузерностьCSSХаки Кроссбраузерность CSS и CSS хаки))
    * ((!/РазделениеПоВидамНосителей Загрузка соответствующих CSS для разных устройств))
    ===CSS3 -- возможности, доступные прямо сейчас==
    Тут мы будем описывать с примерами возможности CSS3, поддерживаемые большинством современных браузеров и хаки позволяющие добиться единообразного отображения оформления также и в других браузерах, не поддерживающих CSS3.
    * ((CSS/ПоворотТекстаСредствамиCSS Поворот текста средствами CSS))
  3. CSS/Комментарии
    ===Комментарии CSS==
    Для пояснения кода и для последующего его редактирования используются комментарии, которые игнорируются браузерами. Комментарий CSS начинается символом "/*" и заканчивается символом "*/", как в примере ниже:
    %%(CSS)
  4. CSS/Стили
    Таким образом, необходимость разделения содержимого документа и его представления привела к созданию технологии CSS.
    Таблицы стилей определяют вывод элементов HTML (как, например, тег font и атрибут color в HTML 3.2). Как уже говорилось, каскадные таблицы стилей обычно хранятся во внешних файлах с расширением .css. Этот способ удобен тем, что позволяет изменить внешний вид и компоновку всех необходимых страниц в Web, редактируя только один, единственный документ CSS.
    Синтаксис CSS состоит из трех частей: селектора, свойства и значения:
    %%(CSS)
    %%(CSS)
    %%(CSS)
    %%(CSS)
    %%(CSS)
    %%(CSS)
    %%(CSS)
    %%(CSS)
    %%(CSS)
    %%(CSS)
    %%(CSS)
    %%(CSS)
    %%(CSS)
  5. CSS/ПараметрыФона
    ===Параметры фона в CSS: подробное рассмотрение==
    Как было показано ранее, параметры фона в CSS позволяют управлять цветом фона элемента, задавать в качестве фона изображение, повторять циклически фоновое изображение вертикально или горизонтально и позиционировать изображение на странице.
    (* здесь и далее число в столбце "W3C" указывает в какой спецификации CSS определен параметр (CSS1 или CSS2)).
    %%(CSS)
    %%(CSS)
    %%(CSS)
    %%(CSS)
    ||x-pos y-pos| Первое значение является горизонтальной координатой, второе значение — вертикальной. Верхний левый угол — 0 0. Единицами измерения могут быть пиксели (0px 0px) или любые другие единицы измерения CSS. Если определено только одно значение, то вторым значением подразумевается 50%. Можно смешивать % и эти координаты.||
    %%(CSS)
    %%(CSS)
    Параметры текста CSS позволяют управлять внешним видом текста. Можно изменять цвет текста, увеличивать или уменьшать интервал между символами, выравнивать текст, оформлять текст, делать отступ для первой строки текста и т.д.
    ((/CSS/Примеры Примеры))
  6. CSS/Примеры
  7. CSS/Литература
    http://www.w3.org/TR/CSS
  8. CSS/ПараметрыТекста
    ===Параметры текста в CSS: подробное рассмотрение==
    %%(CSS)
    %%(CSS)
    %%(CSS)
    %%(CSS)
    %%(CSS)
    %%(CSS)
    %%(CSS)
    %%(CSS)
    %%(CSS)
  9. CSS/ВерсииCSS
    ==Версии CSS: CSS1, CSS 2, CSS2.1, CSS3.0==
    В начале 90-х различные браузеры имели свои стили для отображения веб страниц. HTML развивался очень быстро и был способен удовлетворить все существовавшие на тот момент потребности по оформлению информации, поэтому CSS не получил тогда широкого признания.
    Термин "каскадные таблицы стилей" был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.
    В отличие от многих существовавших на тот момент языков стиля, CSS использует наследование от родителя к потомку, поэтому разработчик может определить разные стили, основываясь на уже определенных ранее стилях.
    В середине 90х Концорциум Всемирной Паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.
    === Уровень 1 (CSS1) ===
    ((http://www.w3.org/TR/CSS1 Рекомендация CSS1)) W3C принята 17 декабря 1996, откорректирована 11 января 1999.
    === Уровень 2 (CSS2) ===
    ((http://www.w3.org/TR/CSS2 Рекомендация CSS2)) W3C принята 12 мая 1998. Построена на CSS1 с сохранением обратной совместимости.
    ==== Уровень 2.1 (CSS2.1) ====
    ((http://www.w3.org/TR/CSS21 Рабочая версия)) W3C от 6 ноября 2006. Построена на CSS2, содержит исправления ошибок.
    === Уровень 3 (CSS3) ===
  10. CSS/КроссбраузерностьCSSХаки
    ==Кроссбраузерность CSS и CSS хаки==
    Когда CSS используется не только для оформления текста, но и для работы со слоями при бестабличной верстке, необходимо помнить, чт осовременные браузеры не одинаково трактуют такие важные параметры как margin -- внешний отсутп элемента, padding -- внутренний отступ элемента, а также параметры position -- положение, float -- обтекание текстом и ряд других.
    В основе этих различий в интерпретации браузерами CSS лежит неполное соотвествие браузеров Internet Explorer до версии 7 стандартам CSS, принятым W3C. Поэтому для успешной бестабличной верстки для более ранних версий IE, чем 7, требуется использовать ряд специальных конструкций, называемых **CSS хаки**. Важно также отметить, что и для других браузеров иногда случается необходимость использовать CSS хак.
    Рассмотрим возможное написание CSS, которое было бы интерпретировано только отдельными видами браузеров:
    ===CSS для IE 5, 5.5, 6, 7==
    =====Применение CSS для IE5==
    =====Применение CSS для IE5.5==
    =====Применение CSS для IE6==
    =====Применение CSS для IE5 и IE5.5 одновременно или для нескольких версий==
    Для наиболее точного отслеживания различий в обработке CSS разными версиями IE хорошо себя зарекомендовала бесплатная программа ((http://www.my-debugbar.com/wiki/IETester/HomePage IETester)), которая поддерживает все версии IE от 5 до 8. А для быстрого изменения праметров CSS в IE8 по нажатию F12 доступно средство разработчика, напоминающее ~FireBug в Mozilla Firefox.
    ====CSS хаки IE==
    Чтобы не загромождать HTML-код объявлением нескольких таблиц стилей или, если требуется сохранить единственный CSS-файл можно написать отдельные стили, которые будут работать только в IE. Причем, есть вариант как для IE6, так и для IE7.
    **Для IE7** используется CSS хак:
    ===CSS для Firefox==
    Также существуют специальные CSS хаки, позволяющие показывать стили только браузеру Firefox.
    Для быстрого изменения праметров CSS в Firefox по нажатию F12 доступно (требует предварительной установки) средство разработчика ((http://getfirebug.com/ Firebug)) -- является лучшим среди аналогов.
    ===CSS для Opera==
    Для быстрого изменения праметров CSS в браузере Opera также доступно средство разработчика. Для его открытия надо перейти в меню "Инструменты" -- > "Дополнительно" -- > "Средства разработки".
    ===((/CSS/РасширенныйСборникCSSХаков Расширенный сборник CSS хаков))==
  11. CSS/РазделениеПоВидамНосителей
    ==Задание разных CSS для отдельных видов носителей==
    Широкое развитие различных платформ и устройств заставляет разработчиков делать под них специальные версии сайтов, что достаточно трудоемко и проблематично. Вместе с тем, времена и потребности меняются, и создание сайта для различных устройств является неизбежным и необходимым звеном его развития. С учетом этого в CSS введено понятие типа носителя, когда стиль применяется только для определенного приспособления. В таблице перечислены некоторые основные типы носителей.
    В CSS для указания типа носителей применяются команды @import и @media, с помощью которых можно определить определенный стиль для элементов в зависимости от того, выводится документ на экран или на принтер.
    Просмотреть документ, у которого CSS установлен как тип print можно, если распечатать определенную страницу. Или пойти на хитрость и временно заменить слово print на screen, чтобы отобразить итог в браузере. Но тогда вы не увидите разных технологических штук, которые подстерегают вас при общении со специфическими настройками печати. Идеальным вариантом является печать в PDF или на картинку.
    Команда @media применяется в основном для формирования одного стилевого файла, который разбит на блоки по типу устройств. Иногда же имеет смысл создать несколько разных CSS-файлов — один для печати, другой для отображения в браузере — и подключать их к документу по мере необходимости. В подобном случае следует воспользоваться тегом с параметром media, значением которого выступают все те же типы, перечисленные в таблице выше.
    В следующем примере показано, как создавать ссылки на CSS-файлы, которые предназначены для разных типов носителей.
  12. CSS/ПодключениеCSS
    ==Подключение CSS==
    Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрены способы подключения CSS.
    Значения параметров тега — rel и type остаются неизменными, как приведено в данном примере. Параметр href задает путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.
    Как видно из данного примера, файл со стилем не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т.е. таким способом в полной мере реализуется принцип разделения содержимого и оформления сайта. Поэтому использование таблицы связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него.
    При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнера