Содержание

Веб таблицы стилей

Веб таблицы стилей

Языки

Это перевод. Здесь могут содержаться ошибки или страница может быть устаревшей по отношению к Английской версии. Переводчик: Кирилл Топольян

“Надеюсь, что будущие веб-инновации будут имитировать пример, установленный Веб Консорциумом в их работе над CSS”

— Якоб Нильсен

Что нового?

Смотрите разделы “что нового?” в CSS, XSL и Электронном издании.

Что такое таблицы стилей?

Таблицы стилей описывают как документы представлены на экранах, при печати или, возможно, как они произносятся. W3C активно пропагандирует использование таблиц стилей в вебе с того времени как Консорциум был основан в 1994 году. Деятельность по стилям принесла несколько Рекомендаций W3C (CSS1, CSS2, XPath, XSLT). CSS особенно широко реализован в браузерах.

С помощью добавления таблиц стилей к структурированным документам в вебе (например HTML), авторы и читатели могут влиять на вид документов без ущерба независимости устройства или добавления новых HTML тегов.

Наиболее простой путь начать экспериментировать с таблицами стилей, это найти браузеры которые поддерживают CSS. Обсуждения таблиц стилей ведутся на почтовом листе [email protected] и comp.­infosystems.­www.­authoring.­stylesheets.

Деятельность Стилей W3C также развивает XSL, который содержит комбинацию XSLT и “Formatting Objects” (XSL-FO).

Почему два языка таблиц стилей?

Интересуетесь какой выбрать? Читайте «CSS & XSL»

Тот факт что W3C разработали XSL в дополнение к CSS вносит некоторую путаницу. Зачем разрабатывать второй язык таблиц стилей, если реализаторы даже не закончили первый? Ответ может быть найдет в таблице ниже:

CSSXSL
Может использоваться с HTML?данет
Может использоваться с XML?дада
Язык трансформации?нетда
СинтаксисCSSXML

Уникальные особенности в том, что CSS может использоваться для стилей HTML и XML документов.

XSL, с другой стороны, способен преобразовывать документы. Например, XSL может быть использован для трансформации данных XML в документы HTML/CSS на веб-сервере. Таким образом, два языка дополняют друг друга и могут использоваться вместе.

Оба языка могут использоваться для стилизации XML документов.

CSS и XSL используют ту же базовую модель форматирования и поэтому дизайнеры имеют доступ к тем же возможностям форматирования в обоих языках. W3C будет упорно работать чтобы обеспечить интероперабельность реализаций модели форматирования.

Доступна заметка W3C о «Использовании XSL и CSS вместе».

Материалы

Если вы новичок в этой теме, вы можете начать с чтения некоторых материалов о таблицах стилей:

  • Эффективное использование Таблиц стилей Якоба Нильсена (в: Alertbox, июль 1997), Также рекомендуем: его книга Дизайн веб-юзабилити: практика упрощения (New Riders, 2000).
  • 2000-06-02 Коснитесь мощи пользовательских таблиц стилей Mozilla, статья Эндрю Вулдриджа в O’Reilly MozillaZine показывает почему таблицы стилей на стороне клиента так важны.
  • XML Веб-страницы с Mozilla Симона Лорана, туториал о стилизации XML.

Смотрите CSS и XSL страницы для большего количества (и большей свежести) статей.

CSS

Информация о кнопках внизу страницы доступна на странице кнопок и на странице CSS валидатора.

Каскадные таблицы стилей (CSS) это механизм таблиц стилей который был специально разработан навстречу нуждам веб-дизайнеров и пользователей.

  • Как я могу узнать больше о CSS?
  • Какие браузеры поддерживают CSS? И какие возможности они поддерживают?
  • Какие средства разработки поддерживают CSS?
  • Где находятся спецификации CSS?
  • 17 декабря 2016, CSS было 20 лет!

XSL

Рабочая группа W3C по XSL разработала eXtensible Style Language. (По состоянию на 2016 год, Рабочая группа не активна.) XSL основывается на DSSSL и CSS, и в первую очередь ориентирован на высоко структурированные XML данные, которые, к примеру, нуждаются в упорядовачивании элементов перед показом. Для более подробной информации о XSL смотрите ресурсную страницу W3C XSL.

Электронное издание

Группа деятельности и интереса Электронного издания смотрит на то как веб-технологии могут быть улучшены и использованы в издательстве. XSL и CSS играют большую роль, наряду с другими технологиями, такими как XML, SVG и RDF.

DSSSL

DSSSL является трансформатором дерева документа и языком стилей с множеством приверженцев в сообществе SGML. Материалы о DSSSL в интернете:

  • Спецификация Document Style Semantics and Specification Language (DSSSL) доступна в сжатом виде.
  • DSSSList в DSSSL Users’ почтовом листе.
  • Движок DSSSL Jade is Джеймса Кларка.

CSS-DOM и SAC

Файл CSS может быть создан и редактирован “вручную,” например текстовым редактором, но вы также можете написать программу на ECMAscript, Java или другом языке, которая манипулирует таблицами стилей. Фактически это так распространенно, что уже доступны программные библиотеки с полезным функционалом. Чтобы помочь портировать такие программы и библиотеки на другие компьютерные платформы, W3C разработали спецификацию под названием

CSS-DOM, которая определяет набор функций которые все такие библиотеки должны предоставлять.

CSS Document Object Model это API (Abstract Programming Interface или интерфейс программирования приложений) для манипуляции CSS (и в определенной степени другими языками стилей) внутри программы. API это спецификация программной библиотеки. Вы можете увидеть его в руководстве: он описывает функции и их параметры, но не содержит фактический код.

Есть несколько доступных CSS-DOM библиотек, для разных платформ. Многие из них бесплатны. Многие браузеры имеют встроенную CSS-DOM библиотеку, для использования программами ECMAScript.

SAC (Simple API для CSS) является дополнением к CSS-DOM. CSS-DOM содержит функции для манипулирования таблицами стилей после того как они были загружены в память; функции определенные SAC помогают в

парсинге таблиц стилей, например при переводе таблицы стилей из файла в память.

CSS-DOM является Рекомендацией W3C. SAC это проект в стадии разработки. Некоторые программы (кроме браузеров) перечислены на странице обзора CSS.

Конференции, семинары, исследования

Смотрите также:

  • Календарь W3C [только участникам]
  • Новостная группа в юзнете: news. announce. conferences

Команда W3C и представители членов W3C часто проводят презентации.

Динамический HTML

Динамический HTML это термин используемый для описания страниц HTML с динамическим контентом.

CSS это один из трех компонентов в динамичном HTML; другие два это сам HTML и JavaScript (который стандартизирован под названием EcmaScript). Три компонента склеены вместе с помощью DOM, объектной модели документа.

Полезные ресурсы

  • Страницы DMOZ (Open Directory Project) о XML и таблицах стилей и о CSS.
  • Что не так с элементом <FONT>?
  • <FONT FACE> считается вредным [с помощью web.archive.org]
  • W3C хостит [email protected] лист писем о таблицах стилей. Не стесняйтесь добавить себя или посмотреть архив.
  • Балканизация Сети Дэвида Зигеля (1995–1996)
  • Отдельная страница о исторических предложениях по таблицам стилей также доступна.
  • История CSS описана в главе 20 книги Каскадные таблицы стилей, дизайн для Веба, авторов Håkon Wium Lie и Берта Боса (3rd ed., 2005, Addison Wesley, ISBN 0-321-19312-1)
Bert Bos, style activity lead
Copyright © 1994–2022 W3C® Privacy policy

Создано 22 July 1999.
Последнее обновление Чт 31 мар 2022 19:06:53

Языки

  • Afrikaans
  • العربية (Arabic)
  • Azərbaycan (Azerbaijani)
  • Български (Bulgarian)
  • বাংলা (Bengali)
  • Català (Catalan)
  • Dansk (Danish)
  • Deutsch (German)
  • Ελληνικά (Greek)
  • English
  • Español (Spanish)
  • Eesti (Estonian)
  • فارسی
  • Suomi (Finnish)
  • Français (French)
  • עברית (Hebrew)
  • हिन्दी (Hindi)
  • Hrvatski (Croatian)
  • Magyar (Hungarian)
  • Bahasa Indonesia (Indonesian)
  • Íslenska (Icelandic)
  • Italiano (Italian)
  • 日本語 (Japanese)
  • ქართული (Georgian)
  • Қазақша (Kazakh)
  • 한국어 (Korean)
  • Lietuvių (Lithuanian)
  • Norsk (Norwegian)
  • नेपाली (Nepalese)
  • Nederlands (Dutch)
  • Português (Portuguese)
  • Română (Romanian)
  • Русский (Russian)
  • Slovenčina (Slovak)
  • Српски (Serbian)
  • Srpski (Serbian)
  • ไทย (Thai)
  • Tagalog
  • татарча (Tatar)
  • Українська (Ukrainian)
  • Ўзбек (Uzbek)
  • Tiếng Việt (Vietnamese)
  • 简体中文 (Chinese simplified)
  • 繁體中文 (Traditional Chinese)

О переводах

How To или как сделать CSS стили уроки для начинающих академия

❮ Назад Дальше ❯

Когда обозреватель читает таблицу стилей, он форматирует HTML-документ в соответствии с информацией в таблице стилей.

Три способа вставки CSS

Существует три способа вставки таблицы стилей:

  • Внешняя таблица стилей
  • Внутренняя таблица стилей
  • Встроенный стиль

Внешняя таблица стилей

С помощью Внешняя таблица стилей, вы можете изменить внешний вид всего веб-сайта, изменив только один файл!

Каждая страница должна содержать ссылку на внешний файл таблицы стилей внутри элемента <Link>. Элемент <Link> попадает внутрь <head> раздела:

Пример

<head>
<link rel=»stylesheet» type=»text/css» href=»mystyle.css»>
</head>

Внешняя таблица стилей может быть написана в любом текстовом редакторе. Файл не должен содержать HTML-тегов. Файл таблицы стилей должен быть сохранен с расширением. CSS.

Вот как выглядит «myStyle. CSS»:

body {
    background-color: lightblue;
}

h2 {
    color: navy;
    margin-left: 20px;
}

Примечание: Не добавляйте пробел между значением свойства и единицей измерения (например, margin-left: 20 px; ). Правильный путь:margin-left: 20px;

Внутренняя таблица стилей

Внутренняя таблица стилей может использоваться, если одна отдельная страница имеет уникальный стиль.

Внутренние стили определяются в элементе <Style> внутри <head> раздела HTML-страницы:

Пример

<head>
<style>
body {
    background-color: linen;
}

h2 {
    color: maroon;
    margin-left: 40px;
}
</style>
</head>

Встроенные стили

Встроенный стиль может использоваться для применения уникального стиля для одного элемента.

Чтобы использовать встроенные стили, добавьте атрибут style к соответствующему элементу. Teh атрибут style может содержать любое свойство CSS.

В приведенном ниже примере показано, как изменить цвет и левое поле элемента <h2>:

Пример

<h2>This is a heading</h2>

Совет: Встроенный стиль теряет многие преимущества таблицы стилей (путем смешивания контент с презентацией). Используйте этот метод экономно.

Несколько таблиц стилей

Если некоторые свойства были определены для одного и того же селектора (элемента) в разных таблицах стилей, будет использовано значение из последней таблицы стилей чтения.

Примере

Предположим, что внешняя таблица стилей имеет следующий стиль для элемента <h2>:

h2 {
    color: navy;
}

Затем предположим, что внутренняя таблица стилей также имеет следующий стиль для элемента <h2>:

h2 {
    color: orange;   
}

Если внутренний стиль определен после ссылки на внешнюю таблицу стилей, элементы <h2> будут «оранжевым»:

Пример

<head>
<link rel=»stylesheet» type=»text/css» href=»mystyle.css»>
<style>
h2 {
    color: orange;
}
</style>
</head>

Однако если внутренний стиль определен перед ссылкой на внешнюю таблицу стилей, элементы <h2> будут «navy»:

Пример

<head>
<style>
h2 {
    color: orange;
}
</style>
<link rel=»stylesheet» type=»text/css» href=»mystyle. css»>
</head>

Каскадный порядок

Какой стиль будет использоваться при наличии более одного стиля, заданного для элемента HTML?

Вообще говоря, мы можем сказать, что все стили будут «Каскад» в новый «виртуальный» стиль лист по следующим правилам, где номер один имеет наивысший приоритет:

  1. Встроенный стиль (внутри элемента HTML)
  2. Внешние и внутренние таблицы стилей (в разделе head)
  3. Браузер по умолчанию

Таким образом, встроенный стиль (внутри определенного элемента HTML) имеет наивысший приоритет, что означает, что он будет переопределять стиль, определенный внутри тега <head>, или в Внешняя таблица стилей или значение по умолчанию обозревателя.

❮ Назад Дальше ❯

таблиц стилей | Документация PyCharm

С помощью PyCharm вы можете писать определения стилей в CSS, а также на различных языках, которые компилируются в него, таких как Sass, Less, SCSS или Stylus.

Вы также можете искать документацию по таблицам стилей, создавать и перемещать наборы правил, вводить переменные и многое другое.

Перед началом работы

Убедитесь, что в настройках включен плагин CSS. Нажмите Ctrl+Alt+S , чтобы открыть настройки IDE и выбрать Плагины. Перейдите на вкладку «Установлено». В поле поиска введите CSS. Дополнительные сведения о подключаемых модулях см. в разделе Управление подключаемыми модулями.

Автодополнение кода

PyCharm обеспечивает автодополнение кода для свойств, их значений, селекторов, переменных и примесей.

Полные классы таблицы стилей

Автодополнение для классов и идентификаторов CSS, SCSS, Less и Sass доступно в HTML-файлах, в различных типах шаблонов (например, в Angular или Vue. Space»> Ctrl+Пробел .

Полные классы таблицы стилей из внешних библиотек

С помощью PyCharm вы также можете получить завершение имен классов из Twitter Bootstrap или других библиотек CSS, которые связаны из CDN в файле HTML, без добавления этих библиотек в зависимости вашего проекта.

  1. Откройте файл HTML со ссылкой CDN на внешнюю библиотеку CSS. PyCharm выделяет ссылку.

  2. Чтобы включить завершение для библиотеки, нажмите Alt+Enter на ссылке и выберите Загрузить библиотеку из списка. Либо наведите указатель мыши на ссылку и нажмите «Загрузить библиотеку».

Библиотека добавлена ​​в список библиотек JavaScript в меню Настройки | Языки и платформы | JavaScript | Страница «Библиотеки». U» data-primary_sublime_text=»Alt+F7″ data-primary_emacs=»Alt+F7″ data-secondary_intellij_idea_classic_macos=»⌥ F7″> Alt+F7 . Дополнительные сведения см. в разделе Поиск использований в проекте.

  • Чтобы перейти от использования символа таблицы стилей к его определению, нажмите Ctrl+B . Переход к определению доступен для классов, идентификаторов, селекторов, включая вложенные селекторы и селекторы с амперсандом и — а также для переменных и примесей.

    Узнайте больше из Перейти к объявлению.

    • Поиск документации

    Для свойств и псевдоэлементов PyCharm может показать вам сводку из соответствующей статьи MDN. Эта сводка отображается во всплывающем окне «Документация», в котором отображается краткое описание свойства и его значений, а также информация о его совместимости с различными браузерами. J»> Ctrl+Q или выберите View | Быстрый поиск документации из главного меню.

  • Когда вы наводите указатель мыши на свойство, PyCharm немедленно отображает ссылку на него во всплывающем окне «Документация».

    Вы можете отключить это поведение или настроить всплывающее окно так, чтобы оно отображалось быстрее или медленнее, см. раздел Настройка поведения всплывающего окна документации ниже.

    • Чтобы отключить автоматическое отображение документации при наведении указателя мыши на символы кода, щелкните всплывающее окно и отключите параметр «Показывать при перемещении мыши».

    • Чтобы всплывающее окно с документацией отображалось быстрее или медленнее, откройте диалоговое окно «Настройки» ( Ctrl+Alt+S ), перейдите в «Редактор | Общие | Завершение кода, затем установите флажок Показать всплывающее окно документации и укажите время задержки.

    Откройте документацию MDN в браузере

    Форматирование

    С помощью встроенного средства форматирования PyCharm вы можете переформатировать фрагменты кода таблицы стилей, а также целые файлы и папки в соответствии с требованиями к стилю кода для конкретного языка. Средство форматирования также автоматически активируется при создании или рефакторинге кода.

    • Чтобы настроить форматирование для языка таблицы стилей, откройте диалоговое окно «Настройки» ( Ctrl+Alt+S ), перейдите в «Редактор | стиль кода | Таблицы стилей | <ваш язык таблицы стилей> и настройте языковые параметры табуляции и отступов, пробелов, обтекания и фигурных скобок, жестких и мягких полей и т.  д.

      В контексте CSS, SCSS и Less PyCharm по умолчанию использует двойные кавычки для сгенерированных строковых литералов в операторах import и URL-адресах. Чтобы использовать одинарные кавычки, откройте вкладку «Другое» и выберите «Одинарная» в списке «Кавычки».

      Чтобы применить выбранный стиль ко всему файлу после переформатирования, установите флажок Применять к формату под списком.

      В настоящее время изменение конфигурации кавычек не влияет на введенные таблицы стилей и код CSS внутри тегов