Аббревиатура CSS означает «каскадные таблицы стилей». CSS используется для стилизации веб-сайтов и приложений, используемых на всех устройствах. Таблица стилей обычно используется вместе с HTML и языком программирования внешнего интерфейса, например JavaScript.

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

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

Когда использовать различные методы реализации CSS

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

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

Использование встроенного примера CSS

Главный заголовок

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

Если вы собираетесь покрыть все h2 элементы на веб-странице желтого цвета. Вам нужно будет использовать CSS стиль ключевое слово вместе с цвет свойство и его значение (желтое) для каждого элемента. Однако более эффективный способ решения этой задачи - использовать внутренний CSS.

Использование внутреннего примера CSS

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

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

Использование внешнего примера CSS

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

Связанный: Что такое каскадные таблицы стилей и для чего используется CSS? Теперь, когда ваш CSS-файл связан с вашим HTML-документом, вы можете начать писать код CSS в свой CSS-файл. На данный момент единственная разница между приведенным выше внутренним примером CSS и внешним CSS заключается в том, что стиль ярлык. Следовательно, вставка следующего кода в файл CSS приведет к тому же результату, что и приведенный выше пример внутреннего CSS.

h2 {
цвет: желтый;
}

Изучение базовой структуры CSS

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

Селектор

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

Начало и конец объявления

Начало и конец объявления важны, потому что они включают в себя все предпочтения стиля, применимые к конкретному селектору. Оба элемента представлены парой открытых и закрытых фигурных скобок. Хороший способ не забыть использовать начало объявления или конец объявления - помнить, что если у вас есть открытая фигурная скобка, должна быть соответствующая закрытая фигурная скобка, и наоборот.

Недвижимость

Свойство CSS в структуре объявления может быть любым из более чем сотни различных типов свойств. Тип свойства, используемый в приведенной выше структуре CSS: цвет и это свойство предназначено для текста на веб-странице. Если вы хотите узнать больше, ознакомьтесь с нашими исчерпывающий список свойств CSS и их использования.

Разделитель свойств / значений

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

Значение

Значение свойства CSS представляет собой точный стиль, который вы хотите применить к данному свойству. Доступные для использования значения зависят от типа свойства. Например, свойство, используемое в приведенной выше структуре: цвет, что означает, что к этому свойству можно применить только один тип значения - название цвета. А цвет значение может быть представлено в одной из четырех форм: значение слова (как в примере выше), шестнадцатеричное значение, значение HSL (оттенок, насыщенность, яркость) или значение RGB (красный, зеленый, синий).

Разделитель деклараций

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

Что такое идентификаторы и классы?

идентификаторы а также классы играют фундаментальную роль в процессе стилизации CSS. Как и элементы HTML, CSS идентификаторы а также классы используются как селекторы в объявлении CSS. Тем не мение, классы а также идентификаторы имеют приоритет над элементом HTML.

Общее правило в CSS заключается в том, что последнее объявление стиля, которое вы добавляете в файл, переопределяет те, которые были там раньше. Следовательно, если есть два объявления с h2 селектора в файле CSS, объявление, которое было добавлено последним, переопределяет те, которые были там раньше.

Однако если это h2 элемент имеет я бы который используется в качестве селектора в объявлении CSS, независимо от его положения (до или после) в объявлении CSS, имеющем h2 элемент в качестве селектора, предпочтение стиля в я бы объявление всегда будет иметь приоритет перед элементом. Короче говоря, я бы переопределит другие селекторы стилей.

Важно помнить, что в объявлении CSS идентификаторы начинаются со знака числа, а занятия начинаются с точки. Наиболее существенное различие между я бы и класс это я бы уникален, в то время как класс можно дублировать. Например, набор похожих тегам можно присвоить одинаковые класс имя; Однако я бы каждого тег должен быть уникальным.

Изучение различных типов селекторов

Существует три основных типа селекторов: одиночный, множественный и вложенный. До сих пор в этой статье подробно рассматривались отдельные селекторы.

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

Пример базового HTML-шаблона

Добро пожаловать

Lorem ipsum dolor sit amet conctetur, adipisicing elit. Impedit odit сладострастные
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecto
Tempora Voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







О

Lorem ipsum dolor sit amet conctetur, adipisicing elit. Impedit odit сладострастные
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecto
Tempora Voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Заголовок

Lorem ipsum dolor sit amet conctetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, labouriosam eos aperiam asperiores? В ad Laborum illo Inventore Quos est dolores
импедит фугит аспериорес репеллентус харум максимум сладострастие сидеть нулевой еаке официис фуга аними,
perferendis in earum iure dolorum labouriosam enim reiciendis! Eum cum delectus est tenetur correpti
mollitia, minima, magni at iusto id обязательна, тибус харум ratione, ipsum doloremque deleniti ex eligendi
Импедит Ик Максим? Eius modi optio ad, nisi tempora sapiente?







Заголовок

Lorem ipsum dolor sit amet conctetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, labouriosam eos aperiam asperiores? В ad Laborum illo Inventore Quos est dolores
импедит фугит аспериорес репеллентус харум максимум сладострастие сидеть нулевой еаке официис фуга аними,
perferendis in earum iure dolorum labouriosam enim reiciendis! Eum cum delectus est tenetur correpti
mollitia, minima, magni at iusto id обязательна, тибус харум ratione, ipsum doloremque deleniti ex eligendi
Импедит Ик Максим? Eius modi optio ad, nisi tempora sapiente?

Если вы внимательно посмотрите на HTML-файл выше, вы увидите динамику, которая существует между идентификаторы а также классы. Что касается файла выше, если вы хотите применить тот же стиль к о раздел и статьи только на веб-странице, следующий код CSS выполнит это.

Пример использования нескольких селекторов

# О, .content {
цвет белый;
цвет фона: темно-синий;
}

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

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

Использование примеров вложенных селекторов

#Welcome p span {
красный цвет;
}

Вложенный селектор выше содержит я бы и два элемента HTML. Как видно из приведенного выше примера, вложенный селектор дает вам возможность выбрать определенный элемент в группе.

Следовательно, только охватывать раздел в тег div с добро пожаловать будет окрашен в красный цвет.

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

Комментарий CSS содержит две косые черты, две звездочки и раздел комментариев.

/ * Вот как вы пишете однострочный комментарий в CSS * /

/*
Вот как ты пишешь
многострочный комментарий
в CSS
*/

Что дальше?

В этой статье представлены основные компоненты CSS. Теперь вы можете использовать идентификацию:

• Любой из трех методов реализации CSS.
• Все элементы в объявлении CSS
• Три основных типа селекторов
• Комментарий CSS

Но это только начало. В CSS есть несколько фреймворков, которые помогут вам лучше понять язык. Единственная задача - решить, какой из них лучше всего подходит для вас.

Попутный ветер CSS vs. Bootstrap: что лучше?

При выборе фреймворка CSS важно найти тот, который соответствует вашим требованиям.

Читать далее

Об авторе