Cascading style sheets: Cascading Style Sheets

Cascading Style Sheets

Languages

What is CSS?

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

These pages contain information on how to learn and use CSS and on available software. They also contain news from the CSS working group.

Highlights

The “CSS Snapshot” (latest: 2022) lists the parts that are ready for implementers
CSS Writing Modes is a W3C Recommendation [press release]

News

31 Dec 2022 Updated Working Draft: CSS Overflow Level 3. Updated Working Draft: CSS Overflow Level 4. Updated Working Draft: CSS Ruby Annotation Layout Level 1. Updated Working Draft: CSS Text Level 4.
30 Dec 2022 Updated Working Draft: CSS Pseudo-Elements Level 4.
8 Dec 2022 Updated Working Draft: Scroll-linked Animations .
1 Dec 2022 Updated Candidate Recommendation: CSS Values and Units Level 3.
24 Nov 2022 Updated Working Draft: CSS View Transitions Level 1.

For more news, see our syndicator “The Future of Style.”

Suggest a link ✉︎

Standards & drafts

Some of the specifications and drafts by the CSS Working Group:

Joining the discussion

The <[email protected]> mailing list is the place for discussing the further development of CSS. (The CSS working group also uses that list for most discussions.) Everybody can subscribe (or unsubscribe, or see instructions.)

If you work for a W3C member organization, you can also join the working group.

Software

Nearly all browsers nowadays support CSS and many other applications do, too. To write CSS, you don’t need more than a text editor, but there are many tools available that make it even easier.

Of course, all software has bugs, even after several updates. And some programs are further ahead implementing the latest CSS modules than others. Various sites describe bugs and work-arounds.

Learning CSS

For beginners, Starting with HTML + CSS teaches how to create a style sheet. For a quick introduction to CSS, try chapter 2 of Lie & Bos or Dave Raggett’s intro to CSS. Or see examples of styling XML and CSS tips & tricks.

Another page also has some books, mailing lists and similar fora, and links to other directories.

The history of CSS is described in chapter 20 of the book Cascading Style Sheets, designing for the Web, by Håkon Wium Lie and Bert Bos (2nd ed., 1999, Addison Wesley, ISBN 0-201-59625-3)

A song

CSS inspired ‘quayjn’ to write the song ‘CSS is OK’.

Bert Bos, style activity lead
Copyright © 1994–2023 W3C^® Privacy policy

Last updated Tue 03 Jan 2023 05:40:09 AM UTC

Languages

беларуская
Česky
Deutsch
English
فارسی
Français
Nederlands
Polski
Русский
Slovenščina
Тоҷикӣ
Українська
اردو

About the translations

CSS current work & how to participate

Languages

CSS specifications

This page contains a list of all completed specifications and drafts by the CSS WG (formerly ‘CSS & FP WG’). If you want to follow the development of CSS3, this is the place to start. You have ideas? Contributions? See ‘If you want to help’ on this page.

A specification is not a manual. There is no excuse for badly written drafts and please complain if you find one. But specs do target a specific audience. See fantasai’s Understanding the CSS Specifications.. J. David Eisenberg has written another useful How to read W3C specs. Or you can read about ‘modules,’ ‘levels,’ ‘snapshots’ and the CSS process.

What’s new?

2022-12-31 Updated Working Draft: CSS Overflow Level 3. Updated Working Draft: CSS Overflow Level 4. Updated Working Draft: CSS Ruby Annotation Layout Level 1. Updated Working Draft: CSS Text Level 4.
2022-12-30 Updated Working Draft: CSS Pseudo-Elements Level 4.
2022-12-08 Updated Working Draft: Scroll-linked Animations.
2022-12-01 Updated Candidate Recommendation: CSS Values and Units Level 3.
2022-11-24 Updated Working Draft: CSS View Transitions Level 1.

Table of specifications

Ordered from most to least stable:

Some related specifications by other Working Groups:

Two old specifications by the Web Applications WG, The ‘view-mode’ Media Feature and Selectors API Level 2, have been replaced by Web App Manifest and DOM, respectively.

Indexes of properties & descriptors

Jens Meiert maintains an index of properties. The CSS Snapshot includes an index of standard and stable properties, along with pseudo-classes & pseudo-elements and @-rules.

The CSS WG provides an alphabetical list of all properties & descriptors in editors’ drafts.

People who are reviewing CSS drafts might also be interested in these indexes that include both official and editors’ drafts: properties [HTML] [

TSV] [XML] [JSON] and descriptors [HTML] [TSV] [XML] [JSON].

Explanation of colors & status codes

W3C indicates the maturity of specifications by a status code. The CSS working group uses the following, from least to most stable:

The following code indicates a document that is not intended to become a standard:

The names are defined in section 6 of the W3C process document. A REC is what is normally referred to as a ‘standard.’ W3C encourages everyday use starting from CR.

The informal stability levels used to group the specs are defined in this 2007 description of CSS stability levels.

If you want to help

Everybody can take part in the discussions on the archived mailing list [email protected]. You can subscribe yourself. This is the preferred place for discussions, because the members of the working group will see them. Please, don’t use this list for questions of the type

How do I… Use comp.

infosystems. www. authoring. stylesheets («ciwas») or see ‘Learning CSS’.

On the mailing list, you will be talking to many people, many very busy people. Before you post, please, search the archive to see if your great idea has maybe already been discussed. Follow the usual netiquette and W3C’s policies on spam, attachments, etc.

If you are sending comments on a specific CSS module, please prefix the subject of your message with the appropriate spec code (given in the ‘Status of this document’ section) in brackets, e.g. ‘[css3-flexbox] error in margin calculations’. This will help the editors find and track your comments.

Laurens Holst (a.k.a. ‘Grauw’) maintains an FAQ for www-style. (For additions, please, contact Laurens directly. Laurens is not associated with W3C.)

You can also raise issues via GitHub. Github contains copies of the editors’ drafts of the CSS specifications and ‘Houdini’ APIs.

Birkir Gunnarsson wrote a helpful guide Mastering GitHub with a screen reader, part 1.

If you work for a W3C member organization, you can also join the CSS working group and come to its meetings. To participate, you need to commit to (on average) 1 day per week. Contact me (Bert Bos) or your organization’s W3C contact person. The group’s minutes are public and posted on the CSS WG blog.

There are many ways to keep up to date with new publications by the CSS WG. The ‘What’s new?’ section above shows the most recent drafts and it also has an Atom feed. Publications are announced on the CSS WG’s blog and its Atom feed, and the group’s Mastodon and Twitter accounts.

First drafts from all W3C working groups appear on the public-review-announce mailing list and its RSS feed. The latest publications from all W3C working groups are at the top of the Technical Reports page, which also has an RSS feed.

About the test suites

The CSS working group intends to spend a lot of time on developing the CSS test suites along with the CSS specifications. By providing a test suite for each module as soon as the module is published, we hope not only that CSS3 implementations will conform to the specification much earlier, but also that people will have an easier time understanding the formal text of the spec.

The test suites have their own archived mailing list [email protected]. Please send error reports, test case submissions, and any other questions and comments about the CSS test suites there. Elika Etemad maintains the CSS Testing Wiki with more info for contributors.

Raising issues via GitHub is also possible: see the Web-platform tests repository.

Mark-up conventions

The source mark-up of the specifications follows certain conventions (which is useful for automatic processing).

Bert Bos, style activity lead
Copyright © 1994–2023 W3C^® Privacy policy

Last updated Sun 01 Jan 2023 12:21:35 PM UTC

Languages

Deutsch
English
فارسی
Français
Қазақша
Русский
Українська
اردو

About the translations

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

Эдтех Хоум

Классы

Уроки и часто задаваемые вопросы

Центр образовательных технологий наук о жизни

Перейти к уроку стиля

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

Первоначально целью HTML было сделать высокоформатные документы доступными через Интернет, и он никогда не предназначался для использования в качестве языка разметки страниц. Но с быстрым расширением Интернета от первоначального сообщества физики элементарных частиц до того, что мы видим сегодня, возникла новая область «веб-дизайна» и возникла озабоченность по поводу того, как лучше всего представить цифровую информацию массам. Другими словами, лучшая читаемость и более привлекательные страницы. Внедрение таблиц было с радостью встречено новой областью веб-дизайнеров, поскольку они позволяли представлять табличные данные, которые могли включать изображения и создавать несколько столбцов.

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

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

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

Выражение «Каскадные таблицы стилей» относится к тому факту, что вы можете использовать все три типа стилей в одном документе, при этом встроенные стили переопределяют конфликтующие спецификации в заголовке, а встроенный стиль в заголовке переопределяет настройки из внешней таблицы стилей. . Когда браузер интерпретирует коды стилей, он разрешает конфликты, действуя иерархически от внешнего к встроенному и последовательному, с приоритетом более локальных кодов. Это дает вам больше гибкости в процессе проектирования, поскольку вы можете вносить изменения в особых случаях. Вы можете захотеть, чтобы все ваши заголовки были размером 24 пункта, например, синий цвет верданы, но если есть один случай, когда вы хотите, чтобы заголовок был красным, 36 пунктов, вы можете создать для него встроенный стиль, который переопределит внешние настройки.

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

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

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

Более досадная проблема заключается в том, что неудивительно, что основные браузеры решили реализовать их по-разному. Это означает, что вы должны проверять свои страницы как в Internet Explorer, так и в Netscape, а также на Macintosh и ПК и быть готовыми к неожиданным результатам.

Одним из решений, часто используемых коммерческими сайтами, является подготовка двух таблиц стилей, одной для Netscape и одной для Internet Explorer, а затем использование сценария обнаружения браузера для предоставления клиенту соответствующего стиля. Для остальных из нас, я думаю, это слишком много работы. Лучшее решение — придерживаться более универсальных свойств, поддерживаемых обоими браузерами, и избегать определений стилей, специфичных для браузера. Другой вариант — сначала создать свои страницы без стилей, а когда это будет выглядеть приемлемо, добавить стили. Это будет означать, что он будет изящно «ухудшаться», если отображается в более старом браузере.

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

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

Давайте сначала посмотрим, как создаются некоторые примеры правил CSS:

h2 {размер шрифта: 36 pt}	Все теги будут иметь размер 36 пунктов
P {шрифт: arial}	Весь текст, заключенный в абзаце . ….. , будет набран шрифтом Arial. Поскольку размер не указан, по умолчанию он будет соответствовать тому, что обычно указывает браузер.

Селектор {объявление} или Селектор {свойство: значение}

Двумя основными разделами правила являются первый Selector , который идентифицирует тег, который нужно изменить, и объявление , заключенное в фигурные скобки. Само объявление состоит из двух частей: свойства и его значения , разделенных двоеточием. Свойство — это определяемый параметр, например, семейство шрифтов или размер, а значением может быть единица измерения, цвет или предопределенный список. Как и в приведенных выше примерах, объявления могут содержать более одного свойства, если они разделены точкой с запятой, как показано ниже.

Самый простой способ применить стиль — просто добавить его к отдельному тегу HTML, например:

Этот заголовок синего цвета

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

Более полезный метод — сгруппировать все правила стиля в заголовке документа, заключенном в <СТИЛЬ> тег:

<ГОЛОВА>

<ТИП СТИЛЯ="text/css">

h2 { font-face: verdana; размер шрифта: 24 пт; цвет: синий}
P { font-face: arial; красный цвет; }

…

Оператор «text/css » предвосхищает будущие дополнения к <СТИЛЬ> элемент. Прямо сейчас CSS — единственный атрибут типа, но это, несомненно, изменится по мере развития Интернета. Однако лучше оставить его там, так как некоторые браузеры могут полностью игнорировать таблицу стилей, если она отсутствует.

Внешняя таблица стилей позволяет применять один набор стилей к нескольким страницам или ко всему сайту. Чтобы настроить его, вы создаете список правил в своем текстовом процессоре и сохраняете его как текст с расширением . css. Таблица стилей вообще не содержит тегов HTML и не имеет структуры или. Внешняя таблица стилей для приведенных выше примеров будет выглядеть так и иметь расширение .css:

h2 { font-face: verdana; размер шрифта: 24 пт; цвет: синий}

P { font-face: arial; красный цвет; }

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

<ГОЛОВА>

…

REL=STYLESHEET сообщает браузеру, что это будет таблица стилей.

TYPE=»text/css — это снова поклон в будущее, когда может быть более одного типа

HREF — это URL-адрес таблицы стилей. В этом примере таблица стилей находится в той же папке, что и страница. Если бы это было где-то еще, нужно было бы включить полное имя пути. Таблицу стилей можно назвать как угодно, если она имеет расширение .css.

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

…

и … теги, которые вы можете определить в объявлении вашей таблицы стилей и вставить их вокруг областей, когда вам нужно специальное форматирование, которое вы можете’ легко обрабатывать существующие теги. Кроме того, селекторы, называемые CLASS и ID , позволяют уточнить правила стиля.

Барбара Мейер — Центр образовательных технологий — Науки о жизни — Университет Иллинойса, Урбана-Шампейн, США

Что такое каскадная таблица стилей?

В этом разделе:

Что такое правила и классы каскадных таблиц стилей?

Каскадные таблицы стилей (CSS) являются расширением в HTML, которые позволяют указать форматирование HTML-документа. Вы можете использовать два вида CSS с WebFOCUS:

Внутренняя каскадная таблица стилей, которая хранится внутри документа HTML, который он форматирует. Для получения информации о создание и использование внутреннего CSS для отчета WebFOCUS, см. Создание внутренней каскадной таблицы стилей для отчетов HTML.
Внешняя каскадная таблица стилей, которая хранится в отдельном файле, который может совместно использоваться несколькими документами. Внешний файл CSS может находиться на любом веб-сервере, доступном для браузер. Вы указываете его местоположение с помощью таблицы стилей CSSURL WebFOCUS. атрибут, параметр CSSURL SET или (в особых случаях) ССЫЛКА элемент.

Вы можете определять классы в каскадной таблице стилей и форматировать компонент отчета, назначив ему один из этих классов CSS. Классы описаны в разделе «Что такое каскадные правила и классы таблиц стилей?».

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

Преимущества использования внешнего каскадирования таблицы стилей для форматирования отчета описаны в разделе «Зачем использовать внешнюю каскадную таблицу стилей?».

Вы найдете внешний каскадный стиль листы актуальны, если вы:

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

Для получения информации о внутренних каскадных таблицах стилей см. см. Создание внутренней каскадной таблицы стилей для отчетов в формате HTML.

Нужна дополнительная информация о CSS? Эта документация WebFOCUS предполагает, что вы иметь практические навыки работы с каскадными таблицами стилей. Учение о CSS выходит за рамки этой документации, но многие источники информации доступны для вас. Полезное место для начала в Интернете является домашней страницей каскадных таблиц стилей Консорциума World Wide Web (http://www.w3.org/Style/CSS/).

Начало страницы

Что такое каскадные правила и классы таблицы стилей?

Каскадная таблица стилей (CSS) определяет форматирование в операторах, называемых правилами. Например, это простое правило, которое делает цвет фона тела HTML-страница желтая:

 BODY {фон: желтый}

Каждое правило имеет селектор (в данном примере BODY) и объявление (фон: желтый).