Изучение CSS — Полное руководство по основам каскадных таблиц стилей

Изучение CSS — Глава 1. Работа с CSS

Глава 1. Работа с CSS

Глава 2: Переход к селекторам CSS

Глава 3: Объектная модель документа

Если вы только начали свой путь изучения кода; почти неизбежно вам понадобится изучить CSS. Таблицы стилей CSS или Cascading Sstyle S используются для оформления HTML-элементов, отображаемых на вашей веб-странице. Это означает, что с помощью CSS мы можем изменить положение элемента, цвет фона, размер элемента, что происходит при наведении на него указателя мыши и т. д. В этом блоге мы рассмотрим самые основы CSS для всех новички, которые могут искать какое-то руководство, или те, кто просто хочет освежиться.

Основные правила CSS

Прежде чем мы перейдем непосредственно к самому коду, я отмечу пару правил, касающихся CSS, на которые важно обратить внимание перед началом. Во-первых, CSS — это каскадный документ. Как вы знаете, каскадировать означает лить вниз. Это означает, что документ HTML, связанный с таблицей стилей, будет читать документ CSS сверху вниз. Таким образом, если одно правило CSS создается в верхней части документа и такое же изменяется в нижней части документа, то правило, отображаемое последним, будет иметь приоритет. Например, если мы изменим цвет текста заголовка нашей веб-страницы в верхней части документа CSS на зеленый, а затем снова в документе на синий, текст на нашей веб-странице будет отображаться синим. Это, опять же, из-за каскадного стиля, в котором документ HTML читает документ CSS.

Как добавить CSS в HTML

Существует три основных способа использования CSS в HTML-документе.

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

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

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

Во-вторых, правила CSS можно применять с помощью тега ‹style› внутри тега ‹head› HTML-документа. Важно отметить, что этот тег должен быть помещен внутри элемента head по одной причине. Подобно тому, как HTML-документ обрабатывает CSS-документ, браузер будет обрабатывать HTML-документ сверху вниз. Если тег стиля размещен внизу HTML-документа; элементы документа изначально будут загружаться без стилей, так как браузер еще не получил эти инструкции. Хотя элементы могут отображаться без стилей только на долю секунды на большинстве компьютеров, это может быть дольше, если скорость загрузки на других медленнее или размер HTML-файла велик. Следовательно, тег стиля должен быть помещен в тег заголовка, чтобы документ HTML знал, какие стили отображать элементы, еще до их загрузки. Это приложение CSS будет выглядеть примерно так.

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

Наконец, мы можем добавить CSS в документ HTML, используя HTML-тег ‹link› для импорта правил CSS в документ. Я рекомендую этот метод, так как он помогает сохранить HTML-документ аккуратным и упорядоченным, а также позволяет нам создавать отдельный документ или документы для хранения всех наших правил CSS.

Тегу ссылки потребуются три атрибута, чтобы определить, где находятся правила CSS и как их использовать. Первый атрибут — это «rel», что означает отношение. Значение этого атрибута должно быть «таблица стилей», так как это цель, которую документ CSS будет использовать для документа HTML. Во-вторых, это атрибут «тип». Этот атрибут позволяет HTML-документу понять, какой тип документа является ссылкой, и его значение должно быть «text/css». Наконец, HTML-документ должен знать, где искать правила CSS, поэтому мы должны предоставить атрибут «href». Этот атрибут будет иметь значение относительного пути к файлу документа CSS. Например, если документ находится внутри папки css, это будет «css/nameofcssfile.css». Если документ CSS хранится в той же папке, что и документ HTML, значением будет «nameofcssfile.css». Важно отметить, что этот путь к файлу должен начинаться с документа HTML. Таким образом, документ точно знает, какой путь к файлу нужно использовать, чтобы найти правила CSS. Когда тег ссылки будет заполнен, он будет выглядеть примерно так.

Примечание. Тег ссылки должен быть помещен в тег заголовка по тем же причинам, которые перечислены выше во втором варианте CSS.

Теперь мы можем создать отдельный документ CSS для хранения всех наших правил с именем main.css. Синтаксис в этом документе следует рассматривать так же, как если бы он был в теге стиля, например, во втором варианте. Это должно выглядеть как в примере ниже.

Аааа, разве это не выглядит чистым и организованным!

Давайте поговорим о синтаксисе

Не углубляясь в селекторы, которые используются для выбора элементов, которые вы хотите стилизовать, я хотел бы рассказать об основном синтаксисе CSS. Как вы можете видеть выше, за селектором (красным) следует открывающая фигурная скобка и закрывающая фигурная скобка ниже. В этих фигурных скобках находятся правила CSS, которые вы хотели бы применить к выбранному элементу. Эти правила состоят из свойства CSS (светло-голубого цвета), за которым следует двоеточие и значение этого свойства. Помните, что каждый из них должен заканчиваться точкой с запятой, чтобы документ HTML, читающий документ CSS, понял, что это конец применяемого значения. Полный список доступных свойств CSS можно найти здесь. Лучше всего сделать один отступ в правилах с помощью клавиши табуляции, чтобы ваш код оставался чистым и читабельным.

В CSS можно добавлять комментарии так же, как и в HTML-документ, однако индикатор комментария отличается. В HTML-документе комментарий будет заключен в ‹! — здесь идет комментарий — ›, тогда как в CSS-документе мы открываем комментарии косой чертой и звездочкой (/*) и закрываем комментариями теми же символами в обратном порядке (*/). На практике это будет выглядеть так.

Примечание. Это могут быть как однострочные, так и многострочные комментарии.

Что дальше?

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