Двигаемся дальше … В прошлом уроке, мы разобрали основные фундаментальные принципы и правила написания html кода для css.

В этом уроке переходим к основам написания css правил или стилей.

  • Что такое css стили или правила
  • Язык написания или объявления стилей CSS

Что такое css стили?

CSS стили, это правила которые говорят браузеру как отображать тот или иной html тег. Если очень просто, то css правило говорит браузеру: “Видишь весь текст на странице, так вот отображай его красным цветом, шрифтом Arial и установи такой то размер”.

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

В качестве селектора может быть кокой либо конкретный элемент на странице (абзац, текст, заголовок, изображения и т.д.). А блок объявления говорить как форматировать этот элемент (абзац, текст, заголовок, изображения).

Язык написания или объявления стилей CSS

Для написания css стилей используется специальный язык. Он очень прост. Допустим нам нужно сделать все заголовки <h1> на сайте красным цветом:

h1 – это селектор, который говорит к какому элементу на сайте нужно применить форматирование.

{ color: red; } все что между фигурными скобками, не что иное, как блок объявления. В нашем случае мы задаем красный цвет.

Это правило как бы говорит браузеру, сделай все заголовки h1 на странице красного цвета.

Описание css стиля

Описание css стиля

  • Селектор – селектор говорит браузеру к какому элементу или элементам веб страницы применять стиль. В css очень большое количество селекторов и их комбинаций, зная их и правильно применяя, вы сможете мастерски оформлять веб страницы. В данном случае селектор говорит браузеру применять стиль ко всем заголовкам h1 на странице.
  • Блок объявления стиля – блок содержит все форматирующие команды. Блок объявления начинается с открывающей фигурной скобки ({)  и заканчивается закрывающей фигурной скобкой (}). В данном случае он содержит команду, которая говорит браузеру что заголовки нужно перекрасить в красный цвет.
  • Объявление свойства – в блоке объявления может находится сколько угодно свойств (color: red;), каждое свойство должно заканчиваться точкой с запятой (;).
  • Свойство – это команда форматирования. Оно представляет собой слово, или несколько слов написанных через дефис. В нашем случае это одно слово (color) есть более длинные свойства (margin-top, background-color, font-size) верхний отступ, цвет фона, размер текста.
  • Значение – тут вы можете в полной мере открыть свой творческий потенциал. Значений очень много и с их помощью можно сделать практически все. Не пугайтесь, они очень быстро запоминаются и очень простые. К примеру у нас это было значение цвета (red), а может быть размер текста (12px, 1.2em), длина (100% или 300px), расположение элемента (top, bottom, center) и так далее. Мы рассмотрим все основные и нужные значения для каждого свойства.

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

Пример плохо читаемого написания стиля (но он работает):

Более читаемый и наглядный способ написания css стилей:

Пробелы и перенос строк не учитываются, можете делать их сколько угодно.  Главное, что бы CSS  стиль всегда заканчиваться точкой с запятой (;), а свойство заканчивалось двоеточием (:)!

Стили будут работать правильно вне зависимости от количества пробелов:

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

Что такое CSS стили? Создание первого стиля! Владимир Полковниченко Основы CSS,
Двигаемся дальше ... В прошлом уроке, мы разобрали основные фундаментальные принципы и правила написания html кода для css. В этом уроке переходим к основам написания css правил или стилей. Что такое css стили или правила Язык написания или объявления стилей CSS Что такое css стили? CSS стили, это правила которые говорят браузеру как отображать...
Двигаемся дальше ... В прошлом уроке, мы разобрали <a title="основные фундаментальные принципы и правила написания html кода для css" href="/css/obuchenie-css/osnovy-css/pravila-napisaniya-html-koda-dlya-css.html" target="_blank">основные фундаментальные принципы и правила написания html кода для css</a>. В этом уроке переходим к основам написания css правил или стилей. <ul> <li>Что такое css стили или правила</li> <li>Язык написания или объявления стилей CSS</li> </ul> <span id="more-139"></span> <h3>Что такое css стили?</h3> <strong>CSS стили</strong>, это правила которые говорят браузеру как отображать тот или иной html тег. Если очень просто, то css правило говорит браузеру: <em>"Видишь весь текст на странице, так вот отображай его красным цветом, шрифтом Arial и установи такой то размер"</em>. CSS стиль состоит из двух основных элементов, это сам объект на странице к которому должен быть применен стиль - <em>селектор</em>, а также сами форматирующие команды - <em>блок объявления</em>. В качестве селектора может быть кокой либо конкретный элемент на странице (абзац, текст, заголовок, изображения и т.д.). А блок объявления говорить как форматировать этот элемент (абзац, текст, заголовок, изображения). <h3>Язык написания или объявления стилей CSS</h3> Для <em>написания css стилей</em> используется специальный язык. Он очень прост. Допустим нам нужно сделать все заголовки <h1> на сайте красным цветом: [crayon-56611e8ba0790416807500/] h1 - это селектор, который говорит к какому элементу на сайте нужно применить форматирование. { color: red; } все что между фигурными скобками, не что иное, как блок объявления. В нашем случае мы задаем красный цвет. Это правило как бы говорит браузеру, сделай все заголовки h1 на странице красного цвета. <ul> <li><strong>Селектор</strong> - селектор говорит браузеру к какому элементу или элементам веб страницы применять стиль. В css очень большое количество селекторов и их комбинаций, зная их и правильно применяя, вы сможете мастерски оформлять веб страницы. В данном случае селектор говорит браузеру применять стиль ко всем заголовкам h1 на странице.</li> <li><strong>Блок объявления стиля</strong> - блок содержит все форматирующие команды. Блок объявления начинается с открывающей фигурной скобки ({)  и заканчивается закрывающей фигурной скобкой (}). В данном случае он содержит команду, которая говорит браузеру что заголовки нужно перекрасить в красный цвет.</li> <li><strong>Объявление свойства</strong> - в блоке объявления может находится сколько угодно свойств (color: red;), каждое свойство должно заканчиваться точкой с запятой (;).</li> <li><strong>Свойство</strong> - это команда форматирования. Оно представляет собой слово, или несколько слов написанных через дефис. В нашем случае это одно слово (color) есть более длинные свойства (margin-top, background-color, font-size) верхний отступ, цвет фона, размер текста.</li> <li><strong>Значение</strong> - тут вы можете в полной мере открыть свой творческий потенциал. Значений очень много и с их помощью можно сделать практически все. Не пугайтесь, они очень быстро запоминаются и очень простые. К примеру у нас это было значение цвета (red), а может быть размер текста (12px, 1.2em), длина (100% или 300px), расположение элемента (top, bottom, center) и так далее. Мы рассмотрим все основные и нужные значения для каждого свойства.</li> </ul> При написании стиля или таблицы стилей, вы можете сделать это несколькими способами, более наглядно и удобно или в одну строку. Браузер игнорирует пробелы и переносы строк, поэтому можете писать как вам удобнее. Пример плохо читаемого написания стиля (но он работает): [crayon-56611e8ba07a1169968229/] Более читаемый и наглядный способ написания css стилей: [crayon-56611e8ba07a8495734185/] Пробелы и перенос строк не учитываются, можете делать их сколько угодно.  Главное, что бы <strong>CSS  стиль</strong> всегда заканчиваться точкой с запятой (;), а свойство заканчивалось двоеточием (:)! Стили будут работать правильно вне зависимости от количества пробелов: [crayon-56611e8ba07af658630245/] Это все что касается стилей css, в следующем уроке мы начнем <a title="изучение внешних и внутренних таблиц стилей" href="/css/obuchenie-css/osnovy-css/vneshnie-i-vnutrennie-tablicy-stilej-css-sozdaem-i-podklyuchaem.html" target="_blank">изучение внешних и внутренних таблиц стилей</a> и как их подключать к вашему сайту.