Что такое CSS правило, синтаксис, пример.

"CSS правило". "Что такое CSS правило, синтаксис, пример."

О css правиле пошагово:

1. Что такое CSS правило
2. Разберём компоненты CSS правила подробнее:
3. Полный пример CSS правила внутри файла css
4. Второй пример CSS правила в теге <style>

1. Что такое CSS правило

Начнем с определения : "Что такое CSS правило":

CSS‑правило — это базовый строительный блок каскадных таблиц стилей (css), который определяет, как должны выглядеть определённые элементы веб‑страницы.

Структура CSS‑правила:

CSS‑правило состоит из двух основных частей:

селектор — указывает, к каким HTML‑элементам будут применяться стили.

Блок объявлений — содержит одно или несколько свойств и их значений, заключённых в фигурные скобки {}.

Общий синтаксис CSS‑правила:

css

селектор {

свойство: значение;

свойство: значение;

/* ... */

}

2. Разберём компоненты ccs правила подробнее:

Для ccs правила необходимо :

1. Селектор в ccs правиле.

Начинаем с селектора, он определяет, какие элементы HTML‑документа будут стилизованы. Есть разные типы селекторов:

По селектору тега: h1, p, div и т. д.;

По классу(селектор class): .my-class (выбирает все элементы с классом my-class);

По идентификатору(селектор id): #main-header (выбирает элемент с id="main-header");

Универсальный: * (выбирает все элементы на странице);

По атрибуту: [type="text"] и др.

Можно применить одно правило сразу к нескольким селекторам, перечислив их через запятую:

css

h1, h2, .title {

color: blue;

}

2. Блок объявлений (свойства и значения) в ccs правиле.

Внутри фигурных скобок находится одна или несколько пар «свойство: значение», разделённых точкой с запятой (;):

Свойство (property) — определяет, какой визуальный аспект элемента нужно изменить (цвет текста, размер шрифта, отступы и т. д.). Примеры: color, font-size, margin, background-color.

Значение (value) — задаёт конкретное оформление для свойства. Может быть цветом (red, #ff0000), размером (16px, 2em), ключевым словом (center, bold) и т. д.

Пример полного CSS‑правила:

css:

p {

color: #32a846;

font-size: 16px;

line-height: 1.5;

}

3. Полный пример CSS правила внутри файла css.

Как вы наверное знаете, существует 3 способа css... начнем с файла(CSS‑файл).

Надеюсь, из выше приведенной теории, вы что-то да поняли, если нет, то ничего страшного... сейчас всю теорию пройденного о "CSS правиле" разберем на примере...

1). Первый пункт... css(стили) в "CSS правиле":

Чтобы создать "CSS правило" вам понадобится :

Естественно, что нужна страница html...

Нужно сделать CSS‑файл.

Далее его прикрепить к странице(страница html).

Создаем новый класс в файле css:

Данный класс помещаем в выше приведенный файл "css.css".

.reds{

color:red;

}

2). Второй пункт... html в CSS правиле:

Какой-то из тегов (теги html)... пусть это будет div :

<div></div>

Внутрь начального тега помещаем атрибут, пусть это будет атрибут class.

Используем произвольное "имя-класса" = reds.

И между двумя тегами напишем произвольный текст:

Добавим дополнительный "div" без CSS правила!

<div>Здесь тег без класса<div>

<div class="reds">Здесь тег с классом<div>

Выше приведенный код помещаем на страницу пример.

Скачать пример класс в файле css:

Данный пример можно скачать по ссылке.

4. Второй пример CSS правила в теге <style>

Приступим ко второму примеру с CSS правилом в теге <style>...для этого вам понадобится...

Опять страница html.

Помещаем внутрь страницы (тег style).

Записываем CSS правило внутрь этого тега...

<style>

.reds{

color:red;

}

</style>

Html в CSS правиле:

<div>Здесь тег без класса<div>

<div class="reds">Здесь тег с классом в теге style<div>

Смотрим пример CSS правила внутри тега style

Живой пример CSS правила здесь.

Скачать пример CSS правила в теге style.

Скачать можно здесь.

Краткий итог: CSS‑правило — это инструкция для браузера: «К элементам, выбранным селектором, примени следующие стили (свойства со значениями)».

Всего комментариев : Comments+ 2.0

+ =