| |
| software:development:web:docs:web:css [2023/08/21 19:23] – создано - внешнее изменение 127.0.0.1 | software:development:web:docs:web:css [2024/03/17 15:14] (текущий) – vladpolskiy |
|---|
| ====== CSS: каскадные таблицы стилей ====== | ====== CSS: каскадные таблицы стилей ====== |
| Каскадные таблицы стилей ( CSS ) — это язык таблиц стилей , используемый для описания представления документа, написанного на HTML или XML (включая диалекты XML, такие как SVG , MathML или XHTML ). CSS описывает, как элементы должны отображаться на экране, на бумаге, в речи или на других носителях. | Каскадные таблицы стилей ( CSS ) — это язык [[software:development:web:docs:web:api:StyleSheet|таблиц стилей]], используемый для описания представления документа, написанного на HTML или XML (включая диалекты XML, такие как SVG , MathML или XHTML ). CSS описывает, как элементы должны отображаться на экране, на бумаге, в речи или на других носителях. |
| |
| CSS является одним из основных языков открытой сети и стандартизирован для веб-браузеров в соответствии со спецификациями W3C . Ранее разработка различных частей спецификации CSS велась синхронно, что позволяло использовать версии последних рекомендаций. Возможно, вы слышали о CSS1, CSS2.1 или даже CSS3. Никогда не будет CSS3 или CSS4; скорее, теперь все это 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 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 для опытных веб-разработчиков описывает каждое свойство и концепцию CSS. | Наш исчерпывающий справочник по CSS для опытных веб-разработчиков описывает каждое свойство и концепцию CSS. |
| |
| Хотите стать фронтенд-разработчиком? | =====Учебники===== |
| Мы составили курс, который включает в себя всю необходимую информацию, необходимую для достижения вашей цели. | |
| | |
| Начать | |
| | |
| Учебники | |
| В нашей области обучения CSS есть несколько модулей, которые обучают CSS с нуля — никаких предварительных знаний не требуется. | В нашей области обучения CSS есть несколько модулей, которые обучают CSS с нуля — никаких предварительных знаний не требуется. |
| |
| CSS первые шаги | ====CSS первые шаги==== |
| CSS (каскадные таблицы стилей) используются для оформления и компоновки веб-страниц — например, для изменения шрифта, цвета, размера и интервалов вашего контента, разделения его на несколько столбцов или добавления анимации и других декоративных функций. Этот модуль обеспечивает плавное начало вашего пути к мастерству CSS с основами того, как он работает, как выглядит синтаксис и как вы можете начать использовать его для добавления стилей в HTML. | CSS (каскадные таблицы стилей) используются для оформления и компоновки веб-страниц — например, для изменения шрифта, цвета, размера и интервалов вашего контента, разделения его на несколько столбцов или добавления анимации и других декоративных функций. Этот модуль обеспечивает плавное начало вашего пути к мастерству CSS с основами того, как он работает, как выглядит синтаксис и как вы можете начать использовать его для добавления стилей в HTML. |
| |
| строительные блоки CSS | ====строительные блоки CSS==== |
| Этот модуль продолжает то, на чем остановились первые шаги CSS — теперь, когда вы познакомились с языком и его синтаксисом и получили некоторый базовый опыт его использования, пришло время погрузиться немного глубже. Этот модуль рассматривает каскад и наследование, все доступные типы селекторов, единицы измерения, размеры, стилизацию фона и границ, отладку и многое другое. | Этот модуль продолжает то, на чем остановились первые шаги CSS — теперь, когда вы познакомились с языком и его синтаксисом и получили некоторый базовый опыт его использования, пришло время погрузиться немного глубже. Этот модуль рассматривает каскад и наследование, все доступные типы селекторов, единицы измерения, размеры, стилизацию фона и границ, отладку и многое другое. |
| |
| Цель состоит в том, чтобы предоставить вам набор инструментов для грамотного написания CSS и помочь вам понять всю необходимую теорию, прежде чем переходить к более конкретным дисциплинам, таким как стилизация текста и разметка CSS . | Цель состоит в том, чтобы предоставить вам набор инструментов для грамотного написания CSS и помочь вам понять всю необходимую теорию, прежде чем переходить к более конкретным дисциплинам, таким как стилизация текста и разметка CSS . |
| |
| CSS стиль текста | ====CSS стиль текста==== |
| Ознакомившись с основами языка CSS, следующая тема CSS, на которой вы должны сосредоточиться, — это стилизация текста — одна из наиболее распространенных вещей, которые вы будете делать с помощью CSS. Здесь мы рассмотрим основы стиля текста, включая настройку шрифта, жирности, курсива, межстрочного и межбуквенного интервалов, тени и другие функции текста. Мы завершаем модуль, рассматривая применение пользовательских шрифтов к вашей странице, а также стилизацию списков и ссылок. | Ознакомившись с основами языка CSS, следующая тема CSS, на которой вы должны сосредоточиться, — это стилизация текста — одна из наиболее распространенных вещей, которые вы будете делать с помощью CSS. Здесь мы рассмотрим основы стиля текста, включая настройку шрифта, жирности, курсива, межстрочного и межбуквенного интервалов, тени и другие функции текста. Мы завершаем модуль, рассматривая применение пользовательских шрифтов к вашей странице, а также стилизацию списков и ссылок. |
| |
| CSS макет | ====CSS макет==== |
| К этому моменту мы уже рассмотрели основы CSS, как стилизовать текст, как стилизовать и манипулировать блоками, внутри которых находится ваш контент. Теперь пришло время посмотреть, как разместить блоки в нужном месте по отношению к области просмотра и друг к другу. Мы рассмотрели необходимые предварительные условия, поэтому теперь мы можем углубиться в макет CSS, рассматривая различные настройки отображения, современные инструменты макета, такие как flexbox, сетка CSS и позиционирование, а также некоторые из устаревших методов, о которых вы, возможно, захотите узнать. | К этому моменту мы уже рассмотрели основы CSS, как стилизовать текст, как стилизовать и манипулировать блоками, внутри которых находится ваш контент. Теперь пришло время посмотреть, как разместить блоки в нужном месте по отношению к области просмотра и друг к другу. Мы рассмотрели необходимые предварительные условия, поэтому теперь мы можем углубиться в макет CSS, рассматривая различные настройки отображения, современные инструменты макета, такие как flexbox, сетка CSS и позиционирование, а также некоторые из устаревших методов, о которых вы, возможно, захотите узнать. |
| |
| Используйте CSS для решения распространенных проблем | ====Используйте CSS для решения распространенных проблем==== |
| Этот модуль содержит ссылки на разделы контента, объясняющие, как использовать CSS для решения распространенных проблем при создании веб-страницы. | Этот модуль содержит ссылки на разделы контента, объясняющие, как использовать CSS для решения распространенных проблем при создании веб-страницы. |
| |
| Ссылка | =====Ссылка===== |
| Справочник по CSS : этот исчерпывающий справочник для опытных веб-разработчиков описывает все свойства и концепции CSS. | * Справочник по CSS : этот исчерпывающий справочник для опытных веб-разработчиков описывает все свойства и концепции CSS. |
| Ключевые концепции CSS: | * Ключевые концепции CSS: |
| Синтаксис и формы языка | * Синтаксис и формы языка |
| Специфичность , наследование и каскад | * Специфичность , наследование и каскад |
| Единицы и значения CSS и функциональные обозначения | * Единицы и значения CSS и функциональные обозначения |
| Блочная модель и коллапс маржи | * Блочная модель и коллапс маржи |
| Содержащий блок | * Содержащий блок |
| Контексты стекирования и блочного форматирования | * Контексты стекирования и блочного форматирования |
| Исходные , вычисленные , используемые и фактические значения | * Исходные , вычисленные , используемые и фактические значения |
| Сокращенные свойства CSS | * Сокращенные свойства CSS |
| Гибкая компоновка блоков CSS | * Гибкая компоновка блоков CSS |
| Макет сетки CSS | * Макет сетки CSS |
| Селекторы CSS | * Селекторы CSS |
| Медиа-запросы | * Медиа-запросы |
| Анимация | * Анимация |
| Кулинарная книга | =====Кулинарная книга===== |
| Поваренная книга макетов CSS призвана объединить рецепты общих шаблонов макетов, которые вам могут понадобиться для реализации на ваших сайтах. В дополнение к предоставлению кода, который вы можете использовать в качестве отправной точки в своих проектах, эти рецепты освещают различные способы использования спецификаций макета и выбор, который вы можете сделать как разработчик. | Поваренная книга макетов CSS призвана объединить рецепты общих шаблонов макетов, которые вам могут понадобиться для реализации на ваших сайтах. В дополнение к предоставлению кода, который вы можете использовать в качестве отправной точки в своих проектах, эти рецепты освещают различные способы использования спецификаций макета и выбор, который вы можете сделать как разработчик. |
| |
| Инструменты для разработки CSS | =====Инструменты для разработки CSS===== |
| Вы можете использовать службу проверки CSS W3C , чтобы проверить, действителен ли ваш CSS. Это бесценный инструмент отладки. | * Вы можете использовать службу проверки CSS W3C , чтобы проверить, действителен ли ваш CSS. Это бесценный инструмент отладки. |
| Инструменты разработчика Firefox позволяют просматривать и редактировать динамический CSS страницы с помощью инструментов «Инспектор » и «Редактор стилей» . | * Инструменты разработчика Firefox позволяют просматривать и редактировать динамический CSS страницы с помощью инструментов «Инспектор » и «Редактор стилей» . |
| Расширение Web Developer для Firefox позволяет отслеживать и редактировать CSS в реальном времени на просматриваемых сайтах. | * Расширение Web Developer для Firefox позволяет отслеживать и редактировать CSS в реальном времени на просматриваемых сайтах. |
| Мета-ошибки | =====Мета-ошибки===== |
| Firefox: ошибка Firefox 1323667 | Firefox: ошибка Firefox 1323667 |
| Смотрите также | =====Смотрите также===== |
| Демонстрации CSS : получите творческий импульс, исследуя примеры новейших технологий CSS в действии. | Демонстрации CSS : получите творческий импульс, исследуя примеры новейших технологий CSS в действии. |
| Веб-языки, к которым часто применяется CSS: HTML , SVG , MathML , XHTML и XML . | Веб-языки, к которым часто применяется CSS: HTML , SVG , MathML , XHTML и XML . |
| Stack Overflow вопросы о CSS | Stack Overflow вопросы о CSS |
| |