Визуальный стиль и макет веб-сайта продиктованы CSS или каскадными таблицами стилей. Это документы, которые формируют HTML-разметку веб-страницы, предоставляя веб-браузерам инструкции о том, как отображать страницы, которые являются результатом этой разметки. CSS обрабатывает макет страницы, а также цвет, фоновые изображения, типографику и многое другое.
Если вы посмотрите на файл CSS, вы увидите, что, как и любая разметка или язык кодирования, эти файлы имеют для них определенный синтаксис. Каждая таблица стилей состоит из нескольких правил CSS. Эти правила, когда они взяты полностью, являются стилями сайта.
Части правила CSS
Правило CSS состоит из двух отдельных частей: селектора и декларации. Селектор определяет, что стилируется на странице, а декларация - как ее следует стилизовать. Например:
п { цвет: # 000;} Это правило CSS. Селекторная часть - это «p», которая является селектором элементов для «абзацев». Поэтому он должен выбрать ВСЕ абзацы на сайте и предоставить им этот стиль (если только не указаны параграфы, которые нацелены на более конкретные стили в другом месте вашего документа CSS). Часть правила, в котором говорится «color: # 000;» это то, что известно как декларация. Эта декларация состоит из двух частей - свойства и ценности. Свойство - это «цветная» часть этой декларации. Он определяет, какой аспект селектора будет изменен визуально. Значение - это то, на что будет изменено выбранное свойство CSS. В нашем примере мы используем шестнадцатеричное значение # 000, которое является сокращением CSS для «черного». Таким образом, используя это правило CSS, наша страница будет иметь абзацы, отображаемые шрифтом черного цвета. Когда вы пишете свойства CSS, вы не можете просто создавать их по своему усмотрению. Для экземпляров «цвет» является фактическим свойством CSS, поэтому вы можете его использовать. Это свойство определяет цвет текста элемента. Если вы попытались использовать «text-color» или «font-color» в качестве свойств CSS, они потерпят неудачу, потому что они не являются фактическими частями языка CSS. Другим примером является свойство «background-image». Это свойство задает изображение, которое можно использовать для фона, например: .logo { background-image: url (/images/company-logo.png);} Если вы попытались использовать «фоновое изображение» или «фоновая графика» в качестве свойства, они потерпят неудачу, так как еще раз это не фактические свойства CSS. Существует несколько свойств CSS, которые можно использовать для создания стиля сайта. Вот некоторые примеры: Эти свойства CSS являются отличными для использования в качестве примеров, потому что все они очень просты, и даже если вы не знаете CSS, вы, вероятно, можете угадать, что они делают, основываясь на их именах. Есть и другие свойства CSS, с которыми вы столкнетесь, что может быть не столь очевидным, как они работают на основе их имен: По мере углубления веб-дизайна вы будете сталкиваться (и использовать) все эти свойства и многое другое! Каждый раз, когда вы используете свойство, вы должны дать ему значение - и некоторые свойства могут принимать только определенные значения. В нашем первом примере свойства «color» нам нужно использовать значение цвета. Это может быть шестнадцатеричное значение, значение RGBA или даже ключевые слова цвета. Любое из этих значений будет работать, однако, если вы использовали слово «мрачный» с этим свойством, оно ничего не сделало бы, потому что, как это ни описательно, как это слово, оно не является признанным значением в CSS. Наш второй пример «background-image» требует, чтобы путь изображения использовался для получения фактического изображения из файлов вашего сайта. Это значение / синтаксис, который требуется. Все свойства CSS имеют значения, которые они ожидают. Например: Если вы просмотрите список свойств CSS, вы обнаружите, что каждый из них имеет определенные значения, которые они будут использовать для создания стилей, для которых они предназначены. Под редакцией Джереми Жирара Основы CSS
Некоторые свойства CSS
Свойства Необходимые значения
