Механизм CSS

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

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

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

1)[когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством тега <link>, располагающегося в этом документе между тегами <head> и </head>. Все правила этой таблицы действуют на протяжении всего документа;

2)[когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством директивы @import, располагающейся в этом документе между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>) сразу после тега <style>, которая также указывает (в своих скобках, после слова url) на адрес этой таблицы стилей. Все правила этой таблицы действуют на протяжении всего документа;

<html><head><style media="all"> @import url(style.css); </style> </head></html>

3)[когда таблица стилей описана в самом документе, она может располагаться в нём между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>). Все правила этой таблицы действуют на протяжении всего документа;

<html><head><style> body { color: red; }</style></head><body> </body></html>

4)[когда таблица стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега.

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

Cелектор - это формальное описание того элемента или группы элементов, к которым применяется указанное правило стиля.

Виды селекторов:

1)[универсальный селектор *{margin: 0;}

2)[селектор элементов p{font-family: arial;}

3)[селектор классов.note{color: red;}

4)[селектор идентификаторов #paragr{margin: 0;}

5)[селектор псевдоэлементов p::first-letter{font-size: 32px;}

6)[селектор потомков (контекстный селектор) div#paragr p.note{color: red;}

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями: