worldwide open-source software - software:development:web:docs:web

css

anonymous@undisclosed.example.com (Anonymous) — Sun, 17 Mar 2024 12:14:29 +0000

CSS: каскадные таблицы стилей

Каскадные таблицы стилей ( CSS ) — это язык таблиц стилей, используемый для описания представления документа, написанного на HTML или XML (включая диалекты XML, такие как SVG , MathML или XHTML ). CSS описывает, как элементы должны отображаться на экране, на бумаге, в речи или на других носителях.

CSS является одним из основных языков открытой сети и стандартизирован для веб-браузеров в соответствии со спецификациями W3C . Ранее разработка различных частей спецификации CSS велась синхронно, что позволяло использовать версии последних рекомендаций. Возможно, вы слышали о CSS1, CSS2.1 или даже CSS3. Никогда не будет CSS3 или CSS4; скорее, теперь все это CSS без номера версии.

После CSS 2.1 объем спецификации значительно увеличился, и прогресс в разных модулях CSS стал настолько различаться, что стало более эффективно разрабатывать и выпускать рекомендации отдельно для каждого модуля . Вместо проверки версий спецификации CSS W3C теперь периодически делает снимок последнего стабильного состояния спецификации CSS и прогресса отдельных модулей. CSS-модули теперь имеют номера версий или уровни, например, CSS Color Module Level 5 .

Ключевые ресурсы

Введение в CSS

Если вы новичок в веб-разработке, обязательно прочитайте нашу статью по основам CSS , чтобы узнать, что такое CSS и как его использовать.

Учебники по CSS

Наша область обучения CSS содержит множество учебных пособий, которые помогут вам перейти от начального уровня к профессиональному, охватывая все основы.

Справочник по CSS

Наш исчерпывающий справочник по CSS для опытных веб-разработчиков описывает каждое свойство и концепцию CSS.

Учебники

В нашей области обучения CSS есть несколько модулей, которые обучают CSS с нуля — никаких предварительных знаний не требуется.

CSS первые шаги

CSS (каскадные таблицы стилей) используются для оформления и компоновки веб-страниц — например, для изменения шрифта, цвета, размера и интервалов вашего контента, разделения его на несколько столбцов или добавления анимации и других декоративных функций. Этот модуль обеспечивает плавное начало вашего пути к мастерству CSS с основами того, как он работает, как выглядит синтаксис и как вы можете начать использовать его для добавления стилей в HTML.

строительные блоки CSS

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

Цель состоит в том, чтобы предоставить вам набор инструментов для грамотного написания CSS и помочь вам понять всю необходимую теорию, прежде чем переходить к более конкретным дисциплинам, таким как стилизация текста и разметка CSS .

CSS стиль текста

Ознакомившись с основами языка CSS, следующая тема CSS, на которой вы должны сосредоточиться, — это стилизация текста — одна из наиболее распространенных вещей, которые вы будете делать с помощью CSS. Здесь мы рассмотрим основы стиля текста, включая настройку шрифта, жирности, курсива, межстрочного и межбуквенного интервалов, тени и другие функции текста. Мы завершаем модуль, рассматривая применение пользовательских шрифтов к вашей странице, а также стилизацию списков и ссылок.

CSS макет

К этому моменту мы уже рассмотрели основы CSS, как стилизовать текст, как стилизовать и манипулировать блоками, внутри которых находится ваш контент. Теперь пришло время посмотреть, как разместить блоки в нужном месте по отношению к области просмотра и друг к другу. Мы рассмотрели необходимые предварительные условия, поэтому теперь мы можем углубиться в макет CSS, рассматривая различные настройки отображения, современные инструменты макета, такие как flexbox, сетка CSS и позиционирование, а также некоторые из устаревших методов, о которых вы, возможно, захотите узнать.

Используйте CSS для решения распространенных проблем

Этот модуль содержит ссылки на разделы контента, объясняющие, как использовать CSS для решения распространенных проблем при создании веб-страницы.

Ссылка

Справочник по CSS : этот исчерпывающий справочник для опытных веб-разработчиков описывает все свойства и концепции CSS.
Ключевые концепции CSS:
Синтаксис и формы языка
Специфичность , наследование и каскад
Единицы и значения CSS и функциональные обозначения
Блочная модель и коллапс маржи
Содержащий блок
Контексты стекирования и блочного форматирования
Исходные , вычисленные , используемые и фактические значения
Сокращенные свойства CSS
Гибкая компоновка блоков CSS
Макет сетки CSS
Селекторы CSS
Медиа-запросы
Анимация

Кулинарная книга

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

Инструменты для разработки CSS

Вы можете использовать службу проверки CSS W3C , чтобы проверить, действителен ли ваш CSS. Это бесценный инструмент отладки.
Инструменты разработчика Firefox позволяют просматривать и редактировать динамический CSS страницы с помощью инструментов «Инспектор » и «Редактор стилей» .
Расширение Web Developer для Firefox позволяет отслеживать и редактировать CSS в реальном времени на просматриваемых сайтах.

Мета-ошибки

Firefox: ошибка Firefox 1323667

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

Демонстрации CSS : получите творческий импульс, исследуя примеры новейших технологий CSS в действии. Веб-языки, к которым часто применяется CSS: HTML , SVG , MathML , XHTML и XML . Stack Overflow вопросы о CSS

html

anonymous@undisclosed.example.com (Anonymous) — Sat, 01 Feb 2025 09:49:02 +0000

HTML: язык гипертекстовой разметки

HTML (язык гипертекстовой разметки) — это основной строительный блок Интернета. Он определяет значение и структуру веб-контента. Другие технологии помимо HTML обычно используются для описания внешнего вида/представления веб-страницы ( CSS ) или функциональности/поведения ( JavaScript ).

Расширение	.html
MIME-тип	text/html¹⁾
Разработчик	Консорциум Всемирной паутины, Инженерный совет Интернета и WHATWG
Опубликован	1993
Тип формата	Язык разметки
Расширен из	SGML²⁾
Стандарт(ы)	W3C HTML 5.2, WHATWG HTML Living Standard
Сайт	html.spec.whatwg.org/… (англ.)

«Гипертекст» относится к ссылкам, которые соединяют веб-страницы друг с другом либо в пределах одного веб-сайта, либо между веб-сайтами. Ссылки являются фундаментальным аспектом Интернета. Загружая контент в Интернет и связывая его со страницами, созданными другими людьми, вы становитесь активным участником всемирной паутины.

HTML использует «разметку» для аннотирования текста, изображений и другого содержимого для отображения в веб-браузере. Разметка HTML включает в себя специальные «элементы» , такие как <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, , , , , , , , и многие другие .<datalist><details><embed><nav><search><output><progress><video><ul><ol><li>

HTML-элемент отделяется от другого текста в документе «тегами», состоящими из имени элемента, окруженного символами « <» и « >». Имя элемента внутри тега нечувствительно к регистру. То есть его можно писать прописными, строчными буквами или их смесью. Например, <title>тег может быть записан как <Title>, <TITLE>или любым другим способом. Однако принято и рекомендуется писать теги строчными буквами.

Приведенные ниже статьи помогут вам узнать больше об HTML.

Введение в HTML

Если вы новичок в веб-разработке, обязательно прочитайте нашу статью «Основы HTML», чтобы узнать, что такое HTML и как его использовать.

Руководства по HTML

Чтобы найти статьи о том, как использовать HTML, а также учебные пособия и полные примеры, посетите нашу область обучения HTML .

Справочник по HTML

В нашем обширном справочном разделе по HTML вы найдете подробную информацию о каждом элементе и атрибуте в HTML.

Хотите стать фронтенд-разработчиком? Мы составили курс, который включает в себя всю необходимую информацию, необходимую для достижения вашей цели.

Руководства для начинающих

Учебники для начинающих В нашей области обучения HTML есть несколько модулей, которые обучают HTML с нуля — никаких предварительных знаний не требуется.

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

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

HTML-таблицы Представление табличных данных на веб-странице в понятной и доступной форме может оказаться непростой задачей. Этот модуль охватывает базовую разметку таблиц, а также более сложные функции, такие как реализация подписей и сводок.

HTML-формы Формы являются очень важной частью Интернета — они предоставляют большую часть функций, необходимых для взаимодействия с веб-сайтами, например, регистрацию и вход в систему, отправку отзывов, покупку продуктов и многое другое. Этот модуль поможет вам приступить к созданию клиентской/интерфейсной части форм.

Используйте HTML для решения распространенных проблем Содержит ссылки на разделы контента, объясняющие, как использовать HTML для решения очень распространенных проблем при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение контента, создание базовой формы и т. д.

Расширенные темы

Изображение с поддержкой CORS Атрибут crossoriginв сочетании с соответствующим заголовком CORS позволяет загружать изображения, определенные элементом, <img>из внешних источников и использовать их в элементе, <canvas>как если бы они загружались из текущего источника.

Атрибуты настроек CORS Некоторые элементы HTML, обеспечивающие поддержку CORS , такие как <img>или <video>, имеют crossoriginатрибут ( crossOriginсвойство), который позволяет настраивать запросы CORS для извлеченных данных элемента.

Предварительная загрузка контента с помощью rel=«preload» Значение preloadатрибута <link>элемента relпозволяет вам писать декларативные запросы на выборку в вашем HTML <head>, указывая ресурсы, которые потребуются вашим страницам вскоре после загрузки, поэтому вы хотите начать предварительную загрузку в начале жизненного цикла загрузки страницы, до основного рендеринга браузера. срабатывает механизм. Это гарантирует, что они станут доступными раньше и с меньшей вероятностью заблокируют первый рендеринг страницы, что приведет к повышению производительности. В этой статье представлено базовое руководство о том, как это preload работает.

Справочники

Ссылка HTML-ссылка HTML состоит из элементов , каждый из которых может быть модифицирован некоторым количеством атрибутов . HTML-документы связаны друг с другом ссылками .

Ссылка на HTML-элемент Просмотрите список всех элементов HTML .

Ссылка на атрибут HTML Элементы в HTML имеют атрибуты . Это дополнительные значения, которые настраивают элементы или корректируют их поведение различными способами.

Глобальные атрибуты Глобальные атрибуты могут быть указаны для всех элементов HTML , даже для тех, которые не указаны в стандарте . Это означает, что любые нестандартные элементы должны по-прежнему разрешать эти атрибуты, даже если эти элементы делают документ несовместимым с HTML5.

Элементы встроенного уровня и элементы блочного уровня Элементы HTML обычно представляют собой элементы «встроенного уровня» или «блочного уровня». Элемент встроенного уровня занимает только пространство, ограниченное определяющими его тегами. Блочный элемент занимает все пространство своего родительского элемента (контейнера), тем самым создавая «блочный блок».

Руководство по типам и форматам мультимедиа в Интернете Элементы <audio>и <video>позволяют воспроизводить аудио- и видеоматериалы непосредственно в вашем контенте без необходимости поддержки внешнего программного обеспечения.

Категории содержимого HTML HTML состоит из нескольких видов контента, каждый из которых разрешен для использования в определенных контекстах и запрещен в других. Точно так же каждый контекст имеет набор других категорий содержимого, которые он может содержать, и элементы, которые могут или не могут использоваться в них. Это руководство по этим категориям.

Причудливый режим и стандартный режим Историческая информация о режиме причуд и стандартном режиме.

Дополнения и Файлы

https://developer.mozilla.org/ru/docs/Web/HTML

¹⁾

https://ru.wikipedia.org/wiki/HTML#cite_note-_7208013a4a4d1d64-1

²⁾

https://ru.wikipedia.org/wiki/HTML#cite_note-_7405e0ff3d9b521b-2

mathml

anonymous@undisclosed.example.com (Anonymous) — Tue, 22 Aug 2023 17:33:59 +0000

MathML

Mathematical Markup Language (MathML) — это язык на основе XML для описания математических обозначений.

Первоначально MathML разрабатывался как универсальная спецификация для браузеров, офисных пакетов, систем компьютерной алгебры , программ для чтения EPUB , генераторов на основе LaTeX . Однако этот подход был не очень адаптирован для Интернета: подмножество, ориентированное на семантику, никогда не было реализовано в браузерах, в то время как подмножество, ориентированное на математическую компоновку, приводило к неполным и непоследовательным реализациям браузеров.

MathML Core — это подмножество с расширенными деталями реализации, основанными на правилах из LaTeX и Open Font Format . Он адаптирован для браузеров и разработан специально для работы с другими веб-стандартами, включая HTML , CSS , DOM , JavaScript .

Ниже вы найдете ссылки на документацию, примеры и инструменты для работы с MathML. MDN использует MathML Core в качестве справочной спецификации, но из-за неустойчивой истории стандартизации устаревшие функции MathML могут по-прежнему отображаться в существующих реализациях и веб-контенте.

Примечание. Разработчикам и авторам настоятельно рекомендуется переключиться на MathML Core, возможно, полагаясь на другие веб-технологии для покрытия отсутствующих вариантов использования. Math WG поддерживает набор полифилов MathML , чтобы облегчить этот переход.

Справочник по MathML Справочник по элементам MathML Подробная информация о каждом элементе MathML и информация о совместимости для настольных и мобильных браузеров.

Справочник по атрибутам MathML Информация об атрибутах MathML, которые изменяют внешний вид или поведение элементов.

Примеры MathML Образцы и примеры MathML, которые помогут вам понять, как это работает.

Создание MathML Предложения и советы по написанию MathML, включая рекомендуемые редакторы MathML и способы интеграции их вывода в веб-контент.

Учебник по MathML Нежное введение в MathML.

svg

anonymous@undisclosed.example.com (Anonymous) — Tue, 22 Aug 2023 17:32:17 +0000

SVG: масштабируемая векторная графика

Начало работы с SVG Масштабируемая векторная графика (SVG) — это язык разметки на основе XML для описания двухмерной векторной графики .

Таким образом, это текстовый открытый веб-стандарт для описания изображений, которые могут быть четко отображены в любом размере и специально разработаны для работы с другими веб-стандартами, включая CSS , DOM , JavaScript и SMIL . По сути, SVG для графики — это то же самое, что HTML для текста.

Изображения SVG и связанное с ними поведение определяются в текстовых файлах XML , что означает, что их можно искать, индексировать, создавать сценарии и сжимать. Кроме того, это означает, что их можно создавать и редактировать с помощью любого текстового редактора или программного обеспечения для рисования.

По сравнению с классическими форматами растровых изображений, такими как JPEG или PNG , векторные изображения в формате SVG могут отображаться в любом размере без потери качества и могут быть легко локализованы путем обновления текста внутри них без необходимости использования графического редактора. При наличии соответствующих библиотек файлы SVG можно даже локализовать «на лету».

SVG разрабатывается Консорциумом World Wide Web (W3C) с 1999 года.

См. также Учебное пособие по SVG .

Документация Ссылка на элемент SVG Подробная информация о каждом элементе SVG.

Ссылка на атрибут SVG Подробная информация о каждом атрибуте SVG.

Справочник по интерфейсу SVG DOM Подробная информация о SVG DOM API для взаимодействия с JavaScript.

Применение эффектов SVG к содержимому HTML SVG работает вместе с HTML , CSS и JavaScript .

Инструменты Набор тестов SVG Валидатор разметки Примеры Руководство по созданию SVG SVG как изображение SVG-анимация с помощью SMIL Художественная галерея SVG D3 (библиотека JavaScript для визуализации данных с помощью HTML, SVG и CSS)