Вообще говоря, таблица стилей — это набор правил форматирования, которые управляют внешним видом веб-контента. CSS можно использовать на ваших страницах тремя разными способами:
Встроенный: одноразовый стиль, записанный в код.
Встроенное: таблица стилей, которая управляет всеми элементами на странице.
Внешний: таблица стилей, которая управляет элементами на многих страницах.
Фактически, многие сайты при необходимости используют комбинацию этих трех методов.
При работе с CSS важно учитывать тот факт, что разные браузеры и разные версии одного и того же браузера анализируют CSS по-разному. Помимо различий в веб-браузерах, вам также необходимо понимать, что существует множество других браузеров, таких как браузеры для слуховых аппаратов, браузеры для телевизоров и портативные устройства, такие как Palm Pilot и TTY (телетайп, удаленная пишущая машинка).
Каковы лучшие практики?
Большинство технологий имеют свои собственные согласованные стандарты. CSS не является исключением. Хотя не весь CSS, существующий в сети, стандартизирован, полезно использовать CSS в соответствии с существующими стандартами. В общем, разработчикам следует максимально отделять контент от отчетов. Преимущества этого заключаются в следующем:
1. Увеличить жизнь сайта
Нестандартные таблицы стилей могут быть удобны в данный момент, но с выходом новых версий браузеров, скорее всего, возникнут проблемы совместимости. В то время постраничное изменение сайта станет очень трудоемкой задачей, а также сделает бессмысленным использование CSS.
2. Сделайте свой сайт доступным для всех пользователей и браузеров.
Некоторые местные органы власти постановили, что веб-сайты должны быть доступны для людей с ограниченными возможностями. Устройства просмотра, предназначенные для людей с ограниченными возможностями, такие как слуховые браузеры, предъявляют чрезвычайно строгие нормативные требования CSS.
3. Упростите обновление и обслуживание сайта.
При правильном использовании CSS позволяет быстро применить изменения, внесенные на одной странице, ко всем страницам.
Первый выбор, который вам нужно сделать, — это какую таблицу стилей использовать. Что касается лучших практик, вот анализ различных таблиц стилей:
Проще говоря, встроенный CSS; вам следует избегать его использования. Помимо других недостатков, использование встроенного CSS означает, что вы не можете воспользоваться реальным преимуществом CSS, а именно тем, что вы не отделяете контент от форматирования. DW использует встроенный CSS в основном для позиционирования элементов страницы (эти элементы называются «слоями» в пользовательском интерфейсе DW) или для использования определенного эффекта DHTML, который требует использования встроенного стиля Javascript для изменения свойств объекта.
Встроенный CSS: он также не идеален, поскольку влияет только на текущую страницу. Если в процессе обновления страница будет потеряна, стиль сайта будет несовместимым. Кроме того, когда пользователи просматривают ваш сайт, для каждой страницы необходимо загрузить информацию о таблице стилей;
Внешний CSS: это ваш первый выбор. Внешний CSS позволяет всем страницам, подключенным к нему, сохранять единообразный внешний вид и стиль; изменять его один раз и легко обновлять все связанные страницы, уменьшая размер страницы и ускоряя ее просмотр; Другие лучшие практики обсуждаются ниже при анализе конкретных функций CSS.
Создать таблицу стилей CSS в DW
При создании таблицы стилей CSS в DW (Текст 》Стиль CSS 》Новая таблица стилей) во всплывающем диалоговом окне у вас есть два варианта: «Новый файл таблицы стилей» и «Только для текущей страницы» («Только для этого документа»). Выберите «Новый файл таблицы стилей», и вы начнете процесс создания внешнего CSS. Этот вариант требует, чтобы вы назвали таблицу стилей и выбрали место для ее сохранения перед фактическим процессом создания; другой вариант, «Только этот документ», запишет соответствующий код непосредственно на страницу.
Вы также можете выбрать существующую таблицу стилей для редактирования или добавления новых определений в диалоговом окне «Новый стиль».
Должен ли он быть подключен к внешнему CSS или импортирован?
После создания внешней таблицы стилей ее необходимо прикрепить к каждой странице (или шаблону). Для этого нажмите кнопку «Прикрепить таблицу стилей» на панели CSS. Откроется диалоговое окно «Ссылка на внешнюю таблицу стилей», в котором вы сможете перейти к целевой таблице стилей. Найдя имя, вы можете выбрать ссылку или импорт. эту внешнюю таблицу стилей.
Соединение — наиболее часто используемый метод. Выберите «ссылка», чтобы подключить таблицу стилей к странице. На вашу страницу будет добавлена следующая разметка:
Вариант подключения поддерживается всеми браузерами, поддерживающими CSS. Если вы хотите, чтобы некоторые старые браузеры (например, Netscape 4.x) «видели» эту таблицу стилей, вам нужно использовать следующий метод.
Если вы выберете опцию «Импортировать», будут использованы следующие теги:
NetSscape4 полностью игнорирует импортированный CSS и интерпретирует страницу в соответствии с подключенным CSS. Таким образом, мы можем использовать новые возможности CSS, не беспокоясь о проблемах совместимости браузера.
Инспектор свойств CSS
Вы можете легко переключиться в режим CSS в инспекторе свойств DW. По умолчанию инспектор свойств отображает теги шрифтов в режиме необработанного HTML. Нажмите маленькую букву «А» рядом с раскрывающимся меню «Шрифты», и вместо списка тегов шрифтов вы увидите доступные на данный момент таблицы стилей CSS. В то же время вы можете легко переключиться обратно в режим HTML.
Готовые таблицы стилей CSS.
Одной из замечательных особенностей CSS в DW является то, что он включает готовые таблицы стилей CSS. Новые пользователи CSS могут сначала попробовать его. Выберите «Файл» > «Новый», выберите «Таблицы стилей CSS» во всплывающем диалоговом окне «Новый документ», и в поле справа появится список всех доступных CSS. Чтобы попрактиковаться в том, что мы называем лучшими практиками, выберите один из них с пометкой «Доступно».
Сохраните документ в папке сайта, а затем добавьте CSS в документ, используя метод, описанный выше.
Таблицы стилей времени разработки
Эта функция DW позволяет применять таблицы стилей к страницам при работе в режиме дизайна, что дает вам более интуитивное представление о внешнем виде сайта. Таблицы стилей времени разработки не будут отображаться на сайте. Эта функция очень полезна с точки зрения наших лучших практик. Если вы используете методы импорта и объединения (как описано выше), прикрепление таблицы стилей времени разработки позволит вам разработать сайт с использованием любого из них. Вы можете легко перейти на другую таблицу стилей, если хотите увидеть, как страница будет выглядеть под другой таблицей стилей.
Таблицы стилей времени разработки также полезны для разработчиков, которые хотят применять CSS на стороне сервера (например, ASP, PHP или ColdFusion) или на стороне клиента с помощью Javascript. Таблицы стилей на стороне сервера — это еще один способ справиться с плохой поддержкой CSS в клиентских браузерах. Но в предыдущих версиях DW этот метод не позволял увидеть реальный эффект CSS на этапе проектирования. Таблицы стилей времени разработки позволяют просматривать эффекты таблиц стилей в реальном времени, поэтому вы можете работать с визуальным интерфейсом в DW. Еще одним преимуществом является то, что при загрузке файлов сайта вам больше не придется просматривать весь сайт в поисках избыточных таблиц стилей.
проверять
Независимо от того, создаете ли вы собственную таблицу стилей или редактируете существующую, проверка гарантирует, что вы не будете использовать нестандартные теги или неверный код неправильно. Сам DW не включает валидатор CSS, вы можете использовать службу проверки, предоставляемую сайтом W3C.
В DW вы можете проверять теги HTML или DHTML («Файл» > «Проверить страницу» > «Проверить разметку» (для HTML) или «Файл» > «Проверить страницу» > «Проверить как XML для XHTML»). DW предоставляет множество вспомогательных инструментов при разработке сайтов на основе CSS. С помощью MW MX в сочетании с хорошим пониманием CSS вы сможете разработать сайт, который выдержит испытание временем.