Пока что за свою короткую карьеру программиста я узнал достаточно, чтобы создать и запустить очень простую программу. Используя свои новые навыки работы с языками Rails, Ruby и HTML, я научился создавать простые отношения между моделями и отображать свои проекты в браузере. Как бы просто это ни звучало, потребовалось много тяжелой работы и решения проблем, чтобы добраться до этой точки. Итак, вы не можете не чувствовать себя немного разочарованным, когда наконец запустите свой проект в своем браузере только для того, чтобы столкнуться с этим эстетическим зверством:
Конечно, это работает, но блин, что за бельмо на глазу. Теперь, когда наше приложение ведет себя так, как нам хотелось бы, как нам преобразовать его из этой пресной настройки во что-то более эффектное? Ответ: CSS! CSS расшифровывается как «Каскадные таблицы стилей», и это основной язык программирования, который мы будем использовать для оформления наших HTML-документов. Давайте рассмотрим некоторые основы CSS, чтобы увидеть, как он работает, и узнать о некоторых его возможностях.
Синтаксис CSS
Прежде всего, мы рассмотрим, как работает синтаксис CSS. Мы можем назвать фрагмент кода CSS набором правил. Набор правил CSS состоит из селектора (какой элемент HTML мы хотим стилизовать) и блока объявления, который содержится в хэше. Объявление содержит свойство (ключ хэша) и значение. Свойства и значения разделяются двоеточиями, а несколько наборов объявлений разделяются точками с запятой. Вот пример:
В этом примере любые теги ‹p›(или абзаца) в нашем HTML-документе будут окрашены в синий цвет. Однако вы не ограничены использованием только HTML-элементов в качестве селекторов. Давайте взглянем на некоторые другие распространенные селекторы CSS.
Селекторы CSS
В предыдущем разделе мы узнали, как использовать селекторы элементов в CSS. Двумя другими очень распространенными селекторами CSS являются селекторы идентификаторов и селекторы классов. Давайте кратко рассмотрим примеры обоих и проработаем их.
Селекторы идентификаторов
Вы можете использовать селекторы идентификаторов для стилизации одногоуникального HTML-элемента в документе. Вы должны использовать это, когда хотите оформить что-то в своем документе уникально. То есть вы не должны видеть, что ваш селектор id используется где-либо еще в документе. Мы используем символ #, чтобы обозначить, что мы используем селектор id. Вот пример:
В этом примере мы используем селектор идентификатора под названием «pop», который увеличит наш шрифт до 60 пикселей и сделает его красным. Опять же, вы должны применять этот селектор идентификатора только к одному уникальному элементу на вашей HTML-странице.
Селекторы классов
Так что, возможно, у вас есть какой-то стиль, который вы хотите сохранить в определенных элементах вашего HTML-документа. Поскольку мы не хотим использовать селектор идентификатора более одного раза в документе HTML, мы можем использовать селекторы классов. Вы можете назначить селектор класса любому количеству HTML-элементов! Мы используем . символ для обозначения того, что мы используем селектор класса. Например:
В этом примере мы используем селектор класса под названием «центр», который будет выравнивать текст по центру страницы для любых элементов, к которым мы его применяем. Теперь, когда мы поговорили о различных типах селекторов, которые мы можем использовать в CSS, как мы на самом деле применим их к нашему HTML-документу? Есть несколько разных способов.
Добавление CSS в наш HTML
Есть три способа вставки нашего стиля в наш HTML-документ.
- Внешний CSS
- Внутренний CSS
- Встроенный CSS
Внешний
С помощью внешнего CSS мы связываем таблицу стилей CSS с нашим HTML-документом, поэтому всякий раз, когда мы хотим внести какие-либо изменения в стиль, нам нужно изменить только таблицу стилей, а НЕ HTML. Чтобы связать наш документ HTML с таблицей стилей, мы должны создать ссылку на таблицу стилей в нашем HTML. Это будет выглядеть примерно так:
Во-первых, вы могли заметить, что мы разместили эту ссылку в заголовке нашей HTML-страницы. Это обязательно! Часть кода rel="stylesheet" просто сообщает нашему HTML-документу, что мы имеем отношение к другому файлу, который является таблицей стилей. Часть кода href=""./mystyle.css” указывает, какой файл мы используем, в данном случае mystyle.css. ./ просто означает, что это относительный путь. После того, как эта ссылка настроена, вы сможете стилизовать свой HTML-документ из своего файла CSS! Это здорово, потому что нам почти никогда не приходится прикасаться к HTML-документу, чтобы стилизовать нашу программу. Чтобы применить селекторы класса илиid к элементу HTML, просто напишите его идентификатор или класс в открывающем теге выбранного HTML. Вы также можете создать элементы ‹div› в своем HTML, чтобы создать контейнеры для применения ваших стилей. на куски HTML.
Здесь мы используем селектор класса под названием «поиск», который применяется к блоку внутри ‹div›.
Хотя вы, вероятно, чаще всего будете использовать этот метод при вставке стилей в свой HTML, давайте рассмотрим другие способы, которыми мы можем это сделать.
Внутренний
Лучше всего использовать внутреннюю таблицу стилей, когда одна HTML-страница имеет уникальный стиль по сравнению со страницами. Вы реализуете его, помещая наши наборы правил CSS в элемент ‹style› в разделе заголовка HTML-документа.
В этом примере фон страницы будет льняного цвета, а каждый элемент h1 будет иметь темно-бордовый текст и поле слева размером 40 пикселей. Давайте взглянем на последний способ реализации стиля в нашем CSS.
Встроенный
Вы можете использовать встроенный стиль, чтобы применить уникальный стиль к одному элементу в HTML-документе. Это наименее гибкий из трех, и вам действительно не следует использовать этот метод, если вам это действительно не нужно. Почему? Потому что написание стилей для каждого отдельного элемента в вашем HTML чрезвычайно утомительно и сделает ваш документ намного труднее для чтения. Тем не менее, вы можете использовать его в крайнем случае, и он довольно прост в использовании. Мне говорили, что некоторые CSS-разработчики любят начинать стилизовать свой HTML с помощью встроенного кода, но затем, когда они его создают, они начинают переносить свои стили во внешнюю таблицу стилей. Мне еще предстоит попробовать этот рабочий процесс, но все, что работает для вас, круто! Пример:
Подведение итогов
В этой статье мы рассмотрели очень важные основы CSS. Надеюсь, это вдохновит вас на то, чтобы сделать ваши проекты яркими и яркими. Есть много отличных ресурсов CSS для расширения ваших навыков и знаний. Вот некоторые из них, на которые я часто ссылаюсь:
https://www.w3schools.com/css/default.asp
https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
