Определение дизайна CSS-свойства

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

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

Части правила CSS

Правило CSS состоит из двух отдельных частей – селектора и объявления. Селектор определяет, что будет стилизовано на странице, а объявление – как это должно быть оформлено. Например:

 p {
color: # 000;
}

Это правило CSS. Часть селектора – это «p», которая является селектором элемента для «параграфов». Следовательно, он выберет ВСЕ абзацы на сайте и предоставит им этот стиль (если только нет абзацев, на которые нацелены более конкретные стили в других местах вашего CSS-документа).

Часть правила, которая говорит “color: # 000;” это то, что известно как объявление. Эта декларация состоит из двух частей – свойства и стоимости.

Свойство является «цветным» фрагментом этой декларации. Он определяет, какой аспект селектора будет изменен визуально.

Значение – это то, на что будет изменено выбранное свойство CSS. В нашем примере мы используем шестнадцатеричное значение # 000, которое является сокращением CSS для «черного».

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

Основы свойств CSS

Когда вы пишете свойства CSS, вы не можете просто создавать их так, как считаете нужным. Например, «цвет» является фактическим свойством CSS, поэтому вы можете использовать его. Это свойство определяет цвет текста элемента. Если вы попытаетесь использовать «text-color» или «font-color» в качестве свойств CSS, они потерпят неудачу, потому что они не являются реальными частями языка CSS.

Другим примером является свойство “background-image”. Это свойство устанавливает изображение, которое можно использовать для фона, например:

 .logo {
background-image: url (/images/company-logo.png);
}

Если вы попытаетесь использовать «background-picture» или «background-graphic» в качестве свойства, они потерпят неудачу, потому что, опять же, это не настоящие свойства CSS.

Некоторые свойства CSS

Существует ряд свойств CSS, которые вы можете использовать для стилизации сайта. Вот некоторые примеры:

  • Граница (включая стиль границы, цвет границы и ширину границы)
  • Отступы (включая отступы сверху, отступы справа, отступы снизу и отступы слева)
  • Поля (в том числе поля сверху, поля справа и снизу поля)
  • Семейство шрифтов
  • Размер шрифта
  • Фоновый цвет
  • ширина
  • Рост

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

Есть и другие свойства CSS, с которыми вы также можете столкнуться, но они могут быть не столь очевидны, как они работают, основываясь на их именах:

  • терка
  • Очистить
  • перелив
  • Текст-преобразования
  • Z-индекс

По мере углубления в веб-дизайн вы столкнетесь (и будете использовать) все эти свойства и многое другое!

Свойства нужны значения

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

В нашем первом примере со свойством «color» нам нужно использовать значение цвета. Это может быть шестнадцатеричное значение, значение RGBA или даже цветные ключевые слова. Любое из этих значений будет работать, однако, если вы используете слово «мрачный» с этим свойством, оно ничего не изменит, потому что, как бы оно ни было описательно, оно не является распознанным значением в CSS.

Наш второй пример “background-image” требует, чтобы путь к изображению использовался для извлечения фактического изображения из файлов вашего сайта. Это значение/синтаксис, который требуется.

Все свойства CSS имеют ожидаемые значения. Например:

  • Border-color ожидает значение цвета.
  • Border-size ожидает значения размера, такого как пиксели или проценты.
  • В стилях границ ожидается один из зарезервированных стилей, используемых для этого свойства, например «solid».

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

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