Визуальный стиль и макет веб-сайта определяются CSS или каскадными таблицами стилей . Это документы, которые формируют HTML-разметку веб-страницы, предоставляя веб-браузерам инструкции о том, как отображать страницы, полученные в результате этой разметки. CSS обрабатывает макет страницы, а также цвет, фоновые изображения, типографику и многое другое.
Если вы посмотрите на файл CSS, вы увидите, что, как и любой язык разметки или кодирования, эти файлы имеют определенный синтаксис. Каждая таблица стилей состоит из нескольких правил CSS. Эти правила, взятые полностью, определяют стиль сайта.
Части правила CSS
Правило CSS состоит из двух отдельных частей — селектора и объявления. Селектор определяет, что будет стилизовано на странице, а объявление определяет, как оно должно быть оформлено. Например:
p {
color: # 000;
}
Это правило CSS. Часть селектора — это р , который является селектором элемента для «абзацев». Следовательно, он выберет ВСЕ абзацы на сайте и предоставит им этот стиль (если только в вашем 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, вы обнаружите, что у каждого из них есть определенные значения, которые они будут использовать для создания стилей, для которых они предназначены.