Операторы CSS, правила, блоки объявлений и селекторы

В этом учебнике мы обсудили операторы CSS, правила , блоки объявлений и селекторы .

CSS-операторы

Таблица стилей CSS — это состоящий из операторов CSS , которые описывают представления для веб-документов HTML или XML.

Если вы посмотрите на пример ниже,

p {background-color: # FDD017; color: # 003366; font-weight: bold; width: 500px; padding: 5px;}

затем в этой таблице стилей « background-color: # FDD017; «,» color: # 003366; «,» font-weight: bold; «; « width: 500px; «, « padding: 5px;» все это инструкции CSS.

Наглядное представление инструкции CSS

Существует два типа операторов CSS: в правилах и наборы правил .

CSS в правилах

набор правил CSS (также называемый «правилом» ) состоит из селектора, за которым следует блок объявления (свойства и значения, заключенные в фигурные скобки).

Блоки объявлений CSS

Блок объявлений содержит свойства CSS и их соответствующие значения, заключенные в фигурные скобки. Пара свойство и значение заканчивается точкой с запятой (;).

Наглядное представление блока объявления CSS

Селекторы CSS

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

Посмотрите на пример ниже:

p {background-color: # FDD017; color: # 003366; font-weight: bold; width: 500px; padding: 5px;}

здесь « p » — это селектор. Поскольку p относится к элементу (абзацу) p , поэтому, если эта таблица стилей реализована на странице HTML, все элементы абзаца будут выглядеть так, как описано для p в таблице стилей.

Помимо имен элементов, селектором может быть группа элементов, идентификатор документа, то есть класс или идентификатор и некоторые другие типы псевдоэлементов или псевдоэлементов.

Ниже мы привели код и результат, если приведенная выше таблица стилей прикреплена к элементу HTML:

Код HTML и CSS

        пример селектора CSS   p {background-color: # FDD017; color: # 003366; font-weight: bold; width  : 500px; padding: 5px;}    

Lorem ipsum dolor sit amet ,conctetur adipiscing elit. Nam egestas placerat venenatis. Donec rhoncus ipsum et nibh congue convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus lacinia arcu vitae enim tempus scelerisque. Praesent laoreet sagittis lorem, viverra accumsan lectus vulputate scelerisque. eget nec lectus. Lorem ipsum dolor sit amet, consctetur adipiscing elit. Donec condimentum magna fringilla mi sodales sit amet dignissim metus molestie. Lorem ipsum dolor sit amet, consctetur adipiscing elit. >

Suspendisse semper luctus sagitt является. Sed sollicitudin, nunc laoreet tempus volutpat, lectus neque faucibus leo, quis dignissim dolor ipsum vitae libero. Donec adipiscing neque vitae erat feugiat sollicitudin. При rhoncus urna vel lorem dictum ultrices. Vivamus volutpat rhoncus tellus, sit amet feugiat orci scelerisque placerat. Proin viverra massa quis nulla mattis vel aliquam lacus auctor. В at ipsum mauris. Morbi tincidunt enim tempus nunc sollicitudin et convallis tellus molestie. Aliquam tempus felis vitae urna malesuada elementum. Nunc pharetra diam et dui semper eleifend. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nam at magna orci, sed volutpat eros. Целое dictum volutpat turpis in dictum. Donec tristique fringilla nibh, id cursus nulla aliquet Commodo. Pellentesque elit est, tincidunt non pharetra eget, elementum quis est. Donec feugiat sem ullamcorper dui viverra lacinia. Fusce tempus adipiscing egestas

Посмотреть результат здесь

Мы обсудили различные типы селекторов и их использование в наших руководствах по селекторам CSS.

Оцените статью
nanomode.ru
Добавить комментарий