Stylesheet что это

Stylesheet что это

CSS (Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

Цель создания CSS

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

Способы подключения CSS к документу

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

Cтили CSS могут быть подключены или внедрены в описываемый ими веб-документ четырьмя способами:

• когда описание стилей находится в отдельном файле, оно может быть подключено к документу посредством элемента , включенного в элемент :

• когда файл стилей размещается отдельно от родительского документа, он может быть подключен к документу инструкцией @import в элементе:

. 

StyleSheet

Объект, реализующий интерфейс StyleSheet , представляет отдельную таблицу стилей. Таблица стилей CSS далее будет представлена более специализированным интерфейсом CSSStyleSheet .

Свойства

Свойство имеет тип Boolean (en-US), принимающий одно из двух значений и определяющий, применяется или нет текущая таблица стилей.

Свойство возвращает строку DOMString , указывающую расположение таблицы стилей. Свойство не изменяется.

Свойство содержит список медиа-установок MediaList (en-US) таблицы стилей и определяет медиа-устройства, для отображения на которых предназначена данная таблица. Свойство не изменяется.

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

Свойство возвращает ссылку на родительскую таблицу стилей StyleSheet , включающую данную таблицу стилей; если таковой нет, возвращает значение null . Свойство не изменяется.

Свойство возвращает строку DOMString , указывающую на заголовок текущей таблицы стилей. Свойство не изменяется.

Свойство возвращает строку DOMString , указывающую на язык, используемый таблицей стилей. Свойство не изменяется.

Спецификации

Specification
CSS Object Model (CSSOM) # the-stylesheet-interface

Совместимость с браузерами

BCD tables only load in the browser

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

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Что такое CSS: объясняем простыми словами

Встречая аббревиатуру CSS впервые, новички уже догадываются, что это как-то связано с сайтами. Разберёмся: CSS — Cascading Style Sheets — это каскадные таблицы стилей. По сути — язык, который отвечает за описание внешнего вида HTML-документа. Подавляющее большинство современных веб-сайтов работают на основе связки HTML+CSS.

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

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

CSS и стили

CSS используется для определения стилей (правил) оформления документов — включая дизайн, вёрстку и вариации макета для различных устройств и размеров экрана. У такого способа форматирования несколько достоинств:

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

Стили можно разметить внутри тега или использовать отдельный CSS-файл.

Вот так можно прописать CSS в качестве атрибута непосредственно в HTML:

А так CSS прописывается при помощи тега и в теге документа HTML.

Теперь разберёмся, что такое CSS-файл. Всё просто — это файл с расширением .css, где прописываются правила оформления документа. Чтобы привязать файл к оформлению страницы, нужно использовать тег :

Современный способ оформления веб-документов вошёл в практику в 2011 году. Это свойство CSS grid — теперь оно поддерживается практически всеми браузерами. И если раньше приходилось верстать документы с использованием элементов вроде , то сейчас всё это выполняется средствами CSS.

После того как этот способ стал стандартом, проблема разделения содержания (HTML) и оформления (CSS) решилась раз и навсегда.

Синтаксис CSS

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

Что такое селектор в CSS? Это конструкция, которая позволяет выбрать отдельные или однотипные элементы на странице, чтобы их стилизовать. С селектора начинается каждый блок объявлений в CSS:

.my-class  background-color: #999; >

В качестве селектора в примере используется my-class. Все элементы с этим классом получают единое оформление — серый фон цвета #999.

Каскады в CSS

И всё-таки почему CSS — это именно Cascading Style Sheets? Дело в том, что в единую схему стили организуются при помощи каскада. Вот простой пример, который также поможет понять, что такое CSS-код и как он выглядит:

p  color: green; font-size: 20px; > p  color: red; >

При помощи каскадов мы присвоили элементу p красный цвет. Зелёный цвет, указанный выше красного, учитываться не будет. Используется то значение параметра, которое указано ниже, и это помогает избежать конфликтов. При этом размер шрифта — 20 пикселей — не меняется. Если упростить написанное выше, то получится:

p  color: red; font-size: 20px; >

Кроме того, один элемент можно сделать зависимым от нескольких селекторов разного типа. Пример:

p  color: red; > p.important  font-size: 20px; > #intro  font-style: italic; >

Чтобы использовать все параметры, в HTML указываем:

p class="important" id="intro"> CSS упрощает форматирование документов. /p>

Здесь мы присвоили элементу следующие свойства: он красный, размером 20 пикселей и написан курсивом. Важно, что в данном случае у разных селекторов — разный приоритет. Их порядок:

1. Селектор типа элемента (p).
2. Селектор класса (.important).
3. Селектор id (#intro).

1 — низкий приоритет, 3 — высокий.

Приоритеты в CSS

Обговорим подробнее вопрос приоритетов. Их иерархия работает следующим образом:

1. Самый высокий приоритет у свойств, в конце объявления которых указано !important.
2. Затем идут инлайновые стили, которые прописываются в теге через атрибут style.
3. Ещё ниже приоритет стилей, заданных в теге style в самом документе.
4. Далее следуют стили, подключённые к документу как внешний CSS-файл с использованием тега

Методологии CSS

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

Единой методологии CSS нет. Существует несколько вариантов, и задача разработчика — выбрать ту методологию, которая оптимально ему подходит. Но сначала стоит разобраться с основами, научиться работать с CSS. Кстати, новые варианты появляются не так уж редко, так что за новинками стоит следить.

Наиболее популярные современные методологии CSS — это Atomic CSS (Functional CSS) и CSS в JavaScript. В основе первого варианта лежит использование максимального количества базовых классов, чтобы как можно чаще применять их повторно. Сторонники второго варианта считают, что стили CSS стоит определять не в отдельной таблице, а внутри каждого компонента.

Будущее CSS

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

Несколько лет назад начало формироваться и четвёртое поколение стандарта CSS, но пока спецификации находятся на уровне драфтов.

Все премудрости CSS, HTML и их совместного использования вы можете освоить на отдельном интерактивном курсе GeekBrains. В течение месяца вы научитесь верстать статические сайты, освоите блочную вёрстку, препроцессор Less, Bootstrap и другие полезные инструменты.

StyleSheet¶

StyleSheet — это абстракция, аналогичная таблицам стилей CSS.

Советы по качеству кода:

• Перенося стили из функции рендеринга, вы облегчаете понимание кода.
• Именование стилей — хороший способ придать смысл компонентам низкого уровня в функции рендеринга.

Методы¶

compose()¶

static compose(style1: Object, style2: Object): Object | Object[]; 

Объединяет два стиля таким образом, что style2 отменяет все стили в style1 . Если один из стилей является ложным, возвращается другой без выделения массива, что экономит выделение и сохраняет равенство ссылок при проверке PureComponent .

create()¶

static create(styles: Object): Object; 

Создает ссылку стиля StyleSheet из заданного объекта.

flatten()¶

static flatten(style: Object[]): Object; 

Сплющивает массив объектов стиля в один объединенный объект стиля. Также этот метод можно использовать для поиска идентификаторов, возвращаемых функцией StyleSheet.register .

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

Этот метод использует StyleSheetRegistry.getStyleByID(style) для разрешения объектов стиля, представленных идентификаторами. Таким образом, массив объектов стиля (экземпляры StyleSheet.create() ), индивидуально разрешаются в соответствующие объекты, объединяются как один и затем возвращаются. Это также объясняет альтернативное использование.

setStyleAttributePreprocessor()¶

Изменения будут происходить часто и не будут достоверно объявлены. Все это может быть удалено, кто знает? Используйте на свой страх и риск.

1 2 3 4

static setStyleAttributePreprocessor( property: string, process: (propValue: any) => any, ); 

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

Свойства¶

absoluteFill¶

Очень распространенным шаблоном является создание оверлеев с абсолютной позицией и нулевым позиционированием ( position: ‘absolute’, left: 0, right: 0, top: 0, bottom: 0 ), поэтому absoluteFill можно использовать для удобства и уменьшения дублирования этих повторяющихся стилей. Если вы хотите, absoluteFill можно использовать для создания настраиваемой записи в таблице стилей, например:

absoluteFillObject¶

Иногда вам может понадобиться absoluteFill , но с некоторыми изменениями — absoluteFillObject можно использовать для создания настраиваемой записи в StyleSheet , например:

hairlineWidth¶

Определяется как ширина тонкой линии на платформе. Она может использоваться в качестве толщины границы или разделения между двумя элементами. Пример:

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

Линия шириной с волосок может быть не видна, если ваш симулятор уменьшен.

Комментарии

(C) 2021-2023, Справочник React Native разработчика

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the «Software»), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED «AS IS», WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. —>